homepage Welcome to WebmasterWorld Guest from 54.163.72.86
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Centering the hover effect
Shado




msg:4192584
 3:43 pm on Aug 26, 2010 (gmt 0)

Hi guys

I was wondering if any of you would be able to direct me in to the right direction as I have searched the internet for a solution but none seem to work - either that are I'm not implementing it correctly.

What I'm looking to do is to centre the drop down section of the navbar across the page (blue line). Now I have messed around with left {} in .navbar li span which works well except when my nav has more than 3 tabs.

At the end of the day I'd be happy if the drop down list didn't go past the (off the screen). I hope that makes sense.


The CSS code
#navbarcontainer{
position:relative;
height:65px;
color:#FFFFFF;
background:#143D55;
width:100%;
font-family:Arial, Helvetica, sans-serif;
left: -10px;
padding: 0 20px 0 0px;
}

.navbar{
position:relative;
height:33px;
width:100%;
font-weight:bold;
background:#fff url(#) repeat-x bottom left;
padding:0 0 0 20px;
}/* dropdown navbar - level 1 */

.navbar ul li a{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
display:block;
color:#EAF3F8;
text-decoration:none;
padding:0 0 0 20px;
height:33px;
} /*-- topnav tab links --*/

.navbar ul li a strong{
padding:8px 20px 0 0;
height:20px;
float:left;
font-weight:bold;
} /*-- topnav tabs --*/

.navbar ul li a:hover{
color:#fff;
background:transparent url(#) repeat-x bottom left;
}/*-- topnav breadcrumb --*/

.navbar ul li a:hover strong{
display:block;
} /*-- topnav tabs --*/

.navbar li{
position:relative;
float: left;
list-style:none;
display:inline;
width:auto;
} /*-- topnav tabs --*/

.navbar li ul a:hover{
color:#99CC00;
background:transparent repeat-x bottom left;
} /*-- subnav bar --*/

.navbar li a{
float: left;
margin: 0; padding: 0;
} /*-- subnav links --*/

.navbar li span{
float: left;
padding: 5px 0;
position: absolute;
left: 0px;
top:33px;
display: none;
width: 900px;
background: #143D55;
color: #fff;
height:20px;
} /*-- subnav hidden bar --*/

.navbar li:hover span {
display: block;
position:absolute;
} /*--Show subnav on hover--*/



The HTML code
<div id="navbarcontainer">
<div class="navbar">
<ul>
<li><a href="#"><strong>Home</strong></a></li>
<li><a href="#"><strong>#*$!</strong></a>
<ul onMouseOver="show(this)"><span><a href="#">#*$!</a><a href="#">#*$!</a><a href="#">#*$!</a><a href="#">#*$!</a></span></ul></li>

<li><a href="#"><strong>#*$!</strong></a>
<ul onMouseOver="show(this)"><span><a href="#">#*$!</a><a href="#">#*$!</a><a href="#">#*$!</a><a href="#">#*$!</a></span></ul></li>

<li><a href="#"><strong>#*$!</strong></a>
<ul onMouseOver="show(this)"><span><a href="#">#*$!</a><a href="#">#*$!</a><a href="#">#*$!</a><a href="#">#*$!</a></span></ul></li>
</ul>
</div>
</div>


Much appreciated ;)

 

Major_Payne




msg:4192704
 7:02 pm on Aug 26, 2010 (gmt 0)

You really only need one div wrapper. If you set a width and height to it that will contain the horizontal nav menu, then you can center it with the CSS property: margin: 0 auto;

Trying to position content that is absolute positioned or positioned relative something else that may be is very hard to center.

Shado




msg:4193055
 1:25 pm on Aug 27, 2010 (gmt 0)

I'm with you MP but to get the desired effect I need the nav to be at 100%. Ive been working on this nav for months and finally I get to use in a project.

The bases of the nav was modelled around this navbar [news24.com ] but I wanted it to look nicer (not so flat), that I have achieved but I also wanted it to work better. If you take a look at that nav you will see the first few tabs look good but as you hover over the last 3 you can see the design falling to pieces.

Either I need to find a way to centre the dropdown or I need to find a way to push the right side of the dropdown to the left when the right side hits the end of the screen.

Shado




msg:4194352
 9:10 am on Aug 31, 2010 (gmt 0)

Still haven't found a fix for this one and it's a bit of a problem when testing on smaller res screens.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved