CSS - Dropdown menu - One2xs Forum

Lid · Topicstarter

Berichten: 2.512
Reputatie: 0
Punten: 0,00

Lid sinds: 2010
Laatst gezien: 28 mei 2024

12 dec 2011, 15:33

Hallo,
Bij het maken van een drop down menu heb ik een probleem. De items in het dropdown krijg ik niet gecentreerd. Ze staan helemaal aan de onderkant. Ik heb al van alles geprobeerd ,maar het lukt me niet. Kijk maar op stoempers.woelmuis.nl

CSS:

Spoiler tonen

body{ 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    background:#f0f0a2; 
    font: 12px normal Verdana, Arial, Helvetica, sans-serif; 
    color:#000000; }
#header { 
    background: url(images/header.png); 
    width: 700px; 
    height: 185px; 
    margin: 0; 
    margin-left: auto; 
    margin-right: auto; }
.pijl {
    padding-right: 20px;
    padding-top: 80px;
    background-image: url(images/pijl.png);
    background-position: 100% 100%;
    background-repeat: no-repeat; }
#menu_items {
    border-style: none;
    margin-left: auto; 
    margin-right: auto; 
    padding-top: 15px; 
    display: block;}
#menu_fotos { 
    margin-left: auto; 
    margin-right: auto; 
    padding-top: 17px; 
    display: block; }
#menu_vak { 
    width: 1006px; 
    height: 49px; 
    margin-left: auto; 
    margin-right: auto; }
