meny och content ska vara lika höga

Hejsan!
jag använder en mall som ser ut såhär:

<div id="header">
/* logo */
</div>
<div id="wrap">
     <div id="meny">
     /* min vertikala  meny här */
     </div>
     <div id="content">
     /* informationen */
     </div>
</div>
<div id="bottom">
/* copyright med mera */
</div>

I min css fil har jag skrivit följande:

body {
margin:0 auto;
width: 1000px;
height:100%;
padding: 0;
background-color: #f1f1f1;
}

#header {
text-align:center;
float: none;
width: 100%;
height: 150px;
background-color:red;
}

#wrap {
float:none;
width:100%;
}

#meny {
float:left;
font-size:14px;
width:20%;
background-color:blue;
}

#content {
float:left;
font-size:12px;
width:80%;
background-color:yellow;
padding-bottom: 100px;
}

#bottom {
vertical-align:bottom;
width:100%;
text-align:center;
float:right;
background-color:green;
}

Det jag vill är att både meny och content ska strecka sig enda ned till bottom? För just nu så finns det ett stort vit mellanrum mellan meny och bottom. Detta vill jag ska försvinna. Förstår ni inte vad jag menar så är det bara att säga till, så kommer jag med en noggrannare förklaring :)

Tack på förhand!

Det där är ännu en grej som W3C inte tycker att man ska kunna göra. Så antingen får du använda tabeller, vilket går alldeles utmärkt (det validerar osv) även om somliga tycker att det skulle vara "fel". Eller så får du använda ett javascript.

T.ex. har projectseven ett bra, enkelt script: http://www.projectseven.com/tutorials/css/pvii_columns/index.htm

http://www.fu2k.org/alex/css/onetruelayout/example/interactive?order=2-1&width=25-75&equal_height=1&snap=1&op8_fix=1&longest=1&time=1130330054918

colione skrev:

http://www.fu2k.org/alex/css/onetruelayout/example/interactive?order=2-1&width=25-75&equal_height=1&snap=1&op8_fix=1&longest=1&time=1130330054918

Uuurk... x(

Har du provat det där på nån verklig sajt under "fältmässiga" förhållanden och sett hur det blir i olika läsare? :)

Jag fick uppfattningen att det där snarare var ett försök att "push the envelope" och se vad som går att göra, än att vara ett seriöst förslag som är tänkt att använda i praktiken. Eller?

Nej, jag ville bara visa ytterliggare en teknik men som baserade sig på css. Och då valde jag negativ margin istället för faux columns.

I ditt fall skulle jag lura ögat att tro att de var lika långa genom att ändra

#wrap {
float:none;
width:100%;
}
#meny {
float:left;
font-size:14px;
width:20%;
background-color:blue;
}

Till

#wrap {
float:left;
width:100%;
background-color:blue;
}
#meny {
float:left;
font-size:14px;
width:20%;
}

Danne V skrev:

Det där är ännu en grej som W3C inte tycker att man ska kunna göra. Så antingen får du använda tabeller, vilket går alldeles utmärkt (det validerar osv) även om somliga tycker att det skulle vara "fel".

På vilket sätt ligger felet på w3s sida? Eftersom du i var och varannan tråd påstår att w3 är problemet tycker jag att du kunde utveckla det litegranna.

En tabellbaserad lösning må fungera men det är långt ifrån en "utmärkt" lösning. Att saker och ting validerar betyder inte särskilt mycket.

tanten skrev:

I ditt fall skulle jag lura ögat att tro att de var lika långa genom att ändra

Fiffigt.

...många tvingas också lura ögat genom att lägga in divvarna i en annan div som dom ger en bakgrundsbild med vertikala linjer eller annan dekor som repeterar neråt och skapar illusionen av kolumner.

Jag valde tanten:s lösning. Tack

dAEk skrev:

På vilket sätt ligger felet på w3s sida? Eftersom du i var och varannan tråd påstår att w3 är problemet tycker jag att du kunde utveckla det litegranna.

