Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

css problemen met variabele breedte content

8 antwoorden
  • Hoi mensen, Ik post hier voor het eerst! Ik ben een website aan het maken en die moet er als volgt uit zien: header footer, aan de onderzijde van het beeldscherm linker menu rechts de content. Header, footer en menu lukken. Staan goed. Ik heb het gemaakt met DIV. Wat ik nu wil is de content zo maken dat hij mee rekt met de breedte van het scherm. Ik wil een template maken dus in de content moet een editable region komen. Die editable region moet een schuifbalk krijgen als hij langer wordt dan het beeldscherm hoog is. Ik krijg de div voor de content niet goed. Hier is broncode van de HTML: <body id="body"> <div id="container"> <div id="header"><img src="../images/logo/logo.gif" /></div> <div id="menucontainer"> <div id="menu"> <ul> <li><a href="javascript:;">» link1</a></li> <li><a href="javascript:;">» link2</a></li> <li><a href="javascript:;">» link3</a></li> <li><a href="javascript:;">» Home</a></li> </ul> </div></div> <div id="content"> </div> </div> <div id="footer">© 2008</div> </body> Hier is de CSS html body {width:100%} #body { margin-top:0px; margin-left:0px; margin-right:0px; min-height:100%; } #header { float:left; position:relative; margin-left:0px; margin-top:0px; margin-right:0px; height:150px; width:100%; background-image: url(../images/kopachtergrond2.jpg); clear:both; z-index:2; border-bottom:1px solid #000000; } #menucontainer { z-index:1; position:absolute; top:0px; left:0px; background-image:url(../images/wall-cleanedup-soft.jpg); float:left; width:240px; min-height:100%; border-right: 1px solid #000000; margin-bottom:0px; } #menu { float:left; position: relative; top:170px; left:10px; width: 220px; height: 220px; background-color:transparant; margin-left:0px; } .menutitel { margin-left:10px; margin-top:0px; color:#000000; font-weight:500; font-size:18px; } /*menuhyperlinks*/ #menu ul { list-style:none; color:#ffffff; font-family: "Trebuchet MS"; padding-top:5px; font-size:13px; } #menu li a{ display:block; height:25px; color:#ffffff; background-color:#61870E; text-decoration:none; border:1px solid #2D4507; border-style:outset; margin-bottom:0px; margin-left:-30px; margin-right:10px; padding-top:3px; padding-left:15px;} #menu li a:hover{ background-color:#2D4507; color:#ffffff; } #content { min-height:100%; position:absoluut; float:left; width:100%; background-color:#FF6600; margin-left:0px; } #footer { z-index:2; position: fixed; bottom:0; left:0; background-color:#2D4507; width:100%; height:20px; color:#FFFFCC; padding-right:10px; padding-top:10px; text-align:right; } gr, Arjan
  • [code:1:789c9162eb]position:absoluut;[/code:1:789c9162eb] moet zijn [code:1:789c9162eb]position:absolute;[/code:1:789c9162eb] Off topic: http://forum.computertotaal.nl/phpBB2/faq.php?mode=bbcode
  • Bedankt. Nu krijg ik de content te zien in FF maar niet in IE Ook staat de content div aan de linkerkant en dus onder het menu. Hij moet naast het menu komen. Als ik dan de margin-left instel op 240px staat hij er wel naast maar gaat hij ook 240px teveel uit het scherm. Hoe stopt hij dan aan de rechterkant? Arjan
  • Waarom het in IE misgaat weet ik ff niet, maar ik denk dat je het probleem van die 240px kan oplossen door de body een width van 100% te geven.
  • [quote:e3ad63af67="arjandevries"]Bedankt. Nu krijg ik de content te zien in FF maar niet in IE Ook staat de content div aan de linkerkant en dus onder het menu. Hij moet naast het menu komen. Als ik dan de margin-left instel op 240px staat hij er wel naast maar gaat hij ook 240px teveel uit het scherm. Hoe stopt hij dan aan de rechterkant? Arjan[/quote:e3ad63af67] Post even een linkje naar je site, dan begrijp ik wat je bedoelt. Wijzig ook even de titel van je topic in bv. Margin-left werkt niet goed in IE
  • http://www.imajuku.nl/testen/definitief.html http://www.imajuku.nl/testen/definitief1.css Hier staat de boel. Bedankt, Arjan
  • In je CSS zag ik bij #menu background-color:transparant staan. Dit moet zijn:[code:1:958ad7e777]background-color:transparent[/code:1:958ad7e777]
  • [color=blue:ca729c4b86]titel "normaal" gemaakt. [/color:ca729c4b86]

Beantwoord deze vraag

Weet jij het antwoord op deze vraag? Registreer of meld je aan met je account

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.