position inom css-frames

7 svar · 1 742 visningar · startad av kylberg 18 jan. 2011

kylbergMedlem sedan nov. 200796 inlägg

Frågan18 jan. 2011 14:20#1

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 2004485 inlägg

18 jan. 2011 14:54#2

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 2003771 inlägg

18 jan. 2011 15:17#3

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. 20068 090 inlägg

18 jan. 2011 15:39#4

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 20019 519 inlägg

18 jan. 2011 16:24#5

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 2004485 inlägg

18 jan. 2011 16:48#6

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. 20068 090 inlägg

18 jan. 2011 19:04#7

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. 2003296 inlägg

19 jan. 2011 07:22#8

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.