How can I force all items in a horizontal list (menu) to be the same width?
This is my CSS code so far:
a { text-decoration:none; }
#navlist ul { margin:0; padding:0; list-style-type:none; }
#navlist ul li { display:inline; }
#navlist li a {
padding:10px;
margin:2px;
background:grey;
color:white;
}
#navlist li a:hover {
color:white;
background:black;
}
EDIT:
It now works (thanks to #Gaby) by changing the first 3 lines into:
#navlist ul { margin:0; padding:0; list-style-type:none; }
#navlist ul li { float:left; text-align:center; }
#navlist ul li a { text-decoration:none; display:block; width:120px; }
float the elements and make them block instead of inline
#navlist ul { margin:0; padding:0; list-style-type:none; overflow:auto; }
#navlist ul li { display:block;width:100px;float:left; }
You might want to make the a to be block as well, to fill the li and make it all clickable..
Related
I have a navigation bar made from an unordered list in HTML. Within my list I have another nested list which acts (or is supposed to act) as a dropdown-menu. I will let the markup speak for itself:
<ul>
<li>Produkter
<ul class="dropdowncontent">
<li>Moderkort</li>
<li>Processorer</li>
<li>Hårddiskar</li>
<li>Grafikkort</li>
</ul>
</li>
<li>Butiker</li>
<li>Kontakt</li>
<li>Vanliga frågor</li>
</ul>
First of all, I am wondering if I should be using a class (which I am currently doing), or if I should use an ID instead?
Secondly, I have issues with giving my dropdown-menu a width which I wish to be of the same width of the list-item "Produkter". Here is my CSS:
body {
margin:0;
font-family:Arial, Helvetica, sans-serif;
}
ul {
list-style-type:none;
margin:0;
padding:0;
width:100%;
overflow:hidden;
background-color:black;
}
ul li {
float:left;
}
ul li a {
display:block;
color:white;
text-decoration:none;
text-align:center;
padding:14px 16px;
-webkit-transition-duration:0.4s;
transition-duration:0.4s;
}
ul li a:hover {
background-color:#333;
}
ul li ul.dropdowncontent {
}
Notice that the CSS-selector of the dropdown-menu (a nested unordered list) is empty. This is because I simply don't know how to style it.
Help is much appreciated. Sincerely, Max.
I managed to solve my own question, but I would still like some input. This is what I did:
First, I gave my list-items a fixed width of 150px.
ul li {
float:left;
width:150px;
}
Then, I positioned my dropdown-menu as absolute (I don't know why this works, if someone please could explain this to me I would be very happy). Then, I gave the dropdown-menu the same width as my list-items. I also displayed the dropdown-menu as a block-level element. Here it is:
ul li ul.dropdowncontent {
position:absolute;
display:block;
width:150px;
font-size:80%;
}
Thank you all for your answers.
Try following CSS code, No need change your html structure.
body {
margin:0;
font-family:Arial, Helvetica, sans-serif;
}
ul {
list-style-type:none;
margin:0;
padding:0;
width:100%;
background-color:black;
min-height: 46px;
}
ul li {
float:left;
position: relative;
}
ul li a {
display:block;
color:white;
text-decoration:none;
text-align:center;
padding:14px 16px;
-webkit-transition-duration:0.4s;
transition-duration:0.4s;
}
ul li a:hover,
ul li:hover > a {
background-color:#333;
}
ul li ul.dropdowncontent {
position: absolute;
top: 100%;
left: 0;
width: 100%;
display: none;
background-color: #333;
min-width: 150px; // Added otherwise only with parent width dose not possible to show entire link text.
}
ul li:hover > ul.dropdowncontent {
display: block;
}
I am unable to remove the underline in between the clickable buttons. It seems to continue as a block, but I can't remove display:block; as it makes only the text clickable.
#font-face {
font-family:"cfont";
src: url("font/Guerra_Santa.ttf");
}
body {
margin:0;
}
#menu {
background-color:black;
height:70px;
width:800px;
margin-right:auto;
margin-left:auto;
}
#menu ul {
list-style-type:none;
text-align:center;
}
#menu li {
font-family:cfont;
display:inline-block;
text-align:center;
line-height:70px;
height:70px;
width:200px;
background-color:#C28285;
}
#menu ul li a {
display:block;
text-decoration:none;
color:white;
}
Demo
Don't self close the anchor.
Change:
<li><a href="index.html"/>Home</li>
To:
<li>Home</li>
http://jsfiddle.net/wdwgmvtk/13/
I've searched the forum and tried a lot of the suggestions that were already made, but I can't seem to center my site navigation.
I'm using a website builder with access to the CSS, so my knowledge is somewhat limited. I would like to maintain the same width of the navigation across the page, but I would prefer for the actual navigation selections to be centered.
Does anyone have any suggestions (preferably simply suggestions since I don't really know what I'm doing). Here is my CSS:
.sf_navigation {
clear:both;
margin:0 auto;
width:auto;
min-height:38px;
height:auto!important;
height:38px;
font-family:Arial;
font-size:13px;
position:relative;
z-index:1000;
}
.sf_navigation ul {
margin:0;
padding:0;
list-style-type:none;
height:1%;
}
.sf_navigation ul li {
margin:0;
list-style-type:none;
display:inline;
float:left;
position:relative;
}
.sf_navigation ul li a {
display:block;
font-weight:700;
padding:12px 37px 0;
text-align:center;
text-decoration:none;
border-right:solid 0;
background-repeat:repeat-x;
height:25px;
width:auto!important;
white-space:nowrap;
width:1%;
}
.sf_navigation ul li a:hover {
text-decoration:underline;
background-repeat:repeat-x;
position:relative;
}
.sf_navigation:after,.sf_navigation ul:after {
content:".";
display:block;
visibility:hidden;
height:0;
clear:both;
}
.sf_navigation .widget_header {
display:none;
}
Add this to sf_navigation CSS
.sf_navigation {
display: table;
}
I have this CSS for a vertical menu:
#charset "UTF-8";
/* CSS Document */
#vertical_menu {
float:left;
padding-left:10px;
}
#vertical_menu > ul > li {
display:inline-block;
width:250px;
}
#vertical_menu > li {
display:inline-block;
list-style:none;
margin-left:-20px;
}
#vertical_menu li a {
display:block;
padding-bottom:10px;
margin-top:15px;
border-bottom:4px solid #000000;
color: #000000;
text-decoration:none;
text-align:center;
}
#vertical_menu li a:hover {
border-color:#666666;
color:#666666
}
ul {
padding:0px;
margin:0px;
}
how can i make the <li> elements without a a href link different like a menu title so the links below are like a sub menu
here is a fiddle with the full code:http://jsfiddle.net/32hqL/
for example, where it says Link Title, needs to be different like a proper title. maybe centered or something
you can wrap the title in a span and then style the span:
<li><span>LINK TITLE</span></li>
#vertical_menu li span {}
http://jsfiddle.net/peteng/32hqL/4/
http://jsfiddle.net/32hqL/1/
You do it by using:
li:not(a) {
color: red;
}
You can set some style on #vertical_menu li, which will be override with #vertical_menu li a
Demo
try this
http://jsfiddle.net/32hqL/11/
CSS
#charset "UTF-8";
/* CSS Document */
#vertical_menu {
float:left;
padding-left:10px;
}
#vertical_menu > ul > li {
display:inline-block;
width:250px;
}
#vertical_menu > li {
display:inline-block;
list-style:none;
margin-left:-20px;
}
#vertical_menu li a {
display:block;
padding-bottom:10px;
margin-top:15px;
border-bottom:4px solid #000000;
color: #000000;
text-decoration:none;
text-align:center;
font-weight:100;
}
#vertical_menu li a:hover {
border-color:#666666;
color:#666666
}
ul {
padding:0px;
margin:0px;
}
li:not(a) {
color: red;
text-align:center;
font-weight:600;
}
You can define set of styles for link title in separate class and give that class to link title li's. Have a look at working demo here: http://jsfiddle.net/32hqL/9/
.title{
text-align: center;
color: blue;
font-weight: bold;
padding: 5px 0 0 0;
}
I have tried to find an answer to my question, and while there are similar issues, nothing jumped out as me as a fix for my problem.
I am adding a Sub menu using CSS and for some reason the horizontal sub menu will only show up outside of the body. You can see an example of what happens here http://jsfiddle.net/sxP94/22/.
I need to get the sub menu to appear right under Portfolio on the menu. If anybody could help me figure out why this is happening, I would be ever so grateful.
Here is the code:
CSS
body {
margin:0;
padding:0;
width:100%;
color:#929292;
font:normal 12px/1.5em "Liberation sans", Arial, Helvetica, sans-serif;
}
html, .main {
padding:0;
margin:0;
}
.main {
background:#f8f8f8;
}
a {
color:#0087c7;
text-decoration:underline;
}
.header, .content, .menu_nav, .fbg, .footer, form, ol, ol li, ul, .content .mainbar, .content .sidebar {
margin:0;
padding:0;
}
.header {
}
.header_resize {
margin:0 auto;
padding:0;
width:960px;
}
h1 a, h1 a:hover {
color:#000;
text-decoration:none;
}
h1 span {
}
.menu_nav {
margin:0 auto;
padding:70px 0 0;
height:15px;
float:right;
}
.menu_nav ul {
list-style:none;
padding:0 0 0 1px;
height:15px;
float:left;
background:url(../images/menu_split.gif) no-repeat left center;
}
.menu_nav ul li:first-child {
margin:0;
}
.menu_nav ul li {
margin:0;
padding:0 20px;
float:left;
background:url(../images/menu_split.gif) no-repeat right center;
}
.menu_nav ul li a {
display:block;
margin:0;
padding:0;
font-size:15px;
line-height:18px;
font-weight:bold;
color:#c4c4c4;
text-decoration:none;
text-transform:uppercase;
}
.menu_nav ul li.active a, .menu_nav ul li a:hover {
text-decoration:none;
color:#000;
}
.menu_nav > ul > li > ul {
height:1000px;
left:-99999px;
overflow:visible;
position:absolute;
top:37px;
width:115px;
float: left;
}
.menu_nav > ul > li:hover ul {
left:0;
top:37px;
}
.menu_nav > ul > li > ul > li {
background:none #343434;
border:1px solid #4f4f4f;
float:none;
height:29px;
margin:-1px 0 0;
padding:0 12px;
position:relative;
width:auto;
z-index:1000;
}
.menu_nav ul li ul li a {
color:#ffffff!important;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
line-height:28px;
text-transform:none;
}
.menu_nav ul li ul li.active a, .menu_nav ul li ul li a:hover {
color:#fff!important;
}
HTML
<body>
<div class="main">
<div class="header">
<div class="header_resize">
<div class="menu_nav">
<ul>
<li class="active"><span>Home</span></li>
<li><span>About</span></li>
<li><span>Services</span></li>
<li><span>Portfolio</span>
<ul>
<li>Boudoir</li>
<li>Babies</li>
<li>Engagement</li>
<li>Wedding</li>
<li>Lifestyle</li>
<li>Family</li>
<li>Grads</li>
</ul>
</li>
<li><span>Blog</span></li>
<li><span>Contact</span></li>
</ul>
</div>
</div>
</div>
</div>
Anytime I change any of the left numbers, the sub menu stops showing up completely. Doesn't even show up on the outside of the body when I hover over the menu. So I can't figure out how to move it around because anything I try makes it disappear completely. Thank you for taking the time to read this and thank you in advance for any help you are able to offer.
Give position: relative to parent of the sub menu. The sub menu is given position:absolute and hence shows up outside.
.menu_nav ul li {
position: relative;
}