I have a list with child elements like :
<ul>
<li>.. </li>
<li>
<ul>
<li>.. </li>
</ul>
</li>
<li></li>
</ul>
<style> li {float: left; margin-left: 10px } li ul {float: left} </style>
This is fine in Firefox, all the list elements being inline horizontally like I want.
LI LI LI LI LI
When I look in Chrome though those child elements are dropped below the main list elements like this :
LI LI LI
LI LI
I tried display: inline on all of the elements but it made no difference.
What is the best cross browser way to create a horizontal row of list elements that have nested children like this?
Here is a fiddle : http://jsfiddle.net/thirtydot/7yufQ/1/
In Firefox the numbers are screwed up from the floats and Chrome shows them as in my example above.
<style>
ul{
padding:0px;
margin:0px;
list-style-type:none;
}
li {float: left; margin-left: 10px }
li ul {float: left;}
</style>
here is an example, works fine for me in Chrome as well
http://jsfiddle.net/corotchi/8BLck/
You can make both ul and lis inline.
http://jsfiddle.net/QFjgH/
ul, li {
display: inline;
}
li { margin-left: 10px; }
The problem with your code is whitespace after the "2". I just removed it an put the <ul> next to the "2" and it works just fine in Chrome. Look http://jsfiddle.net/7yufQ/2/
Related
I am building an AngularJS app. I am having the following difficulties styling the page. Here is a fiddle: https://jsfiddle.net/9ooa3wvf/
1) On hover I want to change the color of the nested li elements (Class name is nested). I have tried several different approaches, but nothing seems to work.
2) I want to vertically align the nested li elements in the center with the links About and Services. They are being aligned like so:
I want them to be aligned like so:
In the above picture, Our Team is not on the same line as About.
HTML
<div ng-show = "buttonDisplay" id = "buttonDisplayContent" class = "cssFade" >
<ul>
<li class = "normal"> Home </li>
<li class = "subLi">About
<ul class = "nested">
<li> Our Team </li>
<li> Our efforts </li>
</ul>
</li>
<li class = "nextToNested"> Blog </li>
<li class = "subLi"> Services
<ul class = "nested">
<li> Design </li>
<li> Web </li>
<li> Learn </li>
<li> Invent </li>
</ul>
</li>
<li class = "nextToNested"> Portfolio </li>
<li class = "normal"> Contact </li>
</ul>
</div>
CSS
#buttonDisplayContent ul {
list-style-type:none;
padding:0px
}
#buttonDisplayContent ul ul {
list-style-type:none;
padding:0px
}
#buttonDisplayContent ul a {
text-decoration:none;
color:#fff;
font-size:50px;
font-weight:bold
}
#buttonDisplayContent ul ul a {
text-decoration:none;
color:lightgray;
font-size:40px;
font-weight:bold
}
#buttonDisplayContent li {
margin-bottom:0.1%
}
.subLi{
margin:0px;
padding:0px;
list-style-type:none
}
.nested {
margin-left:0px;
display:inline
}
.nested li {
display:inline;
padding-bottom:6px;
padding-right:1%;
padding-left:1%;padding-top:8px
}
#buttonDisplayContent ul li:hover {
background-color:black
}
UPDATE
The following code solved the problem. I added a span on the li elements I wanted to vertically align.
<div ng-show = "buttonDisplay" id = "buttonDisplayContent" class = "cssFade" >
<ul>
<li class = "normal"> Home </li>
<li class = "subLi">About
<span>
<ul class = "nested">
<li> Our Team </li>
<li> Our efforts </li>
</ul>
</span>
</li>
<li class = "nextToNested"> Blog </li>
<li class = "subLi"> Services
<ul class = "nested">
<li> Design </li>
<li> Web </li>
<li> Learn </li>
<li> Invent </li>
</ul>
</li>
<li class = "nextToNested"> Portfolio </li>
<li class = "normal"> Contact </li>
</ul>
</div>
CSS:
#buttonDisplayContent ul {
list-style-type:none;
padding:0px
}
#buttonDisplayContent ul ul {
list-style-type:none;
padding:0px
}
#buttonDisplayContent ul a {
text-decoration:none;
color:#fff;
font-size:50px;
font-weight:bold
}
#buttonDisplayContent ul ul a {
text-decoration:none;
color:lightgray;
font-size:40px;
font-weight:bold
}
#buttonDisplayContent li {
margin-bottom:0.1%
}
span .nested li {
display:inline-block
vertical-align:middle
}
.subLi{
margin:0px;
padding:0px;
list-style-type:none
}
.nested {
margin-left:0px;
display:inline
}
.nested li {
display:inline;
padding-bottom:6px;
padding-right:1%;
padding-left:1%;padding-top:8px
}
#buttonDisplayContent ul li:hover {
background-color:black
}
Update:
There is one thing missing for perfect vertical alignment: line-height property! When not set, especially in a situation like that, with a lot of nested, inline, ULs and LIs, every browser can behave in an different way...
Here is a more clean version, trying to follow some best practices on creating a CSS:
Define default styles. I saw in your CSS You setting a bunch of times the same property and value, for the same element. All your ULs had list-style:none;, so why write 3 times the same thing? It's a lot easier write a default: ul{list-style:none} and then, if needed override this default: ul.ULThatIsVeryDifferent{list-style:circle outside none;}.
You will notice that I've set both UL and LI font-size and line-height properties together, even ULs doesn't respecting font-size. I made it because both properties are related in this scenario, so if you change the font-size for your LI, You would also change the line-height, and also, the UL's line-height. When everything is together, it's a lot easier to maintain.
In the :hover rules, You will notice that I've not used the a in the end of selector. Why it's not needed now? Because there is not any other more specific selector setting some color for our a. But only this will not make our links get colored properly. Why? Because as doesn't inherit some properties from its parents, and one of this properties is color. So, even We setting a color on LI, our link has naturally a more specific selector (defined by default by browser) setting a color. To override this behavior, You will see that in the first lines, I set some default properties for as, and one of them is color:inherit. Thus, when We change the color of our LI, our a will also get this new color.
Take a look with care in the updated JsFiddle, and how I've structured the CSS and properties.
If You have any other doubts, I'd be glad to help. Also, I'll be very happy if You think that my answer is now worthy of your upvote.
For reference, there is the last CSS proposed:
/*------- Defaults -------*/
*{
vertical-align: middle;
line-height: normal;
font-
}
ul{
list-style: none outside none;
padding: 0;
margin: 0;
}
li{
display:inline-block;
}
a{
text-decoration:none;
font-weight:bold;
color:inherit;
}
/*------- Parent List -------*/
div#buttonDisplayContent > ul,
div#buttonDisplayContent > ul > li{
font-size:34px;
line-height:34px;
}
div#buttonDisplayContent > ul > li{
display: list-item;
color:#eee;
}
div#buttonDisplayContent > ul > li:hover{
background-color:#000;
}
/*------- Nested Lists -------*/
div#buttonDisplayContent > ul > li > ul{
display: inline-block;
}
div#buttonDisplayContent > ul > li > ul,
div#buttonDisplayContent > ul > li > ul > li{
font-size: 14px;
line-height:14px;
color: #ccc;
margin: auto 10px;
}
div#buttonDisplayContent > ul > li > ul > li:hover{
color: yellow;
}
Original Answer:
1 - In your code, you set: #buttonDisplayContent ul ul a{color:lightgray;}. If We set .nested li:hover{color:yellow}, the most specific rule will be the first one, because it sets directly our a element, and also because its degree of specificity (how deep the selector goes). If We set .nested li:hover a{color:yellow;}, it also will not work, because of the degree of specificity again. Thus, We have two choices:
Use a more specific css selector: #buttonDisplayContent .nested li:hover a{color:yellow;}
Use the !important, to override any more specific css selector that doesn't use the !important too: .nested li:hover a { color: yellow !important; }.
Depending on your real situation can be a better/cleaner approach use a more specific selector, it's a good practice, but there is exceptions...
Also, Here is a great article about CSS Selector Specificity, really worth read it :) .
2 - Elements with display: inline; doesn't respect top and bottom margins and paddings, and cannot have a width and height set. (http://www.w3.org/TR/CSS21/visuren.html#inline-formatting). Thus, to make sure your settings of top and bottom paddings will be respected, but keeping the "inline behave" set display:inline-block.
From a great answer here of StackOverflow (CSS display: inline vs inline-block, and also What is the difference between display: inline and display: inline-block?):
Inline elements:
respect left & right margins and padding, but not top & bottom
cannot have a width and height set
allow other elements to sit to their left and right.
Block elements:
respect all of those
force a line break after the block element
Inline-block elements:
allow other elements to sit to their left and right
respect top & bottom margins and padding
respect height and width
Working JsFiddle here with suggested changes: https://jsfiddle.net/9ooa3wvf/18/
For first question use this,
.nested li a:hover{color:red !important;}
sorry to use !important as you already have color for that so.
For second point, can you please explain little bit more so i can update my answer and can give you solution...
Again sorry for one answer but little bit more detail and will give you answer asap..
I just added couple of lines of css and it seems to work
.nested li a:hover{
color:red !important;
}
Check this fiddle
Also add this css
ul li {
display: table-caption;
}
I am getting a problem with my project where our client has used a logo image inside the menu's ul li. He has used a class with li where the logo is placed but I cant use the class with it; I also do not want to use :nth-child because in future we may add a new menu element. I currently have an empty anchor inside the logo li. Is it possible in the CSS to select this anchor which is empty. Please help me.
Thanks in advance
Client Site: http://www.kangaroopartners.com/about/
My Site: http://kangaroopartners-2.hs-sites.com/test1
Demo http://jsfiddle.net/thwkav0e/
CSS and HTML:
ul {
display:block;
width:100%;
text-align:center;
list-style: none;
margin:0;
padding:0;
}
ul li {
display:inline-block;
padding: 10px;
}
ul li:nth-child(4), ul li:last-child {
background:red;
width:50px;
}
<ul>
<li>Hello1</li>
<li>Hello2</li>
<li>Hello3</li>
<li></li>
<li>Hello4</li>
<li></li>
</ul>
:empty selector should be what you are looking for.
ul li a:empty {
background:red;
width:50px;
display: inline-block;
height: 10px;
}
http://jsfiddle.net/thwkav0e/1/
I have an inline list and I need to line break the list in two lines...
<ul>
<li><h1>One</h1></li>
<li><h1>Two</h1></li>
<li><h1>Three</h1></li>
<li><h1>Four</h1></li>
<li><h1>Five</h1></li>
<li><h1>Six</h1></li>
<li><h1>Seven</h1></li>
</ul>
Desire result:
One Two Three Four < /br>
Five Six Seven
What about float and clear?
ul {overflow: hidden;}
li {float: left;}
li:nth-child(4) {clear: left;}
http://jsfiddle.net/hfc0u7e8/
Or if you don't want to float items and use, as you wrote, display: inline, you can use this code with :before:
ul {overflow: hidden;}
li, h1 {display: inline;}
li:nth-child(4):before {display: block; content: '';}
http://jsfiddle.net/hfc0u7e8/1/
You can this by using css like, here i have added div with cleat both to html to make children contained in ul.
ul li{list-style:none; float:left;}
ul li:nth-child(5){clear:both;}
ul li h1 a{text-decoration:none;}
<ul>
<li><h1>One</h1></li>
<li><h1>Two</h1></li>
<li><h1>Three</h1></li>
<li><h1>Four</h1></li>
<li><h1>Five</h1></li>
<li><h1>Six</h1></li>
<li><h1>Seven</h1></li>
<div style="clear:both;">
</ul>
Apparently splitting the list is undesired, so for a responsive list, just add a div around the lot and give it a suitable width:
html:
<div>
<ul>
<li><h1>One</h1></li>
<li><h1>Two</h1></li>
<li><h1>Three</h1></li>
<li><h1>Four</h1></li>
<li><h1>Five</h1></li>
<li><h1>Six</h1></li>
<li><h1>Seven</h1></li>
</ul>
</div>
CSS:
ul {list-style:none;}
li {display:inline-block;}
div {float:left; width:60%;}
Fiddle here
I have a horizontal list in my markup with the following CSS:
ul li {
display: inline;
list-style: circle;
list-style-type: circle;
}
When I remove the display: inline; it works fine. But I can't get it to work on the horizontal one.
The list decorators will only be displayed if you don't override the display type for the list item. Rather than setting display: inline, apply a float: left and give some margin to prevent the circles from colliding into the previous element.
ul li {
float: left;
margin-left: 30px;
list-style: circle;
list-style-type: circle;
}
Here is an example.
ul li {
float: left;
margin-left: 30px;
list-style: circle;
list-style-type: circle;
}
/* this bit is optional, it only removes the left padding from the first item */
ul li:nth-of-type(1) {
margin-left: 0;
}
<ul>
<li> item 1 </li>
<li> item 2 </li>
<li> item 3 </li>
<li> item 4 </li>
</ul>
well, if you do that it won't shw because you're basically declaring "stop displaying the element in its default display method list-item and use inline instead" . To learn more about display methods, please take a look do DISPLAY PROPERTY.
Now, if you want to have bullets AND still display it inline, there are many ways to do it. You can use a :before pseudo-selector, you can use a background, etc.
For example:
ul li {
display: inline;
}
ul li:before {
content: "• ";
}
or
ul li{
display: inline-block;
}
ul li{
padding-left:30px; background:url(images/bullet.png) no-repeat 0 50% ;
}
but as long as you "kill" the list-item display method, you'll need to find some ways to override the DOM display of list types
Instead of inline, use:
li {
float:left
}
or
li {
display:inline-block
}
I have following html for menu
<ul>
<li id="btnHome">Link One</li>
<li id="btnAbout">Link Two</li>
<li id="btnContact">Link Three</li>
<li id="btnLinks">Link Four</li>
</ul>
and following is my css for it
ul {
margin: 0;
padding: 0;
}
ul li {
list-style-type: none;
}
#nav {
background: #999;
padding: 2%;
}
#nav ul li {
float: left;
margin-right: 2%;
}
I use above for IE6 and 7 in order to display links in a single row. float: left displays menu items in a row but it also changes the style for #nav div and menu items do not appear inside #nav div anymore.
How can I fix this issue for IE6 and 7?
Note: I am using display: inline-block for modern browser and this works fine.
You could use a CSS declaration like zoom: 1; for #nav element to trigger hasLayout on IE 6-7.
#nav {
background: #999;
padding: 2%;
*zoom: 1;
}
Note: The star/asterisk prefix is a CSS hack for targeting IE 6/7.
Other options
Using overflow: hidden; for the #nav element to create a new block formatting context.
Creating an element with clear: both; CSS declaration as the last child of the #nav element.
You might want to take a look at Nicolas Gallagher's micro clearfix hack.
Not sure without the rest of the document but you could try adding a
<div style="clear:both;"></div>
right after your close your ul element, that should grow the size of your containing #nav to the place your floated content occupies in it.