I have a simple horizontal menu. Using CSS display:table and display:table-cell, I've made the menu "justified". When the menu gets narrow enough, the text in some of the <a> elements wraps onto 2 lines, thereby increasing the height of those items. The rest of the unwrapped <a>elements stay at the height of 1 line of text, ruining the effect. How do I make all the <a> elements fill up 100% of the height of their containing <li>?
Limitations:
Can't use Javascript to dynamically calculate the height
Can't use Flexbox, as some supported browsers don't support Flexbox
I have an example here: http://codepen.io/anon/pen/cyJEt?editors=110 , using this code:
<ul class = "nav-mega">
<li>
Two words
</li>
<li>
More words
</li>
<li>
Word
</li>
<li>
Word
</li>
<li>
More words
</li>
<li>
End
</li>
</ul>
.nav-mega {
padding:0;
margin:0;
display: table;
width: 100%;
}
.nav-mega > li {
display: table-cell;
min-width: 10%;
background:green;
}
.nav-mega > li a {
display: block;
background:red;
outline:1px solid black;
padding:10px;
}
.nav-mega {
padding:0;
margin:0;
display: table;
width: 100%;
height:100%;
}
.nav-mega > li {
display: table-cell;
min-width: 10%;
background:green;
height:100%
}
.nav-mega > li a {
display: block;
background:red;
outline:1px solid black;
padding:10px;
height:100%
}
adding height 100% to all parents up to html will work
Just needed to shuffle where you were adding attributes.
Put the background and outline on the li instead of the a.
.nav-mega > li {
display: table-cell;
min-width: 10%;
background:green;
background:red;
outline:1px solid black;
}
DEMO
Related
I'm trying to dispaly some element in single line inside header of my blog, but i have problem with logo in it.
here is my code:
CSS:
.list {
margin:0;
padding: 0;
list-style-type: none;
display: table;
table-layout: fixed;
width:100%;
}
img {
padding: 0;
}
.list>a {
display: table-cell;
border-left:1px #47c9af solid;
text-align: center;
color:#47c9af;
height:30px;
text-decoration: none;
}
.container {
background-color: white;
color:#47c9af;
height:100%;
font-family: WYekan !important;
}
HTML:
<div class="container">
<ul class="list">
</li>
<li></li>
<a href='#'><li><h1 >Header Of My Blog </h1></li></a>
<a href='#'><li><p>SubHeader</p></li></a>
<a href='#'><li><h3></h3></li></a>
</ul>
</div>
The result is something like this:
As you can see logo is not in order with other elements, what should i do?
Thanks.
Fixing the Alignment
To fix the alignment you simply need to introduce the vertical-align property to align everything to the top:
.list {
...
vertical-align: top;
}
Making your HTML Valid
A problem with your markup is that ul elements must only contain li children. Your current ul element has a children which have li elements inside them - this is invalid. Wrap your a elements within the li elements instead:
<ul>
<li>
<a></a>
<li>
</ul>
Making your HTML Semantic
You need to ask yourself some questions about your current markup:
What is this a list of? Why are you using the ul element instead of the header element?
Why are you using a p element as a "SubHeader"?
First, let us rearrange your HTML, so the code is valid. A list (ul) has list-items (li). The list items may contain anchors, paragraphs, headings, etc. Not the other way around.
Then we'll need to change the CSS a bit, so the anchors get the right color.
But the most important thing is the vertical alignment of the table-cells. By adding vertical-align to the list items, they'll be in the right alignment.
.container {
background-color: white;
color:#47c9af;
height:100%;
font-family: WYekan !important;
}
.list {
margin:0;
padding: 0;
list-style-type: none;
display: table;
table-layout: fixed;
width:100%;
}
img {
padding: 0;
}
.list>li {
display: table-cell;
border-left:1px #47c9af solid;
text-align: center;
height:30px;
vertical-align: middle;
}
.list li a {
color:#47c9af;
text-decoration: none;
}
<div class="container">
<ul class="list">
<li><img src="http://placehold.it/150x75" /></li>
<li></li>
<li><h1>Header of my blog</h1></li>
<li>Subheader</li>
<li><h3></h3></li>
</ul>
</div>
You can define your .list>a and img tag vertical-align:top;
.list>a, img{
vertical-align:top;
}
.list > a {
vertical-align: bottom;
}
as you have wrap everything inside the anchor tag, we should target the a tag
here's a Jsfiddle
http://jsfiddle.net/SyKnv/
I am trying to get rid of the additional space after each li item, to make the blocks the same size as their content. I tried to display them as inline, but that removes the bullets.
HTML
<div>
<ul>
<li>banana</li>
<li>orange</li>
<li>cherry</li>
</ul>
CSS
div {
width: 40%;
min-height: 50%;
border:1px solid black;
}
li {
border:1px solid black;
}
As mention in my comment you have to make ul display: inline-block; like this:
ul{
display: inline-block;
}
fiddle
try this code DEMO
div{
width: 40%;
min-height: 50%;
border:1px solid black;
}
ul {
margin:0;
padding:0;
}
li{
border:1px solid black;
list-style:inside;
}
CSS
ul{
display: inline-block;
}
Inline-Block
Basically, it’s a way to make elements inline, but preserving their block capabilities such as setting width and height, top and bottom margins and paddings etc.
More Info Regarding Inline-block
Updated Fiddle
I have a 4 element horizontal list using a sprite image as the li background that I've been trying to get centered in the footer div. At this point I think I'm just running in circles randomly changing styles trying to get it. Here's the relevent CSS and HTML:
#footer-share-links {
width:400px;
text-align:center;
margin:10px auto;
background:#FF6666;
border: 1px solid red;
height:36px;
}
#footer-share-links ul {
padding:0;
position:relative;
list-style-type:none;
}
#footer-share-links li {
margin:0 auto;
display:inline;
float:left;
text-align:center;
position:absolute;
}
#footer-share-links li, #footer-share-links a {
height:36px;
}
#ftr_facebook {left:0px;width:25px;}
#ftr_facebook {background:url('sprites/spriteGlobal.2014-0001.png') 0 0;}
#ftr_twitter {left:30px;width:26px;}
#ftr_twitter {background:url('sprites/spriteGlobal.2014-0001.png') -25px 0;}
#ftr_gplus {left:61px;width:26px;}
#ftr_gplus {background:url('sprites/spriteGlobal.2014-0001.png') -77px 0;}
#ftr_linkedin {left:93px;width:26px;}
#ftr_linkedin {background:url('sprites/spriteGlobal.2014-0001.png') -51px 0;}
The background and border on the div are just to help me see the box. The HTML is:
<div id="footer-share-links">
<ul>
<li id="ftr_facebook"></li>
<li id="ftr_twitter"></li>
<li id="ftr_gplus"></li>
<li id="ftr_linkedin"></li>
</ul>
</div>
Using this I get a centered red box from the div, but the list elements are pushed to the left edge. If I add margin:0 auto; to the UL it stays the same. If I add margin-left:100px it does move it towards center, but I don't want to use a fixed value unless I absolutely have to.
Stripped out some of the competing properties to the bare minimum.
JSfiddle Demo
CSS
#footer-share-links {
width:400px;
text-align:center; /* this centers the inline-block list items */
margin:10px auto;
background:#FF6666;
border: 1px solid red;
height:36px;
}
#footer-share-links ul {
padding:0;
position:relative;
list-style-type:none;
margin: 0;
}
#footer-share-links li {
display:inline-block;
width:26px;
height:36px;
background-image: url(http://lorempixel.com/output/abstract-q-c-25-25-6.jpg);
background-position: center;
}
Here is one way of doing it, try the following CSS:
#footer-share-links {
width:400px;
text-align:center;
margin:10px auto;
background:#FF6666;
border: 1px solid red;
height:36px;
line-height: 36px;
}
#footer-share-links ul {
padding:0;
margin: 0;
list-style-type:none;
}
#footer-share-links li {
margin: 0;
display: inline-block;
width: 50px; /* demo only */
background-color: yellow; /* demo only */
}
#footer-share-links a {
display: block; /* or inline-block */
}
Demo: http://jsfiddle.net/audetwebdesign/yN5MP/
As suggested earlier, remove any floats and absolute positioning.
For the parent container #footer-share-links, set the line-height equal to the height value, that way the vertical centering takes care of itself.
On the ul element, make sure to zero out the margins.
Finally, on the li elements, use display: inline-block so that the width is recognized.
You can use your id names to specify width's on the individual li elements as needed.
On the a elements (links), use display: block to get make the link take up the width of the li element so that the link has enough active/control area.
What you need to do:
#footer-share-links li {
/*margin:0 auto;*/
display:inline-block; // change this to inline-block
/*float:left;*/
text-align:center;
/*position:absolute;*/
}
#footer-share-links ul {
...
...
margin: 0; // add this
}
Take out those I commented out, it works
What options (if any) do I have to centre the image within the li tag? What I have is an oversized image deliberately placed into a smaller sized li. What I am trying to achieve is the image centred within the li tag ... ie so that the cropped overflow would be shared on both the left and right, not just the right. The code below is a reduced version of what I am working with.
HTML
<ul>
<li>
<img src = "http://placehold.it/400x100">
</li>
</ul>
CSS
li{
overflow:hidden;
width: 250px;
}
img {
border: 3px solid pink;
}
The codepen is here http://codepen.io/anon/pen/ebCEi. Note: I wont be able to use background images.
li {
overflow:hidden;
width: 250px;
position:relative;
height:106px;
}
img {
border: 3px solid pink;
position:absolute;
left:-75px;
}
jsFiddle example
You'll notice the left and right border on the image isn't visible because it extends beyond the viewport of the list item.
Use text-align:
li {
overflow:hidden;
text-align: center; /* <------- */
width: 250px;
}
If that doesn't work try this:
img {
border: 3px solid pink;
margin: 0 auto; /* <------- */
}
Try this:
HTML
<ul>
<li>
<img src = "http://placehold.it/400x100">
</li>
</ul>
CSS
li{
overflow:hidden;
text-align:center;
width: 250px;
}
img {
border: 3px solid pink;
margin:0 auto;
}
I need to align multiple lines of text to the middle. Here is a rough guide of the markup I am working with.
<ul>
<li>
<a href='#'>This should be centered.</a>
<li>
</ul>
So as you can see from my image, the "work" link should be centered vertically. I have the width and height set with vertical-align: middle;. I know you need to set the line height for it to actually work but theres the problem. If I set the line height to 72px (the height of the element) then some of the links will stretch down the page due to them taking up two lines.
Is there a way of aligning multiple lines of text to the middle without using line-height?
Use display:table-cell; in your li element.
li {
width:200px;
height:200px;
vertical-align:middle;
display:table-cell;
}
This will give you this effect:
write like this
a{
display:inline-block;
vertical-align:middle;
}
& you can give display:table-cell; to it like this
li {
vertical-align:middle;
display:table-cell;
}
but it's not work in IE7 & below
I came up with this to handle vertically-aligned 100% height/width anchors inside containers:
http://jsfiddle.net/khaustic/KDfN6/
markup:
<div class="links one">
One
</div>
<div class="links two">
Two Two
</div>
css:
* {
/*ie box model forever!*/
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
.links {
height: 5.0em;
text-align:center;
outline: 1px solid #333;
float:left;
margin: 0 1.0em;
overflow:hidden;
}
.links.one { width: 8em; }
.links.two { width: 4em; }
.links a {
width:10em;
text-align: center;
display: table-cell;
vertical-align:middle;
height: inherit;
}
You can try to change display to block for hyperlink and use paddings:
li a {display: block; padding: 30px 10px 30px 10px}