Jump to content

Welcome to Geeks to Go - Register now for FREE

Geeks To Go is a helpful hub, where thousands of volunteer geeks quickly serve friendly answers and support. Check out the forums and get free advice from the experts. Register now to gain access to all of our features, it's FREE and only takes one minute. Once registered and logged in, you will be able to create topics, post replies to existing threads, give reputation to your fellow members, get your own private messenger, post status updates, manage your profile and so much more.

Create Account How it Works
Photo

css center


  • Please log in to reply

#1
Metallica

Metallica

    Spyware Veteran

  • GeekU Moderator
  • 31,676 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