Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

Div -> staat niet op de juiste plek

2 antwoorden
  • Ik ben bezig met een layout aan het maken. Op zich lukt het aardig. Alleen loop ik nu tegen een paar probleempjes aan. Mijn index pagina: [code:1:03af3ad2b4] <?php if(!isset($_GET['page'])) { $page='home'; } elseif(strtolower($_GET['page']) == "index") { $page='home'; } elseif(!file_exists($_GET['page'] .".php")) { $page='home'; } else { $page=$_GET['page']; } ?> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="nl"> <head> <title>Mijn site</title> <meta http-equiv="imagetoolbar" content="no"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <!-- Popupvenster om de disclaimer te laden --> <script language="javascript"> function popup(url) { window.open(url, "", "width=300, height=435, scrollbars=no"); } </script> <link href="stylesheets/main.css" rel="stylesheet" type="text/css" /> <link href="stylesheets/menu.css" rel="stylesheet" type="text/css" /> </head> <body> <!-- Container waar alle divs in staan --> <div id="container"> <!-- Container waar het menu in staat --> <div id="links"> <!-- links boven --> <div id="lb"> Linksboven </div> <!-- menu --> <div id="menu"> <ul class="menu"> <li><a href="index.php?page=home">Home</a></li> <li><a href="index.php?page=bedrijfsprofiel">Bedrijfsprofiel</a></li> <li><a href="index.php?page=grondverzet">Grondverzet</a></li> <li><a href="index.php?page=transport">Transport</a></li> <li><a href="index.php?page=verhuur">Verhuur</a></li> <li><a href="index.php?page=projecten">Projecten</a></li> <li><a href="index.php?page=links">Links</a></li> <li><a href="index.php?page=contact">Contact</a></li> </ul> </div> <!-- links onder --> <div id="lo"> Linksonder </div> </div> <!-- Container waar de header en het content gedeelte in staat --> <div id="header"> <img src="images/header.jpg"> </div> <div id="content"> <?php include($page.".php"); ?> </div> <div id ="rechts"> <div id="nieuws"> <!-- Dit is een test. Deze regels later weer verwijderen --> <a href="#">Nieuwsitem 1</a><br> <a href="#">Nieuwsitem 2</a><br> <a href="#">Nieuwsitem 3</a><br> <!--Tot hier verwijderen --> </div> </div> </body> </html> [/code:1:03af3ad2b4] Main.css [code:1:03af3ad2b4] html, body { height: 100%; /* héél belangrijk */ margin: 0px; } #container { min-height: 100%; height:auto !important; /* voor moderne browsers */ height:100%; /* voor IE */ width: 790px; margin: 0 auto; padding: 0; border: 1px solid #336699; } #links { position: absolute; float: ; height: 100%; width: 150px; background: #336699; } #lb { position: relative; float: left; height: 240px; width: 150px; background: #336699; } #menu { position: relative; float: left; clear: left; width: 150px; height: 300px; background-color: #BCC9D7; } #lo { position: relative; float: left; clear: left; height: auto; width: 150px; background: #336699; } #header { position: relative; width: 430px; height: 240px; padding: 0 0 0 160px; } #content { padding: 0 0 0 160px; } #rechts { position: relative; float: right; clear: right; height: auto; width: 200px; padding: 0 0 0 10; background: #336699; } #nieuws { position: absolute; float: right; } [/code:1:03af3ad2b4] menu.css [code:1:03af3ad2b4] ul.menu { margin: 0; padding: 0; list-style-type:none; display:block; font:bold 14px Helvetica, Verdana, Arial, sans-serif; line-height:165%; width:150px; } ul.menu li { margin: 0; padding: 0; border-top: 0px solid #FFFFFF; border-bottom: 1px solid #FFFFFF; } ul.menu li a { display:block; text-decoration:none; color:#fff; background:#BCC9D7; padding:0 0 0 0px; width:150px; } ul.menu li a:hover { background:#336699 url("arrow.gif") no-repeat 0 9px; } ul.menu li a.current,ul.vert-one li a.current:hover { background:#BCC9D7 url("arrow.gif") no-repeat 0 9px; } [/code:1:03af3ad2b4] De layout bestaat uit een div (container) waar de gehele pagina in staat. Deze is 790 pixels breed en heeft een blauwe rand van 1 pixel. In deze div (container) heb ik weer 4 divs, namelijk links, content, header, rechts. Het div links heb ik opgedeeld in een div lb (linksboven), een div menu en een div lo (linksonder. In het div rechts heb ik een div nieuws geplaatst waar een aantal nieuwsitems worden weergegeven. De volgende probleempjes heb ik nu: 1.) Als ik het venster (IE) verklein dan verkleint mijn div container ook, terwijl ik deze gelijk wil hebben aan de hoogte van het div links. De onderste rand van de container div staat nu niet meer onder in het scherm, maar een stuk hoger, terwijl mijn div links netjes tot onderaan door loopt. Kan het zijn dat het komt doordat ik pixels en procenten door elkaar gebruik? Het div lb moet een vaste hoogte hebben, aangezien ik deze gelijk wil hebben aan de div header. In de header staat een afbeelding met een hoogte van 240 pixels. Het is de bedoeling dat hier een animated gifje o.i.d. komt die aantal afbeeldingen laat zien. 2.) Het div nieuws begint niet rechts boven aan, maar begint ergens midden op de pagina , terwijl deze rechtsboven aan hoort te staan. 3.) In het div lb kan ik geen tekstselecteren. Mijn vermoeden is dat 2 divs elkaar overlappen. Ik zou het waarderen als iemand hier even naar zou willen kijken. Aanzien ik nog maar net begonnen ben met css, is het best mogelijk dat er fouten in zitten.
  • Twee dingetjes, eerste is een schoonheidsfoutje: <div id ="rechts"> heeft een spatie teveel Het tweede is die "!important" hack, die kan je beter vervangen voor een underscore (_, liggend streepje) voor je "height:100%;" in de css voor je "container". Dus heel die regel waar !important achter komt weg halen en "_height:100%;" ipv "height:100%;". Dat zou het moeten oplossen.

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.