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.
Related
I have a list with images in. The list is a centered column in foundation.
Fiddle
I need it so that the list elements images are all aligned in the same 'row' rather than going down the page.
How can I do this? I've tried:
li{
display: inline;
}
But no luck.
Add display: inline-flex to your ul
ul {
list-style: none;
display: inline-flex;
}
img {
border: 1px solid black;
}
<div class="row">
<ul class="small-4 medium-6 small-centered columns">
<li>
<img src="http://api.ning.com/files/yallYWJbJ*ZVuc1yUMGYuXL4artVmJUl*Uuzcv2prT67gOy0nNVLPjrRE1GYTasJCNYmjgeSTgORbhuGbyRpcsaQbL1nvAPk/GreenSquare" />
</li>
<li>
<img src="http://api.ning.com/files/yallYWJbJ*ZVuc1yUMGYuXL4artVmJUl*Uuzcv2prT67gOy0nNVLPjrRE1GYTasJCNYmjgeSTgORbhuGbyRpcsaQbL1nvAPk/GreenSquare" />
</li>
<li>
<img src="http://api.ning.com/files/yallYWJbJ*ZVuc1yUMGYuXL4artVmJUl*Uuzcv2prT67gOy0nNVLPjrRE1GYTasJCNYmjgeSTgORbhuGbyRpcsaQbL1nvAPk/GreenSquare" />
</li>
</ul>
</div>
You can give the ul and li a fixed size or % based width and use for lists a display:inline-block
#myUL{
list-style: none;
width: 100%;
position: relative;
display:block;
float:none;
padding: 0;
margin: 0;
}
li{
width: 32.5%;
position: relative;
margin: 0px;
line-height: 14px;
display: inline-block;
}
}
img{
border: 1px solid black;
position:relative;
width:100%;
}
Jsfiddle
Firstly - you need to remove "li" css being nested inside ul.
Then, having li width set to some certain size, and adding display: inline-block; to li's css should do the job.
It has greater universal browser support in opposition to inline-flex (if you're about to have a support for IE9 and below):
HTML:
<div class="row">
<ul class="small-4 medium-6 small-centered columns">
<li><img src="http://api.ning.com/files/yallYWJbJ*ZVuc1yUMGYuXL4artVmJUl*Uuzcv2prT67gOy0nNVLPjrRE1GYTasJCNYmjgeSTgORbhuGbyRpcsaQbL1nvAPk/GreenSquare"/></li>
<li><img src="http://api.ning.com/files/yallYWJbJ*ZVuc1yUMGYuXL4artVmJUl*Uuzcv2prT67gOy0nNVLPjrRE1GYTasJCNYmjgeSTgORbhuGbyRpcsaQbL1nvAPk/GreenSquare"/></li>
<li><img src="http://api.ning.com/files/yallYWJbJ*ZVuc1yUMGYuXL4artVmJUl*Uuzcv2prT67gOy0nNVLPjrRE1GYTasJCNYmjgeSTgORbhuGbyRpcsaQbL1nvAPk/GreenSquare"/></li>
</ul>
</div>
CSS:
ul {
list-style: none;
}
li {
display: inline-block;
width:30%;
margin-right: -4px;
}
img {
border: 1px solid black;
}
JSFiddle
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 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>
Just a forewarning, I am new to HTML and CSS. Please be patient with my inquiry here.
I am attempting to center the navigation bar while overlapping it on the bottom side of the banner. I have a banner image at the top and a background image for the main content which is positioned just below the nav bar. I've attempted to add the following:
ul.navbar li {
float: left}
This floated the nav bar directly underneath the main body background instead of above everything. In order to get the list in a horizontal format i used
ul.navbar li {
display: inline-table}
This was the only variation that would give me the correct horizontal format I was looking for. Now I just need it centered and overlaid on the bottom end of my banner image. Any suggestions? My HTML and CSS is as follows:
CSS:
body {
padding-left: 9em;
font-family: Georgia, "Times New Roman", Times, serif;
color: #6699FF;
background-color: white
}
div#contentareamain1 {
background: url(contentareamain1.png) no-repeat;
background-color: white;
color: white;
height: 634px;
position: relative;
}
div#contentareamain1text {
position: relative;
height: auto;
width: 700px;
left: 5em;
top: 4em;
}
#header {
float:left;
width:100%;
height:87px;
}
.wrap {
position:relative;
margin:0 ;
}
ul.navbar {
list-style-type: none;
padding: 0.3em;
margin: 0;
top: 2em;
left: 5em;
width: 15em;
}
h1 {
font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif
}
ul.navbar li {
background: rgb(157,193,255);
margin: 0.5em ;
padding: 0.3em;
border-bottom: 1em solid black;
text-align: center;
display: inline-table;
}
ul.navbar a:hover {
color: blue;
background-color: #00FFFF;
}
ul.navbar a {
text-decoration: none;
}
HTML:
<body>
<div id="header">
<div class="wrap">
<img src="banner.png"/>
</div><ul class="navbar">
<p> <li>Home </p>
<p> <li>Services </p>
<p> <li>Training </p>
</ul>
<div id="contentareamain1" no-repeat>
<div id="contentareamain1text"><p>
</p></div>
</div>
Thank you so much in advance!
First you should check your HTML structure – it seems there is a missing closing DIV tag and you should delete the wrapping P elements around the list elements.
Try this:
<div id="header">
<div class="wrap">
<img src="banner.png"/>
</div>
<ul class="navbar">
<li>Home</li>
<li>Services</li>
<li>Training</li>
</ul>
</div>
After you just need to give your header image this CSS:
display:block; margin:0 auto; position:relative;
and the ul.navbar needs something like this:
margin:0 auto; float:none; position:relative; top:-35px; width:500px;
and you should delete the relative position of your div#contentareamain1 to get this code work.
div#contentareamain1 { (…) /*position: relative;*/ }
You should really visit W3C and learn your HTML :)
The HTML
<div id="header">
<img src="" />
<ul class="navbar">
<li>Link text</li>
<li>Link text</li>
<li>Link text</li>
</ul>
</div>
<div id="content-area>
</div>
Your HTML contains some <p>-tags who don't belong there. Also I guess you would like your content outside of the header?
The CSS
(I only give you an example how to place your navbar centered in your header, the rest is up to you)
#header {
position:relative;
z-index:1;
text-align:center;
}
#header img {
position:inherit;
z-index:inherit;
}
#header ul.navbar {
position:relative;
z-index:2;
margin:0 auto;
top:-35px;
list-style-type:none;
}
#header ul.navbar li {
display:inline-block;
}
#header ul.navbar li a {
display:block;
padding:4px 8px;
background-color:blue;
color:white;
text-decoration:none;
}
You can see the code in action at jsFiddle and play around with it.
Hope it helped you a bit.
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: