CSS Design

[Anoniem2]

Beste allemaal,\r\n\r\nIk probeer mijzelf CSS aan te leren, en dan met name het positioneren van items.\r\n\r\nIk wil graag het volgende bereiken:\r\n[img]http://www.plantsinfocus.nl/WEBSITE.JPG[/img]\r\n\r\nInmiddels ben ik zo ver:\r\n[html].header {\r\nbackground-image: url(\"header.jpg\");\r\nheight: 200px;\r\nwidth:900px;\r\n}\r\n\r\n.menu {\r\nwidth: 150px;\r\nfloat: left;\r\n}\r\n\r\n.contentone {\r\npadding: 0 0 0 0px;\r\nwidth:200px;\r\nfloat:left;\r\nbackground-color:#FFFF99\r\n}\r\n\r\n.contenttwo {\r\npadding: 0 0 0 0px;\r\nwidth:550px;\r\nfloat:left;\r\n}\r\n\r\n.contentthree {\r\nclear:left;\r\npadding: 0 0 0 150px;\r\nwidth:750px;\r\n}\r\n\r\n.footer {\r\nbackground-color: #ffcccc;\r\nborder-top: solid 1px blue;\r\nclear: left;\r\nwidth:900px;\r\n}\r\n[/html]\r\n\r\nMet het volgende resultaat:\r\n[img]http://www.plantsinfocus.nl/WEBSITE2.JPG[/img]\r\n\r\nEchter: als Content 1 en 2 moeten in elke situatie even hoog zijn, ongeacht hoeveel tekens erin staan. Een absolute waarde voor \'height\' van Content 1 heeft dus geen zin.\r\n\r\nHoe krijg ik Content 1 altijd even hoog als Content 2?\r\nZodat de achtergrondkleur doorloopt.\r\n\r\nAls m\'n vraag niet duidelijk is graag even zeggen.

[Anoniem2]

ik zou content 1 en 2 in 1 groot div zetten zodat, je de height van content 1 dan op 100% kan zetten en dan word hij dus even hoog als het div waar hij in is geplaatst.\nhopelijk is dit een oplossing.

[Anoniem2]

Hallo Tuinman,\r\n\r\nJe bedoelt Content 1 en 2 in dezelfde div stoppen? Maar dat de CSS-code verschillend is? \r\n\r\n[html]\r\n

\r\n

\r\n

\r\n

Hier komt je menu.

\r\n

Content 1

\r\n

Content 2 Content 2 Content 2 Content 2 Content 2 Content 2 Content 2 Content 2 Content 2 Content 2 Content 2 Content 2 Content 2 Content 2 Content 2 Content 2 Content 2 Content 2 Content 2 Content 2 Content 2 Content 2 Content 2 Content 2 Content 2 Content 2 Content 2 Content 2 Content 2 Content 2 Content 2 Content 2 Content 2 Content 2 Content 2 Content 2 Content 2 Content 2 Content 2 Content 2

\r\n

\r\n

Content 3

\r\n

Hier plaats je de footer.

\r\n

