I have a responsive website but the navigation bar is giving me problems.
First problem is the active area for clicking the links is not the full height of the nav bar, I need it to go all the way down.
Second problem is that when i switch to a mobile view the Menu is covering the email address and telephone number.
I have the navigation and the top part fixed, not sure if this has anything to do with it.
I have the page on a test address if anyone wants a look - http://www.classic-travel.co.uk/index.html
First Problem: not the best solution, just a workaround:
#cssmenu > ul > li {
float: left;
display: inline-block;
background: yellow;
color: black;
height: 104px; //ADD HEIGHT OF THE ul
}
#cssmenu > ul > li > a {
padding: 40px 10px 10px 10px;
border-right: 1px solid rgba(80, 80, 80, 0.12);
text-decoration: none;
font-size: 14px;
font-weight: 500;
color: black;
text-transform: none;
letter-spacing: 1px;
height: 100%; //LET li PICK THE HEIGHT OF ul
}
If you find a way not to use pixel in height, it would be better.
Second problem is caused by the position:fixed of the header, you remove it, it will not be covered.
<header style="width: 100%; padding: 0px; background-color: rgb(255, 255, 255); z-index: 99; top: 0px; "><div class="gridContainer clearfix">
....
</header>
In addiction, do not use css inline, put it into a .css file and use <link> tag to include in your html file.
Related
So I have a containing element whose width gets smaller as the screen get smaller #Aa, this element has a <nav> element that contains a <ul> element and some <li> elements as menu items.
When #Aa can no longer contain all the <li> elements the page layout is broken.
What I would like to happen is what is suppose to happen when
overflow:hidden is used. I applied this rule to #Aa.
I thought this was the purpose of overflow:hidden. I entered it manually through the web inspector.
Here is some of the relevant CSS
nav {
white-space: nowrap;
float: right;
}
nav ul li a {
display: inline-block;
padding: 0 20px;
line-height: 60px;
color: #2e2c60;
font-size: 14px;
text-transform: uppercase;
letter-spacing: .1em;
}
nav ul li {
display: inline-block;
float: left;
border-left: 1px solid #ffffff;
position: relative;
list-style: none;
background: rgba(255, 255, 255, .25);
}
nav ul li:hover{
background: rgba(255, 255, 255, 0.5);
}
nav ul li:last-child{
border-right: 1px solid #ffffff;
}
Please try below code,
nav {
float: right;
width: 75%;
height: 60px;
overflow: hidden;
}
and add float:left to logo image
Well, you'll have to put codes for "nav" according to the resolution in your media queries.
In short:
You need to define the height, or max-height (more suitable for this example) in order for overflow to work, otherwise it would just expand, since is the expected behavior
element {
display: none;
}
Try removing this from the inline style of the #left-column element:
<section style="display:none;" id="left-column">
I have come across a slight problem, I set my nav bar to 100% width, and now i have a gap on the right hand side of my page and a horizontal scroll bar for the page, I do not know why it has done this. Please see code attached.
he code is:
nav {
width: 100%;
height: 35px;
text-align: center;
background-color: #42C2DA;
padding: 6px;
margin-bottom: 50px;
}
nav ul {
padding: 7px;
margin: 1px;
width: 100%;
}
nav li {
display: inline;
padding: 5px;
margin: 5px;
}
nav li a {
color: white;
text-decoration: none;
padding: 4px;
}
nav li a:link a:visited {
font-weight: bold;
}
Could someone explain where i am going wrong... or what is happening here.
I dont have 10 rep so cant post a pic.
Your nav bar has padding:6px; this adds 6px to all sides of the div, meaning the actual width of that element isn't 100%, but rather 100% + 12px.
To fix this, try using box-sizing: border-box, which makes it so that your padding is calculated into your specified 100% width.
Horizontal scroll bar is probably because You've set:
width: 100%
padding: 6px
And for that reason You will have total width: 100% of viewport + 12px
Set box-sizing: border-box and this fix Your problem - more info about box-sizing.
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 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 cannot figure this out. I HAVE DONE RESEARCH so please, no comments about me doing more research. Also, I am a noob, so be nice ;)
Here's my site: http://library.skybundle.com/
Hover your mouse over the two black rectangles in the main blue nav bar (header area). The a:hover should make the color change to a gray. The ISSUE is that in Chrome, this looks perfect. But, in Firefox, the padding-right isn't long enough or something, so there is always a small black rectangle at the far right side of the "Educational Courses" button (this will only be visible when hovering your cursor over the button). In other words, the gray box doesn't go all the way to the right-side end of the button area upon mouse hover. I just don't understand why this looks and works great in Chrome, but bugs out in Firefox...
Believe me when I say I have tried everything I can to fix it using Firebug in Firefox. If you play around with it using an editor in your browser, you will see that if you try to make the padding longer for Firefox, it pops the whole button down onto a new line. So to fix THAT problem, you must make the container wider, but then the original problem comes back. It's a circle of problems and I'm sure one of you geniuses out there will see a simple solution that I am missing.
Please help. Thanks!
EDIT :
Here's my JSFiddle and code. Notice how it looks great in Chrome but not in Firefox?
http://jsfiddle.net/S4st8/
HTML:
<div id="navigation">
<div id="navigation-inner">
<div id="page-nav">
<div id="primary-nav">
<ul id="top-menu">
<li id="li-left">Product Training Videos</li>
<li id="li-right">Educational Courses</li>
</ul>
</div>
</div>
</div>
</div>
CSS:
#navigation {
background: url(http://library.skybundle.com/wp-content/themes/business-services/library/styles/colour-images/mu-nav.jpg) repeat-x;
margin: 0px;
padding: 0px;
height: 40px;
width: 100%;
}
#navigation-inner {
margin: 0px auto;
padding: 0px;
height: 48px;
width: 960px;
}
#page-nav {
margin: 0px;
padding: 0px;
height: 40px;
width: 960px;
}
div#primary-nav {
position: relative;
display: block;
float: left;
margin: 0;
padding: 0;
}
ul#top-menu {
margin: -5px 0.325em 0 0.325em;
position: absolute;
padding: 0;
z-index: 100;
top: 0;
left: 3em;
width: 367px;
}
ul#top-menu li {
line-height: 3em;
list-style-type: none;
height: 49px;
background-color: #2C2C2C;
float: left;
}
li#li-right {
list-style-position: inside;
border-left: 2px solid #5E5E5E;
}
ul#top-menu li a {
font-weight: bold;
font-size: 11pt;
text-decoration: none;
padding: 15px 10px 16px 10px;
color: #ffffff;
}
ul#top-menu li a:hover {
text-decoration: none;
width: auto;
color: #ffffff;
background-color: #505354;
padding: 15px 10px 17px 10px;
}
its because a tags (anchor tags) have a default display property of inline
due to CSS Box Model you would need to adjust your padding and set the anchor tags display property to display:block;
the display block allows the anchor tag to fill the whole space of the LI tag
change ul#top-menu li a to this:
ul#top-menu li a{
color: #FFFFFF;
font-size: 11pt;
font-weight: bold;
display: block; /* add this */
padding: 0 10px; /* add this */
}
the CSS Box Model adds the content + padding + border + margin
https://developer.mozilla.org/en-US/docs/Web/CSS/box_model
Take a look at this CSS rule:
li#li-right {
border-left: 2px solid #5E5E5E;
list-style-position: inside;
}
Dropping list-style-position: inside seems to fix your issue in Firefox (and still works in Chrome), but I haven't tested the implications in other browsers. The CSS rule is documented here.
The reason why : browsers apply their own css if you don't specify it. Firefox added the space for your bullet (somehow)
FF :
list-style-image none
list-style-position outside
list-style-type disc
GooChrome :
list-style-image: none;
list-style-position: inside;
list-style-type: none;
User JasonSperske gave you a fixing solution,
i invite you to RESET your css.
PS. in the meantime, you are invited to see : https://stackoverflow.com/help AND http://sscce.org/
Reading and understanding those pages will give you few reputations points