Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 4 years ago.
Improve this question
I want to show the a List in Two Columns
But I want to show Order List that contains Arabic Language. This means that the direction should be from Right to Left E.g direction:rtl. Unfortunately, its not working accurately for me.
ol {
width: 30em;
}
ol li {
float: left;
width: 10em;
}
br {
clear: left;
}
div.wrapper {
margin-bottom: 1em;
}
<h1>List Of Items</h1>
<div class="wrapper">
<ol dir="ltr">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ol>
<br />
</div>
Add 'direction: rtl' in 'ol' style:
ol
{
direction: rtl;
width: 30em;
}
ol li
{
float: left;
width: 10em;
}
br
{
clear: left;
}
div.wrapper
{
margin-bottom: 1em;
}
<h1>List Of Items</h1>
<div class="wrapper">
<ol dir="ltr">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ol>
<br />
</div>
Based on the required layout
CSS Columns would work with rtl as a direction.
ol {
width: 30em;
column-count: 2;
list-style-position: inside;
}
ol li {
width: 10em;
}
div.wrapper {
margin-bottom: 1em;
}
<div class="wrapper">
<ol dir="rtl">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
</div>
Related
I have an HTML list with display: inline-block which I want to separate with a line to make a footer menu.
For that I apply a left border for every list item that has an item before. However, when screen is smaller and the line breaks, the first item in the second line shows the border.
How can I hide the border on the first item on the second line once the line breaks?
Here is a fiddle: https://jsfiddle.net/ur7dyL7u/3/
<style type="text/css">
li {
line-height: 24px;
display: inline-block;
border-right: none;
}
li~li {
border-left: red 2px solid;
padding-left: 5px;
}
div{
text-align:center;
}
</style>
<div>
<ul>
<li>Item nr 1</li>
<li>Item nr 2</li>
<li>Item nr 3</li>
<li>Item nr 4</li>
<li>Item nr 5</li>
<li>Item nr 6</li>
<li>Item nr 7</li>
<li>Item nr 8</li>
<li>Item nr 9</li>
<li>Item nr 10</li>
</ul>
<div>
I think there is no way to do that the way you want to, you will have to change the approach;
I tried those styles to achieve what you want:
ul{
padding:0; overflow:hidden;
}
li {
line-height: 24px;
display: inline-block;
border-right: none;
padding-left: 5px;
}
li~li {
box-shadow: -2px 0px 0px red;
}
Instead of a border, I use box shadow that is outside the box and set overflow hidden to the list so it will always hide the shadow of the first element on each line.
Here is a working example: https://jsfiddle.net/2o18jkfL/
Another one that "works" with text-align:center
http://codepen.io/sergio0983/pen/YpKxzQ
EDIT
Different approach using :before to cover the line on the first item in each line:
http://codepen.io/sergio0983/pen/eBOEpY
If you have no problem with having a separation in the first line when line-breaks you can do this:
Instead of using border-left use border-right in all your li elements except the last one.
ul {
text-align: center;
}
li {
line-height: 14px;
display: inline-block;
}
li:not(:last-child) {
border-right: red 1px solid;
padding-right: 10px;
}
<ul>
<li>Item nr 1</li>
<li>Item nr 2</li>
<li>Item nr 3</li>
<li>Item nr 4</li>
<li>Item nr 5</li>
<li>Item nr 6</li>
<li>Item nr 7</li>
<li>Item nr 8</li>
<li>Item nr 9</li>
<li>Item nr 10</li>
</ul>
I have two divs. When I rollover on a link, I want to hide one div and show the other so it appears as if the background color has changed. Here is some example HTML:
<div id="main-nav">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<div id="sub-nav">
<ul>
<li>SubItem 1</li>
<li>SubItem 2</li>
<li>SubItem 3</li>
</ul>
</div>
The sub-nav div is EXACTLY the same as the main-nav div, except the background-color is different.
#main-nav {
width: 500px;
height: 250px;
background-color: black;
display: block;
}
#sub-nav {
width: 500px;
height: 250px;
background-color: white;
display: none;
}
All I want to do is show the #sub-nav div whenever an item in the #main-div is hovered over. So the effect will be that the background-color appears to change from black to white on hover.
Can I do this using only CSS?
Basically I am wanting to know if I can change the display property of a containing div whenever an element inside that div (the <a> tag) is hovered over? That is, hovering on a link should cause its containing div #main-nav to change to display: none and the #sub-nav div to become display:block
No you can't do this just with CSS. You would need the subnav to be a child of the element you are hovering or directly adjacent to it.
You could use css selectors like
#main-nav li:hover .sub-nav{}
or
#main-nav li:hover + .sub-nav{}
Alternatively you could use javascript
Why not just change the background color? Like this:
<div id="main-nav">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
#main-nav:hover { background-color: black; }
Edit you can do exactly what you asked, but you'd need a wrapper for that:
<div class="navigation-wrapper">
<div class="main">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<div class="sub">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
And in your css:
.navigation-wrapper .sub { display: none; }
.navigation-wrapper:hover .main { display: none; }
.navigation-wrapper:hover .sub { display: block; }
Fiddle demo
I'm trying to achieve a shopping menu in my html code,
Here is the simple piece of html I am working with so far
<html>
<head>
<style>
.category-list
{
width: 300px;
background-color: #CCC;
}
body {background-image: url("images/background.gif");}
</style>
</head>
<body>
<div class="category-list">
<ul>
<li>Item 1-1</li>
<li>Item 1-2</li>
<li>Item 1-3</li>
</ul>
<ul>
<li>Item 2-1</li>
<li>Item 2-2</li>
<li>Item 2-3</li>
<li>Item 2-4</li>
<li>Item 2-5</li>
</ul>
<ul>
<li>Item 3-1</li>
<li>Item 3-2</li>
</ul>
<ul>
<li>Item 4-1</li>
<li>Item 4-2</li>
<li>Item 4-3</li>
</ul>
</div>
</body>
</html>
If you take a look at the image below,
The image on the left is what is displaying at the moment,
the image in the middle is what I would like my menu to look like,
The image on the right is just a template to show you what I mean.
So basically the first UL will display, the second UL will display, in one row, then the third UL will be drawn just below the first UL, and then the fourth UL will be drawn below the second UL.
Add this to your CSS:
ul:nth-child(2n-1) {
float:left;
margin: 0;
}
ul:nth-child(2n) {
margin-left: 150px; /* Or how many px you want */
}
JSFiddle
You can try float left and float right, so
<ul class="columnLeft"> 1. ....</ul>
<ul class="columnRight"> 2. ....</ul>
<ul class="columnLeft"> 3. ....</ul>
<ul class="columnRight"> 4. ....</ul>
with stylesheet
columnLeft { float: left;}
columnRight { float: right;}
At your picture, the first UL and the second UL have different heights and the preceding ULs are directly sticked to the bottom of the upper one.
This is why you may create "columns" by classing-left/right.
Or use this sample
<style>
.category-list{
width: 300px;
background-color: #CCC;
}
body {
background-image: url("images/background.gif");
}
.red{
border: solid 1px red;
}
.green{
border: solid 1px green;
}
.blue{
border: solid 1px blue;
}
.yellow{
border: solid 1px yellow;
}
.left{
float: left;
}
.right{
float: right;
}
</style>
<div class="category-list">
<div class="left">
<ul class="red">
<li>Item 1-1</li>
<li>Item 1-2</li>
<li>Item 1-3</li>
</ul>
<ul class="green">
<li>Item 2-1</li>
<li>Item 2-2</li>
<li>Item 2-3</li>
<li>Item 2-4</li>
<li>Item 2-5</li>
</ul>
</div>
<div class="right">
<ul class="blue">
<li>Item 3-1</li>
<li>Item 3-2</li>
</ul>
<ul class="yellow">
<li>Item 4-1</li>
<li>Item 4-2</li>
<li>Item 4-3</li>
</ul>
</div>
firstly float your <ul>'s
give them a width e.g. width: 50%; for two columns, width: 33% for 3 columns
finally clear the outer div category-list so that your layout is maintained and doesn't messup the rest of the page.
here it is in its entirety:
.category-list:after{
clear: both;
display:block;
content: '';
}
.category-list ul{
float:left;
width: 50%
}
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I've got 3 lists. I'm looking to center them on a page in a horizontal fashion. How can I do this? Thank you!
This is quite easy with inline-block:
#container {
text-align: center;
}
#container ul {
display: inline-block;
}
jsFiddle Demo
The HTML
<div id="navcontainer">
<ul id="navlist">
<li id="active">Item one</li>
<li>Item two</li>
<li>Item three</li>
</ul>
<ul id="navlist">
<li id="active">Item one</li>
<li>Item two</li>
<li>Item three</li>
</ul>
<ul id="navlist">
<li id="active">Item one</li>
<li>Item two</li>
<li>Item three</li>
</ul>
</div>
The CSS
#navcontainer
{
width: 300px;
margin-left:auto;
margin-right:auto;
text-align:center;
}
#navlist li
{
display: inline;
list-style-type: none;
padding-right: 20px;
}
http://jsfiddle.net/E25VX/1/
Trying to use a list with 5 (or more items) gotten the code to work but trying to get it to work as the desired image shows.
I'm very new at css so please bear with me. thanks
Any help would be appreciated.
Desired:
Item 1 Item 2 Item 3 Item 4 Item 5
Currently:
Item 1 Item 5 Item 4 Item 3 Item 2
CSS
#navlist li
{
display: inline;
}
#navlist #right
{
float: right;
margin-right: 10px;
}
#navlist li a
{
text-decoration: none;
}
HTML
<div id="navcontainer">
<ul id="navlist">
<li>Item 1</li>
<li id="right">Item 2</li>
<li id="right">Item 3</li>
<li id="right">Item 4</li>
<li id="right">Item 5</li>
</ul>
</div>
Try using display: table in your CSS:
#navlist
{
display: table;
}
#navlist li
{
display: table-cell;
padding-right: 10px;
white-space: nowrap;
}
#navlist li:last-child
{
padding-right: 0;
}
#navlist li.span-full
{
width: 100%;
}
And your markup now looks like this:
<div id="navcontainer">
<ul id="navlist">
<li class="span-full">Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>
Here's an updated fiddle: http://jsfiddle.net/QfD6J/7/
You can do it like this jsFiddle example
Using this CSS
#navlist li {
display:inline-block;
list-style-type:none
}
#navlist li:nth-of-type(1) {
margin-right:60px;
}
You can also use float:left instead of display:inline-block
Just put
float: left;
inside #navlist li and #navlist #right.
Why not using 2 lists with one floating on the right? http://jsfiddle.net/rEc3V/
<div id="navcontainer">
<ul class="nav pull-right">
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
<ul class="nav">
<li>Item 1</li>
</ul>
</div>
CSS:
.nav {
list-style-type: none;
padding: 0;
margin: 0;
}
.nav li {
display: inline-block;
}
.pull-right {
float: right;
}
this seems to work jsfiddle.net/Z3a6Z/23. thanks everyone for the direction.