I have a navigation with the following html code:
<ul id="nav">
<li><a>home</a></li>
<li><a>login</a></li>
<li class="selected"><a>shop</a></li>
<li><a>help</a></li>
</ul>
What I want to accomplish is that the element with the "selected" class always appears at the left side of the navigation.
So if shop is selected the rendered navigation would look like:
shop home login help
If help is selected:
help home login shop
My css:
#nav li {
display: inline; }
#nav li.selected {
width: 230px;
text-align: center;
background: #b52830;
margin-right: 10px;
float: left;
display: block; }
#nav li.selected a {
display: block;
padding-right: 0; }
#nav li.selected a:hover {
color: #fff; }
It works for certain browser but not for all. Any ideas?
If it does not work the selected element moves beneath the rest...
shop selected:
home login help
shop
Another alternative would be to use a programming language (like php or javascript) to print the list of links in order with class "selected" at the top of the list.
Floating left will put the first ordered li furthest to the left on the same line as the other li elements. Inversely, floating right will put the first ordered li furthest to the right.
How are you applying class "selected" to the appropriate li?
If ul#nav always have fixed width you could tell .selected to float left and all other elements to float right.
I would try to avoid to combine inline and block display like this. It would be helpful if you write how does look like if it not works.
Related
I'm working on a menu that needs to be two columns. I've been able to accomplish this but one of the requirements for this menu is, if there is an uneven number of items in each column, the last one should be aligned to the right column.
This is fairly similar to this question I guess. My ul is floated to the right, my li are floated to the left. Floating the li to the right achieves my desired appearance but, as expected, the links are out of order.
Is there a way I could accomplish this without JS?
A combination of :nth-last-child() and :nth-child() should do the trick. Using the code below you select the last child only if it's odd and float it right.
li { width: 50%; display: inline-block; }
li:nth-last-child(1):nth-child(odd) { float: right; }
<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>
</ul>
I would do the following, in order to avoid using floats :
li { width: 50%; display: inline-block; text-align: left; }
ul { text-align: right; }
<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>
</ul>
My webpage I'm building has a right aligned unordered list nav menu, and I want the bullets to align with one another to the left of the menu. I was able to accomplish this in Chrome and IE by putting the list inside its own DIV; the bullets are displayed outside the div,so I can control their distance from the list by changing the DIV width. In Firefox, however, the bullets are displayed inside the DIV, and I do not appear to have a way to control them.
See the difference here:
http://s106.photobucket.com/user/El_Ornitorrinco/media/fftrouble.png.html
What's with the discrepancy? Is there a simple solution, or do I need a completely different approach? Thanks for your time.
Ricky
Used to this Code
Define you a tag display:block; and text-align:right; as like this
<ul>
<li>Milk</li>
<li>Eggs</li>
<li>Cheese</li>
<li>Vegetables</li>
<li>Fruit</li>
</ul>
Css
ul li, ul{
list-style:square;
}
ul{
width:400px;
}
li a{display:block;text-align:right;}
Live Demo
Is this what you are looking for?
<ul>
<li>Milk></li>
<li>Eggs></li>
<li>Cheese></li>
<li>Vegetables></li>
<li>Fruit></li>
</ul>
CSS goes here
ul
{
list-style-type: none;
padding: 0;
margin: 0;
text-align: right;
}
li
{
background-image: url(arrow.gif);
background-repeat: no-repeat;
background-position: 100% .4em;
padding-right: .6em;
}
If not then please create fiddle for it.
I am trying to align horizontally a list containing radio buttons within a div.
The example can be seen at the following address
http://shopper.webresponsive.co.uk/index.php/blinds/roman-blinds/mairo-mademoiselle-fabric-white-blue.html
I have tried to add to the css the following but no luck:
.options-list ul li {
display: inline-block;
}
Can anyone point me in the right direction?
Thanks
This should be what you're looking for:
.options-list li {
display: inline-block;
margin-right: 16px;
}
The element with the class of options-list is itself a ul, so you don't want to include ul in your selector.
I've looked at and tried a few of the existing solutions on the site (for example CSS Problem to make 2 divs float side by side and CSS layout - Aligning two divs side by side) but none of them work for me.
I'm a bit of a newb to CSS but I'm trying to align the title and menu on my WordPress site http://photography.stuartbrown.name/ in a similar way to http://www.kantryla.net/. Whenever I float:right on the menu area however the menu disappears below the image and a float:left on the menu it pushes the image way out to the right.
I know that in order to achieve what I want I will need to reduce the size of the site title and reduce the width of the menu (perhaps by reducing the gaps between the items in the list?), but I'd really appreciate some advice on how to achieve the title and menu layout of kantryla.
You may notice that I edited the PHP of the theme to include a DIV
<div class="stuart_menu">
that surrounds both the title and menu thinking that this wold make the enclosed items easier to control. Nt sure if that's right or not but I can easily remove if necessary.
Thanks for any help!
Place these styles in your CSS
#logo {
float: left;
margin: 0 0 25px;
position: relative;
width: 20%;
}
#logo h1 {
color: #555555;
display: inline-block;
font-family: "Terminal Dosis",Arial,Helvetica,Geneva,sans-serif;
font-size: 25px;
font-weight: 200;
margin-bottom: 0.2em;
}
#menu {
float: left;
width: 80%;
}
.stuart_menu {
overflow:auto;
}
I guess thats it.
The menu is kinda messed up, I can't make any sense out of it with all the (unneeded) elements, classes.
But basicly you're on the right way, you'll need to redruce the size of both main elements (logo and menu) so it fits inside the parent div.
For instance, like this:
HTML
<div class="stuart_menu">
<div class="logo">logo</div>
<ul class="nav">
<li>Home</li>
<li>Blog</li>
<li>Photos</li>
<li>Delicious</li>
<li>Twitter</li>
<li>Google+</li>
<li>FOAF Description</li>
</ul>
</div>
CSS:
.stuart_menu {
width: 600px;
}
.logo {
width: 150px;
background: red;
float: left;
}
.nav {
list-style: none;
margin: 0;
padding: 10px 0;
border-top: 1px solid gray;
border-bottom: 1px solid gray;
float: left;
}
.nav li {
display: inline-block;
}
Also check this demo.
You can choose if you want to align the menu next to the logo (using float: left) or align it to the right side of the parent (changing the float to right).
Any kind of solution you can try could lead to modify the look & feel of your site.
Maybe you can try to achieve this by reducing the width of the elements and make it float on left.
BTW, this would mess up the entire design of the site, because the "menu" section is inserted into the main container element. So I'd rather separate the two section.
what I'd do is:
#logo{ width:60%;float:left;}
nav {width:35%;float:left;}
to reduce the gap between the nav li elements you can reduce the padding and to make it more recognizable, add a border-right
#menu ul li{margin:22px 15px; border-right:1px solid #ccc;}
Hope this works
Just changing the #logo to include float: left; should put the menu up with the logo. It will be to the right of it. Its just a matter of then down sizing both the logo and menu to fit within the container. Also the other answer should also work.
I'm trying to create a menu, in which the last menu item (with different class) will stick automatically to the right corner of the menu. I'm attaching a screenshot for this. There are a few menu items on the left and the last item should somehow count the rest of the available space on the right in the menu div, add this space as padding to the right and display a background in whole area ON HOVER (see the screen to understand this please)
Is something like this possible?
Thanks a lot
See if this will work for you: http://jsfiddle.net/neSxe/2
It relies on the fact that non-floated elements get pushed out of the way of floated elements, so by simply not floating it the last element fill up the rest of the space.
HTML
<ul id="menu">
<li>Services</li>
<li>Doctors</li>
<li>Hospitals</li>
<li>Roasted Chicken</li>
<li class="last">Customer Service</li>
</ul>
CSS
#menu {
width: 600px;
}
#menu li {
float: left;
}
#menu li a {
display: block;
padding: 6px 14px 7px;
color: #fefefe;
background-color: #333;
float: left;
}
#menu li a:hover {
background-color: #666;
}
#menu li.last {
float: none;
}
#menu li.last a {
text-align: center;
float: none;
}
Edit
I've made some changes to make it work smoother on IE6, by floating the anchors too.
If anybody else needs this and do not need to support IE6 and below, you can get rid of those two properties.
assuming your html looks like this:
<div id="menu">
<div class="entry">Services</div>
...
<div class="entry last">Support Staff</div>
</div>
I would make the #menu position: relative;, so that you can position the last menu entry absolute inside the #menu div.
Not necessarily putting the menu item last, but if you always wanted that rounded corner at the end then you could apply a background image to the ul itself and position that right top with the curve. The only issue you'd run into with this method is, if you hover over the last menu it will not put a hover right to the right-hand edge.
If you knew how many menu items there were you could achieve this by setting the correct widths for all your menu items?
Have a look at this:
http://jsfiddle.net/ExLdQ/
The trick is to use your lighter green as the background or background-image for the whole list. You can than use the darker green on all li's and add a background-color:transparent to li.last.
Just add float: right; to your css for the last menu item, and use light background for both the list itself and the last menu item.