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.
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.
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'm trying to figure out why the border extends out so much as well as doesn't put start at the number.
http://kansasoutlawwrestling.com/
mockup:
http://kansasoutlawwrestling.com/assets/images/wrestling2.jpg
<div id="sidebar_left">
<img src="assets/images/ad.png" alt="Spotlight Wrestler"/>
<div id="top5">
<ol>
<li>Joe Smith</li>
<li>John Michaels</li>
<li>Steve Hart</li>
<li>Bret Hogan</li>
<li>Undertaker</li>
</ol>
</div>
</div>
#sidebar_left{width:300px;float:left;}
#sidebar_left img {}
#top5 ol li {padding:11px 0 11px 0;border-bottom:solid 1px gray;}
#top5 ol li:last-child{border:none;}
Will the LI's be links? Try making the text a link or just a span and then put the border on that element. Add padding to the left/right so it doesn't cling to the edges of the text. f you want the lines to be all the same width, give the parent ul a width.
See my mockup: http://jsfiddle.net/2kJJE/1/
The border is going to be the size of the width of the li which is going to be the width of the ul, which as a block level element is going to be the inner width of its container (width - padding).
The numbers/bullets will be rendered depending on the list-style-position. If that property is set to outside then they will render outside the li. Usually that outside space is accounted for in the padding of the ol/'ul. If set to inside then they will render inside theli` however text will wrap as normal so your content for each item wont be indented from the number/bullet.
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.
I have this css code http://jsfiddle.net/989Pd/ where the slash images must be in the middle of text height. How can I do it?
<div class="menu">
<div class="pedio940">
<ul>
<li>Αρχική</li>
<li>Προσθήκη RSS</li>
<li>Επικοινωνία</li>
</ul>
</div>
</div>
Instead of creating the slash as a background image, create it as an inline element and use the CSS: vertical-align:middle.
.menu ul li:after {
content:url("http://i.imgur.com/uB4Gz.png");
display:inline;
vertical-align:middle
}
Demo: http://jsfiddle.net/989Pd/8/
Edit: Yours is on the left, mine is on the right. I've drawn red lines to show the difference. They are not the same.
You can just adjust the height of the li
http://jsfiddle.net/989Pd/3/
put in a top value for the background like this: http://jsfiddle.net/989Pd/9/