I have this HTML:
<ul>
<li>content <span>more</span></li>
</ul>
and this is my CSS:
li{
padding: 30px;
}
span{
padding-top: -20px;
}
the padding on the span does not take effect. I could work around it by changing the HTML, but now that I was faced with this, I wanted to learn whether there is a work around or not.
padding-top on inline element wouldn't work! Use block element, or set span { display:block }.
Set your <span> to {display:inline-block}
Related
I've a header div and a menu ul below it. I'd like to accomplish 2 things:
1) the ul should have the same width as the div (outer vertical borders exactly same x position
2) I'd like to keep the spacing between li elements roughly equal
With some trial and error on the li's margins and padding I roughly achieved the first point in Google Chrome (please see this jsfiddle) but in Firefox the li's don't fit in the ul so they don't stay on a single line. Also, the last li tends to 'spill over' to a second line when zooming in/out.
I tried it with margin:5px auto and padding:5px auto on the li elements but here auto seems to mean zero.
Is this really difficult/impossible or am I overlooking something obvious?
I also tried width:fit-contents but that didn't help either.
I edited a whole lot in your CSS, check the updated fiddle.
Basicly, this is what I've done:
HTML:
<ul>
<li>link</li>
<li>link</li>
<li>link</li>
</ul>
CSS:
ul {
width: 960px;
display: table;
table-layout: fixed;
}
ul li {
display: table-cell;
}
ul li a {
display: block;
}
The ul is displayed as a table, with the li's as table-cells, making it as width as the header. Within the li i display the anchors as a block, making them fill the whole li. Hope it suits you.
P.s. make sure you remove the class cf from the ul when you use this.
I think some fellow frustrates may find this useful:
.main-menu ul li ul li{
white-space: nowrap;
}
Like this
ul#mmenu li
{
padding:7px;
}
DEMO
You'll need to adjust the padding in ul#mmenu I changed the padding to padding:7px 23px; and it stays in a single line,but there will be a blank space at the right end of the last menu.
You can give absolute position to li items and position them (first have left:0, second: left:100px or so... last have right:0 and so on). That way they will always be at the same place when you zoom.
For those wanting to avoid CSS table and table-cell, which by the way, I have no probelm with you can use text-align:justify on the UL with a couple of tweaks.
Basic HTML:
<ul id='mmenu'>
<li><a href='#'>Blah Blah Blah Blah</a></li>
<li><a href='#'>Blah Blah</a></li>
<li><a href='#'>Blah Blah Blah Blah</a></li>
<li><a href='#'>Blah Blah</a></li>
</ul>
Note we've lost the clearfix because: a) We're not going to use floats and b)it breaks this solution.
CSS:
ul#mmenu{
width:100%;
margin:15px 0 10px 0;
overflow:hidden;
text-align:justify; /*Added this*/
}
ul#mmenu li{
letter-spacing:.05em;
color:#0a93cd;
/*Now inline blocks instead of blocks floated left*/
display:inline-block;
font:24px arial;
padding:7px 26px;
background:#fff;
border-left:2px solid #0a93cd;
border:2px solid #0a93cd;
border-radius:13px;
text-align:center;
}
/*Now for the hacky part....
...justify does not, by design, justify the last row of text
therfore we need to add an additional, invisible line*/
ul#mmenu:after {
content: "";
width: 100%;
display: inline-block;
}
I have also removed the :first-child style in the Updated Fiddle
I'm having trouble centering these buttons on a page. I just know it's something stupid I missed, but I can't figure out what. Here's the page:
<div id="page1">
<ul id="choiceBtns">
<li>All Time</li>
<li>Last 2 Weeks</li>
<li>Last Year</li>
</ul>
</div>
Here is the CSS:
#choiceBtns li{
display:inline !important;
border:solid;
padding:3px;
}
#choiceBtns {
margin:10px;
margin-left: auto ;
margin-right: auto ;
}
Start by modifying the CSS as follows:
#choiceBtns {
margin:10px;
margin-left: auto ;
margin-right: auto ;
text-align: center;
}
Since your li child elements are inline, they will center within the width of the parent block, which in your case, is also the width of the page.
You may get slightly better control if you apply display: inline-block to the li elements if you need to add vertical padding and so on.
Finally, you don't need the !important declaration.
The moment I float my unordered-list element...the background color fails. Why?
<style type="text/css">
.bkgrd-blue { background-color: #094AB2; }
.application-bar { color: #FFFFFF; }
.application-bar ul { }
.application-bar ul.control-bar { list-style: none outside none; margin: 0; overflow: visible; padding: 0; }
.application-bar ul.control-bar.branding { float: left;}
</style>
<div class="application-bar bkgrd-blue">
<ul class="control-bar">
<li>
This is working!
</li>
</ul>
</div>
<div class="application-bar bkgrd-blue">
<ul class="control-bar branding">
<li>
The moment I float this...it fails! Why?
</li>
</ul>
</div>
Floating an element removes it from the normal document flow so containers don't expand - that is, the containing div has 0 height.
To fix this you need to clear the float. You can either:
set overflow: hidden on the div
float the div
add an element after the floated list with clear:both - this could be done using the :after pseudo-element
Here's a demo using the first solution: http://jsfiddle.net/FSH4Y/
I added:
.application-bar {
color: #FFFFFF;
overflow: hidden;
}
Here's some more info on this issue: CSS Tricks: All About Floats - have a look at the section called The Great Collapse
You need to clear under the list, usually I add a div like
<div style='clear:both;'></div>
This will allow the floated element's parent to properly calculate it's height.
You need to float the containing div with the background in it as well. As soon as you float the inner ul, the containing div effectively has no content so ends up with a height of 0.
I created a div tag with min-height and gave background color 'red'. but on mozilla firefox the height of the div not increasing when the content crosses min-height limit. heres my code:
<style type="text/css"><!--
ul {
display:block;
padding:0px;
width:500px;
}
.b {
width:250px;
float:left;
display:block;
}
div {
min-height:50px;
width:500px;
background-color:red;
}
--></style>
<div>
<ul>
<li class="b">asdsad</li>
<li class="b">asdsad</li>
<li class="b">asdsad</li>
<li class="b">asdsad</li>
<li class="b">asdsad</li>
<li class="b">asdsad</li>
<li class="b">asdsad</li>
</ul>
</div>
its seeming the div height would have to be set to fit contents,but I don't know how else can I do that.if I don't use height then background-color can't be set.please tell me how can I fit the contents to the div as well as the background color would be red.
(Don't know if I explained it clearly.so please ask me if you want to know more about the question.)
-Thanks.
RESOLVED: thank you everybody for your kind answers.
On Firefox, min-height is not interpreted on display: table(-*); properties, juste try to use height: 50px; instead as it is interpreted as minimum height on tables.
Source
The min-height property is supported in all major browsers.
But this property is not working with html tables on firefox.
Update your css like this:
div{min-height:50px;width:500px;background-color:red;overflow:hidden;}
overflow:hidden; added
Basically, that happens because of float:left in .b class. That is how it works. Usually you can fix it by adding overflow:hidden to parent div or by adding an element with style="clear:both;" at the end of parent div.
You can search more info about it with 'CSS clearfix' keywords.
When an element's display is set to table, firefox will ignore the min-height property without actually setting the height.
By switching the element to display:block, firefox then respected the min-height property.
Add overflow: hidden; to ul.
The problem is that your LIs are floated which causes the parent to not know the height of it's contents.
I have added following and it's worked:
body {
height:100%;
}
You'll have to clear the floating of the nested li tags like this:
ul:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
instead of min-height:50px; just add padding: 25px 0;
So I have a simple list thats set out like below
<ul class='my-videos'>
<li>
<a class='show-more' href='' title=''>Show More</a>
</li>
<ul>
I am trying to get the .show-more to be center aligned. I have got this far
ul.my-videos li .show-more
{
display:inline-block;
margin:0 auto;
}
Now this doesn't work. I have setup a JSFiddle here http://jsfiddle.net/6HHKf/
Any ideas on this?
PS I want to keep the anchor as inline or inline-block so that the width isn't 100%
UPDATE
There are other elements in the li, so text-align is out of the answer
ul.my-videos li .show-more {
margin:0 auto;
border:#aaa 1px solid;
width: 100px;
display: block;
}
if you want center an element width margin: 0 auto you need to set the width
and also, you need display:block
check jsfiddle here: http://jsfiddle.net/6HHKf/5/
Simply set the CSS for the list item to center align the text.
.my-videos li { text-align: center; }
Easy, just add text-align:center; to the li.
Edit
Since you need to cope with other mystery elements in the li this may work http://jsfiddle.net/6HHKf/6/
If it's an option to use an extra span within the a element, you could use relative positioning with left +/- 50%
http://jsfiddle.net/ptriek/6HHKf/8/