I have an unordered list with a background-image set. All list-items have the same height, the background-image is positioned left center.
The text of each item should be centered vertically to the li. This works well with single-line text (by setting the line-height according to the height of the li), but not with two lines of text.
I could add "line-height:normal" to the two-line item, but I want a solution that works for all items.
How can I do this?
Example:
li {
list-style-type:none;
padding-left:40px;
height:36px;
line-height:36px;
background:url('tick.png') no-repeat 0 50%;
}
this is a most crossbrowser solution
li {
width : 200px;
line-height : 100px;
height : 100px;
border : 1px blue solid;
}
li span {
display : -moz-inline-box; /* FF2 or lower */
display : inline-block; /* FF3, Opera, Safari */
line-height : normal;
vertical-align : middle;
}
li span { *display : inline;} /* haslayout for IE6/7 */
<ul>
<li><span>My text</span></li>
<li><span>My longer text</span></li>
<li><span>My text, but this time is really wide</span></li>
<li><span>My text, some thoughts about how much it will expand in this item.</span></li>
</ul>
I used star hack for brevity, you should avoid. Just use html5boilerplate solution, it uses conditional comments on body tag
li {
height:200px;
line-height:200px;
border:1px solid red;
}
li span {
vertical-align:middle;
display:inline-block;
line-height:1.2;
}
<li>
<span>two<br />lines</span>
</li>
It should work.
EDIT : updated to see changes
Related
I have the following HTML :
<div class="top">
<div class="header title">Some Big Header Goes Here</div>
<div class="sub-header title">The fancyness enters here.</div>
A random link
</div>
Styled with the following classes :
.header {
padding:2%;
}
.sub-header {
font-size:120%;
font-style:italic;
}
.title {
font-size:158%;
line-height:80%;
}
.top {
display:block;
text-align:center;
border:1px solid lime;
padding:1%;
}
.top a {
/*color:red;*/ /* This works but I don't want this */
padding:100000px; /* This does not work, nor do smaller values */
margin:-999999px; /* This does nothing. */
}
How can I style the anchor link to position it with just a little padding and margin, so as to distance it just a little from the two headers above?
Add a display: block; to your .top a style and then adjust the margins and paddings accordingly.
top a {
display: block;
/*color:red;*/ /* This works but I don't want this */
padding:10px;
margin:20px;
}
Working fiddle: http://jsfiddle.net/jnz65/
An anchor tag does not inherit certain attributes from the parent when an href attribute is specified with it. That is why you need to add display:block to the style of the anchor tag specifically.
I'm looking for a way to make the last inline list item extend the remainder of its container. So I have something like this.
<nav>
<ul>
<li></li> //width = 50px
<li></li> //width = 50px
<li class="last"></li> //width needs to fill the remaining 300px
</ul>
</nav>
nav {
width:400px;
height:50px;
}
nav > ul > li {
display:inline-block;
padding:5px;
}
Now the number of list items varies so I can't set the last list item to a set width. I need to make it fill whatever is left over in the width of the nav. How to with using css only?
You can use display: table (and table-cell and, at least for Firefox, table-row) with table-layout: fixed to get the table algorithm where indicated widths by the author (you) are applied by the browser and not the other way where the browser do its best to adapt the width of cells to their content.
Then applying a width of 50px to all "cells" except the last one.
I used table-row on ul and table on its nav parent because on Fx 18 setting display: table on ul didn't have the expected effect (something related to the browser having to create the missing parts a.k.a. a shadow element acting as row in-between).
Being very descriptive (this element must be rendered as a table and this one as a row and these ones as cells) helps.
Fiddle here: http://jsfiddle.net/X6UX9/1/
HTML:
<nav>
<ul>
<li> //width = 50px</li>
<li>//width = 50px</li>
<li class="last">//width (...) 300px</li>
</ul>
</nav>
CSS:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
nav {
display: table;
table-layout: fixed;
width:400px;
height:50px;
}
nav > ul {
display: table-row;
}
nav li {
display: table-cell;
padding:5px;
outline: 1px dashed blue;
}
nav li:not(:last-child) {
width: 50px;
}
PS: using :last-child for setting widths is compatible with IE9+, not IE8+ as I stated in the fiddle...
edit: oops I didn't see your .last class on last li. Well, you get the idea :)
edit2: updated fiddle using this class and neither :not() nor :last-child pseudo
Update for 2019 :
ul {
display: flex;
}
ul li:last-child {
flex: 1;
}
I just found a nice script you can see it over here
http://demo.tutorialzine.com/2012/10/css3-dropdown-menu/
I saw the drop down has a little ^ on top. On the css I could find this:
#colorNav li ul li:first-child:before{
content:none;
position:absolute;
width:1px;
height:1px;
border:5px solid transparent;
border-bottom-color:#313131;
left:50%;
top:-10px;
margin-left:-5px;
}
Only I can't understand how this is working; does it have
something to do with the border?
This CSS operates on the following markup (reduced for simplicity):
<nav id="colorNav">
<ul>
<li class="green">
<ul>
<li>Back to the tutorial</li>
<li>Get help</li>
</ul>
</li>
<li class="red">
<ul>
<li>Payment</li>
<li>Notifications</li>
</ul>
</li>
</ul>
</nav>
The selector targets the :before pseudo-element on the inner-most li elements that are also the first elements within their parent:
#colorNav li ul li:first-child:before
Missing from your code here, but present in the original tutorial, was the following comment:
/* the pointer tip */
This particular set of rules is for creating the small triangle that appears at the top of the dropdown menus, pointing up to their associated block (pictured below, emphasized with a red circle):
The styles then follow for creating this triangular shape:
content: none; /* Pseudo-element has no content */
position: absolute; /* It's positioned absolutely */
width: 1px; /* It has a width of 1 pixel */
height: 1px; /* And a height of 1 pixel too */
border: 5px solid transparent; /* Applies initial border style */
border-bottom-color: #313131; /* Overrides bottom border color */
left: 50%; /* Moves it half-way from the left */
top: -10px; /* And 10px up above the element */
margin-left: -5px; /* Margin, half of width, to center */
The end-result, is a triangle created purely with borders in CSS.
It creates a fake area front of the #colorNav li ul li:first-child with content:''; and manages that area with other css styles.
#colorNav li ul li:first-child:before { ... }
The :first-child selector is used to select the specified selector, only if it is the first child of its parent.
content:'';
The content property is used with the :before and :after pseudo-elements, to insert generated content.
Hope this will help you?
Hey i'm trying to align things next to each other and under each other
Here is the css I'm using.
/* title styles */
#wpp-post-title {
float:right;
width:100px
}
/* thumbnail styles */
#wpp-thumbnail {
float:left;
width:80px;
}
It shows up like this
but i want it to show like this
Use classes instead of ids and look at clear property http://www.w3schools.com/cssref/pr_class_clear.asp
Something like this could work:
jsFiddle demo: http://jsfiddle.net/vPvbn/
CSS:
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
li {
display: block;
height: 80px;
margin: 10px 0;
padding: 20px 0 0 85px;
}
HTML:
<ul>
<li style="background: url(http://i.imgur.com/9M7yb.jpg) no-repeat 0 0; padding-right: 10px;">LEAKED: The Winner of RuPaul's Drag Race Season 4 Is...</li>
<li style="background: url(http://i.imgur.com/eJxiy.jpg) no-repeat 0 0; padding-right: 10px;">WATCH: Rihanna's 'Battlefield' Movie Trailer.</li>
</ul>
/* title styles */
#wpp-post-title {
width:100px
display: inline-block;
.display: inline;
.zoom:1;
}
/* thumbnail styles */
#wpp-thumbnail {
display: inline-block;
.display: inline;
.zoom:1;
width:80px;
}
Without seeing your HTML, I can only guess, but my best guess would be to add the following style to your CSS:
/* You will probably need to change "li" to something more specific, lest it
break your existing list styles. */
li {
overflow:hidden;
}
This will force the list item to wrap itself around your floated bits. Elements that are floated do not change the height of the parent container, so because everything inside the <li> is floated, your <li> element has a height of 0px, and you get the weird behaviour that you're seeing. overflow: hidden fixes this by forcing the <li> to acknowledge the height of #wpp-thumbnail and #wpp-post-title.
Giving #wpp-post-title a height that is equal to your thumbnail should solve the problem, at the moment the browser is automatically determining the height of the div based on the text inside it.
Also, make sure both divs are given display: inline-block property
I have some text links inside a list, then within two divs. I want the hover effects to expand past the list to the outside of the outer div. Is there a way to do it with negative padding? Another way? Possible at all?
Visuals will be easier
How it is now-
Highlight of the padding in the surrounding div-
How I want the a:hover effect to look-
Basically the code looks like this-
.1 { padding: 10px;}
.2 { padding: 5px;}
<div class="1">
<div class="2">
<ul>
<li>
<a>abcde</a>
</li>
<li>
<a>fghij</a>
</li>
</ul>
</div>
</div>
Negative margin/padding are invalid and don't work as expect,
but is possible, you have to take out all his
parents margins and add padding to the links to get
the same effect but with all wide anchors:
/* CSS CODE */
.parent { padding:0px; border:1px solid red }
.child { padding:0px; }
.parent h2 { margin:10px; font-size:22px; }
.child ul li a { display:block; padding:10px 15px; }
.child ul li a:hover { background:green; }
you can see an example in: http://jsfiddle.net/3zANs/
Negative padding is invalid (and simply won't work), negative margin on the other hand is valid and it might be useful in your case.
I believe, also invalid are classes that stars with numbers.