HTML & CSSur HTML, XHTML & CSS
11 svar · 455 visningar · startad av Skarre
Jag vet inte om jag missar det uppenbara, men jag kommer inte på någon bra lösning på detta. Jag försöker bygga en enkel design ungefär enligt bifogad bild. Sidan är indelad i två (eventuellt fler) centrerade divar, men haken är att den nedersta diven ska sträcka sig ner till botten av sidan oavsett om innehållet kvräver detta. Jag vore otroligt tacksam om någon kunde göra ett försök. Några rader kod, eller bara ett tips. Allt är välkommet!
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title>foo</title>
<style type="text/css">
* { margin: 0; padding: 0; }
html, body, #foo { height:100%; }
body {
display: table;
width: 80%;
margin: 0 auto;
background: silver;
color: black;
}
#foo { display:table-cell; background: white; }
h1 { border-bottom: .5em solid silver; }
</style>
<div id="foo">
<h1>foo</h1>
<p>test</p>
</div>
:)
Tack för den zcorpan! Enligt quirksmode.org har "display:table" faktiskt bättre stöd än jag trodde.
Supported by Opera 5, Konqueror, Safari and Mozilla. Explorer 5 on Mac is buggy.
Dock hävdar de att det inte stöds av IE på Windows, men på min IE6/Win verkar det fungera.
Skarre skrev:
Dock hävdar de att det inte stöds av IE på Windows, men på min IE6/Win verkar det fungera.
Se där ja. Det funkade ju fint.
Jag har experimenterat lite med en sida nu, men jag har problem med två saker. Jag vill gärna ha en ram runt varje "box" och även ett mellanrum i botten. Några idéer?
Så här ser det ut:
http://member.webforum.nu/1826/stretch.htm
Och det här är ungefär önskat resultat:
http://member.webforum.nu/1826/stretch.gif
Faktum är att IE <del>tolkar display:table som display:block</del> <ins>ignorerar display:table</ins>, och dessutom tolkar den height som min-height, varför det "funkar"... :D
Äh, det mest uppenbara är ju att göra såhär:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title>test</title>
<style type="text/css">
* { margin: 0; padding: 0; }
html { background: silver; }
html, body, .table { height:100%; }
.table { display: table; border-collapse: separate; border-spacing: 10px; width: 60%; margin: 0 auto; }
.tr { display: table-row; }
.td { display: table-cell; vertical-align: top; border: 5px solid gray; background: white; }
#a, #b { height: 50px; }
</style>
<div class="table">
<div class="tr"><div class="td" id="a"><h1>test</h1></div></div>
<div class="tr"><div class="td" id="b"><h2>yay</h2></div></div>
<div class="tr"><div class="td" id="c"><p>...text...</p></div></div>
</div>
Någon workaround för IE har jag dock inte... Det skulle väl vara en HTML-tabell, eller på annat sätt positionera blocken...
Varför det är nödvändigt att krångla till det såhär beror väl på att man vill ha semantisk korrekt HTML, och eftersom DIV är semantiskt neutal kan man använda det för att kunna presentera dokumentet som man vill med CSS... Använder man en "riktig" HTML-tabell har man förstört semantiken i dokumentet en aning. :P
I det är fallet är semantiken inte speciellt viktig eftersom designen är till ett forum (vBulletin) vars kod ändå kommer att sopa bort alla spår av semantik. ;)
Men använd en tabell då! :D
Nu tänkte jag försöka ta tag i detta igen, men det går inge vidare. Om någon xhtml/css-mästare kunde kolla en sekund på koden och berätta vad jag gör för fel så vore jag väldigt tacksam. Det önskade resultatet är som jag nämnt tidigare (så här + ramar). Det funkar som vanligt i Firefox, men IE vill inte lira. Det funkar i IE om jag kör quirks mode, men det känns lite "B". Tack på förhand!
Skarre skrev:
Det funkar i IE om jag kör quirks mode, men det känns lite "B".
Lev med det - MSIE är sån när det handlar om tabellcellshöjder :P