Hi I'm looking to set up a centered footer that uses list items with unorganized lists inside of each list item. If I try using float:left I get them to be inline with each other but it is no longer centered. The code i currently have looks like this:
css:
#charset "utf-8";
/* CSS Document */
* {
margin:0;
padding:0;
}
#box1 {
margin:0 auto;
background-color:#00FF66;
}
#mainList {
list-style-type:none;
text-align:center;
display:inline;
}
.mainLI {
display:inline;
}
html:
<div id="box1">
<ul id="mainList">
<li class="mainLI">
<p>Title</p>
<ul class="subList">
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
</li>
<li class="mainLI">
<p>Title</p>
<ul class="subList">
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
</li>
</ul>
</div>
It's beacuse content is centered by text-align within container, that is 100% width of container as default, but less if it's floating.
Anyways i don't understand what you want to achieve? You want to center list item but float it in the same time? Could you precise yourself more?
css:
#charset "utf-8";
/* CSS Document */
* {
margin:0;
padding:0;
}
#box1 {
margin:0 auto;
background-color:#00FF66;
}
#mainList {
list-style-type:none;
text-align:center;
}
#mainList li, .mainLI p {
display:inline;
}
Example
Your problem with centering lies in the fact that the parent element in which you are centering children must be a block element. See MDN
Related
I have two separate divs, why is the background color the same lime color for both? I want the first div white.
Here's the HTML:
<div id="head1">
<ul>
<li><a class="menu" href="#">Link one</a></li>
<li><a class="menu" href="#">Link two</a></li>
<li><a class="menu" href="#">Link three</a></li>
<li><a class="menu" href="#">Link four</a></li>
</ul>
</div>
<div id="title1">
<h1>some title</h1>
</div>
Heres the CSS:
#head1 {
}
#title1 {
height:100px;
background-color:lime;
}
ul {
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
border-bottom:2px aqua dashed;
}
li {
display:inline;
}
a.menu {
float:left;
width:6em;
text-decoration:none;
color:#666666;
padding:0.2em 0.6em;
border-right:1px solid white;
}
a.menu:hover {
background-color:#ff3300;
}
h1 {
font-family: Gautami;
font-size:300%;
color: #FFFFFF;
}
When you float the list, the #title div essentially appears as if it's behind it. To correct this, add overflow:auto to your #head1 element
#head1 {
overflow:auto;
}
jsFiddle example
It's actually white. You just can't see it.
Because the ul (and other elements) are floated left, those elemente are taken out of the DOM's normal flow. What this basically means is that the parent div, #head1 no longer "sees" the ul. Because of this, the height of the div becomes 0px tall.
Here's a fiddle demonstrating this: http://jsfiddle.net/w858z/
As you can see, #head1 has a red border, but the height is 0px. If we remove the floats, the ul is now in the normal flow.
Here's an updated fiddle with the floats removed: http://jsfiddle.net/48Ahm/
The fix for this is to use either a clearfix or simply overflow:auto.
overflow example: http://jsfiddle.net/w858z/1/
clearfix example: http://jsfiddle.net/w858z/2/
Here's a stackoverflow discussing additional css properties that will result in an element being taken out of dom flow: What are the CSS properties that get elements out of the normal flow?
You just need to clear the second div clear: both;
I made a jsfiddle :
http://jsfiddle.net/5gwZ6/
I have this html code
<ul id="list-table">
<li>
<table id="test-tab">...</table>
<ul id="panel-table">...</ul>
</li>
</ul>
I want table "test-tab" and ul "panel-table" inside li display horizontal like this http://img.photobucket.com/albums/v246/TuanVenus/table-css.png
I'd suggest using float: left. Normally, I'd go with display: inline-block but that might break the table layout. Don't forget to add a pseudo-element which provides the clear-fix for the parent element (<li>).
#test-tab, #panel-table {
float: left;
}
#list-table li::after {
content: "";
display: block;
clear: both;
}
Give float to your elements like this:
CSS
.fleft { float:left;}
HTML
<table id="test-tab" class="fleft">...</table>
<ul id="panel-table" class="fleft">...</ul>
Just add the same styles to your CSS as in http://jsfiddle.net/vMe5L/38/ Enjoy !!
you could use display and wrap your table in a div, so it doesn't get broken:
http://codepen.io/anon/pen/tjesx/
#list-table {
display:table;
width:600px;
border:solid;
border-spacing:1em;
padding:0;
}
#list-table > li {
display:table-row;
}
#list-table > li > ul ,
#list-table > li > div
{
display:table-cell;
border:solid;
margin:0;
}
try this,
<style>
#test-tab{
float:left;
}
#panel-table{
float:left;
}
</style>
<ul id="list-table">
<li>
<table id="test-tab"><tr><td>example table</td></tr></table>
<ul id="panel-table"><li>example li</li></ul>
</li>
</ul>
Try add a css style
<ul id="list-table" style="list-style: none;">
I am trying to create menu.
<div class="container">
<ul>
<li class="xd_nav_link_1"><span>link</span></li>
<li class="xd_nav_link_2"><span>link</span></li>
<li class="xd_nav_link_3"><span>link</span></li>
<li class="xd_nav_link_4"><span>link</span></li>
</ul>
I can not focus in height is a link span.
I also like that it is centered in a: hover
Demo here
Thank
In this case, you just need to add a line-height equal to the height of the link.
JSFiddle - Updated
a {
line-height:100px;
}
Revised
a {
line-height:100px;
vertical-align:top;
}
a:hover {
line-height:50px;
}
I need to center a <ul> element using margin: 0 auto;
If I set the width for the ul element (width:300px) then its works fine. But I can't do this since it is a dynamic list, then the width changes all the time.
HTML:
<div>
<ul>
<li>hello</li>
<li>bye</li>
</ul>
</div>
CSS:
ul{margin:0 auto;} But it isn't working.
ul{margin:0 auto;width:300px;} Works, but I can't set the width in this way.
Then write like this:
div{
text-align:center;
}
ul{
display:inline-block;
*display:inline; /* For IE7 */
*zoom:1; /* For IE7 */
vertical-align:top;
}
Check this http://jsfiddle.net/Wg9Dz/
rather than that you can use
html
<div class = "margin-me">
<ul>
<li>hello</li>
<li>bye</li>
</ul>
</div>
css
.margin-me, margin-me ul{margin:0 auto;}
My HTML code is as follows:
<div class="c1"> Heading
<div>
<ul style="display:none">
<li>Item1</li>
<li>Item1</li>
</ul>
</div>
</div>
This is my CSS :
.c1:hover > div ul
{
display:block;
}
How do I access lower level children with ">" operator? I basically want the list to be displayed on hover of c1.
You need to remove the inline style (style="display:none") from your markup - inline style will override the styles loaded from the stylesheet.
Instead, put this in your stylesheet:
.c1 > div ul {
display:none;
}
.c1:hover > div ul {
display:block;
}
Do this -
Demo
<div class="c1"> Heading
<div>
<ul>
<li>Item1</li>
<li>Item1</li>
</ul>
</div>
</div>
CSS
ul{ display: none; }
.c1:hover div ul
{
display:block;
}