1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

How do I specify width of a LI in a UL

Discussion in 'CSS' started by lonewolff, Dec 28, 2009.

0
  1. #1
    Hi guys,

    I am trying to specify a width for an unordered list.

    For some reason this isn't working for me. :(

    My HTML is
    <div id="navbar">
	<ul>
		<li>Item 1</li>
		<li>Item 2</li>
		<li>Item 3</li>
		<li>Item 4</li>
	</ul>
</div>
    Code (markup):
    and my CSS is

    #navbar{float:right;position:absolute;top:30px;right:30px;color:#FFE739;color:#FFE739;font:14px/30px arial,verdana,tahoma;font-weight:bold;}
#navbar ul{padding:0;list-style-type:none;margin:0;text-align:center;}
#navbar ul li{margin:0;width:89px;display:inline;background-color:#29216E;background:#29216E url(../images/tab.jpg) 0px 0px no-repeat;}
    Code (markup):
    I am trying to specify a width of 89px and have a space between each of 1px.

    Any help would be awesome! :)
     
    lonewolff, Dec 28, 2009 IP
  2. vinpkl

    vinpkl Active Member

    Messages:
    899
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    58
    #2 
    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
#navbar{float:right;position:absolute;top:30px;right:30px;color:#FFE739;color:#FFE739;font:14px/30px arial,verdana,tahoma;font-weight:bold;}
#navbar ul{padding:0;list-style-type:none;margin:0;text-align:center;}
#navbar ul li{margin:0px 0px 0px 1px;width:89px;display:block; float:left;background-color:#29216E;background:#29216E url(../images/tab.jpg) 0px 0px no-repeat;}
</style>
</head>

<body>
<div id="navbar">
	<ul>
		<li>Item 1</li>
		<li>Item 2</li>
		<li>Item 3</li>
		<li>Item 4</li>
	</ul>
</div>
</body>
</html>
    Code (markup):
    vineet
     
    vinpkl, Dec 28, 2009 IP
    duncan_mcd likes this.
  3. lonewolff

    lonewolff Member

    Messages:
    338
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    30
    #3
    Awesome! :)

    I notice that the main difference was the float:left

    Why is this having such a big effect on the layout, in this case?

    Forgive my ignorance :eek:
     
    lonewolff, Dec 28, 2009 IP
  4. vinpkl

    vinpkl Active Member

    Messages:
    899
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    58
    #4
    you posted only the code for <ul> list. nothing else.

    so i canot say why is this efecting your layout.

    post an online page link where u r using it.

    vineet
     
    vinpkl, Dec 28, 2009 IP
  5. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #5
    Christmas on a cracker, where to start.

    First you have a div around it for no good reason. Because you condensed to a single line you have redundant properties (**** sake it's called the enter key and tab key, use them), there is ZERO point in declaring float on an absolute positioned element, and given that LI expand to fit their container, if you are going to declare a width on them, put it, oh, I don't know... on the container? Since verdana and tahoma are windows family fonts, the likely hood of them cascading after arial is exactly ZERO so they serve no purpose, and you didn't include a fallback FAMILY, and I'm not certain I'd be using absolute positioning on something like a menu since that could overlap in flow.

    Wait, you are making them display:inline - Well there's your problem - mein gott I'm seeing that same mistake over and over lately.

    display:inline elements by the specification cannot HAVE width. What you either want to do with those is either make them float:left or display:inline-block. Since you are working with LI, use the float since IE cannot make block-level elements inline-block. Thankfully if you float:left inside a float:right, they will stack in the correct order.

    So first, neuter the markup down to:
    
<ul id="navbar">
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
	<li>Item 4</li>
</ul>
    Code (markup):
    Then for CSS:

    
#navbar{
	list-style:none;
	float:right;
	margin:0;
	padding:30px 30px 0 0;
}

#navbar li {
	float:left;
	width:89px;
	margin:0;
	padding:0;
	text-align:center;
	font:bold 14px/30px arial,helvetica,sans-serif;
	color:#FFE739;
	background:#29216E url(../images/tab.jpg) 0 0 no-repeat;
}
    Code (markup):
    That should do what you are trying to do - well, unless you REALLY need that absolute positioning (which with an element like a menu probably means you've got bigger layout issues elsewhere).

    George Carlin said "Not every ejaculation deserves a name" - well guess what, not every element needs a DIV around it.
     
    deathshadow, Dec 29, 2009 IP
  6. lonewolff

    lonewolff Member

    Messages:
    338
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    30
    #6
    Very informative deathshadow.

    This actually clears up quite a bit for me, thanks! :)
     
    lonewolff, Dec 29, 2009 IP
  7. lonewolff

    lonewolff Member

    Messages:
    338
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    30
    #7
    Thinking about it...

    If "not every element needs a div around it", then why use div at all?

    As a div id can only be used once per page. :confused:
     
    lonewolff, Dec 29, 2009 IP
  8. jwitt98

    jwitt98 Peon

    Messages:
    145
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    0
    #8
    Divs certainly have their uses. It's just that you were making bad use of a div as deathshadow already pointed out.

    An ID can only be used once, but you can assign classes to divs as well.

    Conider this:
    You have a group of images that all need the same styling applied. You could assign a class to each image, or you could wrap all your images in a div and target them all with a single id or class applied to that div.

    Another example:
    You have groups of paragraphs you want all styled the same. Inside those paragraphs you have span tags to make small sections of your text bold. You could assign a class to every paragraph and span tag, or better, you could wrap all your paragraphs in a div and use a single id or class to target all those paragraphs and span tags.

    example:
    give the div an id of content.
    target the paragraphs like so:
    #content p
    target the span tags like so:
    #content span
    or more selectively
    #content p span
     
    jwitt98, Dec 31, 2009 IP
  9. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #9
    ID's can only be used once per page REGARDLESS of what element they are on, div or not.

    As to the first half, the PROPER use of a div is to break sibling tags into sections, or to apply styling you CANNOT already apply to an existing block level container.

    jwitt98 started to explain it, but let's use a real world example. I can't count how often I see ****tard code like this:

    
