|
CSS - Need Help Centering Nav Menu
Hi, I have a client that wanted me to develop a horizontal navigation menu bar along with a sub-menu that appears horizontal right under the original.
My question is, is with the code that I have, I cannot seem to center the menu elements so that either the links are centered on the navigation bar, or so that the width of the links spread out across the whole bar. I have tried numerous tasks such as switching paddings, margins, and width of certain elements, but if anyone can help me find a solution that would be great. I have it hosted if you want to see what it looks like to get an idea. jelc.hostzi.com/Home CSS: Code: .droplinebar{
overflow: hidden;
}
.droplinebar ul{
margin: 0;
padding: 0;
float: left;
width: 800px;
border-top-style: ridge;
border-top-width: 2px;
border-bottom-style: ridge;
border-bottom-width: 2px;
font: bold 13px Arial;
background: #242c54 url('../Images/bluedefault.gif') center center repeat-x; /*default background of menu bar*/
}
.droplinebar ul li{
display: inline;
}
.droplinebar ul li a{
float: left;
color: white;
padding: 9px 11px;
text-decoration: none;
}
.droplinebar ul li a:visited{
color: white;
}
.droplinebar ul li a:hover, .droplinebar ul li .current{ /*background of main menu bar links onMouseover*/
color: white; background: transparent url('../Images/blueactive.gif') center center repeat-x;
}
/* Sub level menus*/
.droplinebar ul li ul{
position: absolute;
z-index: 100;
left: 0; top: 0;
background: #303c76; /*sub menu background color */ visibility: hidden;
}
/* Sub level menu links style */
.droplinebar ul li ul li a{
font: normal 13px Verdana;
padding: 6px;
padding-right: 8px;
margin: 0;
border-bottom: 1px solid navy;
}
.droplinebar ul li ul li a:hover{
/*sub menu links' background color onMouseover */
background: #242c54; }
Thanks for all of the help in advance! Similar TutorialsHi, I cannot get the main menu on this site to center correctly in Firefox: Code is: PHP Code: #navcontainer { background: url(../../images/background_main_menu.jpg); height: 33px; width: 590px; font: 12px Verdana, sans-serif; } #navlist { margin: 0; } #navlist ul, #navlist li { margin: 0; display: inline; list-style-type: none; vertical-align: middle; padding-left: 5px; padding-right: 5px; } #navlist a:link, #navlist a:visited { font-weight: bold; margin: 0 2px 4px 2px; text-decoration: none; color: #FFFFFF; } #navlist a:hover { color: #527D24; } <div align="center"> <div id="navcontainer"> <ul id="navlist"> <li style="padding-bottom: 14px;"><a href="index.php">home</a></li> <li><img src="images/main_menu_seperator.jpg" width="24" height="30" alt="" /></li> <li style="padding-bottom: 14px;"><a href="#">about</a></li> <li><img src="images/main_menu_seperator.jpg" width="24" height="30" alt="" /></li> <li style="padding-bottom: 14px;"><a href="#">services</a></li> <li><img src="images/main_menu_seperator.jpg" width="24" height="30" alt="" /></li> <li style="padding-bottom: 14px;"><a href="links.php">links</a></li> <li><img src="images/main_menu_seperator.jpg" width="24" height="30" alt="" /></li> <li style="padding-bottom: 14px;"><a href="#">gallery</a></li> <li><img src="images/main_menu_seperator.jpg" width="24" height="30" alt="" /></li> <li style="padding-bottom: 14px;"><a href="#">contact</a></li> </ul> </div> </div> I'm an idiot when it comes to CSS, so please bare with me as I pose this seemingly simple question... Seems as if I've tried everything, playing with all of the properties in Firebug, but to no avail. I simply want this menu centered with some extra padding between the items. Please help! The live site is at www.danazilber.com/content. Code: .screen-reader-text { position: absolute; left: -9000px; } #access { /* display: block; float: left; margin: 0 auto; width: 940px; */ float: left; margin-top: 30px; } #access .menu-header, div.menu { font-size: 13px; margin: 0 auto; } #access .menu-header ul, div.menu ul { list-style: none; margin: 0; } #access .menu-header li, div.menu li { float: left; position: relative; } #access a { color: #363636; font-size: 13px; text-transform:uppercase; display: block; /*line-height: 30px;*/ padding: 0 10px; padding-bottom: 10px; text-decoration: none; font-weight: bold; } #access ul ul { box-shadow: 0px 3px 3px rgba(0,0,0,0.2); -moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2); -webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2); display: none; position: absolute; /*top: 30px;*/ left: 0; float: left; width: 180px; z-index: 99999; } #access ul ul li { min-width: 180px; } #access ul ul ul { left: 100%; top: 0;} #access ul ul a { background: #FFF; color: #6A6A6A; line-height: 1em; padding: 10px; width: 160px; height: auto; font-size:10px;} /* #access li:hover > a, #access ul ul :hover > a { background: #333; color: #fff;} */ #access li:hover > a { color:#888; } #access ul ul :hover > a { background: #ACCB50; color: #FFF;} #access ul li:hover > ul { display: block; } /* #access ul li.current_page_item > a, #access ul li.current-menu-ancestor > a, #access ul li.current-menu-item > a, #access ul li.current-menu-parent > a { color: #6A6A6A; } */ * html #access ul li.current_page_item a, * html #access ul li.current-menu-ancestor a, * html #access ul li.current-menu-item a, * html #access ul li.current-menu-parent a, * html #access ul li a:hover { color: #fff; }
I am having a lot of trouble with a menu I created. It works fine in firefox, but does not display properly in IE. I created a page with images and code to explain the problem he chrisbanker.com/cb_com_new/help.html If anyone could help me out, that would be great. This is the one thing that is holding me back from putting this new site up. Please reply or email cbanker[at]gmail[dot]com if you have any advice. Thanks, Chris Hi All: Im having a difficult time trying to center a menu on my site. ANy help greatly appreciated. Here is the temporary page margueritewedwardsartist. com / home1. htm and here is the css code im using. all i changed was thew text-align:center on the 2nd line. all other code was generated by the menu maker. Any help is greatly appreciated. chris ------------------- .bg {background: url(images/button4.gif);} .menu {text-align:center; margin:0; list-style:none; height:40px; background:#fff url(images/button1a.gif) repeat-x; position:relative; font-family:arial, verdana, sans-serif; } .menu li.top {display:block; float:left; position:relative;} .menu li a.top_link {display:block; float:left; height:40px; line-height:33px; color:#bbb; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursorointer;} .menu li a.top_link span {float:left; font-weight:bold; display:block; padding:0 24px 0 12px; height:40px;} .menu li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:40px; background:url(images/down.gif) no-repeat right top;} .menu li a.top_link:hover {color:#000; background: url(images/button4.gif) no-repeat;} .menu li a.top_link:hover span {background:url(images/button4.gif) no-repeat right top;} .menu li a.top_link:hover span.down {background:url(images/button4a.gif) no-repeat right top;} .menu li:hover > a.top_link {color:#000; background: url(images/button4.gif) no-repeat;} .menu li:hover > a.top_link span {background:url(images/button4.gif) no-repeat right top;} .menu li:hover > a.top_link span.down {background:url(images/button4a.gif) no-repeat right top;} .menu table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;} .menu a:hover {visibility:visible;} .menu li:hover {position:relative; z-index:200;} .menu ul, .menu :hover ul ul, .menu :hover ul :hover ul ul, .menu :hover ul :hover ul :hover ul ul, .menu :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;} .menu :hover ul.sub {left:2px; top:40px; right:2px; background: #fff; padding:3px 0; border:1px solid #999999; white-space:nowrap; width:200px; height:auto;} .menu :hover ul.sub li {display:block; height:20px; position:relative; float:left; width:250px;} .menu :hover ul.sub li a {font-weight:normal;display:block; font-size:11px; height:20px; width:192px; line-height:20px; text-indent:5px; color:#000; text-decoration:none; border:3px solid #fff; border-width:0 0 0 3px;} .menu :hover ul.sub li a.fly {background:#fff url(images/arrow.gif) 80px 7px no-repeat;} .menu :hover ul.sub li a:hover {background:#999999; color:#fff;} .menu :hover ul.sub li a.fly:hover {background:#999999 url(images/arrow_over.gif) 80px 7px no-repeat; color:#fff;} .menu :hover ul li:hover > a.fly {background:#999999 url(images/arrow_over.gif) 80px 7px no-repeat; color:#fff;} .menu :hover ul :hover ul, .menu :hover ul :hover ul :hover ul, .menu :hover ul :hover ul :hover ul :hover ul, .menu :hover ul :hover ul :hover ul :hover ul :hover ul {left:90px; top:-4px; background: #fff; padding:3px 0; border:1px solid 999999; white-space:nowrap; width:93px; z-index:200; height:auto;} Hello I have a site uptogether but having a problem with my top navuigation.I have my whole pag centered in the container but the navigation is to the left and i cant seem to move it.Here is the code I have used for the navigation :- #navigation { BACKGROUND: url(../_images/navbg.jpg) #0038ba repeat-x; WIDTH: 700px; HEIGHT: 35px; } #menu { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 12px; FLOAT: left; PADDING-BOTTOM: 0px; COLOR: #ffffff; PADDING-TOP: 11px } #menu .item { PADDING-RIGHT: 20px; PADDING-LEFT: 20px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; TEXT-DECORATION: none } #menu .item A { COLOR: #ffffff; TEXT-DECORATION: none } #menu .item A:hover { COLOR: #ffc45d; TEXT-DECORATION: none } #categories { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FLOAT: right; PADDING-BOTTOM: 0px; WIDTH: 240px; PADDING-TOP: 9px; TEXT-ALIGN: center } .catSelect { FONT-SIZE: 100%; WIDTH: 200px } .catSelectOrange { BACKGROUND: #ffae22 } Can anyone help me please. Cheers Stevo!! Well I have this code for my menu
Code: div.menu{
align-text: center;
float: left;
background-color: #FFFFFF;
color: #000000;
border-top:0.1em solid #000000;
border-right:0.1em solid #000000;
border-bottom:0.1em solid #000000;
height: 500px;
width: 150px;
}
But It doesnt center the links. Here is the out put http://blacknine.dajoob.com/hhd/ Hello, I have a vertical menu on the left hand side of my page that I'm working on. I'm trying to center the text vertically in each box as some menu names take up two lines and are skewing the alignment. Here's the code I'm using for the menu: Code:
#menu {
clear: left;
float: left;
width: 150px;
margin: 0 0 10px 0;
padding: 0;
font-size: 0.9em;
}
#menu ul {
list-style: none;
width: 150px;
margin: 0 0 20px 0;
padding: 0;
font-size: 10px;
}
#menu li {
margin-bottom: 4px; /* space between each menu item */
}
#menu li a { /* text */
font-weight: bold;
height: 25px; /* height of menu tabs */
text-decoration: none;
color: #505050;
display: block;
padding-left: 10px;
padding-top: 5px;
background: #f4f4f4;
border-left: 4px solid #cccccc;
}
#menu li a:hover {
background: #eaeaea;
color: #286ea0;
border-left: 4px solid #286ea0;
}
If anyone could help me out that'd be great. Thanks! Hi I hope this is going to be a simple question!! I have used the suckerfish menu and all I would like to do is have the menu in the center of the page with a blue border extending from the sides of the menu to the edge of the page. The page can be viewed on http://uk.geocities.com/g_foxon/example1.htm cheers Wistar I have a CSS dropdown menu with 1 sublevel which I want centered on my page. It looks fine when centered if I use Firefox, but in IE, the sublevels now pop out to the right of the main item and the 1st item doesnt show. Here's my CSS for IE: Code: div.menu
{
position:relative;
height:30px;
display:block;
margin: 0 auto;
text-align:left;
}
ul.menu
{
top:0px;
left:0px;
position:relative;
padding:0px;
margin: 0 auto;
display:block;
float:left;
}
ul.menu li {
float:left;
}
ul.menu ul
{
position:relative;
margin:0px;
top:0px;
left:0px;
padding:0px;
display:block;
}
ul.menu ul li
{
display:inline;
float:none;
position:relative;
top:0px;
left:0px;
}
a.menu
{
display:block;
width:100px;
height:30px;
margin-top:-4px;
}
a.menu:hover
{
display:block;
}
And my HTML: Code: <body onload="MM_preloadImages('../Pictures/CoachesY.png','../Pictures/ScheduleY.png','../Pictures/RostersY.png','../Pictures/Sub Buttons/CoachHenriottY.jpg','../Pictures/Sub Buttons/CoachWitteY.jpg','../Pictures/Sub Buttons/CoachSchneiderY.jpg','../Pictures/Sub Buttons/CoachReevesY.jpg','../Pictures/Sub Buttons/FreshmanY.jpg','../Pictures/Sub Buttons/JVY.jpg','../Pictures/Sub Buttons/VarsityY.jpg','../Pictures/CampsY.png','../Pictures/SummerInfoY.png','../Pictures/LinksY.png','../Pictures/YouthInfoY.png','../Pictures/DirectionsY.png')" align="center">
<table width="690" align="center" bgcolor=#8560A9>
<tr><td bordercolor="#FFFFFF" bgcolor="#8560A9">
<table width="690" border="0" align="center">
<tr bgcolor="#FFFFFF" height="227">
<td height="15" bgcolor="#8560A9"><div id="center"><img src="../Pictures/TitlePhoto.jpg" alt="Lady Elks Basketball" width="800" height="200" /><br />
<div class="menu">
<ul class="menu">
<li><a class="menu" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image1','','../Pictures/CoachesY.png',1)"><img src="../Pictures/CoachesP.png" name="Image1" width="100" height="30" border="0" id="Image1" /></a>
<ul>
<li><a class="menu" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','../Pictures/Sub Buttons/CoachHenriottY.jpg',1)"><img src="../Pictures/Sub Buttons/CoachHenriottP.jpg" name="Image4" width="100" height="30" border="0" id="Image4" /></a></li>
<li><a class="menu" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','../Pictures/Sub Buttons/CoachWitteY.jpg',1)"><img src="../Pictures/Sub Buttons/CoachWitteP.jpg" name="Image5" width="100" height="30" border="0" id="Image5" /></a></li>
<li><a class="menu" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image6','','../Pictures/Sub Buttons/CoachSchneiderY.jpg',1)"><img src="../Pictures/Sub Buttons/CoachSchneiderP.jpg" name="Image6" width="100" height="30" border="0" id="Image6" /></a></li>
<li><a class="menu" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image7','','../Pictures/Sub Buttons/CoachReevesY.jpg',1)"><img src="../Pictures/Sub Buttons/CoachReevesP.jpg" name="Image7" width="100" height="30" border="0" id="Image7" /></a></li>
</ul>
</li>
</ul>
<ul class="menu">
<li><a class="menu" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','../Pictures/ScheduleY.png',1)"><img src="../Pictures/ScheduleP.png" name="Image2" width="100" height="30" border="0" id="Image2" /></a>
<ul>
<li><a class="menu" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image8','','../Pictures/Sub Buttons/FreshmanY.jpg',1)"><img src="../Pictures/Sub Buttons/FreshmanP.jpg" name="Image8" width="100" height="30" border="0" id="Image8" /></a></li>
<li><a class="menu" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image9','','../Pictures/Sub Buttons/JVY.jpg',1)"><img src="../Pictures/Sub Buttons/JVP.jpg" name="Image9" width="100" height="30" border="0" id="Image9" /></a></li>
<li><a class="menu" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image10','','../Pictures/Sub Buttons/VarsityY.jpg',1)"><img src="../Pictures/Sub Buttons/VarsityP.jpg" name="Image10" width="100" height="30" border="0" id="Image10" /></a></li>
</ul>
</li>
</ul>
<ul class="menu">
<li> <a class="menu" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','../Pictures/RostersY.png',1)"><img src="../Pictures/RostersP.png" name="Image3" width="100" height="30" border="0" id="Image3" /></a>
<ul>
<li><a class="menu" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image13','','../Pictures/Sub Buttons/FreshmanY.jpg',1)"><img src="../Pictures/Sub Buttons/FreshmanP.jpg" name="Image13" width="100" height="30" border="0" id="Image13" /></a></li>
<li><a class="menu" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image12','','../Pictures/Sub Buttons/JVY.jpg',1)"><img src="../Pictures/Sub Buttons/JVP.jpg" name="Image12" width="100" height="30" border="0" id="Image12" /></a></li>
<li><a class="menu" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image11','','../Pictures/Sub Buttons/VarsityY.jpg',1)"><img src="../Pictures/Sub Buttons/VarsityP.jpg" name="Image11" width="100" height="30" border="0" id="Image11" /></a></li>
</ul>
</li>
</ul>
<ul class="menu">
<li><a class="menu" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image14','','../Pictures/CampsY.png',1)"><img src="../Pictures/CampsP.png" name="Image14" width="100" height="30" border="0" id="Image14" /></a></li>
</ul>
<ul class="menu">
<li><a class="menu" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image15','','../Pictures/SummerInfoY.png',1)"><img src="../Pictures/SummerInfoP.png" name="Image15" width="100" height="30" border="0" id="Image15" /></a></li>
</ul>
<ul class="menu">
<li><a class="menu" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image16','','../Pictures/LinksY.png',1)"><img src="../Pictures/LinksP.png" name="Image16" width="100" height="30" border="0" id="Image16" /></a></li>
</ul>
<ul class="menu">
<li><a class="menu" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image17','','../Pictures/YouthInfoY.png',1)"><img src="../Pictures/YouthInfoP.png" name="Image17" width="100" height="30" border="0" id="Image17" /></a></li>
</ul>
<ul class="menu">
<li><a class="menu" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image18','','../Pictures/DirectionsY.png',1)"><img src="../Pictures/DirectionsP.png" name="Image18" width="100" height="30" border="0" id="Image18" /></a></li>
</ul>
</div><br />
</div> </td>
</tr>
</table>
</td></tr></table>
</div>
</body>
Any help would be appreciated. First of all, this is my first post, so take it easy on me if I do something wrong Onto the problem... I'm trying to center my CSS navigation menu. I'm probably making a completely moronic mistake, but I've been trying to figure this out for quite some time now to no avail. I've managed to ALMOST do it, but there's something wrong, and it's probably something minor. (Please excuse the sloppy coding; I'm just beginning to design the layout) HTML: Code: <div id="navigation">
<ul id="navigation">
<li><a href="page1.html" target="_self" title="Home" class="current">Home</a></li>
<li><a href="about.html" target="_self" title="About">About</a></li>
<li><a href="solutions/solutions.html" target="_self" title="Solutions">Solutions</a></li>
<li><a href="clients/clients.html" target="_self" title="Clients">Clients</a></li>
<li><a href="faq/faq.html" target="_self" title="FAQ">FAQ</a></li>
<li><a href="contact/contact.html" target="_self" title="Contact">Contact</a></li>
</ul></div>
<!-- end #navigation -->
CSS: Code: }
.twoColLiqRtHdr #navigation {
height: 37px;
background: #FFF url("images/menu-bg-yellow-orig.gif") repeat-x;
font-size: .9em;
font-family: "Lucida Grande", Verdana, sans-serif;
font-weight: bold;
margin-left: 0;
padding: 0;
}
#navigation ul, #navigation ul li {
list-style: none;
margin: 0;
padding: 0;
}
.twoColLiqRtHdr #navigation ul {
height: 37px;
margin: 0;
padding: 0;
text-align: center;
}
.twoColLigRtHdr #navigation ul li {
display: inline-block;
}
.twoColLiqRtHdr #navigation ul li a {
color: #777;
text-decoration: none;
padding: 2px 10px 0px;
height: 37px;
line-height: 200%;
margin: 0;
display: inline-block;
}
.twoColLiqRtHdr #navigation ul li a:hover {
color: #333;
}
.twoColLiqRtHdr #navigation ul li a.current {
color: #CC0A00;
background: #FFF url("images/current-bg-yellow.gif") repeat-x;
padding: 2px 10px 0px;
display: inline-block;
}
/*\*//*/
#navigation ul li a {
display: inline-block;
white-space: nowrap;
width: 1px;
}
#navigation ul {
padding-bottom: 0;
margin-bottom: -1px;
}
/**/
/*\*/
html #navigation ul li a {
padding: 0;
}
/**/
This is the result of my current coding: http://i75.photobucket.com/albums/i320/blockbusted/cssmenuproblem.jpg If anyone can shed some light on this problem of mine, I would greatly appreciate it! THANKS! (P.S. I know the CSS doesn't validate; I just validated it and I'm still having the same problem.) Hello, I currently have a site (left aligned) that has its own Javascript pulldown menu. Its is pretty standard with the sub-menu's being in their own layer and are shown on mouseover. My problem is that these sub-menus are currently set at an absolute left position (CSS) but, if centered, will appear in different places at different resolutions. Does anyone know if its possible to anchor a layer to a point from something on a different z-index? I did a search on the forums here and found a similar question but no responses. Thanks guys! Link: http://ajwells.org/mtmp/index.html How do I get the menu there to center on the screen? Ive tried a number of things and nothings worked as of yet. Or better yet, is there an easy way to make the menu on the left side going downward rather than left to right? Either would be great. thanks for the help. Let me start by saying I'm a PHP/MySQL guy, not a designer. I know enough CSS to get by, but my focus has been the data side, not the design side. Hell I usually just use tables so I don't have to mess with any of this crap. I guess it's come to the point where I need to update my design skills or be left in the dust (since you can outsource LAMP guys for $4 a friggin' hour now ) I'm using the pretty standard UL-LI menu set to display vertically. Now I've added a couple links and it's too big for one line if I want to maintain style at 800 x 600. I figured the easiest way was to let it wrap to 2 lines. It wraps fine, but everything is either left aligned or right. I'd like both of the rows to be centered. Is there an easy way to do this? Here's the general layout: PHP Code: // .main is the style for the container // #main is the positioning of this instance of main // .tree_menu_list is the vertical stuffs <div class="menu" id="main"> <ul class="tree_menu_list"> <li><a href="index.php">Home</a></li> <li><a href="index.php?p=vision">Vision</a></li> <li><a href="index.php?p=buying">Buying</a></li> <li><a href="index.php?p=renovation">Building</a></li> <li><a href="index.php?p=selling">Selling</a></li> <li><a href="index.php?p=payout">Payout</a></li> <li><a href="index.php?p=opportunities">Opportunities</a></li> <li><a href="index.php?p=services">Services</a></li> <li><a href="images.php">Photos</a></li> </ul> </div> Hello All, I am trying to get a "horizontal menu" in CSS to properly center in my "#topbar" dev which is basically a header that is 100% width of the page. I have the website name, then the menu which is to be centered directly below it. I have searched google for hours and found one website (I guess cause i'm new it won't let me put the url in here) and it broke down each section of the CSS and it says that to horizontally position the menu just add text-align: center; to the #tabsE ul section, but that doesn't change anything at all. I have also tried replacing the float values with margin-left: auto; and margin-right: auto; (I've used those to center images before) and that just destroys the menu (it all shifts to the right side of the screen, and spaces out vertically). I am really kind of stuck here, I'm pretty new to CSS and most the basics are clicking, it seems to me that centering items so far has been one of the biggest pains yet. Here is the CSS: Code: /*- Menu Tabs E--------------------------- */
#tabsE {
width:100%;
background:#000;
font-size:93%;
line-height:normal;
}
#tabsE ul {
margin:0;
padding:10px 10px 0 0px;
list-style:none;
}
#tabsE li {
display:inline;
margin:0;
padding:0;
}
#tabsE a {
text-align: center;
background:url("tableftE.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsE a span {
text-align: center;
display:block;
background:url("tabrightE.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#000;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsE a span {float:none;}
/* End IE5-Mac hack */
#tabsE a:hover span {
color:#FFFFFF;
}
#tabsE a:hover {
background-position:0% -42px;
}
#tabsE a:hover span {
background-position:100% -42px;
}
#tabsE #current a {
background-position:0% -42px;
}
#tabsE #current a span {
background-position:100% -42px;
}
I tried to post the HTML (its just a standard <ul> with list </ul>) but it won't let me, because it contains url's so, I can e-mail you that if neccesary. I truly appreciate any help you can offer. Thanks, Chris Good Evening, Am very glad to find this board. Am working on my first paid Joomla site - and the Suckerfish menu's do not seem to center, and I cannot find any directions on how to go about making them so. Also, many sites I've visited will scale to the size of the window open (until too small) - am using the JNS Epic Pro Template and was wondering if there was any CSS feature to program the whole site to scale as best possible. Hope this makes sense. Am not new to computers, but rather a newbie to Joomla and CSS (although I do know a little). If any further info is required, please just advise. Thanking you in advance ... going live on 7/1 ... test link: users.tpg.com.au/tetsuo/CSS_help/index.html Hi guys, Im really new to CSS, and doing a bit of crammed-study on it. I finally found a fix that worked on css list navigation that i could use that'll work in IE but i cant seem to center each menu item to each respective rollover image (the BG gifs). Some help on this would be greatly appreciated, i cant seem to find anything to fix this. I've tried several solutions (which is probably why my css might look like a huge mess). the css file is he users.tpg.com.au/tetsuo/CSS_help/awis.html Good evening, I'm trying to center a horizontal menu on a website, and I can't seem to get the right code tags in the write places. I'd like to get the links on the menu to center on the page, and perhaps to display in a consistent width text box. My menu bar is 900px, and there are 10 links, so for instance I would like to reduce these boxes containing the links to a consistent 90px. Any thoughts? website - http://www.squadron282.com CSS Code: Code:
.nav2 {clear: both; margin: 0px; padding: 0px; font-family: verdana, arial, sans serif; font-size: 1.0em;}
.nav2 ul {float: left; width: 900px; margin: 0px; padding: 0px; border-top: solid 1px rgb(54,83,151); border-bottom: solid 1px rgb(54,83,151); background-color: rgb(127,162,202); font-weight: bold; white-space:nowrap}
.nav2 li {display: inline; list-style: none; margin: 0px; padding: 0px;}
.nav2 li a {display: block; float: left; margin: 0px 0px 0px 0px; padding: 5px 10px 5px 10px; border-right: solid 1px rgb(54,83,151); color: rgb(255,255,255); text-transform: uppercase; text-decoration: none; font-size: 100%;}
.nav2 a:hover, .nav2 a.selected {color: rgb(50,50,50); text-decoration: none;}
.buffer {clear: both; width: 900px; height: 30px; margin: 0px; padding: 0px; background-color: rgb(255,255,255);}
HTML Code: Code: <div class="nav2"> <ul> <li><a href="index.html">Home</a></li> <li><a href="missions.html" class="selected">CAP Missions</a></li> <li><a href="sqinfo.html">Squadron Info</a></li> <li><a href="commanderscorner.html">Commander's Corner</a></li> <li><a href="resources.html">Member Resources</a></li> <li><a href="pics.html">Photo Gallery</a></li> <li><a href="contact.html">Contact Us</a></li> <li><a href="sitemap.html">Sitemap</a></li> </ul> </div> How do I align menu elements of my menu? In Mozilla the elements are leaning conpletely to the left of the screen and doing somewhat what they're supposed to do in internet explorer. To put it simply I'd just like to have the same style class used to center the menu items in both Mozilla and Internet explorer. Heres the html page : Code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" title="thisstyle CSS"></head><body>
<style>
body
{
background-color: limegreen;
<font FACE="Lucida Console">
}
</style>
</head>
<body>
<div id="menu">
<ul align="center">
<li><a href="users/register.php">Join</a></li>
<li><a href="users/Log_in.php">Login</a></li>
<li><a href="users/help/tour.html" >Tour</a></li>
<li><a href="users/contact.php">Contact</a></li>
</ul>
</div>
</body></html>
Heres the css style sheet : Code:
#menu {
clear: both;
margin: 30; padding: 0 40px 0 0;
background: url(menu.jpg) repeat-y center top;
font: bold 12px/26px Lucida Console;
height: 26px;
background: #006633;
}
#menu ul {
float: left;
list-style: none;
margin-top:0; padding: 0;
margin-right:0; padding: 0;
margin-bottom:0; padding: 0;
margin-left:90; padding: 0;
}
#menu ul li {
display: inline;
}
#menu ul li a {
display: inline;
float: left;
padding-top: 0px;
padding-right: 28px;
padding-bottom: 0px;
padding-left:8px;
color: gold;
text-decoration: none;
}
#menu ul li a:hover {
background-color: #ffff33;
color: #006633;
}
#menu ul li#current a {
background-color: #eee;
color: #333;
}
Thanks Hey Everyone, I would greatly appreciate any help. I created a drop down menu and it works perfectly on all browsers except for Internet Explorer. The ONLY issue is that it centers the text on the drop down. It should be LEFT aligned. If you see the menu on any other browser EXCEPT for Internet Explorer, you can see how its supposed to look. The drop down menu items should just be left aligned. See: ratemodifiers.com/menu.htm Thanks for all help!! Id appreciate all help! thank you so much Good morning I can't seem to get the footer menu on my site (philipus.com) appear like I want it (it's Stu Nicholl's Skeleton Up menu). These are the problems. 1. The menu items (Start, Galleries etc) are all pushed to the left. I tried text-align: center in the #nav, li and ul but it doesn't work. How can I center them? 2. A border is defined in #nav ul which makes it appear also around the Galleries and Wallpapers pop-up menus. How can I ensure that it only appears around the pop-up menus? 3. The pop-up menu above the Galleries link isn't centered, but the pop-up above the Wallpapers links seems to be. Why is this and how can I ensure both are centered? 4. In IE, the pop-up menu items move to the left when the cursor hovers over them. How do I prevent this? 5. How can I make the pop-up menus a little bit "sticky", such that they allow you to slowly move the cursor up to them? Currently one has to move the cursor quickly to the pop-up menu otherwise it disappears. Does this have to do with the pop-up menus not overlapping a few pixels with the main menu? 6. I noticed when placing the menu in the middle of the page that the copyright text below the menu moved to the right. How can I ensure that the copyright text isn't affected by the menu? Thanks immensely for your help. The menu's stylesheet is below. /p Code: #nav,
#nav ul {padding:0 0 5px 0; margin:0; list-style:none; font: 10px verdana, sans-serif; border:1px solid #000; border-color:#ace #79b #68a #bde; border-width:1px 2px 2px 1px; background:#fff; position:relative; z-index:200;}
#nav {height:25px; padding:0;}
#nav li {float:left;}
#nav li li {float:none; background:#fff;}
/* a hack for IE5.x and IE6 */
* html #nav li li {float:left;}
#nav li a {display:block; float:left; color:#888; margin:0 25px 0 10px; height:25px; line-height:25px; text-decoration:none; white-space:nowrap;}
#nav li li a {height:20px; line-height:20px; float:none;}
#nav li:hover {position:relative; z-index:300;}
#nav li:hover ul {left:0; bottom:21px; top:auto;}
/* another hack for IE5.5 and IE6 */
* html #nav li:hover ul {left:10px;}
#nav ul {position:absolute; left:-9999px; top:-9999px;}
/* yet another hack for IE5.x and IE6 */
* html #nav ul {width:1px;}
/* it could have been this simple if all browsers understood */
/* show next level */
#nav li:hover li:hover > ul {left:-15px; margin-left:100%; bottom:-7px; top:auto;}
/* keep further levels hidden */
#nav li:hover > ul ul {position:absolute; left:-9999px; top:-9999px; width:auto;}
/* show path followed */
#nav li:hover > a {text-decoration:underline; color:#57b;}
/* but IE5.x and IE6 need this lot to style the flyouts and path followed */
/* show next level */
#nav li:hover li:hover ul,
#nav li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover li:hover ul
{left:-15px; margin-left:100%; bottom:-7px; top:auto;}
/* keep further levels hidden */
#nav li:hover ul ul,
#nav li:hover li:hover ul ul,
#nav li:hover li:hover li:hover ul ul,
#nav li:hover li:hover li:hover li:hover ul ul
{position:absolute; left:-9999px; top:-9999px;}
/* show path followed */
#nav li:hover a,
#nav li:hover li:hover a,
#nav li:hover li:hover li:hover a,
#nav li:hover li:hover li:hover li:hover a,
#nav li:hover li:hover li:hover li:hover li:hover a,
#nav li:hover li:hover li:hover li:hover li:hover li:hover a
{text-decoration:underline; color:#57b;}
/* hide futher possible paths */
#nav li:hover li a,
#nav li:hover li:hover li a,
#nav li:hover li:hover li:hover li a,
#nav li:hover li:hover li:hover li:hover li a,
#nav li:hover li:hover li:hover li:hover li:hover li a
{text-decoration:none; color:#888;}
|
|||||||