Plassering av bilde og kommentar på kode

J_lle · 13. oktober 2005

Jeg har nylig smakt på CSS.. Nydelige greier, men jeg får noen problemer til tider og skjønner ikke helt hva greia er..

Nå skal jeg sette firefox logoen nederst på index siden, men samme hva så legger den seg ikke nederst..

Jeg ser mange sider som bruker feks margin:0 auto; til å sentrere bildet og sette det øverst så jeg har prøvd margin: 90% auto; men da ble bildet satt så langt nede at jeg måtte scrolle, noe jeg helst vil unngå..

Kan noen også si meg når man burde bruke class/id?

Kom gjerne med kommentarer til dårlig/god kode

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>

<!-- ... -->

   <link rel="stylesheet" type="text/css" href="site_files/css/style.css" media="all" />
   <title> Welcome to j-lle.com! </title>


</head>

<body class="index"> 

   <div id="intro">
       <a href="site_files/html/main.html"><img src="site_files/graph/banner.png" border="0" longdesc="site_files/html/main.html"></a>
   </div>

   <div id="ad_ff">
   </div>

</body>

</html>

/* Cascading Style Sheet */

html {
   min-width:768px;
}

/* Body styles */

/* ... */

body.index {
   margin-top:10%;
   background-color:#000000;
   line-height:1.3em;
   text-align:center;
   font-size:16px;
   padding:0;
}
/* Pictures & Graphical Styles */

/* ... */

#intro {
   width:500px;
   height:200px;
   background:url(../graph/intro.png) center no-repeat;
   margin:0 auto;
}

#ad_ff {
   width:60px;
   height:60px;
   background:url(../graph/firefox.png) bottom no-repeat;
   margin:90% auto;
   background-position:bottom;
   position:static;
}

EDIT: bad topic

Endret 13. oktober 2005 av J_lle

mikk- · 13. oktober 2005

Jeg vet ikke helt hva du prøver å oppnå med margin: 90% auto;, men det sier iallfall browseren at bildet skal plasseres 90% av "synsfeltet" fra toppen, og ha like lang avstand til hver av sidene.

Class og ID bruker man når man skal stilsette noe som man ikke kan oppnå ved å bare stilsette HTML-tagger. Jeg regner med at du allerede har skjønt det, siden du bruker en ID i din egen kode.

Forskjellen på class og ID ligger egentlig i navnene. Du går kanskje på skolen, i en classe? I klassen din er det vel helst mange elever? Elevene i klassen din er sannsynligvis ganske forskjellige, men de kan likevel grupperes som en klasse.

Skolebeviset ditt, derimot, er en ID. Det er bare du som har denne ID'en. Den er unik, og det er ingen tvil om hvem den gjelder. Det skal ikke finnes to av den samme ID'en. Da har administrasjonen gjort en stygg feil.

Kanskje ikke verdens beste eksempel, men jeg håper du skjønner tegninga.

Eksempel fra webdesignvirkeligheten: Nå for litt siden laget jeg en egen klasse til feilmeldinger på et script jeg holder på med (span.feilmeldinger). Det gir alle feilmeldinger samme utseende. Det finnes mange forskjellige feilmeldinger, men de vil se like ut.

Jeg lagde også en ID for headeren, #header. Headeren eksisterer bare én gang på hver side, og skal aldri gjentas. Den er unik.

J_lle · 14. oktober 2005

Da har administrasjonen gjort en stygg feil.

Flott eksempel !

Men jeg forstår enda ikke hvorfor jeg måtte scrolle ned når jeg brukte margin:90% auto;.. Hvordan skal jeg plassere bildet nederst på siden (så man ikke kan scrolle nedover) ?

Endret 14. oktober 2005 av J_lle

Logg inn

Plassering av bilde og kommentar på kode

Anbefalte innlegg

J_lle

Lenke til kommentar

Videoannonse

mikk-

Lenke til kommentar

J_lle

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer