I am having trouble with my navigation menu. Here is my CSS:
ul.main {
background-color: #CCC;
display: inline-block;
}
ul.main > li {
list-style-type: none;
display: inline-block;
position: relative;
}
ul.subNav {
background-color: #333;
color: #FFF;
padding: 0;
margin: 0;
position: absolute;
}
ul.subNav li {
list-style-type: none;
padding: 0;
margin: 0;
}
What I am trying to do is make my sub navigation as wide as the longest sub item in the menu so the ul.subNav are as wide as the longest li. I can't seem to make this happen.
What am I doing wrong here?
If I understand correctly, you'll need white-space: nowrap on your subNav li elements:
ul.subNav li {
list-style-type: none;
padding: 0;
margin: 0;
white-space: nowrap;
}
Here's a working demo. If you want to know more, here are some links about the property:
W3 Wiki page on white-space
MDN page on white-space (light-weight page)
W3 spec on white-space
Jeroen is right, and he beat me to it. white-space: nowrap; will do the trick. Here's 2 working demos I made to demonstrate:
with nowrap
without nowrap
Related
I've been trying to get multiple background images on my page but I couldn't get more than 2, so I started to think that I might use divs instead. But when I use divs I got like 5 white pixels left at the top and and sides of the screen, that was until I changed the position to absolute but then my navbar was stuck behind the div... If anyone could please help me fixing my issue.
My code isn't that good, but this is what I have at the moment:
#P1Tekstvlak1_1 {
background-image: url("DakB1.jpg");
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
}
/** — Navbar —*/
#nav {
color: FFFFFF;
opacity: 0.9;
}
#nav_wrapper {
width: auto;
margin: 0 auto;
text-align: left;
}
#nav ul {
list-style-type: none;
padding: 0;
margin: 0;
position: fixed;
min-width: 200px;
text-align: center;
background-color: #B50B26;
}
#nav ul li {
display: inline-block;
}
#nav ul li:hover {
color: white;
text-align: center;
text-shadow: 1px 1px 1px #FFFFFF;
}
#nav ul li a,
visited {
color: #FFFFFF;
font-size: 20px;
display: block;
padding: 15px;
text-decoration: none;
}
#nav ul li:hover ul {
display: block;
}
<div id="nav">
<div id="nav_wrapper">
<ul>
<li>Home</li>
<li>Over</li>
<li>Renovatie</li>
<li>Nieuwbouw</li>
<li>Vacatures</li>
<li>WKA</li>
<li>Contact</li>
</ul>
</div>
</div>
Remove the absolute positioning and then apply a CSS reset like the one here . Browsers have some styling attributes it applies by default for accessibility purposes. You should remove them. I do this before starting to build any web UI.
Note: Absolute positioning will stack elements versus applying layout to them. That is why you are seeing it behind your NAV
I'm trying to center and unordered list perfectly with the title of my website the title on top with the UL elements centered underneath.
The problem is that it does center, but not perfectly aligned with the overhead title. It is slightly to the right.
Here is my code:
.title{
text-align: center;
}
nav{
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
background: blue;
}
li {
text-align: center;
display: inline-block;
list-style-type: none;
margin: 0;
padding: 0;
background: red;
}
ul {
padding: 0;
}
The slight right-side bias is because of the default padding the entire list gets, not the individual list items. Setting it to zero eliminates the unnecessary offset.
I have to guess the HTML, but most likely you have a <ul> inside your <nav> element. Use this CSS:
nav > ul { margin-left: 0; padding-left: 0; }
I'm brand new to this coding stuff so please go easy on me ;)
I'm trying to make the top nav on this website stretch to fit the width of what I understand to be the "container" of the website which is 900px wide. I can't for the life of me remove what appears to be padding or margins to the left and right of the nav. See code below.
Site screenshot here: http://img560.imageshack.us/img560/9479/237c.png
Right now I'm just cleverly making adjustments to padding to make the nav somewhat centered on the page, but ultimately it would look much better if it met up with the edge of the containter like everything else.
Thx for any help.
/* Navigation
--------------------------------------------------------------------------------*/
#topnav {
clear: both;
margin: 0 0;
overflow: hidden;
}
#topnav ul {
list-style: none;
float: left;
text-align: center;
}
#topnav ul li {
list-style: none;
float: left;
background: url(nav-sep.png) right 0px no-repeat;
padding: 15px 0px 12px 0px;
display: inline block;
}
#topnav ul > li:last-child,
#topnav ul > span:last-child li {
background: none;
padding-right: 0;
}
#topnav a {
float: left;
display: block;
color: #545454;
font-family: Blair, sans-serif;
font-weight: 500;
padding: 6px 0 6px;
border: 0;
border-top: 3px solid transparent;
outline: 0;
margin: 0 16.6px;
list-style-type: none;
font-size: .75em;
text-transform: uppercase;
}
#topnav ul > li:last-child a,
#topnav ul > span:last-child li a {
margin-right: 0;
}
#topnav li#active a,
#topnav a:hover {
color: #666666;
border: 0;
border-top: 3px solid #8cc640;
}
Try with
margin-left:auto;
margin-right:auto;
See also:
Cross browser method to fit a child div to its parent's width
Hope this helped. Cheers.
I would say to add a main container div that will enclose all your existing html, and then define a css for it with margin-left/right as auto :
<head>
.......
<style>
#mainContainer {
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<html>
<body>
<div id="mainContainer">
............................
............................
............................
</div>
</body>
</html>
Hi if you are new on this you need to know that for default all element tags like ul, p or body has for default some values on properties like margin and padding. What you need is first work on reset those values in CSS to avoid issues and make more easier your cutomization. In your case the ul has some properties:
ul {
display: block;
list-style-type: disc;
margin-before: 1em;
margin-after: 1em;
margin-start: 0;
margin-end: 0;
padding-start: 40px;
}
You can use this simple global reset with * as the global selector :
* {
margin:0;
padding:0;
}
Or search for some complex resets like this one.
Then with values on 0 you can customize in a better way your elements:
#topnav ul {
list-style: none;
float: left;
text-align: center;
width:100%;
}
The first menu item has a dropdown submenu that is supposed to display on li:hover. For some reason though, hovering on the margins between ANY of the li's is causing the submenu to display and I can't figure out why. It works in Chrome and IE in compatibility mode, but not IE8.
Here's the line of CSS that displays the submenu:
.menu li:hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0;
}
To me, that reads that whenever you hover an li, style any of it's children ul's with the following style. Why would this be getting triggered on margins between li's that don't have nested ul's?
Here's the entire CSS for the menu just in case:
.menu {
font-weight: normal;
font-size: 1.1em;
margin-top: 5px;
padding: 5px 0 0 0;
font-family: OswaldLight;
display: table;
margin: 0 auto;
}
.menu li {
list-style: none;
float: left;
margin-right: 10px;
}
.menu li a {
display: block;
text-decoration: none;
padding:5px;
color:#navbar-text;
background:#navbar;
text-decoration:none;
}
.menu li ul {
display: none;
background-color: #navbar;
}
.menu li ul li {
margin: 0;
}
.menu li a:hover {
color: #navbar-text-highlight;
background-color: #navbar-highlight;
}
.menu li:hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0;
}
.menu li:hover li {
float: none;
}
.menu li:hover li a {
background-color: #navbar;
color: #navbar-text;
}
.menu li li a:hover {
color: #navbar-text-highlight;
background-color: #navbar-highlight;
}
For anyone wondering, the problem was the "display:table" in the .menu class. The .menu class was assigned to the parent UL and IE8 didn't know what to do with it. I removed that line, added a parent around the parent and gave that "display:table" instead and it seemed to solve the problem. The reason I'm using "display:table" is to clear my floats but allow me to easily center the contained floats using "margin: 0 auto", which seems to be the nicest solution I've found for centering a container of floats.
It probably ha something to do with the width that ul with the sub menu, I will have to look into it further but most likely it's a width issue in IE
Update: well it seems you fixed it
I'm trying to make a CSS drop down menu but the problem is that child list items overlap parent list items as you can see in the picture.
I found the source of the problem to be the padding: 10px 5px; in line 12 - When removed, the problem is solved. But I need the padding for the look. I read Inline elements and padding which addresses a similar issue but even the solution provided in the article - using float: left; instead of display: inline; - does not solve my problem.
Why does this happen and what is the solution?
HTML Code
<ul id="navigation_2">
<li>Home</li>
<li>About
<ul>
<li>Who We Are</li>
<li>Our Goal</li>
</ul>
</li>
</ul>
CSS Code
ul#navigation_2
{
margin: 0;
padding: 0;
list-style: none;
font-family: "Century Gothic","HelveticaNeueLT Pro 45 Lt",sans-serif;
}
ul#navigation_2 li
{
float: left;
position: relative;
padding: 10px 5px;
font-size: 114%;
text-align: center;
width: 100px;
}
ul#navigation_2 li a
{
text-decoration: none;
}
ul#navigation_2 li a:link, a:visited, a:active
{
color: black;
}
ul#navigation_2 li:hover
{
background-color: red;
}
ul#navigation_2 li ul
{
margin: 0;
padding: 0;
list-style: none;
display: none;
}
ul#navigation_2 li ul li
{
display: block;
width: 150px;
text-align: left;
}
ul#navigation_2 li:hover ul
{
display: block;
position: absolute;
background-color: #CBD966;
}
Here, I have a working example:
http://jsfiddle.net/hzCZY/2/
Never underestimate the power of inline-block! Basically your list was colliding with the text 'About' as opposed to the red box around the text 'About'. I formatted the actual a tag to be the red block instead, an inline-block, which then collided correctly with the ul below it.
If you need any more explanation I'd be more than happy to help.