En tabellbaserad lösning må fungera men det är långt ifrån en "utmärkt" lösning. Att saker och ting validerar betyder inte särskilt mycket.

Jag jäklar, bra att du påminde mig om den där andra tråden... :r

Jo, jag anser att W3C är en bunt inkrökta kodbögar som antingen inte gör saker rätt, utan mekar ihop många idiotiska regler som bara ställer till det för folk - eller helt enkelt struntar i att skaka fram vettiga grejer. Dom skulle mycket väl kunna fixa en sån enkel skitsak som att olika divvar får samma höjd. Av någon outgrudlig anledning så verkar dom tycka att divvar inte ska få ha det.

Tekniker har inget emot en sån här korkad grej, men folk som försöker göra snygga grejer har ofta inte en chans.

(Dessutom jobbar dom otroligt långsamt, IMHO)

En tabellösning för ett sån här grej funkar alldeles utmärkt. Finns ingen människa i hela universum som skulle ha problem med det - jag lovar.

Danne V skrev:

Jag jäklar, bra att du påminde mig om den där andra tråden... :r

Jo, jag anser att W3C är en bunt inkrökta kodbögar som antingen inte gör saker rätt, utan mekar ihop många idiotiska regler som bara ställer till det för folk - eller helt enkelt struntar i att skaka fram vettiga grejer. Dom skulle mycket väl kunna fixa en sån enkel skitsak som att olika divvar får samma höjd. Av någon outgrudlig anledning så verkar dom tycka att divvar inte ska få ha det.

Tekniker har inget emot en sån här korkad grej, men folk som försöker göra snygga grejer har ofta inte en chans.

(Dessutom jobbar dom otroligt långsamt, IMHO)

En tabellösning för ett sån här grej funkar alldeles utmärkt. Finns ingen människa i hela universum som skulle ha problem med det - jag lovar.

Du har förstått hela grejjen! Grattis. Logga nu ut och gå och gör något annat, kungen.

Okkido skrev:

Du har förstått hela grejjen! Grattis. Logga nu ut och gå och gör något annat, kungen.

Nu spetsade jag iofs till förra inlägget en del.

Men ditt svar är ju bara larvigt och jag tror ditt tillmäle passar dig själv lika bra. Vad menar du? Om du har andra synpunkter, så utveckla istället för att ge sken av att du "minsann vet" och att andra åsikter är nonsens. OK?

Eller förresten, kanske inte i den här tråden, utan den andra om W3C - var den nu är (hinner inte leta just nu)

Danne V, det går alldeles utmärkt att få samma höjd på två divar med display:table. display:table specificerades i CSS för 10 år sedan. Om det inte implementerades i någon webbläsare så ligger problemet hos tillverkaren för den webbläsaren, inte hos de som specificerade CSS.

zcorpan skrev:

Danne V, det går alldeles utmärkt att få samma höjd på två divar med display:table. display:table specificerades i CSS för 10 år sedan. Om det inte implementerades i någon webbläsare så ligger problemet hos tillverkaren för den webbläsaren, inte hos de som specificerade CSS.

Wow! Detta ska testas!

Om det är tänkt att funka som tabellceller - och gör det också - så tar jag gladeligen tillbaka min kritik mot W3C på den här punkten.

Red: Har testat i ett antal läsare för Mac. Funkar inte i Opera, OmniWeb, Firefox, Camino men funkade i Safari och Shiira (båda byggda på WebKit förresten).

Det ska förresten vara "display: table-cell" på divvarna, och så måste man tydligen lägga en "wrapper" div runt om som man ger "display:table". Verkade det som i alla fall....

zcorpan skrev:

Danne V, det går alldeles utmärkt att få samma höjd på två divar med display:table. display:table specificerades i CSS för 10 år sedan. Om det inte implementerades i någon webbläsare så ligger problemet hos tillverkaren för den webbläsaren, inte hos de som specificerade CSS.

Och det var precis det där som var min poäng. :)

