can some one explain why the box around my links are acting up
code is
CSS
#navigationbar ul{
margin:0;
padding:0;
}
#navigationbar ul li {
display: inline-block;
height: 20px;
}
#navigationbar ul li a {
padding: 10px;
}
HTML
<div id="navigationbar">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<ul>
</div>
the box around the links is 19px in height.. the padding makes it 39px, or 41 if i change padding to 11px.. so how do i get it to be 40px like my main navigation container?
or maybe a more efficient way to do all this?
Like this
you use li but forget close li and you do end tag.
please use <li></li> can't use <li></div>
DEMO
CSS
#navigationbar ul{
margin:0;
padding:0;
}
#navigationbar ul li {
display: inline-block;
height: 20px;
}
#navigationbar ul li a {
padding: 10px;
}
HTML
<div id="navigationbar">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
DEMO1
CSS
#navigationbar ul{
margin:0;
padding:0;
}
#navigationbar ul li {
display: inline-block;
background-color:red;
height:40px;
}
#navigationbar ul li a {
padding:11px;
vertical-align:middle;
}
Try this css the height of anchor is 40px now ,
CSS
#navigationbar ul{
margin:0;
padding:0;
}
#navigationbar ul li {
display: inline-block;
height: 19px;
}
#navigationbar ul li a {
padding: 10px 0px 11px 0px;
}
HTML
<div id="navigationbar">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<div id="navigationbar">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<ul>
</div>
Related
I'm trying to use PureCSS, and get menudrop downs using CSS (rather than via either YUI or Jquery for portability reasons).
This is what I have so far:
http://jsfiddle.net/ket262p3/3/
<div class="pure-menu pure-menu-open pure-menu-horizontal">
<ul>
<li class="pure-dropdown">
Test1
<ul>
<li>Test2</li>
<li class="pure-menu-separator"></li>
<li>Test3</li>
</ul>
</li>
<li class="pure-dropdown">
Test1
<ul>
<li>Test2</li>
<li>Test3</li>
<li>Test4</li>
<li>Test5</li>
</ul>
</li>
</ul>
</div>
and:
#import url("http://yui.yahooapis.com/pure/0.5.0/pure-min.css");
.pure-menu-horizontal ul {
padding:0;
margin:0;
font-weight: bold;
width: 100%;
position: relative;
}
.pure-menu-horizontal ul li {
float:left;
position: relative;
display: block;
}
.pure-menu-horizontal ul li a {
display:block;
}
.pure-menu-horizontal ul ul {
display: block;
position: absolute;
top: 58px;
}
.pure-menu-horizontal ul li:hover > ul {
display: list-item;
left: auto;
}
I think the underlying problem may be some subtly in purecss that causes the second level menu not to display.
Ignore the extra classes - they represent earlier stages of getting this to work with YUI or JQuery.
You have to set the visibility of your subnavigation to visible.
.pure-menu-horizontal ul li:hover > ul {
display: list-item;
left: auto;
visibility: visible;
}
Example:
http://jsfiddle.net/ket262p3/6/
On further investigation it appears that a lot of the infrastructure for doing this is already built into PureCSS, but not documented very well. I replicate the solution below so that other people can find it.
The main solution is documented here: https://gist.github.com/maxbeatty/7829915
I have replicated in a jsfiddle: http://jsfiddle.net/0562cqd8/1/
The html is as follows
<!-- includes pure-min.css -->
<div class="pure-menu pure-menu-open pure-menu-horizontal">
Heading
<ul class="pure-menu-children">
<li class="pure-menu-can-have-children pure-menu-selected">
Cars
<ul>
<li>
Blue
</li>
<li>
Red
</li>
<li>
Green
</li>
</ul>
</li>
<li>
Trucks
</li>
</ul>
</div>
With CSS like this:
#import url("http://yui.yahooapis.com/pure/0.5.0/pure-min.css");
.pure-menu-can-have-children:hover {
background: #eee;
}
.pure-menu-can-have-children:hover ul {
top: 35px; /* height of menu li */
left: 0;
visibility: visible;
border: 1px solid #b7b7b7;
background: #fff;
}
Please try this css
.pure-menu ul
{
margin:0;
padding:0;
float:left;
width:100%;
}
.pure-menu ul > li
{
margin:0;
padding:0;
float:left;
list-style:none;
position:relative;}
.pure-menu ul > li >a
{
margin:0;
padding:0;
float:left;
padding:8px 4px;
text-decoration:none;
color:red;}
.pure-menu ul > li > ul
{
position:absolute;
top:100%;
left:0;
display:none;
width:200px;
}
.pure-menu ul > li > ul >li
{
width:100%;
}
.pure-menu ul > li > ul >li >a
{
padding:8px 20px;
background:red;
color:#fff;}
li.pure-dropdown:hover ul {
display:block;
}
change the color as per your requirement
I can't get the hover in my menubar to work. The html and css is below. I can get the display: none to work by itself. I can get the hover to work by itself. They just won't work together. Not sure what I am doing wrong.
This is the html:
<nav>
<ul>
<li><img class="mainbar"src="images/logov6v2.png" width="175" height="150" padding="0" text-align="center" vertical-align="text-top">
<li id="menudrop" class="rightbar">Menu</li>
<ul data-toggle="">
<li>Account Settings</li>
<li>About Us</li>
<li>Contact</li>
</ul>
</li>
</ul>
</nav>
This is the css:
#menudrop.rightbar ul li a {
color: red;
display: block;
text-decoration: none;
}
nav ul li ul {
display: none ;
background: #5f6975;
position: relative;
top:100%;
}
nav ul li ul:hover li {
display: block;
}
Besides fixing some missing closing tags the main adjustment is to change this
nav ul li ul:hover li {
display: block;
}
into that
nav ul li:hover ul {
display: block;
}
As the nav ul li ul ist set to display:none; it's not possible to set a hover on it.
Adjusted in Fiddle
And without the image:
#menudrop.rightbar ul li a {
color: red;
display: block;
text-decoration: none;
}
nav ul li ul {
display: none;
background: #5f6975;
position: relative;
top:100%;
}
nav ul li:hover ul {
display: block;
}
<nav>
<ul>
<li id="menudrop" class="rightbar">Menu
<ul data-toggle="">
<li>Account Settings
</li>
<li>About Us
</li>
<li>Contact
</li>
</ul>
</li>
</ul>
</nav>
im trying to create a Horizontal menu:
CSS
#menu {
display:inline;
float:right;
}
#menu > li {
display:inline;
list-style:none;
width:40px;
border-top:4px solid #FFFFFF;
padding-top:20px;
margin-top:25px;
}
HTML :
<div id="menu">
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
</div><!-- menu -->
i have added display:inline; but they are not displaying correctly with the top-border when i remove the display:inline; it works fine but they all display in a vertical list
You are missing UL tag. Now I have update your code. check below code
CSS
#menu {
display:inline;
float:right;
}
#menu > ul > li {
display:inline;
list-style:none;
width:40px;
border-top:4px solid #000;
padding-top:20px;
margin-top:25px;
}
HTML
<div id="menu">
<ul>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
</ul>
</div><!-- menu -->
JSFiddle Demo
You're missing a UL element, which basically says that the following list items are part of an un-ordered list. Here it is in a fiddle:
http://jsfiddle.net/VgRYv/
<div id="menu">
<ul id="navlist">
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
</ul>
</div>
ul#navlist li {
display: inline;
list-style-type: none;
padding-right: 20px;
}
use disply:inline-block; for the li and just float for the ul
http://jsfiddle.net/c94hG/1/
(I have changed the color of the border for display purposes. it was white)
use display: inline-block; instead of inline (or, as alternative, apply a float: left to every <li>)
add float:left to li,or add display:inline-block to li
try this
#menu {
display:inline;
float:right;
}
#menu > li {
list-style:none;
width:40px;
border-top:4px solid #FFFFFF;
padding-top:20px;
margin: 25px 8px 0 8px;
float:left;
}
I have a hosted blog and I'm modifying templates, however the code for adding submenus to the nav bar is straight out of this great tutorial:
http://www.devinrolsen.com/pure-css-horizontal-menu/
I also read this answer to the question on Stackoverflow http://bit.ly/16KQN0M
But if it's a matter of clearing a float, I can't see where to put "clear: both;" in the HTML (at least, nothing I've tried has worked).
And changing #dropnav li li to display: block; doesn't work either. There must be something I'm missing ...
Here is the CSS. The classes at the top are related to the template but I'll leave them in as they might be relevant.
<style type="text/css">
/* Derived from http://www.devinrolsen.com/pure-css-horizontal-menu/ */
#pagebody { position: inherit !important; width: 100%; }
#pagebody-inner { position: inherit !important; width: 100%; }
#alpha, #beta, #gamma, #delta {
display: inline;
position: inherit !important;
float: left;
min-height: 0px;
}
#dropnav
{height:31px;}
#dropnav ul
{margin:0px; padding:0px;}
#dropnav ul li
{display:inline; float:left; list-style:none; position: relative; height:31px;
width: 175px; }
#dropnav li a
{color:#efe1ca; font-family:'Roboto Condensed', sans-serif; font-weight:400;
font-size:12px; }
#dropnav li a:hover
{color:#fff; text-decoration: none;}
#dropnav li ul
{margin: 0px; padding: 0px; display: none; position: absolute; z-index: 99; top:
31px; background-color: #f6f3cb; width: 250px;}
#dropnav li:hover ul
{display:block; width:250px; }
#dropnav li li
{list-style:none; display:list-item; font-size:100%;}
#dropnav li li a
{color: #7a3535; text-decoration:underline; width: 250px; font-size: 16px; }
#dropnav li li a:hover
{color:#000000; text-decoration:none; }
li#main {padding: 0px;} /* Sets the padding of items in the main menu */
</style>
And HTML markup, with titles removed:
<div id="main">
<div id="dropnav">
<ul>
<li class="nav-list-item">-------
<ul id="subnav">
<li style="width:180px;">-------</li>
<li style="width:180px;">-------</li>
<li style="width:180px;">-------</li>
<li style="width:180px;">-------</li>
</ul>
</li>
<li class="nav-list-item">-------
<ul id="subnav">
<li style="width:180px;">-------</li>
<li style="width:180px;"><a href="">-------</li>
</ul>
</li>
</ul>
</div>
</div>
I'm trying to make the <li> fit the width of the <ul> but even with width:auto it doesn't work at all, and I don't know why. I tried to use display:inline-block but this is the same. I don't know how many tabs I will have so this is why I am not using a percentage directly.
I would like to display the list inline when I display the page on a desktop and display one li per line when I am on a smartphone (with media queries).
I have this:
<ul id='menu'>
<li class="button"><a class='current' href='http://'>Home</a></li>
<li class="button"><a href='http://'>Products</a></li>
<li class="button"><a href='http://'>Support</a></li>
<li class="button"><a href='http://'>Contact</a></li>
<li class="button"><a href='http://'>Contact</a></li>
</ul>
and my CSS looks like this:
ul#menu
{
margin:0;
padding:0;
list-style-type:none;
width:100%;
position:relative;
display:block;
height:30px;
font-size:12px;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
/*border-bottom:1px solid #000000;
border-top:1px solid #000000;*/
}
li.button {
background:transparent url(../images/nav_bg.png) repeat-x top left;
height:30px;
width:auto;
}
ul#menu li
{
display:inline-block;
margin:0;
padding:0;
width:auto;
}
ul#menu li a
{
display:inline-block;
color:#999999;
text-decoration:none;
font-weight:bold;
padding:8px 20px 0 20px;
width:auto;
}
ul#menu li a:hover
{
color:#FFFFFF;
height:22px;
background:transparent url(../images/nav_bg.png) 0px -30px no-repeat;
}
ul#menu li a.current
{
display:inline-block;
height:22px;
background:transparent url(images/nav_bg.png) 0px -30px no-repeat;
margin:0;
}
I've found this way to deal with single-line full-width ul where an undefined number of li elements need to be spaced out evenly:
ul {
width: 100%;
display: table;
table-layout: fixed; /* optional */
}
ul li {
display: table-cell;
width: auto;
text-align: center;
}
Basically, it emulates a table. Works in Gecko, Webkit, IE8+.
For IE7 and downwards you should use some inline-block hackery :)
JSFiddle
Since the li count can change, I can only think of accomplishing this with javascript/jquery as you suggested. Just divide 100 by the # of li's and set the width on each one.
var width = Math.floor(100 / $("ul#menu li").size());
$("ul#menu li").css('width', width + "%");
You will probably have to play with the width depending on padding and what not.
As a side note, If you haven't already, I recommend getting a tool like firebug, which will let you edit css and execute js on the fly. It is infinitely useful for fine tuning appearances.
If you want to fill the width of the <ul> with the five <li>s, you will have to give those <li>s a width of 20% each.
Note that you need to change some other details of the CSS if you want to make this work; e.g. with a display:inline-block you make the spaces between the <li> count, so the total width of the <ul> content will be more than 100% wide. I'd suggest removing the display:inline-block and giving them float:left.
Edit: Or do you want them to be distributed proportionally according to their contents? That would be a different challenge.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
body{
margin:0 auto;
}
.main{
width:650px;
border:1px solid red;
padding:5px;
}
ul {
padding:0;
margin:0;
width: 100%;
border-bottom: 0;
}
li{
display: table-cell;
width: 1%;
float: none;
border:1px solid green;
margin:2px;
padding:10px;
text-align:center;
}
</style>
</head>
<body>
<div class="main">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
</ul>
</div>
</body>
</html>
#menu {
padding: 0;
margin: 0;
border: 1px solid red;
position: absolute;
}
#menu li {
list-style-type: none;
float: left;
position: relative;
padding-right: 10px;
}
#menu li a {
text-decoration: none;
}
<ul id="menu">
<li>1A1CASĂ </li>
<li>H1TML-CSS </li>
<li>J1VASCRIPT </li>
<li>PHP </li>
<li>TESTE </li>
<li>CONTACT </li>
</ul>
Wow stumbled upon a very old question here.
For anyone also seeing this and scrolling down here, in 2022 this is easily doable via flexbox.
#menu {
display: flex;
gap: 1rem;
}
li {
list-style-type: none;
}
<ul id='menu'>
<li class="button"><a class='current' href='http://'>Home</a></li>
<li class="button"><a href='http://'>Products</a></li>
<li class="button"><a href='http://'>Support</a></li>
<li class="button"><a href='http://'>Contact</a></li>
<li class="button"><a href='http://'>Contact</a></li>
</ul>
try below css:
style.css (line 87)
ul#menu li {
float: left;
margin: 0;
padding: 6px 0;
width: 11.1%;
}
style.css (line 113)
ul#menu li a.current {
background: url("images/nav_bg.png") no-repeat scroll 0 -30px transparent;
height: 22px;
margin: 0;
}
style.css (line 95)
ul#menu li a {
color: #999999;
font-weight: bold;
padding: 8px 20px 0;
text-decoration: none;
width: auto;
}
see screen shot: