Div över annan div

Hur skriver jag i CSS-koden för att få en div's bakgrund att komma över en annan div's bakgrund. Exempel:

<div id="under"> 
Bakgrundsbilden i denna div ska ligga under. 
</div>

<div id="over"> 
Bakgrundsbilden i denna div ska ligga över. 
</div>

Går det? Hur ser i så fall CSS-koden ut till dessa ID'n?

Tack!

<style type="text/css">
#under,#over{position: absolute; 
left: 10px; /* Storlek och plats väljer du själv */
top: 10px;
width: 100px; 
height: 100px;}

#under{z-index: 1;
background-image: url('under.gif');}

#over{z-index: 2;
background-image: url('over.gif');}

</style>

"position: absolute" sabbar övrig layout (det är många lager med i leken). Jag lyckades dock lösa det genom att ställa in margin och width.

Passar på att fråga en annan sak som har med CSS att göra. Hur gör jag för att centrera en text vertikalt i en div. Ett enkelt exempel skulle göra mig enormt tacksam! Tack

Om du bara har en rad så kan du justera line-height. Om du har flera rader blir det knepigare, men teoretiskt sett kan du göra om DIVen till en tabellcell (display:table-cell) vilket gör att vertical-align har effekt. Synd bara att IE saknar stöd för display:table och dess vänner. :l

ok, i detta fall är det bara en rad så det är "lungt"... Hur pass "säkert" är det att använda line-heigt? Jag menar skulle texten av ngn anledning bli större i ngns webbläsare så ser det ju galet ut. Vilket sätt är "säkrast" att definiera en textstorlek (0,9em eller...) och typsnitt (flera stycken eller..), så det blir lika för "alla"? Förklara gärna lite för den som inte förstår ;)

Du kan aldrig få det att bli lika för "alla". Till exempel kan jag inaktivera stilmallen helt och hållet, eller surfa med Lynx som inte har stöd för CSS över huvud taget. Jag kan också ändra textstorlek i webbläsaren eller använda mobilen som bara har ett teckensnitt installerat... ;)

Hur som helst så tror jag att line-height är en ganska säker metod; men det finns förstås alternativ, som till exempel padding-top... :)

Exempel:

<style type="text/css">
 p { border:solid; font:90%/3 "Arial", sans-serif; }
</style>
<p>Lorem ipsum dolor sit amet.</p>

<style type="text/css">
 p { border:solid; font:90%/1 "Arial", sans-serif; height:2em; padding-top:1em; }
</style>
<p>Lorem ipsum dolor sit amet.</p>

Ok, tack. Men vilket sätt är att rekomendera när man definierar font-size, är det 0,9em, 11px eller som ovan: 90%/3 (vad menas med detta?).

En fråga till, ska man och varför ange 2-4 olika fonter?

Okej, en fråga till då, hur tar jag bort borders på alla bilder (även de som ligger inom "a href") genom CSS-kodning?

learn skrev:

Ok, tack. Men vilket sätt är att rekomendera när man definierar font-size, är det 0,9em, 11px eller som ovan: 90%/3 (vad menas med detta?).

Jag skulle inte rekommendera px för font-size, eftersom man inte kan ändra textstorleken i IE. em och % är bra, och 90% är samma sak som 0.9em. Om man använder em för font-size bör man ange font-size i % för till exempel body (eller om du har en "wrapper div" så kan man använda den) för att förhindra en annan bugg i IE, nämligen att textstorleken ändras för mycket när man ändrar textstorleken i IE.

font:90%/3 "Arial", sans-serif;

...är samma sak som:

font-size:90%; line-height:3; font-family:"Arial", sans-serif;

learn skrev:

En fråga till, ska man och varför ange 2-4 olika fonter?

Om användaren inte har "Arial" installerat så används nästa teckensnitt i listan, i det här fallet den generiska sans-serif. Jag vet inte riktigt vilka fonter som finns förinstallerade på olika operativsystem, eller hur andra teckensnitt ser ut, så jag har inte inkluderat andra teckensnitt än Arial i exemplet ovan.

learn skrev:

Okej, en fråga till då, hur tar jag bort borders på alla bilder (även de som ligger inom "a href") genom CSS-kodning?

a img { border:none; }

:)

Tackar så mycket för ditt utförliga svar! :birp