I want to position an unordered list of items on the left-hand side of a menu header (horizontally displayed, not vertically). For example where you see Home, HTML, etc:
How do I accomplish this effect with CSS?
Floats
ul
{
margin: 0;
list-style-type: none;
}
ul li
{
margin: 0;
list-style-type: none;
float: left;
}
ul li a
{
display: block;
}
<ul>
<li>Home</li>
<li>HTML</li>
<li>...</li>
</ul>
To get the lists like you have in your image, you will need to have two sets of UL and then apply a float: left; to the left one and a float: right; to the right.
With floats you have to clear them to avoid "breaking" your design later. You can do this by adding a <br style="clear: both;" /> below the lists. You can also add that style to the next div.
.menu{
text-align:left;
}
.menu ul{
margin:0px;
padding:0px;
}
.menu ul li{
display:inline;
margin:0px;
padding:0px 10px 0px 10px;
text-align:center;
}
<div class="menu">
<ul>
<li>Menu1</li>
<li>Menu2</li>
<li>Menu3</li>
</ul>
</div>
Related
I have tried but can not make li tag wrap completely a tag inside with its padding. I want the width of the li depends on a''s padding but how ever I try, it doesn't work, if you know whats wrong, Please help me?
<ul>
<li>TAB 1<br />
<ul class="sub-ul">
<li>TEXT1</li>
<li>TEXT1</li>
</ul>
</li>
<li>TAB 2<br />
<ul class="sub-ul">
<li>TEXT2</li>
<li>TEXT2</li>
</ul>
</li>
</ul>
//STYLE
ul >li {display: inline-block; margin-left: 0;}
ul >li > a {padding: 10px 15px;} I need li wrapping around this padding.
I think this is what you are looking for. Hope it helps.
li {
display: inline-block;
margin-left: 0;
}
li > a {
padding: 10px 15px;
}
li ul li {
display: block;
}
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>
I've tryed to implement a simple dropdownmenu without using links ( ).
It's list based. My list elements-width are with procentual values that all together comes to 100%. My last element breaks out in a new line thats what I dont understand. Maybe it has something to do with my margin..
Thanks in advance.
Here is a link to my code:
Fiddle
HTML
<div class="dropDown-menu-container">
<ul class="dropDownMenu">
<li style="width: 20%;">
Initiating
<ul>
<li>punkt</li>
<li>punkt</li>
</ul>
</li>
<li style="width: 20%;">
Planning
<ul></ul>
</li>
<li style="width: 40%;">
Monitoring and Controlling
<ul></ul>
</li>
<li style="width: 20%;">
Closing
<ul></ul>
</li>
</ul>
CSS
.dropDown-menu-container {
position:relative;
width:100%;
float:none;
clear:both;
display:inline;
text-align:center;
}
ul {
position:relative;
float:left;
width:100%;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
ul li {
display: block;
text-align:center;
height:50px;
margin:4px;
box-shadow:0px 0px 2px 2px grey;
background-color:grey;
position: relative;
float: left;
}
ul li:hover {
background-color:lightgrey;
}
li ul {
display: none;
}
li {
position: absolute;
height:50px;
margin-bottom:5px;
top:0px;
}
li:hover ul {
display: block;
top:32px;
}
li:hover li {
float: none;
font-size: 11px;
}
Kind regards!
You're not including your margins in your calculations
Set your width to calc(20% - 8px)
Fiddle: http://jsfiddle.net/bjPrK/16/
The total of your element area is the sum of margin, padding and border.
See http://www.w3.org/TR/CSS2/box.html
You must include the four pixels of each margin in your calculation.
I want a navigation like structure in the header of my page, so I decided I'd use an inline list however the result it is producing is not what I imagined. It is placing the elements on 3 separate lines.
Element 1 Element 2 Element 3
The above is what I am aiming to achieve, however currently I get,
Element 1
Element 2
Element 3
This is my CSS and HTML snippets:
CSS
#nav li {
display: inline;
}
HTML
<ul id="nav">
<li><button id="left_nav"><</button></li>
<li><div id="day">Monday</div></li>
<li><button id="right_nav">></button></li>
</ul>
Thanks.
Use inline-block instead of inline, you can also use this by float...
By Inline-block,
#nav li {
display: inline-block;
}
By Float,
#nav {
overflow:hidden;
}
#nav li {
float:left; margin-right:10px;
}
Try using the following:
#nav li {
list-style: none;
float: left;
margin-right: 5px;
}
Add this to the CSS for your LI's...
li{ display:inline; }
Use
#nav li {
display: inline-block;
}
Demo: Fiddle
use float:left or float:right aligns side by side
#nav li {
float:left;
}
You have buttons and div inside li give width to div and button that will work.
Because div is block level element and its use all the width of page if you not assign fixed width.
OR
apply float: left; to li that will work too.
The structure is different for different users.
Check the link: http://jsfiddle.net/wWyMW/1/
<div id="nav">
<ul>
<li>
Element <span>1</span>
<div class="clr"></div>
</li>
<li>
Element <span>2</span>
<div class="clr"></div>
</li>
<li>
Element <span>3</span>
<div class="clr"></div>
</li>
</ul>
<div class="clr"></div>
</div>
And The CSS:
*{ matgin:0; padding:0}
ul, li{ list-style:none}
a{ text-decoration:none}
.clr{ clear:both;}
#nav{margin:auto; width:960px;}
#nav ul li{ float:left; margin-left:10px}
#nav ul li:first-child{ margin-left:0}
#nav ul li a{ display:block; background:#f00; color:#0F0; line-height:30px; text-align:center; width:70px; padding:0px 10px; font-weight:bold;}
#nav ul li a span{ display:block; float:right;}
Add this CSS:
#navigation ul
{margin:0px; padding:0px;}
#navigation ul li
{display:inline; height:30px; float:left; list-style:none; margin-left:15px;}
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: