I've been attempting to build a navigation using display: table. The code is a simple div as display: table, a ul for the display: table-row and each li as display: table-cell.
Each li has an a tag inside and I simply want to add a margin to a tag for the active page in the navigation defined by an .active class, however it seems to add the margin for every li.
Any idea what is going on here?
Working example: http://jsfiddle.net/Gxpb3/4/
Code
<div>
<ul>
<li>Pie</li>
<li>Pie</li>
<li>Pie</li>
<li class="active">Pie</li>
<li>Pie</li>
<li>Pie</li>
</ul>
</div>
div {
margin-top: 50px;
display: table;
width: 100%;
}
ul {
display: table-row;
max-width: 400px;
margin: 0 auto;
}
li {
display: table-cell;
text-align: center;
background: red;
height: 50px;
}
a {
color: #fff;
display: block;
background: black;
}
li.active a {
margin-top: 5px;
}
a:hover {
background: grey;
}
Well I've figured it out. Strangely, all the li elements increase in size when margin is added to one of the a tags. Adding vertical-align with any value seems to prevent them expanding and produces the desired effect.
However, I have no idea why this happens.
Fiddle: http://jsfiddle.net/2DGjV/
Related
I have a horizontal navigation menu using unordered lists. Under the menu there is a straight gray line which has to have 100% width of the parent container. When hovering the list elements, the part of the line has to be colored blue right under the list element. I can't find any suitable way of doing this. I got it working with position:relative and adding top:14px but it isn't really satisfying me since any changes to the font size or font face will destroy everything. I also thought about changing margins between elements to padding, increasing li's height and giving each one the same gray border and just changing it's color on hover, but I need the line to go all along the parent div's width.
How it has to look:
expected result
My current code:
#container {
width: 80%;
margin: auto;
background-color: white;
}
#container ul {
list-style-type: none;
display: inline-block;
margin: 0;
padding: 0;
margin-top: 5px;
margin-bottom: 10px;
}
#container ul li {
float: left;
margin-left: 20px;
}
#container ul li:first-child {
margin-left: 0;
}
#container ul li a {
text-decoration: none;
color: black;
}
#container ul li a:hover {
color: grey;
}
#container #slider {
display: inline-block;
height: 5px;
background-color: #f1f1f1;
width: 100%;
}
<div id="container">
<ul>
<li>INDEX</li>
<li>HELP</li>
<li>LONG LINK TEXT</li>
</ul>
<span id="slider"></span>
</div>
JSFiddle: https://jsfiddle.net/9fhvyk76/3/
You'll want to use a pseudo element so you have more control over the size/position without really needing to change much. Just add position: relative to the link itself so the pseudo's scale and positioning are associated with it. Let me know if this is what you were looking for!
https://jsfiddle.net/g00jrsqf/
#container ul li a{
position: relative;
}
#container ul li a:after{
content: '';
position: absolute;
display: block;
width: 100%;
height: 4px;
background: #01a2e8;
opacity: 0;
left: 0;
bottom: -29px;
}
#container ul li:hover a:after{
opacity: 1;
}
I need a fixed-width table with columns which have a variable width, so depending on their content, but where the horizontal distance between these contents is the same.
This is what I get:
-----------------Table Width-----------------
|----Long Content----|---Content---|--More--|
This is what I want:
----------------Table Width------------------
|---Long Content---|---Content---|---More---|
Please note the count of the minus-sign in the content cells! When you measure the spaces between the content of the columns, by using a screenshot, you'll notice, that they aren't always exactly the same.
This is my markup:
<ul>
<li>Long Content</li>
<li>Content</li>
<li>More</li>
</ul>
This is my not working stylesheet:
ul {
display: table;
width: 600px;
}
li {
display: table-cell;
text-align: center;
border: solid 1px #000;
}
Here is my jsFiddle: http://jsfiddle.net/ATwqk/12/. How can I get the desired result?
If i understand this correctly you could try wrap a div fixed width around the ul. then width:100%; on the ul and width:50% on the li
http://jsfiddle.net/ATwqk/3/
#wrapper{
width:500px;
}
ul {
display: table;
width: 100%;
}
li {
display: table-cell;
text-align: center;
border: solid 1px #000;
width:50%
}
<div id="wrapper">
<ul>
<li>Long Contentdsdddddddddddd</li>
<li>Content</li>
</ul>
</div>
You need the left and right padding properties set to 2.5em. However, this will only work if either there are no breaks or every cell breaks its content.
ul {
display: table;
width: 300px;
}
li {
display: table-cell;
text-align: center;
border: solid 1px #000;
padding: 0 2.5em;
}
Try this on your ul tag. This should do exactly what you want.
ul
{
display: flex;
justify-content: space-between;
width: 600px;
}
Updated jsfiddle:
http://jsfiddle.net/ATwqk/19/
I'm trying to set up two logos side-by-side (i.e. inline) from an unordered list. The logo images should replace the text links.
<footer>
<ul id="footer-social" class="pull-right">
<li class="footer-facebook">Become a Facebook Fan</li>
<li class="footer-twitter">Follow us on Twitter</li>
</ul>
</footer>
http://jsfiddle.net/KKd6K/1/
Any help would be appreciated.
http://jsfiddle.net/KKd6K/2/
Relevant changes: set li to block so I could set a width/height to the size of the background image; set the anchors to block as well to allow for text-indent; set background on li instead of a.
#footer-social li {
display: block;
float: left;
width: 30px;
height: 30px;
overflow: hidden;
}
#footer-social li a {
display: block;
text-indent: -99999px;
}
#footer-social li.footer-facebook {
background: url("http://s14.postimg.org/lszvw6dwd/facebook_logo.png") no-repeat;
}
#footer-social li.footer-twitter {
background: url("http://s12.postimg.org/m5agrq8ah/twitter_logo.png") no-repeat;
}
Use display: inline or display: inline-block on your list item li:
li{
display: inline;
}
In case you want to keep on using background-images go with display: inline-block as it works partly as a block element and you can set width and height as well:
li{
display: inline-block;
width: 30px; /* set to width of background-image */
height: 30px; /* set to height of background-image */
}
I'm creating a horizontal navigation bar. Here's its CSS:
#topnav {
clear: both;
overflow: hidden;
display: table;
}
#topnav ul {
display: table-row;
}
#topnav ul li {
display: table-cell;
vertical-align: middle;
background: #1b4260;
position: relative;
}
#topnav a {
display: block;
color: white;
padding: 10px 0px 15px 10px;
font-size: 14px;
width: 100px;
text-align: center;
}
#topnav ul li+li:before{
content: "*";
position: absolute;
top: 11px;
color: #ff0000;
float: left;
}
And here's the HTML:
<p>---</p>
<p>---</p>
<div id="topnav">
<ul>
<li>
Item 1
</li>
<li>
Item 2
</li>
<li>
Item 3
</li>
</ul>
</div>
This creates a navigation bar with little asterisk separators. It looks fine in every browser...
... except Firefox. Firefox ignores "position: absolute" on the generated content:
Why would it do that? Am I doing something wrong with my CSS?
You need to position the ul also:
#topnav ul {
display: table-row;
position:absolute;
}
See here: http://jsfiddle.net/k5hVP/1/
I know it's not ideal, but I found a way to do it without positioning to top and without absolutely positioning the ul. You remove the top positioning, and use a margin-top to adjust the position of the asterisk.
http://jsfiddle.net/ajPLB/7/
Jani's solution concerns me because position:relative should theoretically work, as well (and it'd be the less intrusive solution), but it doesn't, which means the solution doesn't have anything to do with normal positioning priorities, and seems to rely on some odd way Firefox handles positioning priority.
I'm looking for a quick cross browser solution to my need for auto margins.
I have a simple list:
<ul>
<li>text</li>
<li>text</li>
<li class="possibly_last">text</li>
</ul>
With a width of 600px.
What I need is CSS code to make sure there is an even margin between each <li>.
So that they stretch across the full 600px evenly.
I may need to as a "last" class, but that's fine.
I just want a browser friendly way to do this.
Any help would be great, Thanks!
Try this:
<style>
li {
display: block;
float: left;
width: 32%;
}
</style>
If that does not work, try this:
<style>
li {
display: block;
float: left;
width: 200px; // or less
}
</style>
I take it you mean you don't want a margin after the last li? In that case, use the CSS :last-child selector:
ul li
{
margin-right: 10px;
width: 190px; // 190px = 200px - margin width
display: inline-block;
zoom: 1;
*display: inline;
}
ul li:last-child
{
margin-right: 0px;
}
Please note that this will NOT work in any internet explorer except IE9. Sorry :-(
As a fix, you could use JavaScript (notably jQuery) to edit the CSS of the last child.
An example here: http://jsfiddle.net/WtLAm/2/
Are you intending to float the list items so they stretch horizontally to fill the ul that way? if so, something like
<style type="text/css" media="screen">
ul {width: 600px;}
li {display: inline; float: left; width: 33%;}
</style>
would work.
I think this can't be done with margins, I suggest you this solution:
http://jsfiddle.net/wY5t6/
css:
ul li {
margin: 0;
display: block;
float: left;
width: 200px;
text-align: center;
}
ul {
width: 600px;
overflow:hidden;
}
If you need to set padding, background etc on list item than you can do it this way:
http://jsfiddle.net/wY5t6/1/
HTML:
<ul>
<li><span>text</span></li>
<li><span>text</span></li>
<li class="possibly_last"><span>text</span></li>
</ul>
CSS:
ul li {
margin: 0;
display: block;
float: left;
width: 200px;
text-align: center;
}
ul {
border: 1px green dotted;
width: 600px;
overflow:hidden;
}
li span {
background: yellow;
padding: 5px;
}