I have a <ul> with several <li> items in it all in a single row. The <li> has a nested <span> and an <img>. The <img> height is all the same across all items. But the <span> items contain text which can span on a single line or two lines (depends on text).
I have tried appying display:block, float:left, height:100%, and few other suggestions I found, but the shorter <li> items will not take the same height as the taller <li> items. So I am left with a space below the shorter <li> items.
Anyone has any suggestions on this?
In this case, when you set height:100% it isn't inheriting any height from its parent. If you want the list items to have 100% height of the div #wrapper, then you should set the ul's height to 100% and set a height on the div #wrapper in pixels or em's:
http://jsfiddle.net/SF9Za/1/
#wrapper {
background: transparent;
width: 350px;
color: white;
height:250px;
}
#wrapper ul {
list-style-type: none;
display: block;
float: left;
background: green;
height:100%;
}
If you'd rather have it stretch to the full height of the browser window, then you need to set the height of html, body in your css to 100%, and then all of the elements down to the li (html, body, div#wrapper, ul.list, and li) must have 100% height:
http://jsfiddle.net/YdGra/
html, body{
height:100%;
margin:0;
padding:0;
}
#wrapper {
background: transparent;
width: 350px;
color: white;
height:100%;
}
#wrapper ul {
list-style-type: none;
display: block;
float: left;
background: green;
height:100%;
}
Here's some other links that you might want to check out that talk about this:
CSS 100% height layout
Setting height: 100% on my label element doesn't work
http://webdesign.about.com/od/csstutorials/f/set-css-height-100-percent.htm
An easy fix is to add display:table on your ul element. The hieght will align with the content.
maybe it fix if you change list-style-position of the container ul
Related
I have a problem with styling with CSS.
I can't fit the #main to the screen. I have a menu on the left side and i would like to have the main screen from the right next to the menu.
body {
background-color: lightgray;
padding: 30px 100px 0 100px;
}
nav {
line-height:30px;
width:20%;
float:left;
padding:5px;
}
#main{
position: relative;
width: 80%;
float:left;
padding:10px;
}
Here you are the screenshot how it is looking now:
How should I place "Content of the document" (#main) to be next to the nav?
EDIT: I have placed my code here: http://jsfiddle.net/47tjbnrt/
The problem is caused by your adding padding to the width. width is the width of its content and you set one to 80%, the other to 20%, and then add padding on top of that. Padding is the area around the content and, therefore, the width. That is why your second div drops down.
Either remove the padding or reduce the width of your elements.
body {
background-color: lightgray;
padding: 30px 100px 0 100px;
}
header {
text-align: center;
}
nav {
line-height:30px;
width:20%;
float:left;
padding:5px;
}
#main {
width: 70%;
float:left;
padding:10px;
}
I changed the width to 70%, since you have a lot of padding. (Also removed the position: relative from your #main, do you have anything with position: absolute inside the main section?)
Also changed the width to 70%, since you have a lot of padding.
I'm trying to create three menu items evenly spaced out with some text beneath an image. Right now im just trying to get the images to accept a percentage height or width based on class name menuItem but it doesn't seem to work at all. Why is this?
html:
<div id='menu'>
<div class='menuItem'>
<img src='http://www.clker.com/cliparts/l/u/5/P/D/A/arrow-50x50-md.png' >
</div>
<div class='menuItem'>
<img src='http://www.clker.com/cliparts/l/u/5/P/D/A/arrow-50x50-md.png'>
</div>
<div class='menuItem'>
<img src='http://www.clker.com/cliparts/l/u/5/P/D/A/arrow-50x50-md.png'>
</div>
</div>
CSS:
#menu {
width: 100%;
height: 100%:
}
.menuItem {
display:inline;
width:25%;
}
Change .menuItem to display: inline-block instead because inline elements dont respect width and height. And set max-width: 100% on the images so that they are restricted by their parents size
#menu {
width: 100%;
height: 100%:
}
.menuItem {
display:inline-block;
width:25%;
}
img{
max-width: 100%;
}
FIDDLE
Here is an explanation on the different display types: https://stackoverflow.com/a/9189873/3113558
You'd have to put the class on the img tag itself, not the surrounding div, unless you are using bootstrap which it doesn't look like you are. Bootstrap would provide a few more dependencies than you have working here.
You just gave the images a max-width, not a width. Try this (Here's a fiddle)
#menu {
width: 100%;
height: 100%:
}
.menuItem {
display:inline;
width:25%;
}
#menu .menuItem img{
width:100%;
}
For some reason, margin:auto is not working.
HTML
<body>
<div id="background">
<div id="header">
<div id="title">Welcome</div>
</div>
</div>
</body>
CSS
#background {
min-width: 960px;
}
#title {
display: block;
margin: auto;
background-color: blue;
}
This just just draws a blue line across the top of the screen with the word 'Welcome' on the left. Why isn't my margin:auto working?
The correct syntax for horizontally centering via margin is: margin: 0px auto; as this will set the left and right margin to auto. You need to set a width on it if you use this approach, because the width is 100% by default.
Alternatively, you can also use text-align:center if you are just centering text.
Working jsFiddle using text-align:center.
Alternative jsFiddle.. I don't know what style you are trying to achieve.
The #title div will expand to fill its parent, #header, which in turn, expands to fill its own parent, #background, which has a width of at least 960px.
Therefore, #title if full width so it is centered, and by default, the text is left justified (at least in Western European languages).
If you want the #title to have a shrink-to-fit width, you can try display: inline-block.
To center #title horizontally, add text-align: center to its parent container, #header.
For example:
#background {
min-width: 960px;
}
#header {
text-align: center;
}
#title {
display: inline-block;
background-color: beige;
}
Alternatively, you can achieve the same result using display: table:
.ex2 #header {
text-align: left;
}
.ex2 #title {
display: table;
margin: 0 auto;
background-color: beige;
}
See demo at: http://jsfiddle.net/audetwebdesign/kAhnx/
I have multiple li items floating left and I want to set a right border around them so that all of them get the same height for the border. Therefor I'm using the display:table; However it ignores the width of the li. How can I force to use same width for all li items?
HTML:
<ul>
<li>a</li>
<li><img src="http://farm8.staticflickr.com/7437/9982948185_19ae813ee0_n.jpg"/></li>
<li>b</li>
</ul>
CSS:
ul{
display: table;
}
ul li{
display: table-cell;
width: 50px !important;
border-right: 1px solid red;
}
Demo:
http://jsfiddle.net/xbmEQ/
You can try "table-layout: fixed"
https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout
Your image is bigger so you are having issues. Set max-width to image:
ul li img {
max-width:100%;
}
Also use word break on li,
Demo: http://jsfiddle.net/shekhardesigner/xbmEQ/7/
You'll also need to define the width for the img tag because img tag is taking full width So you can set the image width to 50px but better way to define width 100%.
If you don't want to specify anything inside the li tag then you may set display: inline-block; overflow: hidden; to your li instead of using display: table-cell; to li
demo
Do you want to make the image 50px wide? In that case you just have to add this piece of code:
ul li img{
width: 50px;
}
http://jsfiddle.net/xbmEQ/3/
You can set the min-width of the li items so that they do not shrink below 50px.
http://jsfiddle.net/xbmEQ/5/
It keeps the heights of all the li items matching (and dynamic) as you want for matching border heights. It also keeps all the li items 50px wide unless their content exceeds 50px (like your image).
(I have not tested this in any other browser than Chrome)
not real sure what you're trying to achive but what about this fiddle
ul{}
ul li{
display: inline-block;
width: 50px;
border: 1px solid red;
overflow:hidden;
}
EDITED FIDDLE AND CSS, added height attribute.
fiddle 2.0
ul li{
display: inline-block;
height:100px;
width: 50px;
border: 1px solid red;
overflow:hidden;
}
I read the following code on w3schools and do not understand how the overflow property would impact whether text appears to the right of the ul or not.
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
a {
display: block;
width: 60px;
background-color: #dddddd;
padding: 8px;
}
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
<p><b>Note:</b> overflow:hidden is added to the ul element to prevent li elements from going outside of the list.</p>
I know that overflow:hidden is used to handle content that goes outside of the box but don't understand how it applies in this instance.
I try to end the confusion:
ul is a block-level element as is the p element (they stretch to 100% of the parent width). That is why per default the p will appear below the ul if no width or display is declared on those elements.
Now in your example the ul contains only floated elements. This makes it collapse to a height of 0px (It still has 100% width though as you can see in the example). The adjacent p will appear to the right of the floated lis because they are considered as normal floated elements.
Now declaring overflow (any value other than visible) establishes a new block formatting context, which makes the ul contains its children. Suddenly the ul "reappears", not having size 0px anymore. The p is getting pushed to the bottom. You could also declare position:absolute to achieve the same "clearing" effect (with the side effect that now the ul is taken out of the normal element flow - the ps will be overlapped by the ul.)
See the example fiddle
If you are into the technical stuff, compare the according paragraphs of the CSS spec:
§10.6.3 Block-level non-replaced elements in normal flow when 'overflow' computes to 'visible'
and
§10.6.7 'Auto' heights for block formatting context roots. (Thanks to BoltClock for digging out the links).
ul{
list-style-type:none;
margin:0; padding:0;
background-color:#dddddd;
border:2px solid red;
}
li{
float:left;
}
a{
display:block;
width:60px;
background-color:#555;
color:white;
}
p{
margin:0;
outline:2px dotted blue;
}
#two{
clear:both;
overflow:hidden;
}
No overflow:
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
<p>Notice the collapsed ul - no background-color visible, collapsed border and this paragraph treats the lis as regular floats </p>
<br>
With overflow: hidden
<ul id="two">
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
<p>the ul reappeared - it now contains the child li's - the float is cleared</p>
Setting overflow: hidden on an element causes a new float context to be created, so elements that are floated inside an element that has overflow: hidden applied are cleared.
http://www.w3.org/TR/CSS2/visuren.html#block-formatting
To quote from HTML & CSS Is Hard
To summarize, when you have an extra unfloated HTML element at the
bottom of a container div, use the clear solution. Otherwise, add an
overflow: hidden declaration to the container element. The underlying
idea for both options is that you need a way to tell the browser to
incorporate floats into the height of their container element
Instead of the overflow:hidden; use clear:both; for the <p>. here it is in use http://jsfiddle.net/Mvv8w/. Basically overflow:hidden will clear anything that is aside it just as clear:both; does.
This is why w3schools is not a reliable source for web designer/developers. You are correct, it is a terrible example.
It doesn't because, in this example, the parent element does not have a fixed with. Furthermore, it's an un-ordered list tag, which is going to stretch to the size of it's children regardless.
http://jsfiddle.net/EhphH/
CSS
.parent {
width: 150px;
height: 100px;
padding: 10px;
background: yellow;
overflow: hidden;
}
.child {
float: left;
width: 75px;
height: 120px;
margin: 10px;
background: blue;
}
.baby {
width: 200px;
height: 25px;
background: green;
}
Markup
<div class="parent">
<div class="child">
<div class="baby">
</div>
</div>
<div class="child">
</div>
</div>