My horizontal navigation bar looks like this:
| MENU-ITEM 1 | MENU-ITEM-2 | MENU-ITEM 3 | SEARCH FIELD |
The menu-items have equal width, but since the website is cms-driven, the count of items and therefore the width of the menu-item-list will change.
I'm looking for a CSS solution for automatically stretching the search-field on the right to use 100% of the remaining space inside the navigation bar. The navigation-bar's total width is static (about 950px).
html is something like this, but maybe I need wrappers anyway:
<div id="nav">
<ul id="nav-items">
<li class="nav-item">MENU-ITEM 1</li>
<li class="nav-item">MENU-ITEM 1</li>
<li class="nav-item">MENU-ITEM 1</li>
</ul>
<div id="search-cont">
<input id="search">
</div>
</div>
Here is a fiddle with the basics: http://jsfiddle.net/Qg2ag/
The idea is:
The wrapper of an input field must have display:block and overflow:hidden.
The menu near it must have the float:left and the items in it must be inline or inline-block.
So, the floated block eats it's width from the block with an overflow, so you can set width: 100% in it safely. And I've added padding-right: 6px to the input's wrapper so there is no need in ajusting it's width or using other box model. Of course the size of this padding can vary if you'd change the input's style.
Maybe it helps if you use display: inline; and float: left; on the li-elements.
This will keep them in one line. You can style these tags now. If you're using a-tags inside the lis you may consider styling these instead of the lis.
The search-bar will then be displayed in one line with these elements but also remain at a width of 100%.
Check out this fiddle.
Related
I am trying to display navigation items (horizontally) in a blue colored ribbon. Somehow, the background-color property is not getting applied to the ul element. I tried to put it inside a div element with background as blue. Still, it doesn't work
Html snippet as,
<div style="background-color:blue;">
<ul style="list-style-type:none;background-color:blue;">
<li style="float:left;margin-right:10px;">cassandra</li>
<li style="float:left;margin-right:10px;">mongodb</li>
<li style="float:left;">couchdb</li>
</ul>
</div>
Why is my background color not showing if I have display: inline?
This is the same issue as this. The div is coming out at height 0, same as the list as the float doesn't take up any space.
If you specify the height or tell them to display:inline-block it'll work.
Fiddle: http://jsfiddle.net/7vp4vz6f/
You are using float property for the li elements, so you need to apply some sort of clearfix for container to adjust it's size according to the content size. You can try with the overflow CSS property:
body > div { overflow: auto}
JSFiddle
<div style="background-color: blue; overflow: hidden;">
<ul style="list-style-type:none;background-color:blue;">
<li style="float:left;margin-right:10px;">cassandra</li>
<li style="float:left;margin-right:10px;">mongodb</li>
<li style="float:left;">couchdb</li>
</ul>
</div>
Your elements have no width and height, that's why.
Also, consider using a stylesheet, one of the many advantages is that you don't run into such issues very often.
So I have been trying to wrap my mind around this and cant figure it out why.
Note: Margin and padding is 0.
The 1st example is
<div> <!-- Gray Box -->
<div> <!-- Purple Box -->
</div>
</div>
I have two images - One is float, the other is inline-block.
The height of the div is shown by the gray color.
float: left;
display: inline-block;
The 2nd example is
<div>
<ul>
<a href = "#">
<li>
<img src = "...">
</li>
</a>
</ul>
</div>
Again, left and inline-block do different things
float: left;
display: inline-block;
Bottom Line
Any suggestions beside the question is welcome.
I don't know why margin / padding is changing and why div size matters by float and display. Thanks
There are 2 problems here.
1) Like someone mentioned in the comments, inline block takes space into account, meaning on the parent div you should have:
font-size:0;
2) Floating takes the element out of the document flow, meaning the parent will expand only past the last non floated child element. To fix this you should put a clearfix class in your css and add it to the parent of the floated element(s).
.clearfix::after{
content:'';
display:block;
clear:both;
}
So once you've done this your first example should look like this:
<div class="clearfix"> <!-- Gray Box -->
<div style="float:left"> <!-- Purple Box -->
</div>
</div>
Now the gray box should expand past the purple box;
As a matter of consistency i don't think you should mix inline-block with floating. One, it won't work on the same element and 2, they are designed for different things.
How can I force my tabs to take all the remaining space in the vertical menu? so, adjust the spaces between the tabs according to the number of tabs.
<div id="menu">
<ul>
<li>
<a class="lien_menu"><br>Onglet0 loooooooog</a>
</li>
<li>
<a class="lien_menu"><br>Onglet1</a>
</li>
</ul>
Here is my current code : http://jsfiddle.net/96EGh/
Thanks in advance.
Do you mean the fill the width or the height?
If you mean the height (as it's a vertical menu). You need to give your container a height so that the UL will fill it, and allow the LI elements to fill the rest of the space.
I've made a fiddle using a fixed height and display: table; / display: table-cell; to achieve this at http://jsfiddle.net/96EGh/3/
You can add more LI elements and they will fill the space.
you can do by css
ul{display:table;}
ul li{display:table-cell;}
You can do percentages.
ul li {width:48%;margin-right:1%;}
ul{width:100%}
Use percentages in width and Ems in font.
Hi I'm having some trouble removing a small gap between an image and my navigation bar. I've honestly tried just about everything i can think of. Setting inline-blocks on my ul and li level, and using text-align: left don't seem to be moving the hyperlinks to the left-most side of the div, and from there I'm not to sure what should be done. There is a padding, but it shouldn't be causing that much of a gap.
Here is the html code:
<div id = "header">
<img src ="img.png"/>
<div id ="nav_bar">
<ul class="nav">
<li class= "nav">Home</li>
<li class= "nav">Our Products</li>
<li class= "nav">Categories</li>
<li class= "nav">About Us</li>
<li class= "nav">Contact Us</li>
</ul>
</div>
</div>
Here's a jfiddle describing what I'm talking about.
http://jsfiddle.net/37VZb/1/
To clarify the gap I'm talking about is between the right of the image and the left most nav bar element.
That's because of a space character between inline(-block) elements. This could be fixed by commenting that space out this way:
<img src ="http://www.leapcms.com/images/100pixels1.gif"/><!--
--><div id ="nav_bar"> ...
JSFiddle Demo.
Similar topic on SO:
How to remove the space between inline-block elements?
And a good reference:
http://css-tricks.com/fighting-the-space-between-inline-block-elements/
Update
The remaining space belongs to the user agent applied style on the <ul> element.
Web browsers usually apply some padding on the list elements. To remove that set padding: 0; as follows:
ul.nav { padding : 0; }
Here is the Updated Fiddle.
is this what you mean? You can target the nav class on your ul and adjust the default margins that are being assigned
ul.nav{
margin: 10px 0;
}
JSFIDDLE
Your gap is a white space like you find in between words since both element are set as inline boxes. In your CSS you set as well somme padding to ul and a , they both are there.
http://jsfiddle.net/37VZb/8/
.nav_bar, .nav{
padding:0;
display:inline-block;
}
To get rid of it:
1) do not indent your code and get closing and opening brackets of element touch each other
2) add a CSScomment in between to swallow that white-space
3) set font-size to 0 (0.01px for IE) to parent of these inline-boxes and reset it ot back to 1rem (and or px/pt) for img (alt) and nav_bar
negative margin or negative letter-spacing are not to be used, it is not reliable and not meant to care about this
I have a very simple layout, just two un-ordered list by using <ul><li>, with each of them inside a <div> .
<div id="main">
<div id="fist-list">
<ul id="colors">
<li id="white">White</li>
<li id="green">Green</li>
</ul>
</div>
<div id="second-list">
<ul id="numbers">
<li id="one">One</li>
<li id="two">Two</li>
</ul>
</div>
</div>
li{
float: left;
width: 30px;
}
#second-list{
padding-left:30px;
}
you can check my simple code here .
I tried to use CSS padding-left to seperate the two list 30px away from each other, but my CSS does not work, why?
If you still want the float at the li
You can float the list left, then it will work.
like this:
#second-list{
padding-left:30px;
float:left
}
Still I would make it another way, but I need to see what you want to achieve. Do you have a picture of it?
There's several problems here:
You're using Float, which destroys the layout
Div's are block-level elements, and thus will always break the line.
Simply remove the float, and make the divs inline-blocks, like so:
http://jsfiddle.net/a8dy6/12/
good luck!
write overflow:hidden in you div to clear because it child's float
div{overflow:hidden}
#second-list, #fist-list{float:left}
check this http://jsfiddle.net/sandeep/a8dy6/18/
Edit: as per you comment below
li{clear:left;}
check this http://jsfiddle.net/sandeep/a8dy6/19/
EDIT:
Reason: actually the #second-list takes the padding
if you define an element an float then you have to clear it parent otherwise parent collapse.
check this when didn't clear the parent http://jsfiddle.net/sandeep/a8dy6/22/
So; you have to clear it's parent when the child have float.
check this after clear parent http://jsfiddle.net/sandeep/a8dy6/23/