.menu_dropdown{ 
    background-color: #b60c0c; 
    float: left; 
    margin-left: 0px;
    display: block; 
    width: 135px; 
    height: 25px; 
     
    border: 1px solid #780404;
    color: #000000}
p.dropdown_items {
    text-align: center;}
.home { 
    background-color: #b60c0c; 
    float: left;  
    margin-left: 0px; 
    display: block; 
    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; 
    display: block; 
    width: 135px; 
    height: 47px; 
    display: block; 
    border: 1px solid #780404; }
.informatie:hover { 
    background-color: #a01d1d; }
.verslagen { 
    background-color: #b60c0c; 
    float: left; 
    margin-left: 0px; 
    display: block; 
    width: 135px; 
    height: 47px; 
    display: block; 
    border: 1px solid #780404; }
.verslagen:hover { 
    background-color: #a01d1d; }
.fotos { 
    background-color: #b60c0c; 
    float: left; 
    margin-left: 0px; 
    display: block;     
    width: 135px; 
    height: 47px; 
    display: block; 
    border: 1px solid #780404; }
.fotos:hover { 
    background-color: #a01d1d; }
.contact { 
    background-color: #b60c0c; 
    float: left; 
    margin-left: 0px; 
    display: block; 
    width: 135px; 
    height: 47px; 
    display: block; 
    border-right-width: 2px; 
    border: 1px solid #780404; }
.contact:hover { 
    background-color: #a01d1d; }
.routes { 
    background-color: #b60c0c; 
    float: left; 
    margin-left: 0px; 
    display: block;  
    width: 135px; 
    height: 47px; 
    display: block; 
    border: 1px solid #780404; }
.routes:hover { 
    background-color: #a01d1d; }
#container_tekst { 
    padding-left: 15px; 
    padding-top: 15px; 
    padding-right: 15px; 
    margin-left: auto; 
    margin-right: auto; 
    width: 930px; 
    height: auto; 
    overflow: hidden; 
    background-color: #fff; 
    border-radius: 8px; 
    -moz-box-shadow: rgba(0,0,0,0.30) 2px 2px 12px 7px;
    -webkit-box-shadow: rgba(0,0,0,0.30) 2px 2px 12px 7px; 
    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; }
.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: 319px;  
    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; }
#drop-down-menu{
    margin-left:0px }
ul{
    font-weight:bold;
    color:#ffffff;
    margin:0;
    padding:0;
    list-style:none}
ul li{
    display:block;
    position:relative;
    float:left}
li ul{
    display:none}
ul li a{
    display:block;
    margin-left:0px;
    text-decoration:none;
    color:#ffffff;
    border-top:35px solid #780404;
    padding: 0px 0px 0px 0px;
    background:#a01d1d;
    white-space:nowrap}
ul li a:hover{
    background-color:#a01d1d;}
li:hover ul{ 
    display:block; 
    position:absolute}
li:hover li{ 
    font-size:100%;
    clear:left; 
    width:10em}
li:hover a{ 
    background:#a01d1d;
    color:inherit}
li:hover li a:hover{
    background:#b60c0c;
    color:inherit}
.clear_all{
    clear:both;
    height:0em;}

HTML:

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>
   <div id="menu_vak">
     <a class="menu_rechts"></a>
    <ul id="drop-down-menu">
        <li><a class="home" href="#"><img id="menu_items" src="images/item_home.png" alt="Home"></a> 
            
        
        <li><a class="informatie"><img id="menu_items" class="pijl" src="images/item_informatie.png" alt="Informatie"></a> 
            <ul>
                <!-- Begin informatie button at dropdown -->
                <li><a class="informatie"><img id="menu_items" class="pijl" src="images/item_informatie.png" alt="Informatie" /></a></li>
                <!-- End informatie button at dropdown -->
                <li><a class="menu_dropdown" href="#"><p class="dropdown_items">Routes</p></a></li> 
                <li><a class="menu_dropdown" href="#"><p class="dropdown_items">Routes</p></a></li>
            </ul> 
        </li>
        <li><a class="verslagen"><img id="menu_items" class="pijl" src="images/item_verslagen.png" alt="Verslagen" /></a> 
            <ul>
                <!-- Begin verslagen button at dropdown -->
                <li><a class="verslagen"><img id="menu_items" class="pijl" src="images/item_verslagen.png" alt="Verslagen" /></a></li>
                <!-- End verslagen button at dropdown -->
                <li><a class="menu_dropdown" href="#"><p class="dropdown_items">Routes</p></a></li> 
                <li><a class="menu_dropdown" href="#"><p class="dropdown_items">Routes</p></a></li>
            </ul> 
        </li>
        <li><a class="fotos"><img id="menu_fotos" class="pijl" src="images/item_fotos.png" alt="Fotos"></a> 
            <ul>
                <!-- Begin fotos button at dropdown -->
                <li><a class="fotos"><img id="menu_fotos" class="pijl" src="images/item_fotos.png" alt="Fotos"></a></li>
                <!-- End fotos button at dropdown -->
                <li><a class="menu_dropdown" href="#"><p class="dropdown_items">Routes</p></a></li> 
                <li><a class="menu_dropdown" href="#"><p class="dropdown_items">Routes</p></a></li>
            </ul> 
        </li>
        <li><a class="routes"><img id="menu_items" class="pijl" src="images/item_routes.png" alt="Routes"></a> 
            <ul>
                <!-- Begin routes button at dropdown -->
                <li><a class="routes"><img id="menu_items" class="pijl" src="images/item_routes.png" alt="Routes"></a></li>
                <!-- End routes button at dropdown -->
                <li><a class="menu_dropdown" href="#"><p class="dropdown_items">Routes</p></a></li> 
                <li><a class="menu_dropdown" href="#"><p class="dropdown_items">Routes</p></a></li>
            </ul> 
        </li>
    </ul>    
<p class="clear_all"></p>    
         <div id="container_tekst">
   <div class="content_left">
     <div class="welkom_bar"></div>
  <div class="content_ltekst">
      <p>De "Tuindorp Stoempers" is een informele wielerclub waarvan de leden uit de wijk Tuindorp in 
      Utrecht (en omgeving)  komen. De club bestaat sinds begin 90er jaren. In de zomermaanden zitten 
      we op de racefiets, in de winter de meesten op de ATB. <br /><br />
      
      Op vaste tijdstippen wordt er vanaf de verzamelplaats gefietst. Met enige regelmaat gebeurt dat ook 
      buiten Utrecht: toertochten, cyclosportieve tochten, of gewoon samen een weekend of weekje in 
      binnen- of buitenland.<br /><br />
      
      Momenteel fietst een man of 25 met enig regelmaat mee, maar de groepjes waarmee gefietst wordt 
      zijn eigenlijk altijd kleiner. De snelheid varieert, maar het principe is in ieder geval samen uit, samen 
      thuis. Soms wordt er vanwege de verschillen in snelheid of conditie gesplitst.<br /><br />
      
      De club kent geen lidmaatschap of anderszins, ben je sportief en wil je een keer meefietsen, welkom! </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>

Jvdw

Lid

Berichten: 4.321
Reputatie: 0
Punten: 0,00

Lid sinds: 2010
Laatst gezien: 13 sep 2025

12 dec 2011, 15:40

Padding verwijderen bij menu_items

Wdbs

Lid · Topicstarter

Berichten: 2.512
Reputatie: 0
Punten: 0,00

Lid sinds: 2010
Laatst gezien: 28 mei 2024

12 dec 2011, 16:07

Jvdw schreef:
Padding verwijderen bij menu_items

Ten eerste wordt dan het hele menu verneukt, maar als je daar even niet op let.

En je voegt bij Menu_dropdown "padding-bottom: 10px;" toe dan rekt het vak gewoon mee. Hoe kan dat?

Marjolein

Lid

Berichten: 15.446
Reputatie: 0
Punten: 0,00

Lid sinds: 2008
Laatst gezien: 21 dec 2020

12 dec 2011, 16:15

Je hoeft het niet te verwijderen maar de 15 veranderen in 10 of zo. En anders bij p.dropdown_items een padding toevoegen en de margin op 0 zetten.

Wdbs

Lid · Topicstarter

Berichten: 2.512
Reputatie: 0
Punten: 0,00

Lid sinds: 2010
Laatst gezien: 28 mei 2024

12 dec 2011, 16:21

Marjolein schreef:
Je hoeft het niet te verwijderen maar de 15 veranderen in 10 of zo. En anders bij p.dropdown_items een padding toevoegen en de margin op 0 zetten.

Bedankt, die padding bij menu_items kon ik niet naar 10 zetten, omdat anders de tekst in het menu niet meer in het midden staat. Ik heb het gewoon gedaan via p.dropdown_items en dan margin:0 en padding top 5. Super bedankt, kan een slotje op.