Here is an example:
<ul>
<li>list</li>
<li style="float:left;">list</li>
<li style="float:left;">list</li>
<li style="float:left;">list</li>
<li style="float:left;">list</li>
</ul>
How to keep list-style on the rest li elements while keeping float?
Thanks ;)
Having played a bit more, are you using IE? Also, are you specifying a DOCTYPE, to avoid quirks mode? There was some odd behaviour in IE6 with floats and list item bullets that may be being carried forward in quirks.
Looks to me like Internet Explorer clobbers the list style type when floating. Adding it back in works fine. See http://jsfiddle.net/gothick/VZC7F/5/ for your markup with some extra CSS styling that makes it work. That should be cross-browser safe, as far as I can see.
Complete example using inline styles:
<ul>
<li>list</li>
<li style="float:left; margin-left: 20px; list-style-type: square;">list</li>
<li style="float:left; margin-left: 20px; list-style-type: square;">list</li>
<li style="float:left; margin-left: 20px; list-style-type: square;">list</li>
<li style="float:left; margin-left: 20px; list-style-type: square;">list</li>
</ul>
...though of course it'll be more efficient to use a non-inline style/stylesheet as in my jsFiddle example.
My example works in IE8. It looks like the bullets might have disappeard in a more fundamental way in earlier version of IE; that article explains the behaviour and gives a way of recreating them, albeit with a bit of an annoying workaround (it basically recreates the missing bullets with a background-image.)
<ul>
<li>list</li>
<li style="float:left; clear: left;">list</li>
<li style="float:left; clear: left;">list</li>
<li style="float:left; clear: left;">list</li>
<li style="float:left; clear: left;">list</li>
</ul>
Here is a jsfiddle demo of what I could come up with. They are all floating left except the first one and maintain the squares.
Related
The navigation bar (can be viewed here) has become misaligned in Google Chrome (latest version) without any change to the coding.
The large white space present between the two rows did not used to exist, nor did the further misalignment of the four far right links.
I am only of aware of this issue in Chrome - it displays correctly in Safari and Firefox.
Code:
A code snippet for the navigation bar in the header.php is below:
<center>
<div class="navholder">
<div class="navigate">
<ul class="navigate">
<li class="navigate">Home</li>
<li class="navigate">Bus Routes</li>
<li class="navigate">Maps & plans</li>
<li class="navigate">News</li>
<li class="navigate">Enthusiasts</li>
<li class="navigate">MyRoute</li>
<li class="navigate">Live updates</li>
<li class="navigate">Tickets</li>
</ul>
</div></div>
<div class="navigateopposite">
<ul class="navigateopposite">
<li class="navigateopposite">Free travel</li>
<li class="navigateopposite">Mobile</li>
<li class="navigateopposite">Operators</li>
<li class="navigateopposite">Using the bus</li>
<li class="navigateopposite">TBR Team</li>
<li class="navigateopposite">Contact</li>
<li class="navigateopposite">Advertising</li>
<li class="navigateopposite">About</li>
</ul>
</div></div>
</center>
CSS:
The related CSS is also here:
/*Navigation bar*/
.navigate ul{float:left;width:1050px;margin-top:1px;text-align:center;}
.navigate ul li{display:inline;}
.navigate ul li a{width:127px;background:url(../images/navbar.gif)center center no-repeat;color: #000;text-decoration:none;float:left;text-align:center;line-height:50px;font-size:20px;vertical-align:top;margin: 0 1px 0 0;}
.navigate ul li a:hover{color: #fff;}
.navigate ul li a:active{color:#FFF;}
.navigateopposite ul{float:left;width:1050px;margin-top:1px;}
.navigateopposite ul li{display:inline;}
.navigateopposite ul li a{width:127px;background:url(../images/navbaropposite.gif)center center no-repeat;color: #000;text-decoration:none;float:left;text-align:center;line-height:50px;font-size:20px;vertical-align:top;margin: 0 1px 0 0;}
.navigateopposite ul li a:hover{color: #fff;}
.navigateopposite ul li a:active{color:#FFF;}
Question:
What would be causing this strange misalignment?
Try adding this to your CSS
li.navigate, li.navigateopposite {
float: left;
margin: 0;
}
I added this through Chrome's developer tools and it seemed to remedy the problem.
This might fix it but seriously... as j08691 and David Thomas pointed out... that's some pretty crazy HTML you've got going on there. With nothing but good intentions, I hope you don't mind if I make a few comments?
You've got multiple <head>s in your document - you can only have one.
You're using <div> purely for layout purposes - if you need to add spaces in the layout you should be using pure CSS... HTML, as the name describes, is for markup only - not style information. By my reckoning you could lose at least half of that markup. As a generalisation, the more markup you have, the more difficulties you're going to get into like stuff apparently breaking randomly.
I can understand not wanting to support IE7 at a push, but all versions of IE?? ("Something not working? You're using Internet Explorer"). I know IE can be pretty hateful but you can't throw the book at 10% of all of your website visitors.
I hope this helps set you in the right direction.
ok, so developing a site for one of my friend's church using wordpress and I've run into a snag. I dont normally get all fancy with the nav bar, but I decided to take a swing at it... so here's what I'm doing:
nav bar background is a 1x64 pixel repeat-x. nav bar is actually a UL inline display. I want to have the background of each <li> tag be a static set image butted up next to each other for dynamic awesomeness. the problem: I cant force the background image to its full 100%. it is only as wide as the text is. The image size (made in photoshop) is 167x64 pixels. I cant center the links inside the <nav> tag horizontally and cannot get the <li> background the full size it's supposed to be. I've tried manually setting the height on everything in each level to be 64px as well as using verticle-align:middle; for the positioning I want and it's just really messing with my head #.#
site located at http://parnell.co/hurricane-church-of-god
page source:
<div class="nav-wrapper">
<!-- Nav -->
<nav>
<ul id="menu-nav-bar" class="menu">
<li id="menu-item-18" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-6 current_page_item menu-item-18">Home</li>
<li id="menu-item-19" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-19">Sample Page</li>
<li id="menu-item-17" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-17">Blog</li>
</ul> </nav>
<!-- /Nav -->
<br class="clear">
</div>
<!-- /nav-wrapper -->
CSS Source:
/******************************************************
* Navigation *
******************************************************/
div.nav-wrapper {
margin-top:-16px;
-moz-border-radius: 15px;
border-radius: 15px;
background:url(img/nav-bg.png) repeat-x;
height:64px;
vertical-align:middle;
}
div.nav-wrappter ul,
nav ul li {
float:left;
height:64px;
vertical-align:middle;
}
nav ul#menu-nav-bar li {
display: inline;
list-style-type: none;
vertical-align:middle;
background-image:url(img/nav-button.png);
background-size:100%;
background-repeat:no-repeat;
height:64px;
}
nav ul#menu-nav-bar li a {
text-decoration:none;
height:64px;
vertical-align:middle;
}
Please bear with my sloppiness in code, i've been trying to wrap my head around it all day and have more or less started from scratch on that one part like 8 times. Any help you can give would be greatly appreciated
Ok, thanks to #ahillman3, I was able to get my mind straight and figure it out. Great link btw. As well the typo... that was about the biggest issue because nothing would have worked right until that was fixed. Specifying the width for the <li> tag forced the buttons to behave correctly. And as for centering the text, the css attribute display:block; when applied to nav ul#menu-nav-bar li a {} was the key to making the <a> tag (a line object) behave like a div or table (a block object). after that, it was as simple as adding some margin to get the text center in the box.
thanks guys!
I am using the <ul><li> list tag within which I have 3 tags like sos:
<ul id="reg-lists" >
<li class="one">
<select>...</select>
</li>
<li class="two">
<select>...</select>
</li>
<li class="three">
<select>...</select>
</li>
</ul>
I have the proper css to make the list horizontal:
#the-form li {
display:inline !important;
list-style-type: none;
padding-right: 10px;
}
I does'nt seem to work though and am not sure why. Horizontal rule seems to apply well until you put the combos. Would appreciate your help. Thanks
It works fine for me -- see this JSFiddle -- the list items are displayed horizontally, at least they are when I look at it in Firefox.
If you're seeing something else in another browser, please let us know.
If this is case, the solution may be to use display:inline-block instead of display:inline.
inline-block is similar to inline, but allows the element to contain block type elements, which are not allowed by the normal display:inline style.
Hope that helps.
You need to give your <ul> a set width which is equal to the width of all the combined <li>'s and then set your <li>'s to float:left;
Hey guys, i need to display all 27 states from brazil in a selection div, I really need to do it using UL.. this is a projection of how they should look:
alt text http://img24.imageshack.us/img24/8726/statesf.jpg
And this is a piece of the UL: What would you suggest? can i do that using this markup?
<ul class="ufLista">
<li>
<ul>
<li>AC</li>
<li>AL</li>
<li>AM</li>
</ul>
</li>
<li>
<ul>
<li>CE</li>
<li>DF</li>
<li>ES</li>
</ul>
</li>
<li>
<ul>
<li>MT</li>
<li>MS</li>
<li>MG</li>
</ul>
</li>
</ul>
Is having those lists nested a necessity? If it was just one list like:
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>Four</li>
<li>five</li>
<li>six</li>
<li>seven</li></ul>
Then you could style it with:
ul { width: 300px; list-style: none; line-height: normal; }
li { float: left; width: 98px; border: 1px black solid; }
and get a 'grid' effect pretty easily.
Since the image is missing, I can only guess, but "grid-like" in the title suggests some kind of table layout. You can set the CSS display property to certain values which then should trigger table-like display:
table, inline-table, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, and table-caption
These values cause an element to behave like a table element (subject to restrictions described in the chapter on tables).
This is described in more detail at The CSS Table Model.
To organize data in a grid-like manner, instead of making elements behave like tables, use <table>. That's what it was invented for, and it still is the right solution.
Edit: As you need to do it with LIs: It should be no problem to present your markup in a table like manner. Give the inner <ul> a width: 100%, clear: both and overflow: auto. Give the inner <li>s float: left and either a relative or absolute width that amount to 100% of the ul.
I'm trying to create a simple image navigation for my site, using CSS to declare the background-image property of a list-item (li). The problem is, when I use text-indent to put the image off-screen, the link is no longer there (off screen as well I presume). Any help would be greatly appreciated. Here is my XHTML:
<div id="nav">
<ul>
<li class="current about">
about
</li>
<li class="contact">
contact
</li>
<li class="networks">
networks
</li>
</ul>
</div>
Here is my CSS:
#nav li {
display: block;
float:left;
background-image: url("images/nav-normal.png");
height:47px;
text-indent: -9999px;
}
I have also set up background-positions for the individual list-items because I'm using image sprites. Thanks in advance!
Apply that style to the #nav li a. Otherwise everything inside the li, including the link, is shifted off screen.