i have some css to align two parts of a list item to the left and right side like so :-
ul li div.left {
float:left;
}
ul li {
text-align:right;
}
<ul>
<li><div class="left">On the left</div>On the right</li>
</ul>
Is it possible to extend the above to add one more part that aligns to the bottom left below the left and right parts?
i have tried :-
<li><div class="left">On the left</div>On the right<p><div class="left">At the bottom<div></p></li>
but it doesnt render correctly
You will need to modify your HTML structure like I've done below and then style accordingly to create the sort of a layout which you want.
Here's a working demo:
ul {
padding: 0px;
}
ul li {
list-style-type: none;
}
ul li.left {
float: left;
}
ul li.right {
float: right;
}
ul li.center {
text-align: center;
}
.block {
overflow: hidden;
}
<ul>
<div class="block">
<li class="left">On the left</li>
<li class="right">On the right</li>
</div>
<li class="center">centered underneath</li>
</ul>
Related
I'm trying to make a navigation menu for responsive website. I came to a point where I have my main menu fluid but not sure how to get drop-down menu from it .
Here is my html code:
<body>
<div id="nav">
<ul>
<li>Home</li>
<li>Exercises</li>
<ul>
<li>Yoga</li>
<li>Pilates</li>
<li>Aerobics</li>
</ul>
<li>Clothes</li>
<li>Recipe</li>
<li>Contact</li>
</ul>
</div><!-- ends nav -->
</body>
Here's my CSS:
#nav {
display: table;
table-layout: fixed;
width: 100%;
}
#nav ul {
display: table-row;
margin: 0;
padding: 0;
}
#nav ul li {
list-style: none;
display: table-cell;
text-align: center;
}
#nav ul li a {
display: block;
}
I tried adding these lines of code to my CSS but didn't work as well:
#nav ul li:hover ul {
display: block;
}
Please help me out.
Thanks
The list structure in the question is incorrect
<li>Exercises</li>
<ul>
<li>Yoga</li>
<li>Pilates</li>
<li>Aerobics</li>
</ul>
Should be
<li>Exercises</li>
<ul>
<li>Yoga</li>
<li>Pilates</li>
<li>Aerobics</li>
</ul>
</li>
The sub <ul> is wrapped in the parent <li> node.
Second, add the code below to make it drop down:
#nav li {position:relative;}
#nav li ul{display:none;position:absolute;left:0;top:100%;}
Then add more CSS code to make it beautiful.
I want to center a menu without centering sub-menu, this is my code:
<ul class="drop_menu">
<li>Home</li>
<li>hhh
<ul class="sub_drop_menu">
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</li>
</ul>
this is the css that i'm using :
.drop_menu {
list-style-type:none;
height:30px;
}
.drop_menu > li {
float:left;
font-weight: bold;
font-size: 16px;
}
ul.drop_menu > li {
text-align: center;
}
add this css to your code hope it will work
.sub_drop_menu li {
text-align: left;
}
HOW CSS WORKS
"Cascading" Style Sheets.
a "Rule" - a selector and then 1 or more "declarations" of property and value.
.your-selector {
property: value;
}
Read it from right to left...
.menu li {
text-align: center;
}
"Any (and all) li - within .menu --- text-align: center;
So this means your .sub-menu's li are going to be text align center, because it is an li within .menu. --- you make the rules.
You can do one of two things in this situation.
.sub-menu li { /* this overrides the "cascading" rule from before */
text-align: right;
}
or
.menu > li {
text-align: center;
}
Which would mean, all li in the first tier --- the first children of .menu
Here is a jsFiddle
I'm trying to center a horizontal list of image links, though it seems that the left of the images are being centered. As you can see, the center of the list of images (which are all the same size) is slightly to the right of the text.
HTML:
<div id='nav'>
<ul>
<li>
<a href=''><img src='images/login.png' /></a>
</li>
<li>
<a href=''><img src='images/add.png' /></a>
</li>
<li>
<a href=''><img src='images/forum.png' /></a>
</li>
</ul>
</div>
Css:
#nav {
text-align: center;
}
#nav ul {
list-style: none;
margin: 20px auto;
}
#nav li {
display: inline-block;
margin: 0px 30px;
}
What can I do to completely center it?
Working Demo : http://jsfiddle.net/3d6TS/
The <ul> tag by default adds padding. You need to set padding:0 manually to <ul> tag.
#nav ul {
list-style: none;
margin: 20px auto;
padding:0;
}
#nav { text-align: center; }
#nav ul { list-style: none; }
#nav ul li { display: inline; }
the solution is the display:inline on the li
A good solution would be to maintain the margin-left and make sure the first child has a left margin of 0. This causes both the first and last children to have no margins on the edges it meets with the parent. This is good as :first-child doesn't catastrophically break styles in >=ie7 where as :last-child is unsupported in <=ie8 making the reverse of this infeasible for the time being.
#nav ul li {
display: inline-block;
margin-left:30px;
}
#nav ul li:first-child {
margin-left:0;
}
I have a unordered list as a menu.
All items have a background-color. What I want is that the width of the item does not fill the width of the list, and that the item (including the background-color) is aligned to the right in the list. I hope you understand and might have an answer.
HTML:
<ul class="menu">
<li><a class="menuitem">First</a></li>
<li><a class="menuitem">Secondwithlongertext</a></li>
<li><a class="menuitem">Thirdbitshorter</a></li>
</ul>
And CSS:
ul li a.menuitem{
background-color:#000;
color:#fff;
}
As per you requirement you have to wrap the text inside the <span>. Here is a working Demo.
Here is the HTML code.
<ul class="menu">
<li><a class="menuitem"><span>First</span></a></li>
<li><a class="menuitem"><span>Second Item with long text can come here</span></a></li>
<li><a class="menuitem"><span>Thirdbitshorter</span></a></li>
</ul>
ul {
background-color:gold;
color:#fff;
}
ul li{
background: #990000;
}
ul li a {
text-align: right;
}
ul li span{ background:black;}
ul {
background-color:#000;
color:#fff;
width: 100%;
}
ul li{
background: #990000;
width: 50%;
}
ul li a {
text-align: right;
}
This should work for you if I understand what you're asking. Sometimes I make the backgrounds different colors just to clearly be able to see what is going on.
I have list menu
<ul>
<li>item1</li>
<li>item2</li>
<li>longitem3</li>
</ul>
menu css
ul{
width:500px;
}
li {
float:left;
}
i would like to automatically distribute my items in menu so they would have the same space between them like this
{menu}{item}{space}{item}{space}{item}{menu}
is it possible to do this using only html and css, not javascript? Thanks
I would use a css class rather than affecting all the < li>, like this:
<li class="menuItem">
As for the css:
.menuItem {
float: left;
margin-right: <some number of px>;
}
.menuItem:last-child {
margin-right: 0;
}
The ':last-child' selector overrides the previous definition and removes the right space for the last menu item.
You can add a margin to the right side of your li's
li { float:left; margin-right: 5px}
Just add some padding to the right of each li item, e.g.
li {
float:left;
padding-right:20px;
}
ul {
text-align: center;
}
li {
display: inline-block;
}