My HTML is as follows:
<ul id="nav">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
And my css:
#nav {
display: inline;
}
However the whitespace between the li's shows up. I can remove the whitespace by collapsing them like so:
<ul id="nav">
<li>Home</li><li>About</li><li>Contact</li>
</ul>
But this is being maintained largely by hand and I was wondering if there was a cleaner way of doing it.
Several options here, first I'll give you my normal practice when creating inline lists:
<ul id="navigation">
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
Then the CSS to make it function as you intend:
#navigation li
{
display: inline;
list-style: none;
}
#navigation li a, #navigation li a:link, #navigation li a:visited
{
display: block;
padding: 2px 5px 2px 5px;
float: left;
margin: 0 5px 0 0;
}
Obviously I left out the hover and active sets, but this creates a nice block level navigation, and is a very common method for doing this while still keeping with standards. /* remember to tweak to your liking, add color to the background, et cetera */
If you would like to keep it just with text and just inline, no block elements I believe you'd want to add:
margin: 0 5px 0 0; /* that's, top 0, right 5px, bottom 0, left 0 */
Realizing you would like to REMOVE the whitespace, just adjust the margins/padding accordingly.
Another useful way to eliminate the whitespace is to set the list's font-size property to 0 and the list elements' one back to the required size.
What you really want is the CSS3 white-space-collapse: discard. But I'm not sure if any browsers actually support that property.
A couple alternative solutions is to let the tailing end of a tag consume the whitespace. For example:
<ul id="nav"
><li>Home</li
><li>About</li
><li>Contact</li
></ul>
Another thing I've seen done is to use HTML comments to consume whitespace
<ul id="nav"><!--
--><li>Home</li><!--
--><li>About</li><!--
--><li>Contact</li><!--
--></ul>
See thismat's solution if you are okay using floats, and depending on the requirements you might need to add a trailing <li> that is set to clear: both;.
But the CSS3 property is probably the best theoretical way.
A better solution for list items is to use:
#nav li{float:left; width:auto;}
Has exactly the same visual effect without the headache.
Adopt non-XML-based HTML and omit </li>.
<ul id="nav">
<li>Home
<li>About
<li>Contact
</ul>
Then set the display property of the items to inline-block instead of inline.
#nav li {
display: inline-block;
/display: inline; /* for IE 6 and IE 7 */
/zoom: 1; /* for IE 6 and IE 7 */
}
The problem is the font size in the UL. Set it to 0 and it will disappear, but you don't want you actual text to be set so small, so then set your LI font size to whatever you want it to be.
<ul style="font-size:0px;">
<li style="font-size:12px;">
</ul>
I had the same Problem and none of the above solutions could fix it. But I found out this works for me:
Instead of this:
<ul id="nav">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
build your html code like this (whitespace before and after the link text):
<ul id="nav">
<li> Home </li>
<li> About </li>
<li> Contact </li>
</ul>
<html>
<head>
<style>
ul li, ul li:before,ul li:after{display:inline; content:' '; }
</style>
</head>
<body>
<ul><li>one</li><li>two</li><li>three</li></ul>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</body>
</html>
Related
I'm working on a website where the default CSS specifies:
ul li {
list-style: none;
}
This is necessary to keep the navigation bar clean (which is coded as an unordered list, basically) ...
Now, in the body of text on a particular page, I want to add a standard unordered list. So in a separate CSS sheet that exists for customizations, I added:
ul.about-page {
list-style-type: circle;
}
And then on the page where I want the unordered list, I added this to the HTML:
<ul class="about-page">
<li>Some text</li>
</ul>
I also tried some variations of the above, but in all cases it wasn't working. Instead no bullets were showing up (though the text was indented as expected).
Note: the most complicated thing I tried was to add the following to the custom stylesheet:
ul.about-page li::before {
content: "\25E6";
color: black;
display: inline-block;
width: 1em;
margin-left: -0.9em;
font-weight: bold;
font-size: 1.1em;
}
And then on the page where I want the unordered list, I entered this HTML:
<ul class=“about-page”>
<li>Some text</li>
</ul>
I was hoping that this — or some similar version of it — would work. But it also does not.
I'm sure there must be a way to do this, but after spending at least an hour searching online and trying various things, I can't seem to figure it out.
Any advice will be much appreciated!
when you use class it is have More priority but when you use Address Model Selector like ul li it has more than priority of class then you must use this code
ul li {
list-style: none;
}
ul.about-page li {
list-style-type: circle;
}
<ul>
<li>Item 11</li>
<li>Item12</li>
<li>Item13</li>
</ul>
<ul class="about-page">
<li>Item 11</li>
<li>Item12</li>
<li>Item13</li>
</ul>
ok, this problem has been with me for 2 weaks, and now i'm giving up and asking for help
what i need to do is make a new line in a unordered list inside of a div
this is what i'm aiming for
Home Contact Us Education
FAQ Stores Services
and with my currnet code i'm getting this
Home Contact Us Education
FAQ Stores Services
i have tried methods like float and center but nothing is working
please help me, i'm going to lost hair at this point....
thanks
Check this pen:
http://codepen.io/anon/pen/qabZqm
Basically it does this:
HTML
<ul>
<li>Home</li>
<li>Contact</li>
<li>Us</li>
<li>Education</li>
<li>FAQ</li>
<li>Stores</li>
<li>Services</li>
</ul>
CSS
li {
display: inline;
list-style: none;
}
li:nth-child(4):after {
content: "\A";
white-space: pre;
}
/* tag within the li for styling purposes */
li a {
display: inline-block;
margin: 10px;
}
with :nth-child(4) I add a pseudoelement that creates a break (\A).
The A Tag in the li is to add some styling (because of display inline the LIs cant be styled with margins etc...)... and I think thought this is a menu :-)
The css code below was written by me when trying to create a fixed header like mashable.com,but however hard i try i cannot seem to make the logo.png to appear with margin:auto 19px;.Pleae help me and tell me what im doing wrong.I am a beginner to html and css,so please be gentle. And I want the logo and the nav list to be in a single line.
header{position:fixed;
background:#333;
height:128px;}
h1{ display:inline;
float:left;
background:url(images/logo.png) no-repeat;
width:289px;height:47px;
margin:
text-indent:-9999px;}
nav {
height:26px;
float:right;
margin-top:19px;
width:631px;}
nav ul li{
display:inline;}
This is the html:
<header>
<h1>logo</h1>
<nav>
<ul>
<li>Categories</li>
<li>Search</li>
<li>About me</li>
<li>Contact me</li>
<li>Social</li>
</ul>
</nav>
</header>
Margin auto only works on block elements, not inline ones. If you want the logo to be centred then change 2 things in the h1 css:
Change to display: block;
Remove float: left;
Obviously add the margin value too but i'm assuming that is just a copy/paste typo.
I have a problem resizing or spacing a navigation menu as seen on the pic below. If any body knows how, please inform me. I just wanna resize nav menu box so the first one become like the second one (to resize it smaller).
HTML
<!--MENU-->
<nav id = "main-nav-menu">
<ul class="sf-menu">
<li class="active">Home
<li>ABOUT US
</li>
<li> SERVICES
</li>
<li>OUR PRODUCTS
</li>
<li>OUR EQUIPMENTS
</li>
<li>MACHINE LIST
</li>
<li>CONTACT
</li>
</ul>
</nav>
<!-- end menu -->
CSS
#header .menu select {
border: 1px solid #CCCCCC;
display: block;
left: 4px;
position: relative;
top: 205px;
width: 250px;
}
#header .menu select {
display: block;
width: 200px;
}
this can be achieved with some simple css rules. in your stylesheet, or style block if you're not using a style sheet, you need to set max or min widths, as well as padding for your list items.
add something like:
li{max-width:60px;padding:4px;}
or
.sf-menu li{max-width:60px;padding:4px;}
or
main-nav-menu ul li{max-width:60px;padding:4px;}
each of these will set the maximum width of your menu items to 60px. Change this value to suit your needs. This means there will be a standard width for all items. You could also set a fixed width or min-width.
li{min-width:60px;width:100px;max-width:150px;}
you can also add padding to keep a consistant look.
li{padding:4px 8px;} /* top & bottom padding of 4px, left & right padding of 8px */
an example of this code - http://jsfiddle.net/kcdP4/
hope this helps
Within my #header #nav, I have a <ul> within an <li> that displays on li:hover. I want to put a border around everything but for some reason adding a border around the main <li> makes the <ul> within it fall out of alignment by one px on the left.
Here's a jsFiddle to show what I'm doing:
http://jsfiddle.net/Mh3Hg/
Here is my HTML:
<div id="header">
<div id="nav">
<ul>
<li id="thisli">Main Element
<ul id="children">
<li>First Child</li>
<li>Second Child</li>
</ul>
</li>
</ul>
</div><!-- end nav -->
</div>
The border that throws it off is the border-left:1px solid #99B3FF applied to li#thisli. Can anyone help me figure out what's wrong?
The inner ul was always inside the li. The border is something which is supposed to be around the content, so it is theoretically around the inner ul as well. If you explicitly define the position of the inner ul:
#nav li:hover ul {
display:block;
z-index:100;
left: 0px;
}
it is aligned: http://jsfiddle.net/Mh3Hg/4/