Just wondering about a menu I made:
body {
background-color: #88acbb;
background-image: url("gradient55895112.png");
background-repeat: repeat-y;
/* text-align: center; */
}
#navigatie {
font-family: verdana, Helvetica, Arial, sans-serif;
font-size: 14px;
font-weight: bold;
color: #ffffff;
border-right: 1px solid #88b6bb;
border-left: 1px solid #88b6bb;
border-bottom: 1px solid #88b6bb;
border-top: 1px solid #88b6bb;
padding: 0;
margin-bottom: 1em;
background-color: #88acbb;
}
#navigatie ul, #navigatie ul ul{
padding: 0;
margin: 0;
list-style: none;
background-color: #88acbb;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 75%;
}
#navigatie li{
width: 140px;
}
#navigatie ul{
position: absolute;
width: 100px;
left: -1000px;
margin: -22px 0 0 95px;
font-size: 100%;
list-style: none;
padding: 0;
}
* html #navigatie ul{
margin: -23px 0 0 95px;
}
#navigatie li li{
width: 100px;
}
#navigatie ul ul{
width: 140px;
margin: -22px 0 0 100px;
font-size: 100%;
}
* html #navigatie ul ul{
margin: -23px 0 0 100px;
}
#navigatie ul li {
width: 180px;
margin: 0;
border-top: 1px solid #88b6bb;
}
#navigatie ul li a {
display: block;
padding: 2px 2px 2px 4px;
border-left: 10px solid #88b6bb;
border-right: 10px solid #cccccc;
border-bottom: 1px solid #88b6bb;
border-top: 0px solid #88b6bb;
background-color: #88acbb;
font-family: Verdana;
color: #000000;
text-decoration: none;
width: 100%;
}
#navigatie li li li{
width: 200px;
}
#navigatie li:hover ul, #navigatie li.ie_does_hover ul{
left: auto;
}
#navigatie li:hover ul ul, #navigatie li.ie_does_hover ul ul{
left: -1000px;
}
#navigatie ul li:hover ul, #navigatie ul li.ie_does_hover ul{
left: auto;
}
#navigatie a {
display: block;
text-decoration: none;
padding: 2px 4px 3px 4px;
margin: 1px;
}
#navigatie a:link, #navigatie a:visited{
display: block;
padding: 2px 2px 2px 4px;
border-left: 10px solid #88b6bb;
border-right: 10px solid #cccccc;
border-bottom: 1px solid #88b6bb;
border-top: 0px solid #88b6bb;
background-color: #88acbb;
font-family: Verdana;
color: #000000;
text-decoration: none;
width: 100%;
}
#navigatie a:hover, #navigatie a:active{
border-left: 10px solid #88acbb;
border-right: 10px solid #88acbb;
border-bottom: 1px solid #88b6bb;
border-top: 0px solid #88b6bb;
background-color: #88b6bb;
color: #eee;
}
If I use the text-align: center; in the body that messes up the menu, so now I used this line
<div id="foto" style="position: absolute;left: 290px;top: 130px; text-align: center;">
in the HTML code to get the text centered in the div where I need it.
Not very elegant, but it works.
Is there a more elegant solution?