Jump to content

Welcome to Geeks to Go - Register now for FREE

Need help with your computer or device? Want to learn new tech skills? You're in the right place!
Geeks to Go is a friendly community of tech experts who can solve any problem you have. Just create a free account and post your question. Our volunteers will reply quickly and guide you through the steps. Don't let tech troubles stop you. Join Geeks to Go now and get the support you need!

How it Works Create Account
Photo

css center


  • Please log in to reply

#1
Metallica

Metallica

    Spyware Veteran

  • GeekU Moderator
  • 33,101 posts
I do have a working solution, so this is not an urgent matter.

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?
  • 0

Advertisements







Similar Topics

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

As Featured On:

Microsoft Yahoo BBC MSN PC Magazine Washington Post HP