<p class="font28">Some Text</p>
<p class="font28">Some More Text</p>
<p class="font28">Some Other Text</p>
<p class="font28">Some Bekaptah Text</p>
    Code (markup):
    Complete and miserable fail, and not just from the vague, meaningless and effectively presentational classname. If all your paragraphs, or even MOST of your paragraphs are all getting the same style, wrap it in a DIV and say it ONCE. Assuming that's in a column layout you might even already HAVE a div with an ID like 'content' on it.

    
<div id="content">
	<p>Some Text</p>
	<p>Some More Text</p>
	<p>Some Other Text</p>
	<p>Some Bekaptah Text</p>
<!-- #content --></div>
    Code (markup):
    Then instead of the meaningless '.font28' in the CSS, you say '#content p'

    You see that type of asshattery in tables and lists all the damned time (this is a condensed version of something I rewrote for a paying client last year):

    
<div id="navigation">
	<ul>
		<li class="menuItem"><a href="\" class="menuAnchor"><font size="+1"><b>Home<b></a></font></li>
		<li class="menuItem"><a href="\links" class="menuAnchor">Links</a></li>
		<li class="menuItem"><a href="\forums" class="menuAnchor">Forums</a></li>
		<li class="menuItem"><a href="\faq" class="menuAnchor">FAQ</a></li>
	</ul>	
</div>
    Code (markup):
    Talk about trash. NONE of those classes are needed, and it's using classes and CSS, what the bloody blue hell is with the presentational (and deprecated) markup? (with invalid closing orders) All that's needed to do the above in 99% of cases is:

    
<ul id="mainMenu">
	<li class="current"><a href="\">Home</a></li>
	<li><a href="\links">Links</a></li>
	<li><a href="\forums">Forums</a></li>
	<li><a href="\faq">FAQ</a></li>
</ul>
    Code (markup):
    .menuItem becomes #mainMenu li
    .menuAnchor becomes #mainMenu a
    'FONT and BOLD' becomese #mainMenu .current or #mainMenu.current a (depending on what you are doing for effects)

    It's less code, so there's less to break and less to make stupid mistakes like say... having the font and anchor closing tags reversed. Also means less code in the markup saving you bandwidth if that same format element is used across multiple pages on a site (like say... the main menu that appears on every page)

    Basically DIV's actual purpose comes from it's name - division. It's used to divide up things into sections - which is how I use them on most pages with ID's. I'm only going to have one #content, if I have one sideBar it's #sideBar, if I have two it's #firstSideBar and #secondSideBar, there's #footer - though I don't use #header becuase we have TAGS for headings, we have tags for menus.

    DIV can also be used to group unlike tags for styling, or for wrapping NON-FLOW text. I see paragraphs being abused for non-flow text a whole lot, which stems from people thinking of paragraph in the typographical sense not the grammatical. Typography is layout, which should have jack **** to do with what your markup is. You'll often see pages doing nonsense like this (again, taken from a real world example):

    
<div class="postheading"><center><font size="+1"><b>Title of the post</b></font></center></div>
<div class="postContent">
	Whole bunch of content usually marked up with double breaks instead of paragraph marks, and just thrown in a div. Worse, the heading for this element is done with presentational markup saying how it appears, not what it is...<br />
	</br />
	... usually with the footer for this section also being presentational markup instead of using a class - which is the one place they SHOULD be using a div and a class!<br />
	<br />
	<div align="left">Today</div>
	<div align="right">By nimrod</div>
</div>
    Code (markup):
    Which I would have written
    
<div class="post">
	<h2>Title of the Post</h2>
	<p>
		Whole bunch of content usually marked up with double breaks instead of paragraph marks, and just thrown in a div. Worse, the heading for this element is done with presentational markup saying how it appears, not what it is...
	</p><p>
		...usually with the footer for this section also being presentational markup instead of using a class - which is the one place they SHOULD be using a div and a class!
	</p>
	<div class="postFooter"><span>Today</span> By Nimrod</div>
</div>
    Code (markup):
    ... and in most cases that's all that's needed to apply the exact same styling - usually with less headaches. (if you're curious about .postFooter, it would be set to text-align:right and to wrap floats, with .postFooter span { float:left; } )

    DIV serves a good purpose, but that doesn't mean to start nesting them thirty deep on every page. As a recently departed friend of mine once said and I've quoted endlessly, the people who once churned out nothing but crappy nested presentational tables today just churn out crappy nested presentational div's and classes. File it alongside the ignorant who declare widths on EVERYTHING, declare their content fonts in PX, don't realize you need to say BOTH directions on background-position, and still resort to outdated asshattery like spacer.gif's, clearing div, clearfix or javascript for rollover effects.
     
    Last edited: Jan 1, 2010
    deathshadow, Jan 1, 2010 IP