Taken from w3schools (visit link to see what it looks like):
<!DOCTYPE html>
<html>
<head>
<style>
ul
{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
a
{
float:left;
width:6em;
text-decoration:none;
color:white;
background-color:purple;
padding:0.2em 0.6em;
border-right:1px solid white;
}
a:hover {background-color:#ff3300;}
li {display:inline;}
</style>
</head>
<body>
<ul>
<li>Link one</li>
<li>Link two</li>
<li>Link three</li>
<li>Link four</li>
</ul>
<p>
In the example above, we let the ul element and the a element float to the left.
The li elements will be displayed as inline elements (no line break before or after the element). This forces the list to be on one line.
The ul element has a width of 100% and each hyperlink in the list has a width of 6em (6 times the size of the current font).
We add some colors and borders to make it more fancy.
</p>
</body>
</html>
So, ul and a are float:left;. Now, float says that the next element should float around it, yet the text does not. What am I missing?
Second: Removing the float from the ul makes the text flow around it. What the serious heck?
Third: Removing the inline from li does nothing. Yet, removing the float from a puts whitespace between the elements.
Can anyone even try to explain why these things happen and don’t do what they should?
(Newest Chromium)
The width of the <ul> is 100%. The text has nowhere to go but below it.
The reason removing float:left from the <ul> will make the text appear to the right is that the <ul> will not be taking up visual space anymore since the contents are all floated inside a non-floated container. It will be 0px tall, and the <p> will STILL drop down below it because of the 100% width, but you won't notice it visually. You can test this by giving the <ul> a border and see what happens. The <p> will float next to the last floated <li>.
<li>s are not inline items. display:inline; and display:block are both incorrect. They are display:list-item;
It’s because when you set the <ul> width to 100%, the <ul> takes up the full width & pushes content below it. Changing your <ul> width to auto will achieve the effect you want:
ul
{
float:left;
width:auto;
padding:0;
margin:0;
list-style-type:none;
}
Related
Here I have this markup:
<div class="cabinet">
<ul>
<li>This is short</li>
<li>This one is longer</li>
<li>Yet this one is a lot more longer</li>
</ul>
</div>
And here's the CSS:
div.cabinet{
width:120px;
border-right:5px solid #e7e8e1;
white-space:nowrap;
}
I need the content not to overlap the right border of the div but instead be padded some 5px away. Here's the jsfiddle. I tried to play with z-index but it didn't help. What should I do?
Demo Fiddle
How about the following:
div.cabinet{
border-right:5px solid #e7e8e1;
white-space:nowrap;
display:inline-block;
padding-right:5px;
}
Use inline-block to make the div fit the content, then add padding. If you only wish the child ul to do this, simply apply those properties to div.cabinet ul instead (as well as the border).
Add a Padding to your UL or LI tag,
ul{padding:5px;} /** Will be applicable to all li's or you can also give it seperately **/
you can change that 5px value, but it will be enough !
I want to have a left-aligned navigation bar across the top of the page, but before (i.e. to the left of) the menu items, I would like a bit of text ("John Doe") that (i) has a substantially larger font size than the menu items but (ii) has the same baseline as the menu items.
From what I understand, the preferred/recommended way to do navigation bars is with floated <li>'s. However, I haven't found a way to use a left floated list and also have the menus align to the same baseline as the text to the left. My current CSS and HTML are:
<html>
<head>
<style>
#navdiv {
overflow:hidden;
border-bottom:solid 1px red;
}
#nav {
list-style:none;
margin:0;
padding:0;
}
#nav li~li {
float:left;
border:solid 1px blue;
width:100px;
}
#name {
float:left;
border:solid 1px blue;
font-size:40px;
width:250px;
}
</style>
</head>
<body>
<div id='navdiv'>
<ul id='nav'>
<li id='name'>John Doe</li>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</div>
</body>
</html>
Is there any way to vertically align all left floated <li>'s to the bottom of the container <div>?
I should say: I can easily achieve the intended effect by using a table instead of a floated list (using vertical-align:bottom on the menu <td>'s), but since floated lists seem to be the recommended standard, I'd like to know if it's possible with them. (Though I really don't understand the animus folks seem to have against using tables for layout.)
Don't need to use float, in fact it's better if you don't, you can just set the display type to a table-cell
#navdiv {
overflow:hidden;
border-bottom:solid 1px red;
}
#nav {
list-style:none;
margin:0;
padding:0;
}
#nav li {
display: table-cell;
vertical-align: bottom;
border:solid 1px blue;
width:100px;
}
#nav li#name {
font-size:40px;
width:250px;
}
also, the extra border style was unnecessary, just change the selectors to #nav li and #nav li#name and you can supersede anything in #nav li with what's in #nav li#name because it has higher priority.
tables are bad mostly because of the way they load, as far as I understand they require the whole table to build before content can load, while using individual elements can load as they please, or something to that affect, i'm sure someone else could explain that part better.
I have an unordered list styled to display horizontally. One of the li elements contains a div element. This div element is filled using ajax, though it shouldn't matter.
The div element has a larger height than the rest of the li elements, and by default it aligns with the bottom of the parent container.
Update: Well, isn't this awkward. I coded a simpler example in jsfiddle http://jsfiddle.net/Bfp3K/, and it works properly. I have to check my code again to get the error in the sandbox.
Update2: It wasn't that easy after all. I have added my proposed (and used) solution.
Update3: Disregard the previous answer, it wasn't correct. This is a simplified and testable example of the problem:
JSFiddle: http://jsfiddle.net/Bfp3K/10/
CSS:
#one {
background-color:red;
}
#two {
background-color:green;
}
#three {
background-color:yellow;
}
#four {
background-color:blue;
}
.normal {
height:100px;
width:200px;
display:inline-block;
}
.big {
height:200px;
width:300px;
display:inline-block;
}
ul {
display:block;
}
ul li{
display:inline;
}
HTML:
<ul>
<li><div id="one" class="normal">One</div></li>
<li><div id="two" class="normal">Two</div></li>
<li><div id="three" class="normal">Three</div></li>
<li><div id="four" class="big">
The last div vertically aligns to it's content's last line of text. I want to align the top of all the colored divs.
</div></li>
</ul>
Images:
What the solution should look like:
What the problem looks like:
Just replace the display:inline-block; declarations with float:left; Since you're specifying the dimensions anyway, you don't need inline-block. The jsFiddle works and here's a pic.
.normal {
height:100px;
width:200px;
float:left;}
.big {
height:200px;
width:300px;
float:left;}
The solution was very simple after all. Based on another answer:
li div{
vertical-align:top;
}
Since the elements have display:inline-block;, adding vertical-align:top seems to solve it. I won't mark this as the solution in case this isn't the proper solution.
http://jsfiddle.net/dv3Mm/
updated (bottom-aligned):
<html>
<head>
<style>
li {
display:inline-block;
}
.item {
vertical-align: bottom;
}
</style>
</head>
<body>
<ul>
<li>Text 1</li>
<li><div class="item">Text 2<img src="some.jpg"/></div></li>
<li>Text 3</li>
</ul>
</body>
</html>
Set the LI's line-height to the same pixel height of the image.
Solution 1 (quick and dirty):
set a margin-bottom: [negative value here]
or bottom: [negative value here] if your li are relatively positioned and the div is absolutely positioned. This is assuming that you know exact values.
Solution 2:
I'm assuming that the text in the other elements are links.
Set top and bottom padding to those links (specifically the <a> tags, so that they are vertically aligned in the middle)
Solution 3 (a bit more html):
Put two divs in each li. Wrap the div you already have in another div again. Use the a vertical centering method (such as the tabel-cell method) to vertically center all the inner divs. http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
(The li tags you already have might already work as the outer div wrap, but I'm not sure. didn't get to test that yet)
In the code posted in the question the LIs have display: inline, and in the jsfiddle 'simpler example' their display is reset to inline-block (via classes). Inline-block is different from inline that it isolates any block-level content (like DIVs) inside, while attempting to put something block-level into inline causes the inline element to break into several so called anonymous block boxes. May be this is the reason?
Is it possible to style DIVs so they look like follows:
with simple code
<div class='menubar'><div class='menu'>item1<br/>item2</div>...</div>
This is for menu. I wish just to resize selected DIV.
The features should be follows:
1) DIVs are placed from left to right without specifying absolute positions.
2) DIVs are taller than container DIV but don't stretch it
UPDATE
Please explain with DIVs or SPANs, I failed to use LEFT with them. I need to learn, not get ready solution.
This is pretty basic stuff.
1) don't use divs, use a list
2) float the child element
<ul class='menubar'>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
and the according css:
ul.menubar{
/*some fancy css*/
height:<x>px; /* is needed since it would collapse otherwise*/
}
ul.menubar > li{
float:left;
/* more fancy css */
}
Here you go with a fancy demo.
set a width to your divs, then use float:left; ?
this won't stretch the container
you can also use display:inline-block; (on the divs) and set text-align:center; to the container.
But it will stretch the container.
This will depend on what browser you want it to work for. For ie8 and below i suggest not using this code. Inbox me if you'd prefer an all browser version but to ignore ie 5.5, 6, 7 and 8 its best.
First of all for the menu I find it easier to use the unordered list method than a selection of divs and their ID's and classes. Heres a small example.
HTML List
<ul id="menu">
<li>
list1
</li>
<li>
List2
<ul>
<li>
Option2
</li>
</ul>
</ul>
CSS for the menu:
body, html {
padding:0px;
margin:0px;
width:100%;
}
body{
background:#FCFCFC;
}
#menu{
background:#333333;
list-style-type:none;
padding:0px;
margin:0px;
}
#menu > li {
padding:0px;
margin:0px;
display:inline-block;
}
#menu > li > a {
color:#FFFFFF;
text-decoration:none;
font-size:20px;
font-weight:bold;
}
#menu > li > ul {
display:hidden;
position:absolute;
}
#menu > li:hover > ul{
display:block;
}
thats the basics anyway. Once you've got that your ready to go!;
I have this ul menu:
<ul id="superfish-1">
<li class="active-trail">Inicio</li>
<li class="trail">Quienes somos</li>
<li class="trail">Contacto</li>
</ul>
and I need to align it horizontally.
I saw this question but positioning the ul as postion:relative; and setting left:50% didn't make it.
I also found this question but in my case I can't set the width manually because the menu load its content dinamically, then the width changes all the time.
This is what I need:
Write like this:
#superfish-1{
text-align:center;
}
li{
display:inline-block;
*display:inline;/*For IE7*/
*zoom:1;/*For IE7*/
}
Check this http://jsfiddle.net/SdkKd/
Add margin:0 auto; to css of ul.
Check this fiddle: http://jsfiddle.net/dURBJ/1/