View Full Version : CSS menu bar
dhummelen
01-29-2009, 03:36 PM
I'm having a real problem figuring out how to fix/create this menu. And by now i'm just pushing buttons to see if it does anny thing…
This is what i'm trying to make…
http://farm4.static.flickr.com/3459/3235124990_1d44a633ee_o.jpg
And i'm getting this…
http://farm4.static.flickr.com/3314/3234273909_07b3e6b994_o.png
width="340" height="75" alt="Afbeelding 1" /></a>
I'm using unotherd list for the menu and a ul in a ul for the sub menu.
Can anny boddy help me
dhummelen
01-29-2009, 03:38 PM
This is the CSS I'm using
#header {
margin: 0px;
height: 70px;
background-color: #FFF;
width: 430px;
float: right;
padding-top: 0px;
padding-right: 5px;
padding-bottom: 0px;
}
#header ul {
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
color: #aa113f;
}
#header ul li {
display: inline;
}
#header ul li a {
float: left;
height: 38px;
width: 75px;
border: 1px solid #aa113f;
padding: 15px;
font-size: 1.1em;
font-weight: normal;
text-align: center;
clear: none;
color: #aa113f;
}
#header ul li a:hover {
color: #a19160;
border-color: #a19160;
}
#header ul li h4 {
font-size: 0.8em;
background-color: #aa113f;
color: #FFF;
font-weight: normal;
width: 107px;
margin: 0px;
float: left;
padding-top: 5px;
padding-right: 0px;
padding-bottom: 5px;
padding-left: 0px;
text-align: center;
position: absolute;
display: inline;
overflow: visible;
}
#header ul li p {
font-size: 0.5em;
text-align: center;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
float: left;
display: inline;
width: 105px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
position: absolute;
margin-top: 23px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 9px;
padding-right: 0px;
padding-bottom: 9px;
padding-left: 0px;
clear: none;
}
#header ul li p a {
margin: 0px;
padding: 0px;
height: 0px;
width: 0px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
clear: none;
float: none;
dhummelen
01-29-2009, 03:38 PM
And the html
<div id="header">
<ul>
<li><a href="koken_op_locatie.html">koken op locatie</a></li>
<li><h4>thema menu's </h4>
<p><a href="index.html">kloostermenu</a> | <a href="index.html">dag van
de zorg</a> | <a href="index.html">Afternoon tea's</a> | <a href="index.html">16e eews tafelen</a></p>
</li>
<li><a href="work_shops.html">work shops</a></li>
<li><a href="patisserie.html">patisserie</a></li>
</ul>
</div>
Powered by vBulletin® Version 4.2.2 Copyright © 2021 vBulletin Solutions, Inc. All rights reserved.