Hvordan putte bilder inn i div ...

[Nicklas]

Hei !

 

Kan noen fortelle meg hvordan man lager design til en side ved hjelp av at man lager design bildene i PS og putter de inn i rammer .. div bokser ? F.eks at jeg skal ha ett bilde som skal gå som en strek over toppen av boksen ... liksom en Sånn en

 

[pgdx]

<div id="meny">
<div class="meny_top">
</div>
<div class="meny_middle">
HEr kommer menyen
</div>
<div class="meny_bottom">
</div>
</div>

#meny {
n00bity: pekka;
}
#meny_top {
width: 100%;
height: 10px;
background-image: url('top.png');
}
#meny_middle {
width: 100%;
background-image: url('middle.png'); /* Vanligvis 1 px høyt bilde */
background-repeat: repeat-y;
}
#meny_bottom{
width: 100%;
height: 10px;
background-image: url('bottom.png');
}

Hvis det er noe gale, så er det ikke min feil.

[Nicklas]

Takk for svar ... men kan du forklare hver enkelt tag ? For jeg skjønner ikke noe

 

edit: Hva er forskjellen på "id" og "class" ?

Endret 10. juni 2004 av Nicklas

[jorgis]

id er for et unikt element. Kan kun brukes en gang i dokumentet.

 

class er en klasse som kan tilordnes flere elementer. Eks: blaa, som farger teksten blå, kan være nyttig flere steder.

[pgdx]

id er for et unikt element. Kan kun brukes en gang i dokumentet.

Ja. Mitt bruk av class er egentlig litt tullete, og du kan se at jeg har byttet # med . i css-filen.

 

Det er selvsagt feil.

 

Så bare bruk id i det eksempelet mitt.

[Nicklas]

Hva er :

 

#meny {

n00bity: pekka;

}

 

til ?

[pgdx]

Hva er :

 

#meny {

n00bity: pekka;

}

 

til ?

Bytt ut n00bity: pekka; med alle greiene dine.

 

Det var bare fylltekst!

[Nicklas]

Okai, men hva med:

 

background-image: url('middle.png'); /* Vanligvis 1 px høyt bilde */

 

?

 

1 px høyt bilde ? Hvordan kan det bli ? Lager den automatisk flere hundre slike striper nedover da ?

[pgdx]

1 px høyt bilde ? Hvordan kan det bli ? Lager den automatisk flere hundre slike striper nedover da ?

Ja, akkurat. For eksempel en kant. Hvis du har et bilde som er en px høyt og som ser slik ut:

|_______________________________________|

 

(de understrekene er ingenting, de to på siden er en px), så vil det bli som to streker nedover...