i'm currentley trying to make a website nav bar, when the page is active i want the navbar background to be the same as the body.
However, when i do this the background only wraps around the text rather than the full height of the navbar.
My HTML
<div id="navbar">
<ul>
<li> Home </li>
<li>Purchase </li>
<li>Contact </li>
<li>Portfolio </li>
</ul>
</div>
My CSS
#navbar ul{
list-style:none;
margin:0;
background-image:url('Images/black.png');
text-align:center;
height:60px;
}
#navbar ul{
list-style-type:none;
text-align:center;
color:#fff;
}
#navbar ul li{
display:inline;
}
#navbar ul li a{
color:#36b6f4;
text-decoration:none;
font-size:30px;
margin:30px;
}
#navbar ul li a.active{
height:60px;
background-image:url('Images/background.jpg');
}
I have create for you a fiddle:
http://jsfiddle.net/RKRHE/1/
I have changed your background images with colors (because I haven't your images).
The problem was display: inline;. You can put float: left;
You can copy my code from fiddle and change background color with you images.
Hope this will help you!
Related
My navigation bar is centered but and wraps the tabs of the navigation bar to the next line if I try to add a 6th tab.
I am working on this webpage specifically, but have the same problem on other parts of this site too. http://ventricular.org/CORTICALEVOLUTION2018/corticalevolution2018.html
It does this in Safari, but not Chrome.
nav{
float:right;
width:100%;
display:block;
height:40px;
}
nav ul li{
display:block;
width:16%;
float:left;
text-align:center;
}
nav ul li a{
font-family: Candara;
width:90%;
text-decoration:none;
text-transform:uppercase;
font-weight:400;
line-height:250%;
display:block;
color:#9933cc;
}
nav ul li a:hover{
color:#9933cc;
}
nav ul li p{
font-family: Candara;
width:90%;
text-decoration:none;
text-transform:uppercase;
font-weight:400;
line-height:250%;
display:block;
color:#9933cc;
}
<nav> <!-- Navigation Start -->
<ul>
<li>HOME</li>
<li>SPEAKERS</li>
<li>SPONSORS</li>
<li>PHOTOS</li>
<li>CONTACT</li>
<li>VENTRICULAR.ORG</li>
</ul>
</nav> <!-- Navigation End -->
</div><!--/top-->
<hr/><!-- Horizontal Line -->
I'm trying to build a centrally-aligned dropdown menu, using HTML5 and CSS3. I could use jQuery to assist, if I must. This must work in IE8+. At the moment, my menu is centrally-aligned, and the drop-downs work, but the width of the dropped-down item (div) is the same width as the li above.
<div class="menu">
<ul class="level0">
<li class="level0">
<a href=" http://domain.com/">
<span>home</span>
</a>
<div class="sub">
<div class="sub-column">
<a href="http://domain.com/customer-service">
<span>Customer Service</span>
</a>
</div>
<div class="sub-column">
<a href="http://domain.com/privacy-policy">
<span>Privacy Policy</span>
</a>
</div>
</div>
</li>
<li class="level0">
<a href=" http://domain.com/about">
<span>About Us</span>
</a>
<div class="sub">
<div class="sub-column">
<div>
<p>Blah blah blah, some random text goes here.</p>
</div>
</div>
</div>
</li>
</ul>
</div>
And the CSS (tried to compact it for easy viewing).
.menu {
clear:both; display:block; max-width:100%; margin:0 auto; padding:0;
border:1px solid #ddd; border-bottom:7px solid #323131; text-align:center;
}
.menu ul {
display:block; max-width:100%; height:3.2em; margin:0 auto;
padding:0; list-style-type:none; text-align:center;
}
.menu ul li {display:inline-block; margin:0; padding:0; height:3.2em;
line-height:3.2em; position:relative;
}
.menu ul li > div {display:none; visibility:hidden; position:absolute;
background:#f60; z-index:999; transition:display 0.25s ease;
}
.menu ul li:hover > div {display:inline-block; visibility:visible;
max-width:100%;
}
.menu ul li a {display:block; margin:0; padding:0 2em; font-size:90%;
font-weight:700; text-transform:uppercase; transition:background-color 0.25s ease;
}
.menu ul li a:hover {background-color:#e4e4e4; color:#323131;}
.menu ul li.switcher {display:none;}
How can I get the width of the first line div (.menu ul li > div) to adopt the width of the grandparent element (.menu)? Or at least stretch to fit the contents in using max-width?
Any help is appreciated. Thanks.
~ edit ~
Here's the fiddle: http://jsfiddle.net/Xp6yG/
I think I understand your issue correctly, try the following:
fiddle demo
CSS:
.sub {left:0px;}
As well as using James suggestion of making the .menu position: relative I think you will also need to remove the position: relative on .menu ul li
Thanks to some helpful suggestions, this is as close to working as I've got it: http://jsfiddle.net/Xp6yG/3/.
I changed the display on .menu ul li:hover > div to display:table; and added whitespace:nowrap; and right:50%; to the .menu ul li > div element.
The dropdown appears where I want it and stretches to fit the containing element(s). Thanks very much all!
This is my first post and I've been researching this issue for two days now but cannot find anything similar and I'm at my wits end with it.
Everything works in all my testing except for IE8. There, my css dropdown menu has a background (set in the main menu as an image) that's wider than the set 128px width of the main nav menu. Each link has its own background, this is a background on the whole dropdown. Even moving it over -40px to line up with the above links still gives me that extra width. I've tried many fixes but nothing seems to work. I'm hoping the combined expertise here can figure this out! I cannot post a picture as I don't have enough reputation here, sorry. Thanks in advance....
Here is the code in my stylesheet followed by HTML5 Code:
#menu{list-style:none; font-size:12px; font-weight:600; float:left; width:100%;
margin:0px auto;position:relative; z-index:5;text-align:center;}
#menu li{float:left; margin-right:2px; position:relative;}
#menu a {display:block; background:#202020 url('images/bgmen.jpg') repeat-x;
width:128px; height:30px; line-height:30px; color:#fff; text-decoration:none;}
#menu a:hover{background:#202020 url('images/bgmenlt.jpg') repeat-x; color:#000;}
/* dropdown*/
#menu ul{background:#000 url('images/bgmen.jpg') repeat-x; background:rgba(255,255,255,0);
list-style:none; position:absolute; left:-9999px;}
#menu ul li{padding-top:1px; float:none;}
#menu ul a{white-space:nowrap;}
#menu li:hover ul{left:-20px;}
#menu li:hover a{background:#202020 url('images/bgmenlt.jpg') repeat-x;}
#menu li:hover ul a{background:#202020 url('images/bgmen.jpg') repeat-x;}
#menu li:hover ul li a:hover{background:#000 url('images/bgmenlt.jpg') repeat-x;}
<ul id="menu">
<li>HOME</li>
<li>BIO</li>
<li>NEWS</li>
<li>GALLERY</li>
<li>TEST
<ul>
<li>test</li>
<li>test</li>
</ul>
</li>
<li>CONNECT
<ul>
<li> <img src="images/fb.jpg" width="20" height="20" alt="" title="" /> Facebook</li>
<li> <img src="images/twitter.jpg" width="20" height="20" alt="" title="" /> Twitter</li>
<li>Contact</li>
</ul>
</li>
<li>CHAR</li>
</ul>
adding margin:0 padding:0 to the #menu ul solved the issue, and changed the position of the dropdown by altering the #menu li:hover ul as below:
#menu ul{
background:#000 url('images/bgmen.jpg') repeat-x;
background:rgba(255,255,255,0);
list-style:none; position:absolute;
left:-9999px;
margin:0;
padding:0;}
#menu li:hover ul{left:20px;}
I am doing a website project on asp.net 3.5. When i Zoom-out the interface on web-browser my menu bar's Contact tab goes below also the places to visit tab's line "visit" comes below. How can I overcome this problem?
HTML
<div id="nav">
<ul>
<li>Home</li>
<li>About us</li>
<li>Reservation
<ul>
<li>Room</li>
<li>Membership</li>
<li>Events</li>
</ul>
</li>
<li>Places to visit</li>
<li>Travel</li>
<li>Packages</li>
<li>Gallery</li>
<li>Contact us</li>
</ul>
</div>
CSS
#nav { clear:both; margin:0;
padding:0;width:900px; height:30px;}
#nav ul { margin:0; padding:0; line-height:30px; }
#nav li { margin:0; padding:0; list-style:none; float:left;
position:relative;
background-color:#0066CC/*#1B6187*/;}
#nav ul li a { text-align:center;
font-family:Georgia;
text-decoration:none;
font-size:14px;
height:30px; display:block;
color:#FFF; width:110.5px;
border:1px solid #006363;
}
#nav ul ul { position:absolute; visibility:hidden; top:32px;}
#nav ul li:hover ul {visibility:visible;}
#nav li:hover { background:#09F;}
#nav ul li:hover ul li a:hover {background-color:#09F;
color:#4EE6DB;}
#nav ul li ul li { background-color:#0066CC/*#1B6187*/;}
#nav a:hover { color:#000;}
.clearFloat {clear:both;}
This happens because the text doesn't scale well when zooming: it stays bigger than you'd expect. The text forces the surrounding li's and a's to get bigger than you'd like.
I recently fixed the same issue by fixing the width of each li (eg: width: 30px). The text will still be bigger than you'd like, but if you use enough padding it has enough space to grow.
What you could also try is position the last li absolutely top top:0, right:0, this will get ugly as the last li will lay over the one before the last
I have a horizontal menu coded in html and css only, this menu has sub-menu and some sub-menu has sub-menu of their own.
It works fine with the first level sub-menu only, but when I insert some sub-menu for any individual sub-menu, they still show up. But I can not reach to click them, they vanishes as my cursor moves. A demo can be found here : http://example.bojroninad.net/pages/menu_demo1.html
However, I was able to watch some steady behavior of this menu sometimes, but most of the time they vanishes before I reach to them.
Here is my html code(pardon me for bad structured code):
`<html>
<link rel="stylesheet" href="menu1_css.css" media="screen" type="text/css">
<div id="menu1">
<ul>
<li>Home</li>
<li>About
<ul>
<li>History</li>
<li>Team</li>
<li>Offices</li>
</ul>
</li>
<li>Services
<ul>
<li>Web Design </li>
<li>Internet Marketing</li>
<li>Hosting </li>
<li>Domain Names
<ul>
<li>.ORG</li>
<li>.COM</li>
<li>.NET</li>
</ul>
</li>
<li>Broadband </li>
</ul>
</li>
<li>Contact Us
<ul>
<li>United Kingdom</li>
<li>France </li>
<li>USA </li>
<li>Australia </li>
</ul>
</li>
</ul>
</div>
</html>`
and my css code goes here:
#menu1 {
background-color:#ccc;
width:100%;
height:30px;
}
#menu1 ul{
padding:0px;
margin:0px;
}
#menu1 ul li
{
list-style:none;
display:inline;
margin-left:10px;
float:left;
height:30px;
position:relative;
}
#menu1 ul li a{
text-decoration:none;
font-weight:bold;
font-family:Bitstream Cyberbit,Garamond, Minion Web, ITC Stone Serif, MS Georgia;
color:green;
}
#menu1 li a:hover{
text-decoration:underline;
}
#menu1 li ul {
display:none;
margin:0px;
padding:0px;
position:absolute;
left:0px;
top:20px;
width:120px;
background-color:#999;
}
#menu1 li:hover ul{
display:block;
width:160px;
}
#menu1 li li {
display:list-item;
list-style:none;
}
/* second level sub menu */
#menu1 li li ul {
padding:0px;
margin-left:150px;
background-color:white;
top:0px;
position:relative;
}
#menu1 li li li{
display:none;
list-style:none;
position:absolute;
width:120px;
background-color:red;
}
#menu1 li li:hover li{
display:block;
width:100px;
position:relative;
margin-left:0px;
float:left;
height:30px;
}
#menu1 ul li li li a{
text-decoration:none;
font-weight:bold;
font-family:Bitstream Cyberbit,Garamond, Minion Web, ITC Stone Serif, MS Georgia;
color:yellow;
}
#menu1 li li li a:hover{
text-decoration:underline;
}
The problem is that your second and third level list elements are also floated left, making them smaller than the menu itself.
You can solve it by setting:
#menu1 li li {
float: none; /* line 50 */
}
#menu1 li li ul {
position: absolute; /* line 57, is now relative, to avoid growth of li li */
}
As far as I can see, the menu works fine - except that the second-level menu is positioned a bit too low
Usability would also be much better if you changed background color on li:hover + cursor:pointer - so you can see which button in the menu is active (and the user gets a visual feedback when he hovers out).