van horizontaal menu, verticaal menu maken

Status
Niet open voor verdere reacties.
M

merlijn16

Gebruiker
Lid geworden
2 mrt 2010
Berichten
132
Hoi, weet iemand hoe ik van dit horizontale munu een verticaal menu kan maken?

dit staat in de css
Code: 
#navlist{
	margin-left: 0px;
	padding-left: 0px;
	white-space: nowrap;
	position: absolute;
	height: 27px;
	width: 923px;
	top: 143px;
}
#navlist li{
	display: inline;
	list-style-type: none;
}
#navlist a {
	padding: 3px 10px;
	background-image: url(images/button.gif);
	height: 20px;
	width: 91px;
	display: inline;
	position: absolute;
	text-align: center;
	color: #fff;
        font-family: "Arial", Trebuchet MS, Helvetica, sans-serif;   
	text-decoration: none;
}
#navlist a:hover{background-image: url(images/buttonover.gif);}
#n1{left: 0px;}
#n2{left: 116px;}
#n3{left: 232px;}
#n4{left: 348px;}
#n5{left: 464px;}
#n6{left: 580px;}
#n7{left: 696px;}
#n8{left: 812px;}

en dit in de xhtml pagina

HTML: 
<ul id="navlist">
      <li><a id="n1" href="index.html"><font color="#ffff00">Home</font></a></li>
      <li><a id="n2" href="for-whom.html">For whom</a></li>
      <li><a id="n3" href="program.html">Program</a></li>
      <li><a id="n4" href="speakers.html">Speakers</a></li>
      <li><a id="n5" href="sign-up.html">Sign Up</a></li>
      <li><a id="n6" href="location.html">Location</a></li>
      <li><a id="n7" href="travel-info.html">Travel Info</a></li>
      <li><a id="n8" href="news.html">News</a></li>      
    </ul>

Ben al aan het puzzelen geweest, maar krijg rare resultaten. Hopelijk kan iemand me vertellen wat ik moet veranderen in de code.
 
De code hieronder is aangepast voor een verticaal menu. Zoals je ziet heb ik alle menu-item dezelfde ID gegeven: "nav". Ze hadden allemaal een andere ID, met een absolute positie. Dat is voor een verticaal menu overbodig. Verder is "#navlist li" niet meer inline, en is "#navlist a" niet meer absoluut gepositioneerd. Dat zou het moeten doen.

#navlist{
margin-left: 0px;
padding-left: 0px;
white-space: nowrap;
position: absolute;
height: 27px;
width: 923px;
top: 143px;
}

#navlist li{
list-style-type: none;
}
#navlist a {
padding: 3px 10px;
background-image: url(images/button.gif);
height: 20px;
width: 91px;
display: inline;
text-align: center;
color: #fff;
font-family: "Arial", Trebuchet MS, Helvetica, sans-serif;
text-decoration: none;
}
#navlist a:hover{background-image: url(images/buttonover.gif);}
#nav { left: 0px}


HTML:

<ul id="navlist">
<li><a id="nav" href="index.html"><font color="#ffff00">Home</font></a></li>
<li><a id="nav" href="for-whom.html">For whom</a></li>
<li><a id="nav" href="program.html">Program</a></li>
<li><a id="nav" href="speakers.html">Speakers</a></li>
<li><a id="nav" href="sign-up.html">Sign Up</a></li>
<li><a id="nav" href="location.html">Location</a></li>
<li><a id="nav" href="travel-info.html">Travel Info</a></li>
<li><a id="nav" href="news.html">News</a></li>
</ul>
 
Oeps! Een id is een uniek kenmerk, daarvan mag er maar één op een pagina gebruikt worden. In elk geval moeten alle id="nav" omgezet worden naar class="nav", en in de css ook.
Nu wat weinig tijd om de codes te bekijken, maar het kan waarschijnlijk ook zonder die classes.
Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
ben al weer enige tijd aan het puzzelen. Had mooie buttons uit de "leesvoer link" van css hunter ingebouwd in site. Ga ik testen.... jawel IE6 en IE7 zijn weer de spelbrekers. In andere browsers prima. In IE6 en IE7 gaan de knopjes over de hele paginabreedte.
Ik zal dus ergens een vaste breedte code moeten inbouwen denk ik, echter weet niet hoe.

dit staat in mijn xhtml
HTML: 
<div id="navcontainer">
<ul>
<li><a href="#"><img src="images/ir.jpg" width="16" alt="Dutch" border="0" /> knop1</a></li>
<li><a href="#"><img src="images/ir.jpg" width="16" alt="Dutch" border="0" /> knop2</a></li>
<li><a href="#"><img src="images/ir.jpg" width="16" alt="Dutch" border="0" /> knop3</a></li>
<li><a href="#"><img src="images/ir.jpg" width="16" alt="Dutch" border="0" /> knop4</a></li>
<li><a href="#"><img src="images/ir.jpg" width="16" alt="Dutch" border="0" /> knop5</a></li>
</ul>
</div>

en dit in de css

Code: 
#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
}

#navcontainer li { margin: 0 0 .2em 0; }

#navcontainer a
{
display: block;
color: #036;
background-color: transparent;
width: 9em;
padding: .2em .8em;
text-decoration: none;
border-top: 1px solid #fff;
border-left: 1px solid #fff;
border-right: 1px solid #036;
border-bottom: 1px solid #036;
}

#navcontainer a:hover
{
background-color: #369;
color: #FFF;
border-top: 1px solid #036;
border-left: 1px solid #036;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
}

weet iemand hoe ik probleem met IE6 en IE7 kan oplossen en knopjes dezelfde breedte houden als in IE8, FF en overige browsers?
 
kennelijk negeert IE6 en IE7 deze code: width: 9em;
weet iemand hoe ik ervoor kan zorgen dat deze code ook in IE6 en IE7 werkt?
 
Hoi merlijn16,
Hé, dat is merkwaardig. Als ik bovenstaande code inplak in een html-pagina, doen IE6 en IE7 het net zo goed als Firefox en IE8 (en Chrome, Opera en Safari): geen verschil!
Heb je er wel een goed Doctype boven staan, en ook geen ander foutje in html of css?

Met vriendelijke groet,
CSShunter
 
bedankt css hunter, ik had 1 foutje in html pagina. Als ik jou niet had...............
 
... dan moet je even mijn handtekening op een blauw geglazuurd tegeltje laten bakken en boven je pc hangen.
In dit geval was de eerste regel al afdoende:
  • Als een webpagina onverwachts niet doet wat je wilt, raadpleeg dan eerst even de html-validator, vóórdat je wanhopig aan de css gaat sleutelen.
;)
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan