I am developing a website and I want a menu like the above image. This is what I have tried: jsFiddle
HTML
<div class="">
<ul class="header-menu-ul">
<li class="header-menu menu-link1-color">ABC's Office</li>
<li class="header-menu menu-link2-color">Benefits</li>
<li class="header-menu menu-link3-color">NEW Brand</li>
<li class="header-menu menu-link4-color">Editorial</li>
<li class="header-menu menu-link5-color">Manger</li>
<li class="header-menu menu-link6-color">Extra</li>
</ul>
</div>
The problem I'm facing is it's taking a space between <li> tags.
I just floated the list items to the left, like this:
.header-menu-ul li {
float: left;
}
WORKING FIDDLE: link.
DEMO
This will create an always single line menu unliek the floating solution where often items fall from position on small sizes + no spaces between the items.
Code:
.header-menu-ul{
display: table;
width: 100%;
}
.header-menu{
display: table-cell;
}
my approach would be using inline-block and min-width. can also use percent in width (1oo% / total_li ).
Related
For the navigation on a website I am making I am using a side bar that is set up using an unordered list. There are also multiple lists inside of lists. I used multiple div's too. I have now run into the issue that form inside of a div I need to set up some code that will contradict the div that it is in. In my case I have css of line-height: 35px; I need to edit this to become 15px.
Here is the code i need to edit it is the center( sub List )
<li>
<h2> Tech Ed. Classes</h2>
</div>
<div id="sidebarLinks"><!-- USE THIS DIV SECTION FOR A LIST WITH BULLET POINTS -->
<ul>
<li><strong><em>Main Page</em></strong></li>
<li>Construction</li>
<li>Drafting</li>
<li>Electronics</li>
<ul id="subList">
<li >INTRODUCTION TO ELECTRONICS</li>
<li>EXPLORING CAREERS IN ELECTRONICS</li>
</ul>
<li>Graphic arts </li>
<li>Manufacturing</li>
<li>Project Lead the Way</li>
<li>Transportation, Distribution, & Logitstics</li>
<li>Wood Working</li>
</ul>
</div>
</li>
You can do this simply by adding a css class to the elements you want to change to be different from the div they are in. For example:
li {
line-height: 35px;
}
.smaller {
line-height: 15px;
}
This CSS will make the line-height on all <li> elements equal to 35px, except for <li> elements with a class of smaller. Those will have a line-height of 15px. For example:
<ul>
<li>This will have a line height of 35 pixels.</li>
<li class="smaller">This will have a height of 15 pixels.</li>
</ul>
<ul class="smaller">
<li>This will have a line height of 15 pixels, the ul has a class of smaller.</li>
<li class="smaller">This will have a height of 15 pixels as well.</li>
</ul>
JSFiddle
I would suggest adding a more specific selector for the inner list. This method would not require any changes to your existing markup:
#sidebarLinks {
line-height: 25px;
}
#sidebarLinks #subList {
line-height: 15px;
}
Here is a fiddle demonstrating the above selectors: JSFiddle
I am trying to style the output of wp_list_categories using CSS to put commas in between items. However, there is a whitespace appearing before the comma and I seriously cannot comprehend where it is coming from!
I have made a jsbin to demonstrate and compare.
Screenshot:
HTML:
<ul id="category-listing">
<li class="cat-item cat-item-6">Branding
</li>
<li class="cat-item cat-item-4">Environment
</li>
<li class="cat-item cat-item-5">Exhibition
</li>
<li class="cat-item cat-item-8">Lecture
</li>
<li class="cat-item cat-item-9">Photography
</li>
<li class="cat-item cat-item-10">Print
</li>
</ul>
CSS:
li {
font-size: 46px;
display: inline;
margin: 0;
padding: 0;
}
#category-listing li:after {
content: ', ';
}
The white space is appearing because it is there in your HTML code.
The closing </li> tag is on a new line. Carriage returns are counted as white space in HTML, and therefore you have white space at the end of the list item element.
The reason it is showing up is because you're using display:inline. When usign inline (or inline-block), white space is relevant because inline means "treat this element as plain text", and therefore any white space is considered an intentional part of the text.
The best way to get rid of this is to simply put the </li> closing tag on the same line as the rest of the text, so that there is no white space there.
There are a number of other ways around it, but most of them involve quite hacky CSS; simply closing up the space is by far the easiest option.
The next best alternative is to switch to using float:left instead of display:inline. This will also deal with the problem, but will change the way the whole thing is rendered, which will require you to make various other changes to your CSS to compensate.
FLoating the anchor inside the list item will solve this issue:
li a {float:left;}
It is because you have spaces with inline display. You have two choices:
Remove spaces:
<ul id="category-listing">
<li class="cat-item cat-item-6">Branding
</li><li class="cat-item cat-item-4">Environment
</li><li class="cat-item cat-item-5">Exhibition
</li><li class="cat-item cat-item-8">Lecture
</li><li class="cat-item cat-item-9">Photography
</li><li class="cat-item cat-item-10">Print</li>
</ul>
Use float:
ul {overflow: hidden;}
ul li {float: left;}
I have a nested list like:
<ul id="nav">
<li id="" class="">
Wedding
<div class="flyoutWrapper" style="display:block;">
<ul class="flyout fourCol">
<li id="" class="">
.....
</li>
<li></li>, etc
</ul>
</div>
</li>
</ul>
I want all the li's inside of class="flyout fourCol" to float next to each other.
This is what I want my dropdown to look like:
#nav .flyout.fourCol { width:900px; }
http://jsfiddle.net/t7esz/ (this works)
#nav .flyout.fourCol { width:auto; }
http://jsfiddle.net/sumcA/2/ (this doesn't work!)
If you only want it to expand, set the min-width property to a fixed value (like 900px). Keep width on auto.
I haven't inspected how your entire menu works, but setting that min-width on .flyout.fourCol only seems to work for the entire thing.
I'm trying to figure out how to align the images (top right buttons) in a top row of 3, then a bottom row of 3. (*****)
I've tried to alter the .main-nav width to try and squeeze them on the next line but i think it's inheriting something from above. Using Chromes developer tool i was looking at the header element and noticed ul.main-nav has a height of 0px, could this be stopping them from coming down?
anything to point me in the right direction would be a great help, thanks!
Change the li css:
display: block; and the ul css: width: 300px; float:right;
Is this what you want?
I just added a width and float:right to the ul the li are in!
<ul class="main-nav" style="width: 287px;float: right;">
<li class="item-rss"><a target="_blank" href="http://www.wp-arena.com/?feed=rss2"></a></li>
<li class="item-fav"><a target="_blank" href="#"></a></li>
<li class="item-contact"><a target="_self" href="#"></a></li>
<li class="item-xing"><a target="_blank" href="#"></a></li>
<li class="item-facebook"><a target="_blank" href="#"></a></li>
<li class="item-twitter"><a target="_blank" href="#"></a></li>
</ul>
You may wrap images into a div with fixed width just to fit 3 images and other three will be in the next line.
I have a css sprite navigation bar where the li's are wrapped in a href tags for linking...
<div id="header">
<ul>
<li id="supplements-link"></li>
<li id="tutorials-link"></li>
<li id="blog-link"></li>
</ul>
</div>
It works fine for me in Safari, Chrome, Opera & IE - but the links aren't active in Firefox, and when I look at the code in Firebug, Firefox renders the a href and li tags as separate lines:
<div id="header">
<ul>
<li id="supplements-link"></li>
<li id="tutorials-link"></li>
<li id="blog-link"></li>
</ul>
</div>
Any tips? Thanks!
li elements are the only elements that can be children of ol or ul. Your HTML is invalid at the moment.
Please wrap the lis around the as.
You'll want to style up the a inside the li making it's width and height 100%, here's some other suggestions:
http://doctype.com/make-li-clickable-target-url
Why not just put the anchor tags inside the LI elements? That's how it's usually done.
<ul> doesn't support <a> as a child, your html is not properly formatted, try this instead:
<div id="header">
<ul>
<li id="supplements-link"></li>
<li id="tutorials-link"></li>
<li id="blog-link"></li>
</ul>
</div>
You need to put a's inside li's, and then display: block; in your CSS, this will make the whole li a link instead of just the text, which I think is what you're probably trying to achieve?
That way you then add padding etc to your <a> tag to make the link blocks bigger. This will solve the FF issue:
CSS:
#header ul li a {
display: block;
padding: 10px;
}
HTML:
<div id="header">
<ul>
<li id="supplements-link">Supps link</li>
<li id="tutorials-link">Tuts link</li>
<li id="blog-link">Blog link</li>
</ul>
</div>