Hallo,
Ik ben bezig met het coderen van een layout. Nu heb ik een probleem waar ik niet uit kom. Het rechter deel van het menu (waar de knoppen niet zitten) moet tegen het linker aan blijven. Op alle schermgroottes . En allebei de kanten van het menu moeten schermvullend zijn. (dus linker en rechterkant raken) Hoe kan ik dit doen?
Kijk op "stoempers.woelmuis.nl"
Css:Html:
Ik ben bezig met het coderen van een layout. Nu heb ik een probleem waar ik niet uit kom. Het rechter deel van het menu (waar de knoppen niet zitten) moet tegen het linker aan blijven. Op alle schermgroottes . En allebei de kanten van het menu moeten schermvullend zijn. (dus linker en rechterkant raken) Hoe kan ik dit doen?
Kijk op "stoempers.woelmuis.nl"
Css:
Spoiler tonen
body{ height: 100%; margin: 0; padding: 0; background:#f0f0a2; font: 11px normal Verdana, Arial, Helvetica, sans-serif; color:#000000; }
html{ height: 100%; }
a:link, a:visited{; height: 47px; wifont-family: Leelawadee; font-size: 11pt; text-decoration: none; color: #fff; }
#container { width:972px; margin:0 auto;}
#header { background: url(images/header.png); width: 700px; height: 185px; margin: 0; margin-left: 140px; }
#menu_items { margin-left: auto; margin-right: auto; padding-top: 15px; display: block;}
#menu_fotos { margin-left: auto; margin-right: auto; padding-top: 17px; display: block; }
.home { background-color: #b60c0c; float: left; margin-left: 0px; width: 135px; height: 47px; display: block; border-top-left-radius: 5px; border-bottom-left-radius: 5px; border: 1px solid #780404; }
.home:hover { background-color: #a01d1d; }
.informatie { background-color: #b60c0c; float: left; margin-left: 0px; width: 135px; height: 47px; margin-bottom: 10px; display: block; border: 1px solid #780404; }
.informatie:hover { background-color: #a01d1d; }
.verslagen { background-color: #b60c0c; float: left; margin-left: 0px; width: 135px; height: 47px; margin-bottom: 10px; display: block; border: 1px solid #780404; }
.verslagen:hover { background-color: #a01d1d; }
.fotos { background-color: #b60c0c; float: left; margin-left: 0px; width: 135px; height: 47px; margin-bottom: 10px; display: block; border: 1px solid #780404; }
.fotos:hover { background-color: #a01d1d; }
.contact { background-color: #b60c0c; float: left; margin-left: 0px; width: 135px; height: 47px; margin-bottom: 10px; display: block; border-right-width: 2px; border: 1px solid #780404; }
.contact:hover { background-color: #a01d1d; }
.routes { background-color: #b60c0c; float: left; margin-left: 0px; width: 135px; height: 47px; margin-bottom: 10px; display: block; border: 1px solid #780404; }
.routes:hover { background-color: #a01d1d; }
#container_tekst { padding-left: 15px; padding-top: 15px; padding-bottom: 15px; padding-right: 15px; margin: 0px auto; width: 972px; height: auto; overflow: hidden; background-color: #fff; border-radius: 8px; -moz-box-shadow: rgba(0,0,0,0.50) 20px 20px 5px 5px; -webkit-box-shadow: rgba(0,0,0.50) 20px 20px 50px; box-shadow: rgba(0,0,0,0.30) 2px 2px 12px 7px; }
.content_left { width: 500px; height: auto; min-height: 1000px; float: left; }
.content_right{ width: 307px; height: auto; border-radius: 5px; border: 1px solid #cbcbcb; background-color: #ececec; float: right; min-height: 200px; }
.content_ltekst { width: 595px; padding-left: 5px; padding-right: 5px; height: auto;}
.welkom_bar { background: url(images/balk_wk.png); width: 606px; height: 47px; float: left; }
.menu_rechts { width: 30%; float: right; background-color: #b60c0c; height: 47px; margin-bottom: 10px; margin-left: 0px; border: 1px solid #780404; border-top-right-radius: 5px; border-bottom-right-radius: 5px; }
#buienradar_bar { background: url(images/balk_br.png); width: 307px; height: 46px; float: right; }
#buienradar { padding: 10px; width: 290px; height: 346px; }
#footer { background: url(images/footer.png); }Spoiler tonen
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Tuindorp Stoempers</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header"></div>
<a class="menu_rechts"></a>
<a class="home" href="#"><img id="menu_items" src="images/item_home.png" alt="Home"></a>
<a class="informatie" href="#"><img id="menu_items" src="images/item_informatie.png" alt="Informate"></a>
<a class="verslagen" href="#"><img id="menu_items" src="images/item_verslagen.png" alt="Verslagen"></a>
<a class="fotos" href="#"><img id="menu_fotos" src="images/item_fotos.png" alt="Fotos"></a>
<a class="routes" href="#"><img id="menu_items" src="images/item_routes.png" alt="Routes"></a>
<div id="container_tekst">
<div class="content_left">
<div class="welkom_bar"></div>
<div class="content_ltekst">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et risus vitae ante rhoncus placerat. Praesent viverra turpis vel turpis porttitor vitae euismod velit elementum. Cras tempus volutpat risus vitae placerat. Sed felis risus, semper non tincidunt in, commodo vel odio. Sed convallis, arcu in hendrerit porttitor, neque tortor convallis neque, a consectetur leo risus vitae sem. Maecenas ac leo ipsum, non rutrum quam. Phasellus tincidunt, enim ac vulputate scelerisque, lectus lorem pellentesque justo, ut ornare purus lorem at mi. Integer vitae justo mi, quis dictum dui. In ut nisi vel ante tincidunt consectetur in in neque. Suspendisse potenti. Vestibulum sit amet elementum turpis.</p>
</div></div> <div class="content_right">
<div id="buienradar_bar"></div>
<div id="content_right"><img id="buienradar"src="http://gratisweerdata.buienradar.nl/forecast/nl-eu-forecast/loop.gif" alt="Buienradar">
</div></div>
</body>
</html>