Hey I want that my SubCat4 should be listed below SubCat1 and SubCat5 should be below SubCat2 I have tried many things but couldn't get it..
Here is my HTML code..
<div class="sub_menu">
<ul>
<li>SubCat1<span class="icon icon-arrow_down"></span></li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<ul>
<li>SubCat2<span class="icon icon-arrow_down"></span></li>
<li>By Author</li>
<li>By Title</li>
</ul>
<ul>
<li>SubCat3<span class="icon icon-arrow_down"></span></li>
<li>By City</li>
</ul>
<ul>
<li>SubCat4<span class="icon icon-arrow_down"></span></li>
<li>Fiction Books</li>
<li>Non Fiction Books</li>
</ul>
<ul>
<li>SubCat5<span class="icon icon-arrow_down"></span></li>
<li>1</li>
<li>2</li>
<li>E-Books Vs. Paper Books</li>
<li>3</li>
<li>General Advice on Books</li>
<li>5</li>
<li>6</li>
<li>Ten Best Authors / Poets</li>
<li>More...</li>
</ul>
You can get the CSS and code in my jsfiddle link http://jsfiddle.net/uiupdates/yac70mhw/1/
Pls help..
thankx in advance.
Don't use floats here, but inline-block.
.sub_menu {
display: block;
margin: 15px 15px 15px 0px;
position: absolute;
width: 844px;
font-size: 0;
line-height: 0;
}
.sub_menu ul {
border: medium none;
display: inline-block;
vertical-align: top;
margin: 15px;
width: 251px;
padding:0;
}
Example:
http://jsfiddle.net/yac70mhw/3/
Use the clearfix
insert this after the 3rd <ul>
<div class="clearfix"></div>
And finally in the css -
.clearfix {
clear: both;
}
Related
How do I access the style <li> elements so I can set their property to - list-style: none;?
<div class="dataTables_paginate paging_bootstrap pagination">
<ul>
<li class="prev disabled">? Previous</li>
<li class="active">1</li>
<li>2</li>
<li class="next">Next ? </li>
</ul>
</div>
.dataTables_paginate ul {
list-style: none;
margin: 0;
padding: 0;
}
.dataTables_paginate li {
display: inline-block;
}
<div class="dataTables_paginate paging_bootstrap pagination">
<ul>
<li class="prev disabled">? Previous</li>
<li class="active">1</li>
<li>2</li>
<li class="next">Next ? </li>
</ul>
</div>
You should use the ul selector to remove the list styling.
ul {
list-style-type: none;
}
To change just one set of ulgive the give your ul a class or ID.
How do I make a sub-menu appear when hovering over? I'm not seeing what's wrong with what I have - (but there's obviously something wrong since it doesn't work!)
HTML
<div>
<ul>
<li><a id="ALink" href="#">A</a></li>
<ul id="SubMenu">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<li><a id="BLink" href="#">B</a></li>
<li><a id="CLink" href="#">C</a></li>
</ul>
</div>
CSS
#SubMenu {
display: none;
width: 200px;
height: 200px;
background: #00C;
}
#ALink:hover #SubMenu {
display: block;
}
JSFiddle - From the code so far it is suposed to show a menu when hovering over option "A".
You have to have the submenu in that element, that will be linked with it:
<div>
<ul>
<li><a id="ALink" href="#">A
<ul id="SubMenu">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</a>
</li>
<li><a id="BLink" href="#">B</a></li>
<li><a id="CLink" href="#">C</a></li>
</ul>
</div>
The below code should work.
HTML
<ul class="topmenu">
<li class="submenu">A
<ul>
<li>Product 1</li>
<li>Product 2</li>
<li>Product 3</li>
</ul>
</li>
<li>B</li>
<li>C</li>
</ul>
CSS
The below code is to formatting and indentation.
ul.topmenu, ul.topmenu ul {
display: block;
margin: 0;
padding: 0;
}
ul.topmenu li {
display: inline;
list-style: none;
margin: 0;
padding-right: 1.5em;
}
The sub-menu is still showing up on the page, so you would have to hide it:
ul.topmenu li ul {
visibility: hidden;
}
Then all you need is for the menu to appear when the user hovers over the enclosing list item:
ul.topmenu li.submenu:hover ul {
visibility: visible;
}
For example, i have such a list:
1
2
3
4
5
6
7
8
and i want it to look like
1 5
2 6
3 7
4 8
So, how to make it work without any javascript?
I have such a code:
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
And
ul{
height:200px;
}
And i also need the code to be supported by IE8 and IE9
Update:
It seems to me that i got it. It's looking a little bit weird but anyway.
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
And CSS
ul{
border:1px solid;
position:relative;
height:100px;
}
li{
height:20px;
}
li:nth-child(4)~li{
left:100px;
top:-80px;
position:relative;
}
what you need is CSS3 column relative attributes, like column-count etc.
I make a example on jsFiddle. I don't know much about this, so I achieve the result by calculate height precisely, but I think you can get it in your own way.
And a reference might be helpful.
HTML code:
<div class="newspaper">
<div class="unit">1</div>
<div class="unit">2</div>
<div class="unit">3</div>
<div class="unit">4</div>
<div class="unit">5</div>
<div class="unit">6</div>
</div>
CSS code:
.newspaper {
-moz-column-count:3;
/* Firefox */
-webkit-column-count:3;
/* Safari and Chrome */
column-count:3;
height: 300px;
}
.unit {
height:50px;
width:100%;
border:1px solid gray;
}
Note: Internet Explorer 9, and earlier versions, does not support the column-count property.
I would use Tables instead of lists
you can do it like
HTML
<ul>
<li class="column1">1</li>
<li class="column1">2</li>
<li class="column1">3</li>
<li class="column1">4</li>
<li class="column1">5</li>
<li class="column2 reset">5</li>
<li class="column2">6</li>
<li class="column2">7</li>
<li class="column2">8</li>
<li class="column2">9</li>
<li class="column3 reset">10</li>
<li class="column3">11</li>
<li class="column3">12</li>
<li class="column3">13</li>
<li class="column3">14</li>
<li class="column3">15</li>
</ul>
And check below css
ul
{
margin: 0 0 1em 2em;
padding: 0;
list-style-type: none;
}
ul li
{
line-height: 1.2em;
margin: 0;
padding: 0;
}
* html ul li
{
position: relative;
}
ul li.column1 { margin-left: 0em; }
ul li.column2 { margin-left: 10em; }
ul li.column3 { margin-left: 20em; }
li.reset
{
margin-top: -6em;
}
ul li a
{
display: block;
width: 7em;
text-decoration: none;
}
ul li a:hover
{
color: #FFF;
background-color: #A52A2A;
}
And check this fiddle:
http://jsfiddle.net/9RcVr/
I have this markup:
div#wrapper
ul#container1
li#box1
li#box2
li#box3
ul#container2
li#box4
li#box5
li#box6
The screen's width is enough to display 5 boxes on one row, but the whole container 2 is below container 1 when I float left the uls
How can I have the first line on the screen display boxes 1 to 5 and the second line box 6 (as if all lis were inside a single container and floated left) while keeping the lis inside two different containers ?
Thanks
Give the ul elements display: inline and the li elements display: inline-block
See here: http://jsfiddle.net/hW7Aj/1/
HTML
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<ul>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
CSS
ul {
display: inline;
}
li {
display: inline-block;
width: 80px;
border: 1px solid black;
}
For html:
<div>
<ul class="li1">
<li>c</li>
<li>c</li>
<li>c</li>
</ul>
<ul class="li1">
<li>c</li>
<li>c</li>
<li id="last">c</li>
</ul>
</div>
CSS:
.li1 {
display: inline;
}
#last {
clear: both;
}
li {
display: inline;
float: left;
}
Probably with such markup you can't do this because if you floating ul and li to the left you will have each ul as a container with the floated elements and you don't have enought space to plase 2 floated ul elements. That's why you have wrapped second ul to new line.
You can solve this problem by placing all floated elements under one container.
You need two CSS rules:
ul.second li:nth-child(3)
{
clear: both;
}
li {
float: left;
}
HTML
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<ul class="second">
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
This is one way to do it, using the awesome nth-child pseudo selector.
If you have to support IE then you can change add a class to the last li
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<ul<
<li>4</li>
<li>5</li>
<li class="myLi">6</li>
</ul>
and change the CSS accordingly:
li.myLi {
clear: both;
}
li {
float: left;
}
http://jsfiddle.net/zN4W5/
How can, This values divided between the three columns with CSS and width: auto; as dynamic?
As this: http://img4up.com/up2/20239064020416631754.gif
Example: http://jsfiddle.net/r3rm9/
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
</ul>
You can start with the CSS3 Column properties, but support isn't very good at the moment.
http://jsfiddle.net/GolezTrol/r3rm9/4/
This article http://www.alistapart.com/articles/multicolumnlists/ shows several options for creating multi-column lists, worth checking out. Especially if the numbering MUST be from top to bottom instead of left to right / right to left.
Give your <ul> a specific width. And your <li> and float it.
ul {
float: right;
text-align: right;
direction: rtl;
margin: 50px 50px 0 0;
width: 207px;
}
ul li {
list-style-image: url(http://i.stack.imgur.com/so5PA.png);
float: left;
width: 55px;
}
How about this?
http://jsfiddle.net/r3rm9/1/
ul li{
list-style-image:url(http://i.stack.imgur.com/so5PA.png);
float: left;
width: 30%;
}