I have been struggling with this problem for some time now mostly because, it only happens every now and then and I also do not know where to begin on narrowing down the cause of this problem. So occasionally, when my website page loads, the menu bar, which should be horizontal, will load vertically and aligned all the way to the right side of the header.
As I said before this only happens every now and then sometimes it loads just fine, and the menu layout usually corrects itself (horizontally) after refreshing or reloading the page once
here is the css code for the menu
div.hideSkiplink
{
margin:0px auto 0px 195px;
position:absolute;
bottom:0;
right:0;
}
div.menu
{
background-color:#080808;
padding: 0px auto 4px auto;
}
div.menu ul
{
background-color:#080808;
list-style:none;
margin: 0px;
padding: 0px;
width: auto;
}
div.menu ul li a, div.menu ul li a:visited
{
background-color: #080808;
/* border: 1px #585B5E solid; */
border-right:1px solid #585B5E;
color: #dde4ec;
display: block;
line-height: 2.15em;
padding: 4px 20px;
text-decoration: none;
white-space: nowrap;
}
div.menu ul li a:hover
{
background-color: #bfcbd6;
color: #465c71;
text-decoration: none;
}
div.menu ul li a:active
{
background-color: #465c71;
color: #cfdbe6;
text-decoration: none;
}
and below are pictures of what is happening vs. what it should look like.
Incorrect...
Correct...
Any Tips on how to figure out why this is happening are greatly appreciated.
I still haven't been able to figure this out, anyone have any thoughts?
I don't know if it would be some script thats loading before this that is haulting the menu loading or what. Any suggestions on how to figure out why it is doing this would be helpful.
I think you il have display: block property, may be from some parent element.
try to fix it like this:
div.menu > ul li{
float: left !important;
}
if this help this mean you have simple problem this display: block propery.
Related
I have a top menu bar and when the mouse hovers over each menu item it turns purple.
One of these menus also has a drop down list of further items. When I move the mouse cursor down through these sub-menus the top menu goes back to the original style. I would like it to stay purple even when I am hovering over the sub-menu items. Website is here, if you hover over sub-menu under "About" it shows the problem.
I have searched through a few similar stackoverflow answers. For example this problem and previous answer here. I tried a change from this
#topnav li a:hover {}
to
#topnav li hover:a {}
But neither this suggested change or the original keeps the top menu purple. Full code below:
#topnav {
clear: both;
background: url(nav-bg-orange.png) no-repeat;
height: 87px;
width: 962px;
padding: 6px 63px 6px;
}
#topnav ul {
list-style: none;
float: left;
}
#topnav ul li {
list-style: none;
float: left;
padding: 3px 0 0 0;
border-left: 1px dashed #f38739;
}
#topnav ul li:last-child {
border-right: 1px dashed #f38739;
}
#topnav ul li a {
float: left;
display: block;
color: #fff;
font-size: 14px;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
padding: 15px 20px 15px 20px;
border: 0;
outline: 0;
line-height: 1;
list-style-type: none;
text-transform: uppercase;
}
#topnav li#active a,
#topnav li:hover a {
color: #fff;
background: #745b7c;
display:block;
border-radius: 5px 5px 0 0;
}
/****************************** flyout menus ******************************/
#wsite-menus .wsite-menu li a {
font-family: Tahoma, Geneva, sans-serif;
padding: 11px;
color: #fff;
background: #745b7c;
border: 0;
border-bottom: 1px dashed #9e89a4;
}
#wsite-menus .wsite-menu li:hover a {
color: #fff;
background: #8c7395;
}
You might want to try putting your
#wsite-menus
menu nested in element with class
.wsite-nav-3
In that case it should work correctly.
<li id="pg524622535697207710" class="wsite-nav-3" style="position: relative;">About <div id="wsite-menus"><div class="wsite-menu-wrap" style="position: absolute; left: -1118px; display: block; top: 47px;"><ul class="wsite-menu" style="display: block;"><li id="wsite-nav-977240454937878932" style="position: relative;"><span class="wsite-menu-title">Hatha Yoga</span></li><li id="wsite-nav-788960178245244400" style="position: relative;"><span class="wsite-menu-title">Yin Yoga</span></li><li id="wsite-nav-226130023988115977" style="position: relative;"><span class="wsite-menu-title">Yoga for Men</span></li><li id="wsite-nav-104813911397431638" style="position: relative;"><span class="wsite-menu-title">Prenatel Yoga</span></li><li id="wsite-nav-176000207649938754" style="position: relative;"><span class="wsite-menu-title">Private Classes</span></li><li id="wsite-nav-558168910269966978" style="position: relative;"><span class="wsite-menu-title">Yoga for Business</span></li></ul></div></div> </li>
I haven't checked it on my own, but there's a good chance it's OK.
I asked a friend to take a look at this for me. In ordre to fix the menus I needed to change the javascript that currently animates the sub-menus. Unfortunately, because I'm using a Weebly based template I can't access this code to change it. So looks like a dead-end.
Excuse me. Are you new to CSS?
All you have to do is use UL:HOVER. That's because you're removing your mouse from the LI. So use UL as the trigger. Even if you change LIs, the UL won't go off. :)
I am just working on a site.Here got completed everything..but almost..one thing not getting..so thought you people might help me...
Here it is please :
Here i am trying to make the dotted lines just right below the links Like this :
http://oi62.tinypic.com/2f07uy8.jpg
Here is the above image given CSS code please :
.navigation li ul li a {
color: #000;
background: none !important;
border-bottom: 1px dotted #000;
padding: 0;
display: inline-block;
}
but it's not showing up right..Here is the current image:
http://oi60.tinypic.com/es5jrq.jpg
Here is the above image given CSS code please :
.navigation li ul li a {
color: #000;
background: #e4e4e4;
height: 0;
border-bottom: 1px dotted #000;
padding: 0px;
display: inline-block;
}
You can use after class to draw a dotted line below the links and you can use letter spacing to space out the dots the way you like it.
.navigation li ul li a {
color: #000;
background: none !important;
padding: 0;
display: inline-block;
position: relative;
overflow: hidden;
}
.navigation li ul li a:after {
content: "...............................";
color: #000;
bottom: 5px;
left: 0;
}
Adjust the bottom value on the :after pasedo-class to suit your needs. Sometimes you wouldnt be able to see the line drawn by the :after pseudo class, so undo the Overflow hidden to figure out where the dotted line is.
===========================================================================================
fixes:
.navigation li ul li {
background: none;
padding: 12px 12px 6px;
float: none;
display: block;
}
.navigation li ul li a {
color: #000;
background: none !important;
padding: 0;
display: inline-block;
position: relative;
box-shadow: none;
overflow: hidden;
padding-bottom: 10px;
}
.navigation li ul li a:after {
content: "..................................................";
color: #000;
position: absolute;
bottom: 3px;
left: 0;
letter-spacing: 2px;
}
The white line was a box shadow. You need to optimize your site, it takes ages to load.
You need to give the <a>'s a fixed height, as opposed to 0. Using 22px seems to work fine.
I looked at both of the sites and after checking the incorrect one I came to some conclusions.
a. you have way too much styling. It's just cluttering up your code. The key word here is simplifying.
b. don't use font, it has become somewhat obsolete in the last years.
c. the white line above is because you're using box-shadow with offset of 1px (in foundation.css line 478). Do you need this attribute? if not, maybe you should remove it.
d. can't find any border-bottom style anywhere in the element.
I am so ready to be done with this website, but I'm stuck on a couple things, one of which has me COMPLETELY stumped. I'm working with Dreamweaver CS6, but I am horrible with Adobe software in general (not a regular web developer!), so I'm just doing all the code myself. I have a menu bar running horizontally across the top of my page. The final link in the menu looks fine in the Dreamweaver preview, but when I check it out in browser(s), the last menu item is sitting below the rest. I tried to enter an image, but this is my first day on the website, so I haven't gathered enough reputation points. :shrug:
Here is my HTML code for the div:
<div id="nav1">
<ul>
<li>Home</li>
<li>FAQs</li>
<li>Rates</li>
<li>Contact Us</li>
<li>Portfolio</li>
</ul>
Here is the CSS. (Pardon the messy stuff; again, I'm just a newbie freelancing girl without a lot of experience. Side note: The percentages are due to the fact that I'm creating a responsive layout.)
#nav1 {
background-image:url(Images/NavBkgrnd.png);
width: 100%;
margin-top: 2%;
text-align: center;
word-spacing: normal;
}
#nav1 ul{
height: 30px;
padding: 8px 0px;
margin: 0px;
}
#nav1 li{
display: inline;
padding: 20px;
}
#nav1 li a{
color: rgb(255,255,255);
padding: 5px 5px 25px 5px;
width: 16.5%;
border-right: 1px solid rgb(51,51,51);
display:block;
float:left;
font: 400 12px/1.4 "Palatino Linotype",Verdana,Geneva,sans-serif;
font-weight:bold;
text-decoration: none;
text-transform: uppercase;
}
#nav1 a:hover{
color: rgb(0,0,0);
background-color: rgb(170,0,0);
}
#nav1 li a#visited {
background-color: rgb(170,0,0);
}
Can anybody point out errors that might be causing this crazy misalignment? I really wish I could've posted a picture. The website isn't live, so I can't post a link, either. But maybe it won't be necessary if you spot some issue with the code. Please help!
UPDATE: Answers below have solved the problem. Thanks for the speedy solutions, everyone.
The last li of the #nav1 needs to have its padding-top set to 0px. Try adding style="padding-top: 0px" or doing something like this.
#nav1 li:last-child {
padding: 0px !important;
}
Remove the padding from #nav1 li seems to fix it for me.
jsFiddle example
I made a few changes to your code.
First off, I set the <li> elements to have inline-block display, rather than inline display to apply the block style to the outermost element. Second, I set the 16.5% width to the <li> elements and made the <a> elements have 100% width.
Note that this also centered the nav bar.
Working JSFiddle
#nav1 {
background-image:url(Images/NavBkgrnd.png);
width: 100%;
margin-top: 2%;
text-align: center;
word-spacing: normal;
}
#nav1 ul{
height: 30px;
}
#nav1 li{
display: inline;
}
#nav1 li a{
color: rgb(255,255,255);
padding: 5px 5px 25px 5px;
width: 16.5%;
border-right: 1px solid rgb(51,51,51);
display:block;
float:left;
font: 400 12px/1.4 "Palatino Linotype",Verdana,Geneva,sans-serif;
font-weight:bold;
text-decoration: none;
text-transform: uppercase;
background-color: rgb(170,0,0);
}
#nav1 a:hover{
color: rgb(0,0,0);
background-color: rgb(170,0,0);
}
#nav1 li a#visited {
background-color: rgb(170,0,0);
}
I'm rather per perplexed by this. When I view my web page on Chrome, FireFox, IE9, Opera, or Safari on my main computer, there is an extra 3px of top padding on my menu's rollover.
When I check on my other two computers in the house, on all said browsers above (plus IE8), the menu doesn't have the 3px extra padding.
I have reset the browsers on my main computer, though I'm thinking something external must be impacting the page rendering, since it's happening on all of my browsers...? It wouldn't be a monitor condition would it? I have not done anything fancy about monitor calibration. All my browsers are at zoom 100%.
Main comp: Windows 7
Other two comps: Windows 7 and Windows XP
Any guessing about why this may be would be super helpful. Thanks.
CSS:
#access {
clear: both;
display: block;
float: left;
margin: 0px 0 40px 0;
padding:0;
width: 100%;
text-align:left;
/* height:54px; */
background-image:url(images/menu-bar.gif);
background-repeat:no-repeat;
background-position:top center;
}
#access ul {
list-style: none;
margin: 0 0 0 20px;
padding: 0;
width:100%;
}
#access ul li { display:inline;padding:0;margin:0; }
#access li {
background-image:url(images/menu-bar-divider.gif);
background-repeat:no-repeat;
background-position:top right;
}
#access ul li a {
color: #ffffff;
display:block;
float:left;
padding: 18px 39px 17px 39px;
text-decoration: none;
font-size:16px;
text-shadow: 0px 1px #c86209;
}
#access li a:link { }
#access li:last-child { background-image:none; }
#access a:hover { text-shadow: none;background-image:url(images/menu-bar-hover.gif);background-repeat:repeat-x;background-position:bottom center;color:#000000!important;}
#access a:visited { color:#ffffff!important;}
Possible scenarios:
is this a CMS? are you maybe logged in as an admin in the other
pc? I had the same problem with Wordpress. http://wordpress.org/support/topic/31-update-causing-28px-top-spacing-in-html-body
do you have any addons, plugins, adware installed that are
interfering with your layout?
Did you use a CSS reset or
Normalize? (one of them not both) This can help you solve
similar issues.
http://necolas.github.com/normalize.css/
http://developer.yahoo.com/yui/reset/
Could you try reproducing your case in JSFIDDLE or http://tinkerbin.com/ ?
I have a horizontal menu. I want to have a border around the menu (not the entire-row, only the space menu is covering). When I put border on ul, it covers the entire row, when I put border on li, it has border between menu items as well.
<ul id="menu" style = "text-align:left;">
<li>...anchor stuff...
</li><li>...anchor stuff...
</li><li>...anchor stuff...
</li><li>...anchor stuff...
</li><li>...anchor stuff...</li>
</ul>
Here is the CSS:
ul#menu
{
padding: 0 0 0px;
position: relative;
margin: 0 0 0;
text-align: right;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
ul#menu li
{
display: inline;
list-style: none;
}
ul#menu li a
{
padding: 0px 0px;
margin-right:20px;
font-weight: bold;
text-decoration: none;
line-height: 2.8em;
}
Kill display: inline on the list items and float them left instead. Float the container as well, which will ensure that it's only as wiide as its contents. Finally, set overflow: hidden on the ul.
Declare ul with display:inline-block. It'll cause ul to take only space necessary to display its contents, not 100% of it.
An example
Use display: inline-block on the ul and add the border to the ul.
If you need IE6 compatibility:
#menu li {
border-top: 1px solid #000;
border-bottom: 1px solid #00;
}
You might be able to use li:first-child (I can't remember, and don't have a copy of IE6 to test with) to apply:
#menu li:first-child {
border-left: 1px solid #000;
}
But you'll likely have to add either a class-name, or id, to the first and last li elements to give them the appropriate border-left and border-right.