Följande funkar för mig iaf. Har kollat i Opera 9, Firefox 2 och Safari 3 (beta). IE är det bara att glömma.

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>apa</title>
	
	<style type="text/css">
	html, body { 
		height:  100%; 
		margin:  0;
		padding: 0;
	}
	#wrapper {
		display:    table;
		width:      50%;
		background: #eee;
	}
	
	.column {
		display:    table-cell;
		height:     100%;
		
	}
		.one {
			background: #aaa;
		}
		.two {
			background: #777;
		}
	</style>
</head>

<body>
	
	<div id="wrapper">
		<div class="column one">
			<p>apa 1</p>
		</div>
		<div class="column two">
			<p>apa 2</p>
			<p>apa 2</p>
			<p>apa 2</p>
			<p>apa 2</p>
			<p>apa 2</p>
			<p>apa 2</p>
			<p>apa 2</p>
			<p>apa 2</p>
			<p>apa 2</p>
			<p>apa 2</p>
			<p>apa 2</p>
			<p>apa 2</p>
			<p>apa 2</p>
			<p>apa 2</p>
			<p>apa 2</p>
			<p>apa 2</p>
			<p>apa 2</p>
			<p>apa 2</p>
			<p>apa 2</p>
			<p>apa 2</p>
			<p>apa 2</p>
			<p>apa 2</p>
			<p>apa 2</p>
			<p>apa 2</p>
		</div>
	</div>
	
</body>
</html>

dAEk skrev:

Och det var precis det där som var min poäng. :)

Ja, det är ju kanonkul(a) om det funkar! Ska kolla det är lite närmare imorron. Mitt snabbtest var ju tyvärr inte särskilt positivt, dock...

Men MIN poäng är att W3C konsekvent har fokuserat på den rent tekniska delen. Den visuella delen har fått stå tillbaka på en massa punkter som hel enkelt är korkade. Dilemmat är ju att tekniker inte bryr sig så mycket om sånt "tjafs".

Att sedan folk (fortfarande nästan alltid utvecklare som jobbar med den tekniska biten) sväljer all W3C:s strunt utan att ens vilja förstå problemen som en formgivare har är lite tråkigt.

Jag är en pragmatisk herre och har aldrig haft nåt intresse av förstå-sig-påare som skapar regler som bara gör saker och ting besvärligare, och tänker absolut inte sitta och pilla med femtielva varianter av CSS med Cond.comments och skit i ett par dagar för att få en effekt som jag kan åstadkomma med en tabell på två minuter. Om andra tycker det är kul att pilla, så gör gärna det. Jag gör det alltså inte.

Men om jag kritiserat fel personer i den här tråden blir jag alltså bara glatt överraskad!

Men vafan, daEk. Kunde du inte ha vissat det exemplet innan. Det var ju exakt det jag frågade efter.

yador skrev:

Men vafan, daEk. Kunde du inte ha vissat det exemplet innan. Det var ju exakt det jag frågade efter.

Jag tippar att han var precis lika ovetande som jag var innan zcorpan skrev sitt inlägg. ;) Men tyvärr skiter sej ju lösningen i IE ändå, vilket ju innebär att den i praktiken blir värdelös... :(

Heja Microsoft!!!! :bla

Red; Whatever - Jag ids inte. :OO

Danne V skrev:

Jag tippar att han var precis lika ovetande som jag var innan zcorpan skrev sitt inlägg. ;) Men tyvärr skiter sej ju lösningen i IE ändå, vilket ju innebär att den i praktiken blir värdelös... :(

Heja Microsoft!!!! :bla

Nejdå. Jag visste att det gick, men inte exakt hur. När jag är osäker, då kollar jag upp saker. :)

Det vore kul om du kunde svara på jarvklos frågor i den andra tråden (med rubriken "fel forum?") där du kritiserar w3. Det stod att du inte hade tid, ändå har du lyckats skriva hundrasjuttioelva inlägg sedan dess. Så kom igen nu! Jag tror inte att jag är ensam om att vänta på svar.