\r\n[/html]\r\n\r\n[html]/* CSS Document */\r\n.containerone {\r\nwidth:900px;\r\n}\r\n\r\n.containertwo {\r\nwidth:900px;\r\nheight:100%;\r\n}\r\n\r\n.header {\r\nbackground-image: url(\"header.jpg\");\r\nheight: 200px;\r\nwidth:900px;\r\ncolor:#FFFFFF;\r\ntext-align:right;\r\nvertical-align:baseline;\r\n\r\n}\r\n\r\n.menu {\r\nwidth: 150px;\r\nfloat: left;\r\nheight:auto;\r\nborder-right: solid 1px blue;\r\n}\r\n\r\n.contentone {\r\npadding: 0 0 0 0px;\r\nwidth:200px;\r\nheight:100%;\r\nfloat:left;\r\nbackground-color:#FFFF99\r\n}\r\n\r\n.contenttwo {\r\npadding: 0 0 0 0px;\r\nwidth:550px;\r\nfloat:left;\r\n}\r\n\r\n.contentthree {\r\nclear:left;\r\npadding: 0 0 0 150px;\r\nwidth:750px;\r\n}\r\n\r\n.footer {\r\nbackground-color: #ffcccc;\r\nborder-top: solid 1px blue;\r\nclear: left;\r\nwidth:900px;\r\n}[/html]\r\n\r\nHet spijt me maar ik weet niet hoe dat moet, kun je me dat aub uitleggen?\r\nIk heb geprobeerd 1 grote div over 1 en 2 heen te bouwen (containertwo) maar dit werkt niet.

[Anoniem2]

Als ik divs goed begrijp zul je iets als hieronder in elkaar moeten zetten:\r\n[ATTACH]11255[/ATTACH]\r\n\r\nZodra je dingen naast of onder elkaar wil zetten die niet even breed/hoog zijn, zul je een container moeten toepassen. De html-code die bij bovenstaand voorbeeld hoort wordt dan:\r\n[html]

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

[/html]\r\n\r\nHet css-verhaal wat hierbij hoort mag je zelf uitvinden. Da\'s niet iets wat ik zo voor je op kan schrijven.

[Anoniem2]

Hehe eindelijk is het gelukt!\n\nIk dacht: 900 - 150 = 750. Er kunnen dus nog mooi 750 pixels naast het menu. Niet dus, hoe ik ook met float probeerde hij kwam er maar niet naast. Uiteindelijk is het gelukt met 749 pixels... :p\n\n[html]/* CSS Document */\n\n.container1 {\nwidth:900px;\n}\n\n.container2 {\nwidth:900px;\n}\n\n.container3 {\nwidth:750px;\nfloat:left;\n}\n\n.container4 {\nwidth:750px;\nheight:100%;\n}\n\n.header {\nbackground-image: url(\"header.jpg\");\nheight: 200px;\nwidth:900px;\ncolor:#FFFFFF;\ntext-align:right;\n\n}\n\n.menu {\nfloat:left;\nwidth: 150px;\nheight:100%;\n}\n\n.content1 {\npadding: 0 0 0 0px;\nwidth:200px;\nheight:100%;\nbackground-color:#FFFF99;\nfloat:left;\n}\n\n.content2 {\npadding: 0 0 0 0px;\nwidth:549px;\nheight:100%;\nfloat:left;\n}\n\n.content3 {\nclear:left;\npadding: 0 0 0 0px;\nwidth:749px;\nheight:100%;\n}\n\n.footer {\nbackground-color: #ffcccc;\nborder-top: solid 1px blue;\nwidth:900px;\nheight:100%;\n}\n\n[/html]\nBedankt Tuinman en FooBar!\n\n\nEDIT! Ja nu staat het netjes ingedeeld... Maar de achtergrond is nog hetzelfde! Ik was even vergeten waar het om draaide... Probleem met de achtergrond dus nog niet opgelost! :(

[Anoniem2]

je wilt dus content 2 een andere kleur geven?\ndat doe je gewoon met background-color:hier kleur;\nof bedoel je iets anders

[Anoniem2]

Ik wil dat ongeacht de hoeveelheid tekst in de blokken, de achtergrond doorloopt tot het beide blokken klaar zijn. Nu is de achtergrond wel geel, maar houdt die op zodra de tekst ophoudt.

[Anoniem2]

Jongens...\n\nMet de key \'min-height\' kom je iets verder, maar nog steeds gaat het fout zodra de ene meer inhoud heeft als de andere...

[Anoniem2]

waarom heb je de andere containers(3,4) die om content 1 en 2 staan geen backgroundcolor gegeven??

[Anoniem2]

Omdat ik alleen content 1 een backgroundcolor wil laten hebben... content 2 niet.