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;">
Related
Question: How do I get this to work for tabbing, using CSS only? (Tabbing already works).
#menu:before {
content:"Menu \25bc";
font-weight:bold;
width:100%;
}
#menu:hover:before {
content:"Menu \25b2";
}
#menu li {
position:absolute;
left:-9999px;
}
#menu:hover li {
position:relative;
left:0;
}
<html>
<title>Test</title>
<body>
<header>
Link to homepage
</header>
<nav>
<ul id="menu">
<li>Menu item 1</li>
<li>Menu item 2</li>
</ul>
</nav>
<main>
<p>Other text with maybe a link here.</p>
</main>
</body>
</html>
EDIT: Original question follows.
I have a menu:
<ul id="menu">
<li>Menu item 1</li>
<li>Menu item 2</li>
</ul>
However, I want to hide it at a narrow page width, so I apply the following CSS:
#media (max-width: 768px) {
#menu:before {
content:"Menu \25bc";
}
#menu:hover:before {
content:"Menu \25b2";
}
#menu a {
position:absolute;
left:-9999px;
}
#menu:hover a {
position:relative;
left:0px;
}
}
This hides the menu, adds the word "Menu" in it's place, with a down or up arrow, depending on the hover state, which also shows the menu when you hover over it.
The problem is that, while :hover works just fine, I cannot get both to show by tabbing to one of the tags, using the :focus pseudo class. (Alas, :root will not work like other pseudo classes, so something like #menu a:focus:root #menu a { position:relative; left:0; } won't work, as far as I can see).
Does anyone have any ideas as to how I could approach this, using only CSS? Or have I dug myself into a hole?
Based on OP comment below:
I'm happy to change the HTML, but how would :target work here?
here is a snippet with :target
nav {
height: 0;
overflow: hidden;
position: relative;
}
nav:target {
height: auto;
}
nav + div a:before {
content: "Menu \25bc";
font-weight: bold;
width: 100%;
}
nav:target + div a:before {
content: "Menu \25b2";
}
nav:target + div .open,
nav + div .close {
display: none;
}
nav:target + div .close,
nav + div .open {
display: block;
position: absolute;
top: 0
}
<nav id="menu">
<ul>
<li>Menu item 1
</li>
<li>Menu item 2
</li>
</ul>
</nav>
<div>
<a class="open" href="#menu"></a>
<a class="close" href="#"></a>
</div>
I'm developing a css Tree view and I want, if is possible, to keep the hover effect only on the element that has children:
<ul>
<li><span>Item 1</span>
<ul>
<li><span>Item 1.1</span></li>
<li><span>Item 1.2</span></li>
<li><span>Item 1.3</span></li>
</ul>
</li>
</ul>
What I've done in css was:
.treeview li>ul>span:hover, .treeview li>ul>span:hover+ul li span {
background:#eee;
border:1px solid #94a0b4;
color:#000
}
but this doesn't work like I expected.
You want the :hover effect only inside the "Item 1" right?
.treeview > ul > li:hover > span {
color: red;
}
Also check this Fiddle.
UPDATED (based on your comment)
.treeview li:hover > span {
color: red;
}
And updated Fiddle. This however will also trigger the span on "Item 1.1.1" when hovered...
Is that what you want ?
http://jsfiddle.net/Defoncesko/p63b9/
HTML
<div class="treeview">
<ul>
<li><span>Item 1</span>
<ul>
<li><span>Item 1.1</span></li>
<li><span>Item 1.2</span></li>
<li><span>Item 1.3</span></li>
</ul>
</li>
</ul>
</div>
CSS
ul ul li:hover {
background-color:#eee;
border:1px solid #94a0b4;
color:#000
}
I think this is what you want. I added another larger li in my fiddle so you can see.
.treeview ul>li>span:hover {
background:#eee;
border:1px solid #94a0b4;
color:#000
}
.treeview ul>li>span ~ ul>li>span:hover {
background:#fff;
border:none;
color:#000
}
Demo:http://jsfiddle.net/QdEEf/1/
Edit: Actually If im truly understanding your question. Youre looking for a way to determine if the li has a ul as a child then give that li a hover if it does. If this is the case youre gonna need to use javascript to determine if it has a ul child. There is no way to do this with CSS
I'm trying to position two elements within an li list next to eachother on the right side to get the result:
Some text.................A...B Unfortunatelly the ordering drives me crazy.
Here's the html code:
<ul class="list">
<li>some text
<small class="a">A</small>
<small class="b">B</small>
</li>
</ul>
With the following CSS code I was able to get the small-elements on the right side next to each other, but the result is that i see on the right side B next to A!
.list li{
background-color:#282828;
color:#ffffff;
font-size:20px;
text-transform:uppercase;
padding-left:5px;
}
.list small.a {
display:inline;
float:right;
}
.list small.b {
display:inline;
float:right;
}
So, I aim to have:
some tex.....................A...B
but for instance it looks like:
some text....................B...A
See example here --> http://jsfiddle.net/LKVdE/
Thanks upfront for any tip!
Here is the solution: http://jsfiddle.net/surendraVsingh/LKVdE/1/
CSS
.list small.a {
background-color: #000000;
display: inline;
}
.list small.b {
background-color: #ff0000;
display: inline;
}
.list li span{
display: inline-block;
float: right;
}
HTML
<ul class="list">
<li>Brennwert kJ / kcal
<span>
<small class="a">1109kJ / 261kcal</small>
<small class="b">455kJ / 107kcal</small>
</span>
</li>
</ul>
A and B should be put in a right floating container:
.list small.a {
display:inline;
}
.list small.b {
display:inline;
}
.floatright {
float:right;
}
And
<li>some text
<div class="floatright">
<small class="a">A</small>
<small class="b">B</small>
</div>
</li>
Why does this happen, because first style is applied to a which moves it to to the right, whatever next appears in the markup must now follow a from the right that's why you see BA instead of AB
Markup changes: Include the text inside a span and add float:left to it
<ul class="list">
<li><span class="text">some text</span>
<small class="a">A</small>
<small class="b">B</small>
</li>
</ul>
Css changes, remove float:right from a and b and add float:left to text
.text{float:left;}
.list small.a {
display:inline;
}
.list small.b {
display:inline;
}
Working fiddle: http://jsfiddle.net/LKVdE/8/
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
I've got an expandable css menu that is acting a bit weird in ie, but works fine in firefox. Anyone who can help me is appreciated.
Heres the problem. When I click the li it expands to the sub li fine, however, if I keep the mouse directly over the li I just clicked on, the text in the sub li's don't show. See this picture...notice where the mouse is located, and notice there is no text next to the sub li's. The anchor tag is represented by the dotted line.
If I move the mouse to the right (or anywhere off of the text "Los Angeles") the sub li's show up.
Notice the mouse now and the li's showing up in this picture:
Heres the css and html:
<HTML lang="en_US" sizcache="7062" sizset="0">
<HEAD>
<STYLE>
ul.left_menu{
position:relative;
float:left;
width:100%;
}
ul.left_menu li>a:hover{
cursor: pointer;
}
ul.left_menu li {
list-style-type:none;
position:relative;
padding-top: 5px;
clear:both;
}
ul#nav{
text-indent:15px;
}
#nav li > ul{
display:none;
padding-left:15px;
text-indent:15px;
}
#nav li {
line-height:11px;
}
#nav > li{
clear: both;
padding-left:15px;
line-height:11px;
}
A {
TEXT-ALIGN: left;
TEXT-DECORATION: none;
outline: none
}
</STYLE>
</HEAD>
<BODY>
<UL id="nav" class="left_menu">
<LI>
<A >Los Angeles</A>
<UL>
<LI>
<A>Commercial Properties</A>
<UL>
<LI>
<A>Office</A>
</LI>
<LI>
<A>Industrial</A>
</LI>
<LI>
<A>Retail</A>
</LI>
</UL>
</LI>
</ul>
</li>
</ul>
</body>
</html>
Thanks for your help.
This is called the Peek-a-boo bug. Here is an explanation of the bug and a fix:
http://www.positioniseverything.net/explorer/peekaboo.html