5 replies [Last post]
F*SH
Offline
Regular
Last seen: 15 years 3 weeks ago
Joined: 2004-02-22
Posts: 36
Points: 0

Hi

I've got a navigation list made of LIs:

http://www.sunion.warwick.ac.uk/fencing/dev/

Which would look nice if they were all a standard width. I'm wondering how I'd define a width for them.

I first tried the width: rule, to no avail (just ignored). Then I tried something that resembled a table (display: table; , display:table-row;, display: table-cell;), but that failed to render in MSIE (IE seems to get display:inline but that's about it :/).

So, any ideas?

HTML Block:

<div id="navigationpane" >
	<ul>
		<li>
			<a href="/" title="What's going on in the club?">News</a>
		</li>
		<li>
			<a href="/" title="What's the club all about?">About</a>
		</li>
		<li class="selected">
			<a href="/" title="Who supposedly runs this club?">Exec</a>
		</li>
		<li>
			<a href="/" title="What competitions is the club doing?">Competitons</a>
		</li>
	</ul>
</div>

CSS Block:

div#navigationpane
			{
			width: 80%;
			margin: 0 auto;
			padding-left: 3%;
			padding-right: 3%;
			padding-top: 5px;
			padding-bottom: 10px;
			text-align: left;

			border: 1px solid #434C50;
			border-bottom:none;
			background: #CCD1CB;
			}
			
div#navigationpane ul
			{
			margin: 0px;
			padding: 0px;
			display: inline;
			}
			
div#navigationpane li
			{
			margin-right: 10px;
			padding: 5px;
			border: 1px solid #434C50;
			border-top: none;
			display: inline;
			}
			
div#navigationpane a
			{
			font-weight: bold;
			text-decoration: none;
			}

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 41 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Widening some UL-tabs [RESOLVED]

Use float:left and an appropriate width on the li style.

You shouldn't need display:inline anymore. However, leaving it in place can avoid any unpleasantness caused by IEs multiplying margins bug.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 26 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Widening some UL-tabs [RESOLVED]

First remove the display:inline on the ul and li elements as it prevents the width property being applied.

On the ul declare list-style-type:none, on the list elements declare float:left and then set the width you desire for the menu items also declare the li anchor as display:block which will ensure that the whole region of the list item is clickable and will allow use of widths and height if needed on the anchors.

Hugo.

Oups beaten to it .

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 10 weeks 3 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Widening some UL-tabs [RESOLVED]

Giving a tag a float attribute (iirc) automatically defines it as a block-level attrirbute, so you can then apply width and height to it.

Just to clarify what Hugo said:

Quote:
on the list elements declare float:left and then set the width you desire for the menu items

Declare each li as a float, and they will behave as block elements.

Quote:
declare the li anchor as display:block

as in li a - this will allow you to click anywhere inside the list box, as opposed to just being able to click on the link text.

Verschwindende wrote:
  • CSS doesn't make pies

F*SH
Offline
Regular
Last seen: 15 years 3 weeks ago
Joined: 2004-02-22
Posts: 36
Points: 0

Widening some UL-tabs [RESOLVED]

Hey! It works a charm.

Thanks a load..

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 26 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Widening some UL-tabs [RESOLVED]

Glad it's solved and Thankyou for marking the topic resolved.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me