div layout mha CSS

zilveer · 2006-12-27, 23:11

hejsan, jag försöker fixa till en div layout mha CSS men det fungerar inte som jag vill.
jag kommer nu att klistra in koden, sparar ni koden som html så kommer ni kunna se vad jag har problem med samtidigt som ni ser hur det ser ut.

problemet är iaf:

den vänstra delen (det gröna skall sträcka sig ner till cyanfärgen oavsett höjden på denna div.
samma sak gäller för den högra delen, dvs det lila skall sträcka sig ner till cyanfärgen oavsett höjd på denna div.

Kod:

<html>
<head></head>
<body>

<div style="width: 554px;">
	<div style="width: 554px; height: 10px; background: #000000;">
 
	</div>
	<div style="float: left; width: 10px; background: #00ff00;">
 <div style="width: 10px; height: 10px; "></div>
	</div>
 <div style="float: left; width: 534px;" >
 	den vänstra delen (det gröna skall sträcka sig ner till cyanfärgen oavsett höjden på denna div.<br>
 	samma sak gäller för den högra delen, dvs det lila skall sträcka sig ner till cyanfärgen oavsett höjd på denna div.
	</div>
	<div style="float: left; width: 10px; background: #ee00ee;">
 <div style="width: 10px; height: 10px; "></div>
	</div>
	<div style="float: left; width: 554px; height: 10px; background: #00ffff;">
 
	</div>
</div>
</body>
</html>

/tacksam för all vägledning

bivald · 2006-12-27, 23:58

Med risk för att gå lite offtopic, får man fråga varför du använder så många divar för dina vänster/höger-spalt-färger? har du en layout som behöver denna funktion och använder färger bara för att visa att det inte fungerar? (smart i så fall) - eller är det bara en väldigt komplicerad border?

Jag utgår från att det är delar ur en större layout, i så fall rekomenderar jag att google på css layouts och fluid stretch. Du kan säkert läsa koden från en sådan layout och hitta bra kunskap. T.ex:

http://accessat.c-net.us/test/template-3col.html
http://www.positioniseverything.net/thr.co...ol.stretch.html

Eller har jag helt missat något? I så fall ber jag om ursäkt på förhand, känner att sömnen börjar ta över mina sinnen

Patek Philippe · 2006-12-28, 00:09

Håller med föregående talare. Din kod är vad man skulle kunna kalla för en divsoppa. Att använda css för layouten (och separera innehåll och layout) handlar inte om att ersätta tabeller med divar.

Nåväl någonting åt det här hållet skulle väl funka som ren ersättning (med reservation för att jag är trött och inte orkar testa), men jag gissar precis som bivald på att detta är en del av en layout och att du skulle behöva se över allt.

Kod:

<div style="width: 554px; border-top: 10px solid black; border-bottom: 10px solid #00ffff;">
  <p style="margin: 0; border-left: 10px solid #00ff00; border-right: 10px solid #ee00ee;">den vänstra delen (det gröna skall sträcka sig ner till cyanfärgen oavsett höjden på denna div.<br>
  samma sak gäller för den högra delen, dvs det lila skall sträcka sig ner till cyanfärgen oavsett höjd på denna div.</p>
</div>

zilveer · 2006-12-28, 00:46

jag har en layout som behöver denna funktion och använder färger bara för att visa att det inte fungerar

ska ta en titt på länkarna.
tack för tipset=)

Aktiva användare som för närvarande tittar på det här ämnet: 1 (0 medlemmar och 1 gäster)

Menu

div layout mha CSS