“Css. Tre boxar, angivet i % och pixlar??”

Hej

har fölkjande rader:

<div class="topbox"></div>
<div class="middlebox"></div>
<div class="bottombox"></div>

Nu vill jag att "middlebox" ska vara 400px hög och topbox och bottombox ska vara 50% var av återstående höjd.. Går det göra??

Mvh

html { height:100%; }
body { display:table; width:100%; height:100%; margin:0; }
.topbox, .bottombox { display:table-row; height:50%; }
.middlebox { display:table-row; height:400px; }

Snyggt, zcorpan! Hur fungerar den lösningen i olika läsare? :)

r\ Opera fungerar fint. Safari ofint.

fick inte det att fungera?

topbox blir ca 50% av hela sidan.. samt bottombox blir 50%, sen blir ju middlebox 400px. alltså måste man scolla sidan... Jag kanske gjort fel eller??

Nej då, mer troligt är att du testar i en webbläsare som saknar stöd för display:table och dess vänner. En vild gissning är IE. :)

Hur ser det ut i Safari? Är det den senaste?

zcorpan skrev:

Hur ser det ut i Safari? Är det den senaste?

silfver skrev:

Opera fungerar fint. Safari ofint.

Japp, senaste versionen.

Jag menade att jag ville ha lite mer utförlig beskrivning (eller skärmdump) än "ofint"... ;)

zcorpan skrev:

Jag menade att jag ville ha lite mer utförlig beskrivning (eller skärmdump) än "ofint"... ;)

Jaha... ;)

Hmmm... liten modifiering:

html { height:100%; }
body { display:table; width:100%; height:100%; margin:0; }
.topbox, .bottombox { display:table-row; [b]/* height:50%; */[/b] }
.middlebox { display:table-row; height:400px; }

Det såg tydligen likadant ut i Firefox som i Safari. Lat som jag är testade jag inte ens i Firefox först... :r

a visst va bra det fungerade i firefox... Men hur ska jag komma runt så att det funkar iallafall i IE 6??

/* height:50%; */

bara kommentar eller? Hur funkar display då?

Sen provade jag följande rader. Men detta fungerar bara på IE 6 och inte Firefox?

border-top-color: Black;
border-top-style: solid;
border-top-width: 1px;

Bra jobbat annars!
Mvh

Ja det går ju inte få perfekt. Men någorlunda nära kanske:

/* egenskaper med ! framför sig är för ie */
html { height:100%; }
body { display:table; width:100%; height:100%; !min-height:440px; margin:0; position:relative; background:lime;  }
.topbox { display:table-row; }
.bottombox { display:table-row; !position:absolute; !bottom:0; !width:100%; }
.middlebox { display:table-row; height:400px; background:yellow; !position:absolute; !top:50%; !margin-top:-200px; !width:100%; }

Vill du ha borders får du ange border-collapse:collapse på body.

Fan zcorpan..

Du va rätt jävlig ju.

Men vad gör border-collapse ?? sen det här display ihop med table, va e det för historia och att du i body classen anger relative ??

Det funkar ju!!

eddy1 skrev:

Fan zcorpan..

Du va rätt jävlig ju.

Tack. :)

eddy1 skrev:

Men vad gör border-collapse ??

Det finns två bordermodeller för tabeller i CSS 2.1. "separate" och "collapsed". "separate" är default och med den kan man inte ha border på tabellrader utan bara på celler och hela tabellen.

eddy1 skrev:

sen det här display ihop med table, va e det för historia

Hmm... Jag förstår inte frågan. :)

eddy1 skrev:

och att du i body classen anger relative ??

Det är för att body ska vara ett containing block för absolut positionerade element. Det är bara för IE, så du kan sätta ett ! före om du vill, men å andra sidan gör det ingen skada om andra webbläsare får det heller.