menu plaatsen

Status
Niet open voor verdere reacties.
T

Tjerkie

Nieuwe gebruiker
Lid geworden
16 aug 2010
Berichten
1
Goededag,

Ik heb een menu dat ik wel netjes op mijn pagina krijg maar er komt ruimte tussen mijn menu en de div die er boven staat. hierdoor zie je de achtergrond.

iemand tips?


html bestand:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<link rel="stylesheet" href="webdesign.css" type="text/css" />
<title>Webdesign
</title>
</head>
<body>
<div id="boxmodel">
bedrijflogo/animatie
</div>
<div id="menu">
<ul class="menu">
<li class="current"><a href="home.html"><b>HOME</b></a></li>
<li><a href="????.html"><b>?????????</b></a></li>
<li><a href="portfolio.html"><b>PORTFOLIO</b></a></li>
<li><a href="offertes.html"><b>OFFERTES</b></a></li>
<li><a href="contact"><b>CONTACT</b></a></li>

</ul>

</div>

<div id="design">
</div>
<div id="nieuws">
hier komen de nieuwsfeitjes over het bedrijf.
</div>
<div id="disclaimer">
hier komt de disclaimer en voorwaarden enzzzz....
</div>


</body
</html>


css bestand:

*{ margin: 0; padding: 0; }

body{
background-image: url(achtergrond.jpg);
margin: 0 auto;
}


#boxmodel{
background-color: white;
width: 860px;
height: 100px;
margin: auto;
border-bottom: 10px solid #d4340C;
}



#menu{
position: relative;
background-image: url(gras.jpg);
padding: 0 0 0 34px;
margin: 0 auto 0 auto;
background: url(menur_bg.gif) repeat-x;
height: 46px;
list-style: none;
width: 826px;
}

#menu li{
float:left;
list-style-type: none;
}

#menu li a{
float: left;
display: block;
color:#000;
text-decoration: none;
font-family: sans-serif;
font-size: 13px;
font-weight: bold;
padding:0 0 0 16px;
height: 46px;
line-height: 46px;
text-align: center;
cursor: pointer;
}

#menu li a b{
float: left;
display: block;
padding: 0 45px 0 30px; /*Padding of menu items*/
}

#menu li.current a, .menu li a:hover{
color: #fff;
background: url(menur_hover_left.gif) no-repeat;
background-position: left;
}

#menu li.current a b, .menu li a:hover b{
color: #fff;
background: url(menur_hover_right.gif) no-repeat right top;
}


#design{
background-image: url(gras.jpg);
width: 860px;
height: 200px;
padding: 0;
margin: auto;
border-bottom: 10px solid #d4340C;
}


#nieuws{
background-color: white;
width: 860px;
height: 400px;
padding: 0;
margin: auto;
}

#disclaimer{
background-color: white;
width: 860px;
height: 80px;
padding: 0;
border-top: 1px solid #d4340C;
margin: auto;
}
 
Hoi,

Ik weet niet of ik een echte oplossing heb, maar div boxmodel is 100px hoog.
Dit betekent dat de afbeelding iig ook 100px hoog moet zijn.
Als die afbeelding kleiner is, dan blijft de hoogte van het boxmodel nog steeds 100.

Hopelijk kun je hier iets mee.

Groetjes
 
Hoi Tjerkie,
Ik heb je codes ingeplakt in een html-documentje:
  • Aan het menu heb ik even tijdelijk opgedragen: menu { background: blue; }
  • De balk onderaan (10px border) van de <div id="boxmodel"> sluit nu precies aan bij de bovenkant van de <div id="menu">.
Daarmee kan ik dus het probleem niet reproduceren. :eek:

Het zou kunnen dat de menur_bg.gif bovenin transparant is gemaakt, kan ik nog verzinnen.
Maar het is heel erg lastig zien wat je bedoelt, als er geen achtergrond-images zijn: de html en css zeggen niet alles.

Heb je een link naar een testpagina, waar we het verschijnsel online kunnen zien, met afbeeldingen en al?

Met vriendelijke groet,
CSShunter
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan