kylbergMedlem sedan nov. 200799 inlägg
Jag har en sida med css-frames. Jag har försökt lite olika sätt att positionera divar inom divarna som utgör själva ramverket. Men det fungerar lite olika i olika browsers, och ibland måste man krångla till det en hel del för att det ska fungera. Dessutom använder jag ett CMS system vilket gör det ännu krångligare att bygga en hållbar grund som inte skadas av för mycket ändringar av min kund.
Ta en titt på koden nedan och titta på http://tandlakarna.ax för att se en tidigare sajt jag byggt med samma grundstruktur. Vilket sätt är bäst för att positionera divar med varierande mängd innehåll utan att strukturen spricker när det görs ändringar? Vilket position-värde bör jag använda i css:en?
skulle vara tacksam för några idéer!
html:
<body>
<div id="headerwrap">
<div id="header">
</div>
</div>
<div id="middlewrap">
<div id="middle">
</div>
</div>
<div id="footerwrap">
<div id="footer">
</div>
</div>
</body>
css:
div#headerwrap {
position:absolute;
width:100%;
top:0;
left:0;
height:303px;
}
div#header {
height:303px;
width:800px;
margin:0 auto;
}
div#middlewrap {
padding:303px 0 0 0;
margin-left:0;
voice-family: "\"}\"";
voice-family:inherit;
margin-left:16px;
padding-bottom:50px;
}
body>div#middlewrap {
margin-left:0;
}
div#middle {
width:800px;
margin:0 auto;
}
div#footerwrap {
width:100%;
position:absolute;
bottom:0;
left:0;
height:60px;
}
body>div#footerwrap {
position:fixed;
background-image:url(Images/bg.jpg);
background-position:center;
background-repeat:repeat-y;
}
div#footer {
height:60px;
width:800px;
margin:0 auto;
padding:10px;
text-align:center;
}
aronMedlem sedan mars 2004487 inlägg
1. Använd inte ordet frames om du inte menar HTML-frames.
2. Du behöver en CSS kurs, men kolla på http://htmldog.com/reference/cssproperties/position/
Jag brukar undvika absolute och fixed eftersom dom inte följer flödet.
bossseMedlem sedan juni 2003718 inlägg
På http://tandlakarna.ax kan man läsa följande:
Vi har öppet alla vardagar under helgerna.
Klurigt värre! :OO
Danne VMedlem sedan aug. 20067 685 inlägg
Som Aron skriver: använd inte ordet "frames". Det är inte css. Kalla det "divvar" eller "containers". Då förstår man vad du menar.
Som Aron också skriver: undvik att positionera divvarna så långt det går. Det ställer ofta till trassel om man inte riktigt fått kläm på css.
Jag tycker att du krånglat till en väldigt enkel struktur. Föreslår att du helt enkelt börjar så här:
<body>
<div id="wrapper">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body>
#wrapper {
width:800px;
margin:0 auto;
}
voigtann1Medlem sedan juni 20018 810 inlägg
sen bör du undvika > i CSS selectorer, det är skit bra att ha, men dåligt stöd i webbläsare, och eftersom du jobbar mot id:n direkt så kör på det istället för att försöka skriva exakt var dom är. IDn är unika.
aronMedlem sedan mars 2004487 inlägg
voigtann1 skrev:
sen bör du undvika > i CSS selectorer, det är skit bra att ha, men dåligt stöd i webbläsare, och eftersom du jobbar mot id:n direkt så kör på det istället för att försöka skriva exakt var dom är. IDn är unika.
Exakt ersätt t.ex.
body>div#middlewrap {
margin-left:0;
}
med:
#middlewrap {
margin-left:0;
}
Danne VMedlem sedan aug. 20067 685 inlägg
Och när vi ändå är igång ;)
Kolla valideringen på tandlakarna.ax :
http://validator.w3.org/check?uri=http%3A%2F%2Ftandlakarna.ax%2F&charset=(detect+automatically)&doctype=Inline&ss=1&group=0&verbose=1&st=1&user-agent=W3C_Validator%2F1.1
Skrolla gärna ner till den fixade källkoden som Tidy HTML skapat med din kod som utgångspunkt och testa om den funkar i praktiken.
jawbreakerMedlem sedan jan. 2003294 inlägg
voigtann1 skrev:
sen bör du undvika > i CSS selectorer, det är skit bra att ha, men dåligt stöd i webbläsare
Det är väl bara IE6 som har problem med detta av de webbläsare som används nuförtiden? Om man nu tycker att IE6 är en webbläsare att ta hänsyn till :)
Men visst, jag håller med dig om att man inte ska trixa med css:en i onödan och istället använda id:n etc när det går.
