10 svar · 911 visningar · startad av nicclas
Jag har en del av en sidstruktur som jag skapat med en massa DIVs och (inline-) CSS. Det ska vara fyra "block" på rad horizontellt, och två mindre block, ett till höger och ett till vänster, på en rad längre ner, typ. Sidan har denna HTML-kod:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/2002/REC-xhtml1-20020801/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>tom</title>
<style type="text/css">
BODY {
margin: 0 auto;
padding: 0px 0px 0px 0px;
text-align: center;
min-width: 790px;
}
BODY, P, DIV {
font-family: Verdana, sans-serif;
font-size: 11px;
color: black;
}
</style>
</head>
<body>
<div style="width: 100%; padding: 0px 0px 0px 0px; text-align: left; background-color: #ff0000;">
<div style="float: left; width: 100%; background-color: #00ff00;">
<div style="float: left; width: 25%; padding: 0px 0px 0px 0px; background-color: #e0e0e0;">
<div>
Text1
</div>
<div>
Text2
</div>
<div>
Beskrivning
</div>
<div>
Lite text
</div>
</div>
<div style="float: left; width: 25%; padding: 0px 0px 0px 0px; background-color: #c0c0c0;">
<div>
Text1
</div>
<div>
Text2
</div>
<div>
Beskrivning
</div>
<div>
Lite text
</div>
</div>
<div style="float: left; width: 25%; padding: 0px 0px 0px 0px; background-color: #e0e0e0;">
<div>
Text1
</div>
<div>
Text2
</div>
<div>
Beskrivning
</div>
<div>
Lite text
</div>
</div>
<div style="float: left; width: 25%; padding: 0px 0px 0px 0px; background-color: #c0c0c0;">
<div>
Text1
</div>
<div>
Text2
</div>
<div>
Beskrivning
</div>
<div>
Lite text
</div>
</div>
</div>
<div style="float: left; width: 100%;">
<div style="float: left; width: 40%; background-color: #c0d000; padding: 0px 0px 0px 0px;">
En lang text har...
</div>
<div style="float: right; width: 40%; background-color: #d0c000; padding: 0px 0px 0px 0px;">
En lang text har ocksa...
</div>
</div>
</div>
</body>
</html>
Mitt problem är att resultatet inte blir riktigt lika beroende på om jag använder IE7 eller Firefox. I IE7 så dyker den röda bakgrunden upp i den nedre delen av layouten, men det gör den inte i Firefox (eller Opera eller Safari). Problemet verkar ligga i hur browsern uppfattar "nästlingen" av DIV-taggarna.
Du kan se layouten på http://www.nyhetsfilter.se/t.php
Finns här någon som kan ge tips på hur kan jag justera upplägget så att det fungerar som i IE7 även i andra webbläsare?
Varför så många div:ar? Vill du verkligen ha det så kan du lägga till
<br style="clear:both" />
innan den sista </div> i din kod, men ska layouten vara procentuell och täcka totalt 100% kan du ju rensa bort några divs, samt rensa lite i koden. T.ex. behöver du inte ange padding: 0px 0px 0px 0px; du kan skriva padding: 0; eller skippa den helt och hållet när det gäller en div för den har ingen förinställd padding.
Ah, ok. Jag lade till raden du tipsade om och nu syns den röda rutan även i Firefox! Tack.
Angående att koden inte är så fin så beror det på att jag, när sidan är klar, vill ha padding:s och annat, så jag har dem mest där för att det ska gå enkelt att bygga vidare....
Angående problemet att få de fyra boxar som ligger horizontellt att verkligen fylla ut 100% så verkar det som om detta inte funkar perfekt. I koden ovan har jag 25% på de 4 boxarna, men i IE7 tar de upp 2 rader vid vissa bredder på browsern (det hoppar lite fram och tillbaka när man ändrar bredden på browser-fönstret). Nu har jag justerat en av boxarna till width: 24%, men då blir det lite "glapp" längst till höger om man har ett brett browser-fönster.
Finns det någon bättre lösning för att få de fyra boxarna att fylla till 100%?
Jag tror du trasslat till det för mkt. Jag gjorde en snabb justering
* {
margin: 0;
padding: 0;
}
.block1, .block2, .block3, .block4 {
float: left;
width: 25%;
}
.block {
clear: both;
width: 100%;
}
.block5 {
float: left;
width: 40%;
}
.block6 {
float: right;
width: 40%;
}
samt minskade ner antalet div:ar i koden
<div class="block1" style="background: #CCC;">
Text 1
</div>
<div class="block2" style="background: #456;">
Text 2
</div>
<div class="block3" style="background: #CCC;">
Text 3
</div>
<div class="block4" style="background: #456;">
Text 4
</div>
<div class="block">
<div class="block5" style="background: #CCC;">
En lang text har...
</div>
<div class="block6" style="background: #456;">
En lang text har ocksa...
</div>
</div>
Givetvis kan du justera bakgrunderna i headern istället, lade bara till det som inline för att det gick fortare :)
Kan ju även påpeka att det kan bli klurigt om du har blocken i procent och paddingen i pixlar eftersom det kommer bli olika justering vid olika skärmupplösningar.
Ok, tack! Jag kommer vissarligen att vilja va "massvis med DIVs" då det kommer till en massa innehåll, men jag prova ditt exempel. Det finns nu på http://www.nyhetsfilter.se/t2.php
Denna version har tyvärr samma problem som det tidigare, dvs. i IE7 så hamnar de fyra boxarna vid vissa browser-bredder på två rader. Det är inte så bra. Alternativet att sätta en av boxarna till 24% känns inte heller perfekt.
Finns det någon lösning på det också?
Kan ju även påpeka att det kan bli klurigt om du har blocken i procent och paddingen i pixlar eftersom det kommer bli olika justering vid olika skärmupplösningar.
Hmm, jasså, aj då. När jag använder TABLE så fungerar ju 25% och padding/spacing fint (om jag inte minns fel). Fungerar det annorlunda med DIVs? Synd... Kanske får jag gå tillbaka till TABLEs ialla fall då...
ejick skrev:
Kan ju även påpeka att det kan bli klurigt om du har blocken i procent och paddingen i pixlar eftersom det kommer bli olika justering vid olika skärmupplösningar.
Hmm, jag provde att lägga till padding och ytterligare en DIV(!) och det fungerar ju bra (typ som för TABLEs alltså). Men många DIVs blir det ;-)
Jag lade den på http://www.nyhetsfilter.se/t4.php om du vill se.
Problemet med att det inte blir perfekt i IE7 med 4x25% vid vissa browser-bredder har jag dock inte lyckats lösa så... någon?
För mig blir 25% x 4 100% och det funkar bra i IE7. Hur kontrollerar du detta?
Jo, jag tittar på sidan i IE7 och ändrar/drar i förstret för att justera storleken. Boxen längst till höger hamnar ibland på en "egen rad" under.
4 x 25 = 100 det kan jag också ;-)
Det blir likadant i IE6 (annan dator). Det gäller denna version alltså: http://www.nyhetsfilter.se/t2.php
Det har att göra med sättet IE (Över huvudtaget eftersom du kommer stöta på samma problem i alla IE) renderar div-ar och % på separata element. Det blir en automatisk margin kring dom som inte riktigt sätts till 0 vid skalning, vid händelsen, därför blir ~24% det som används för att ett rutnät. Om du däremot ska presentera data ska du faktiskt använda tabeller för det. Men använda div för layout...
