Hi everyone,
I have a small problem that I'm tearing my hair out over.
On my site I have a CSS roll-over menu. Nothing flash, nothing fancy, and here's the HTML that draws it.
<ul id="page-nav">
<li id="home" class="first">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.jasonmhirst.co.uk/index2.php">Home</a></li>
<li id="projects"><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.jasonmhirst.co.uk/projects/index.php">
Projects</a></li>
<li id="retroremakes">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.jasonmhirst.co.uk/retroremakes/index.php">Retro remakes</a></li>
<li id="emulation">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.jasonmhirst.co.uk/emulation/index.php">Emulation</a></li>
<li id="links"><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.jasonmhirst.co.uk/links/index.php">Links</a></li>
<li id="about"><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.jasonmhirst.co.uk/about/index.php">About</a></li>
<li id="contact"><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.jasonmhirst.co.uk/contact/index.php">Contact</a></li>
</ul>
The CSS that's attached has the following...
#page-nav {
display: block;
list-style-type:none;
}
#page-nav li {
margin: 0;
padding: 0;
float:left;
background: #e6e6e6 url(images/button-bg.png) right repeat-y;
background-position: center;
}
#page-nav li a {
float:left;
display: block;
border: 1px solid #3e4e2f;
border-width: 1px 1px 1px 0;
padding: 3px 10px;
color: #333;
text-decoration: none;
background: transparent url(images/button-ridge.gif) top left no-repeat;
font-size: 10pt;
font-family: verdana, sans-serif;
}
#page-nav li.first a {
border-width: 1px 1px 1px 1px;
}
#page-nav li a img {
border: 0;
vertical-align: middle;
margin-right: 1px;
}
The problem I have is that for the life of me, I can't get the menu centered. I've tried all the horizontal 'hacks' out there, but this damn menu will not centre! I've even tried encapsulating the menu in a DIV of it's own, but still it won't centre!
Any ideas on how to achieve it?
Many thanks.Try adding width:100px; margin:0, auto to #page-navHi, many thanks for the reply.
I'm afraid that doesn't work. I did try something similar before as it does make perfect sense, but no, nothing
Thanks anyway.Try using <div style="text-align:center;">content to be centered.</div>Guess what? Nope! Didn't even move I'm afraid!
I've seen someone else mention this months ago (not on here), and it was a pain in the rear to sort apparently, but can be done.
Of course, I could go down the road of using a CSS/DIV enabled menu without the UL and LI tags, but I don't know of any lol!
Thanks again for the help though...Are you trying to center the nav in the div, or the div in the page?The only way I know of is if you make a div, and then center the div, so do something with your CSS like this...
body {
text-align: center;
}
#container {
margin-left: auto;
margin-right: auto;
width: ____px;
}
That would do it, that is implying a container div is used, but you get the idea...@soccer362001
I'm trying to centre the menu on the page. I've been told (again, trying to remember the post I saw from months ago) that it is difficult because it's a none-fixed width. If I said the menu was, say, 500px then I could get round it that way. But of course my menu may change in the future and I'm sure there's a better way of doing it rather than to keep trying actual pixel widths of the menu to achieve the effect.
@Neczy
Many thanks for that. I've tried that, obviously changed the _____px to a size (made it 790px) but it still remains the same.
For what it's worth, I now have...
<div id="#container">
<ul id="page-nav">
<li id="home" class="first">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.jasonmhirst.co.uk/index2.php">Home</a></li>
<li id="projects"><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.jasonmhirst.co.uk/projects/index.php">
Projects</a></li>
<li id="retroremakes">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.jasonmhirst.co.uk/retroremakes/index.php">Retro remakes</a></li>
<li id="emulation">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.jasonmhirst.co.uk/emulation/index.php">Emulation</a></li>
<li id="links"><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.jasonmhirst.co.uk/links/index.php">Links</a></li>
<li id="about"><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.jasonmhirst.co.uk/about/index.php">About</a></li>
<li id="contact"><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.jasonmhirst.co.uk/contact/index.php">Contact</a></li>
</ul></div>
and the CSS now reads...
#container {
margin-left: auto;
margin-right: auto;
width: 790px;
}
#page-nav {
margin:0, auto
display: block;
list-style-type:none;
}
#page-nav li {
margin: 0;
padding: 0;
float:left;
background: #e6e6e6 url(images/button-bg.png) right repeat-y;
background-position: center;
}
#page-nav li a {
float:left;
display: block;
border: 1px solid #3e4e2f;
border-width: 1px 1px 1px 0;
padding: 3px 10px;
color: #333;
text-decoration: none;
background: transparent url(images/button-ridge.gif) top left no-repeat;
font-size: 10pt;
font-family: verdana, sans-serif;
}
But it's still in the same place.
The page is at <!-- w --><a class="postlink" href="http://www.jasonmhirst.co.uk/index2.php">www.jasonmhirst.co.uk/index2.php</a><!-- w --> if you want to see it.
Thanks again for the help...Okay what you need to do is take 790 divide by 7 and calculate how wide each link should be, including padding. Then include that total as a width for the <li>. See if that'll get it to work. I'm not sure about this, but I don't feel like testing it.
LOL - Er, yeah, thank you
I have a small problem that I'm tearing my hair out over.
On my site I have a CSS roll-over menu. Nothing flash, nothing fancy, and here's the HTML that draws it.
<ul id="page-nav">
<li id="home" class="first">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.jasonmhirst.co.uk/index2.php">Home</a></li>
<li id="projects"><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.jasonmhirst.co.uk/projects/index.php">
Projects</a></li>
<li id="retroremakes">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.jasonmhirst.co.uk/retroremakes/index.php">Retro remakes</a></li>
<li id="emulation">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.jasonmhirst.co.uk/emulation/index.php">Emulation</a></li>
<li id="links"><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.jasonmhirst.co.uk/links/index.php">Links</a></li>
<li id="about"><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.jasonmhirst.co.uk/about/index.php">About</a></li>
<li id="contact"><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.jasonmhirst.co.uk/contact/index.php">Contact</a></li>
</ul>
The CSS that's attached has the following...
#page-nav {
display: block;
list-style-type:none;
}
#page-nav li {
margin: 0;
padding: 0;
float:left;
background: #e6e6e6 url(images/button-bg.png) right repeat-y;
background-position: center;
}
#page-nav li a {
float:left;
display: block;
border: 1px solid #3e4e2f;
border-width: 1px 1px 1px 0;
padding: 3px 10px;
color: #333;
text-decoration: none;
background: transparent url(images/button-ridge.gif) top left no-repeat;
font-size: 10pt;
font-family: verdana, sans-serif;
}
#page-nav li.first a {
border-width: 1px 1px 1px 1px;
}
#page-nav li a img {
border: 0;
vertical-align: middle;
margin-right: 1px;
}
The problem I have is that for the life of me, I can't get the menu centered. I've tried all the horizontal 'hacks' out there, but this damn menu will not centre! I've even tried encapsulating the menu in a DIV of it's own, but still it won't centre!
Any ideas on how to achieve it?
Many thanks.Try adding width:100px; margin:0, auto to #page-navHi, many thanks for the reply.
I'm afraid that doesn't work. I did try something similar before as it does make perfect sense, but no, nothing
Thanks anyway.Try using <div style="text-align:center;">content to be centered.</div>Guess what? Nope! Didn't even move I'm afraid!
I've seen someone else mention this months ago (not on here), and it was a pain in the rear to sort apparently, but can be done.
Of course, I could go down the road of using a CSS/DIV enabled menu without the UL and LI tags, but I don't know of any lol!
Thanks again for the help though...Are you trying to center the nav in the div, or the div in the page?The only way I know of is if you make a div, and then center the div, so do something with your CSS like this...
body {
text-align: center;
}
#container {
margin-left: auto;
margin-right: auto;
width: ____px;
}
That would do it, that is implying a container div is used, but you get the idea...@soccer362001
I'm trying to centre the menu on the page. I've been told (again, trying to remember the post I saw from months ago) that it is difficult because it's a none-fixed width. If I said the menu was, say, 500px then I could get round it that way. But of course my menu may change in the future and I'm sure there's a better way of doing it rather than to keep trying actual pixel widths of the menu to achieve the effect.
@Neczy
Many thanks for that. I've tried that, obviously changed the _____px to a size (made it 790px) but it still remains the same.
For what it's worth, I now have...
<div id="#container">
<ul id="page-nav">
<li id="home" class="first">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.jasonmhirst.co.uk/index2.php">Home</a></li>
<li id="projects"><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.jasonmhirst.co.uk/projects/index.php">
Projects</a></li>
<li id="retroremakes">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.jasonmhirst.co.uk/retroremakes/index.php">Retro remakes</a></li>
<li id="emulation">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.jasonmhirst.co.uk/emulation/index.php">Emulation</a></li>
<li id="links"><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.jasonmhirst.co.uk/links/index.php">Links</a></li>
<li id="about"><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.jasonmhirst.co.uk/about/index.php">About</a></li>
<li id="contact"><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.jasonmhirst.co.uk/contact/index.php">Contact</a></li>
</ul></div>
and the CSS now reads...
#container {
margin-left: auto;
margin-right: auto;
width: 790px;
}
#page-nav {
margin:0, auto
display: block;
list-style-type:none;
}
#page-nav li {
margin: 0;
padding: 0;
float:left;
background: #e6e6e6 url(images/button-bg.png) right repeat-y;
background-position: center;
}
#page-nav li a {
float:left;
display: block;
border: 1px solid #3e4e2f;
border-width: 1px 1px 1px 0;
padding: 3px 10px;
color: #333;
text-decoration: none;
background: transparent url(images/button-ridge.gif) top left no-repeat;
font-size: 10pt;
font-family: verdana, sans-serif;
}
But it's still in the same place.
The page is at <!-- w --><a class="postlink" href="http://www.jasonmhirst.co.uk/index2.php">www.jasonmhirst.co.uk/index2.php</a><!-- w --> if you want to see it.
Thanks again for the help...Okay what you need to do is take 790 divide by 7 and calculate how wide each link should be, including padding. Then include that total as a width for the <li>. See if that'll get it to work. I'm not sure about this, but I don't feel like testing it.
LOL - Er, yeah, thank you