Remove padding last item on inline list.

[Dal123]

I've managed to hand-code, slideshows, and lightbox 2 into my pages with absolutely no errors (Can't take credit for that really mostly thanks to angelwatt ) but I'm still struggling with lists.
I have an inline list as my navigation on the top and I'm starting to try to format them before I really mess up my site.
I want the last bar (contact us) to have no padding, because the padding-right is causing it to over-run and go to bottom. I would like it neat and flush with the right, but can't get my head around it, I've tried everything. Floats, margins, lists within lists and other lists etc.
One question for the pro's; should my primary font 'lucidia grande' not be available just realised all the work I'm putting in now to try to get a neat layout will be worthless. What do you guys do about this; I'm guessing fluid layouts .
Thanks guys..
CSS:

#nav_list ul{
list-style:none;
margin:0px;
padding:0px;
padding:0px:
float:left;
font-family: "Lucidia Grande", Lucida Sans Unicode, Verdana, sans-serif;
font-size: 1.8em;
}


#no_pad ul {
list-style:none;
margin:0px;
padding:0px;
padding:0px:
float:left;
}
#no_pad li {
padding-right:0px;
text-align:right;
font-family: "Lucidia Grande", Lucida Sans Unicode, Verdana, sans-serif;
font-size: 1.8em;
}
#navbar {
padding:15px 0px 8px 0px;
}

#navbar ul{
list-style:none;
margin:0px;
padding:0px;
padding:0px:
float:left;
}
#navbar li{
font-family: "Lucidia Grande", Lucida Sans Unicode, Verdana, sans-serif;
font-size: 1.8em;
display:inline;
width:225px;
padding:0px 30px 0px 0px;
margin:0px;
line-height:0px;
}

HTML:

<div id="navbar">
<ul id="nav_list">
	<li><a href="index.htm">home</a></li>
	<li>services</li>
	<li><a href="gallery.htm">previous jobs</a></li>
	<li>guarantee</li>
	<li id="no_pad">contact us</li>
</ul>
</div>

 

[samwich]

my best guess would be the syntax in your css with no_pad

if you want to define the CSS for the id no_pad, you can just use
#no_pad {padding:0; etc}

if you want to define the CSS for a list item that has the id no_pad you use

li#no_pad {padding:0;}

either of those will work, but #no_pad li {padding:0;} probably won't work

 

[SrWebDeveloper]

In your situation all you need is:

#no_pad { ...styles... }

That's it. What, you wanted a drumroll or fireworks?! heh

Since you used an ID, remember in CSS ID's are intended to unique identifiers no matter where the element is in your markup. Thus, you can directly reference the ID and single out one specific item and apply your styling.

You might want to learn more about selectors here.

The problem people run into is when they use the same ID for many elements (use class instead) or fail to assign an ID at all when the objective is to identify unique situations or elements. Some authors make their menu scripts generate a class such as "active" as well as an ID for each LI, i.e.

HTML:

<li id='item'><a href='test' class='active'>Test</a></li>

CSS:

#item a.active  {  ... styles... }

Interpreted as "Find me an element who's div has an ID named item which has a child descendant anchor tag which has its own class named active."

Get the idea?

So you can identify the button that's active at the time. Heck, uou can even add in multiple class names to make it even easier to select only what you want:

<li id='contact_us' class='first active'>contact us</li>

#contact_us.active { ...styles... } 
#contact_us.first { ...styles... }

Both work and the point is both can have unique styles! Cool, huh?

-jim

 

[SrWebDeveloper]

either of those will work, but #no_pad li {padding:0;} probably won't work

Right, because that's interpreted as find me an element with an ID named "no_pad" which contains a descendant LI. The LI element is actually a child of UL, and happens to have an ID assigned to it named no_pad, but the interpreter won't apply the style since the selector match is false.

The space is used as a combinator between elements indicating their is ancestry involved. This ancestry is interpreted left to right as parent and children and grandchildren and so on.

-jim

 

[angelwatt]

Just to throw out an alternative approach to the situation;

You could center the text (text-align:center) on each li a (it may be better to apply the styles to the links inside the li items so the clickable regions are larger), then provide a background color as well. The background-color will fill each spot and give the appearance of being flush with each end of the navigation. Then you won't worry about having to give special styles to the last item. That has a downside that it will create more space between the last to items and the other spacings. Just something for you to try out and see if you like it.

#nav_list li a {
 background-color: #0f0; /* just picked random color */
 text-align: center;
 ...
}

 

[Dal123]

Thanks for all your input and advice I really appreciate it .
Jim I read the whole tutorial, and believe me it's about the 15th one I've read regarding selctors and lists attributes etc. I still don't fully understand it.
Angelwatt, thanks for that, it helps me to understand a little more, and I'm gonna do exactly that (bigger click area) on my sidebar. Thanks bud.
Samwich cheers buddy, still don't get it all properly yet.
I don't understand why when I'm using the developer toolbar I get space to the right of the <li> elements (attached picture). You'd think it would only select the text written.
So thinking logically I thought if I go into the child <li> of class no_pad (took your advice and changed it to a class Jim ) You would think logically I could change the text to align-right. But nothing happens (Believe me chaps I've tried a thousand combinations of all different things. I cannot get it flush with the right of the ruler logo . Padding is set to 0 and margin . Cannot even get the text to change alignment .
I think it's quite hard to get the grasps of how everything is displayed in internet design, very different from graphic design. The harder the battle the sweeter the victory.
Here is what I currently have:
CSS:

.no_pad {
padding:0;
margin:0;
}
ul.no_pad {
text-align:right;
}
li.no_pad{
text-align:right;
}
ul#nav_list{
list-style:none;
margin:0px;
padding:0px;
padding:0px;
font-family: "Lucidia Grande", Lucida Sans Unicode, Verdana, sans-serif;
font-size: 1.8em;
}
#nav_list li {
display:inline;
padding:0px 25px 5px 0px;
margin:0px;
}

<ul id="nav_list">
	<li><a href="index.htm">home</a></li>
	<li>services</li>
	<li><a href="gallery.htm">previous jobs</a></li>
	<li>guarantee</li>
	<li class="no_pad">contact us</li>
</ul>

 

[SrWebDeveloper]

Based on the HTML you posted earlier you need to use what angelwatt posted to find the right content to change its text alignment:

#nav_list li a { text-align: center; }

Like the examples I posed earlier, just read it left to right. In English:

"Find me an element with an ID named nav_list which has a list item as its descendant which in turn has an anchor as its descendant." Remember, spaces combine things in CSS which have a parent/child relationship - i.e. a UL is a parent and LI is a child. If an anchor tag wraps an image, the anchor is the parent, the image is the child. And so on.

What you did was:

ul.no_pad { text align: center; }

In English:

"Find me a UL with a class named no_pad."

Look at your HTML - try to find a UL with that class name. You won't! And neither will the interpreter! There is only one UL, and it has an ID (not class) named nav_list.

Making sense now?

-jim

 

[Dal123]

Cheers Jim,
I get the gist of what you're saying. I need to look for an unordered list, called 'nav_list', that has children tags <li> that has a class 'no_pad'. Which I have no clue how to write, I have just tried:
#nav_list li .no_pad {
text-align:right;
}
No luck so tried html:

<ul id="nav_list">
	<li><a href="index.htm">home</a></li>
	<li>services</li>
	<li><a href="gallery.htm">previous jobs</a></li>
	<li>guarantee
	<ul><li class="no_pad">contact us</li>
	</ul>
	</li>
</ul>

with css:

.no_pad {
padding:0;
margin:0;
}
#nav_list li .no_pad {
text-align:right;
}
li.no_pad{
text-align:right;
}
ul#nav_list{
list-style:none;
margin:0px;
padding:0px;
padding:0px;
font-family: "Lucidia Grande", Lucida Sans Unicode, Verdana, sans-serif;
font-size: 1.8em;
}
#nav_list li {
display:inline;
padding:0px 25px 5px 0px;
margin:0px;
}

No luck. I should understand this by now, put in about 100 hours since I last attempted lists and had done over 100 hours before that. I bet no-one else has struggled this badly with lists after doing a quarter of the hours I've done .
I see that the <a> sort of changes it a little, but I haven't yet created the 'contact us' page and even so, I should be able to move it as text.

 

[angelwatt]

I have just tried:

#nav_list li .no_pad {
text-align:right;
}

The li .no_pad part translates to li tags having a child somewhere inside it that has a class of no_pad. You want an li tag that has a class of no_pad in itself, which is accomplished by removing the space. Having the space there means it's looking at children of the item mentioned to the left.

li .no_pad would match: <li><span class="no_pad">...</span></li>
li.no_pad would match: <li class="no_pad"><span>...</span></li>

 

[Dal123]

li.no_pad {
padding:0;
margin:0;
text-align:right;
}

Still no luck .

 

[angelwatt]

OK, the issue is that we've been providing multiple directions to take to fix your problem and you're mixing those solutions, which doesn't really work.

Using the below HTML and CSS:

<ul id="nav_list">
	<li><a href="index.htm">home</a></li>
	<li>services</li>
	<li><a href="gallery.htm">previous jobs</a></li>
	<li>guarantee
		<ul>
			<li class="no_pad">contact us</li>
		</ul>
	</li>
</ul>

#nav_list {
list-style:none;
margin:0px;
padding:0px;
padding:0px;
font-family: "Lucidia Grande", Lucida Sans Unicode, Verdana, sans-serif;
font-size: 1.8em;
}
#nav_list li {
display:inline;
padding:0px [B][COLOR="Red"]25px[/COLOR][/B] 5px 0px; /* [COLOR="Red"]you set the right padding here[/COLOR] */
margin:0px;
}
#nav_list li.no_pad{
[B][COLOR="Red"]padding-right: 0;[/COLOR][/B] /* [COLOR="Red"]now you unset it for the one list item[/COLOR] */
}

 

[Dal123]

Thanks angelwatt, really appreciate your help.
It has caused the last item to run off (attached picture), and still cannot get the text to align right .
Thanks again bud.

 

[Dal123]

Thanks for all your help angelwatt, and Jim. I tried:
ul#nav_list li.no_pad {
padding:0;
float:right;
}
which brings the text flush to the right as wanted. Only thing is now big gap (see pic).
Thanks again.

 

[angelwatt]

Thanks angelwatt, really appreciate your help.
It has caused the last item to run off (attached picture), and still cannot get the text to align right .
Thanks again bud.

The text-align won't work with the current CSS because they all equal the same position. This is because the li tags are set as inline. Inline elements can't have text-align applied to them, only block elements like div and p tags.

From the picture you attached it looks like that last item has some padding applied to the left side since it's not sitting flush. You should make sure you have the padding setup right in your CSS. That's at least one possibility.

Edit: You'll also need to update one of the CSS selectors to control the margins and padding around the embedded ul tag,

#nav_list, [B]#nav_list ul[/B] {

Though, I'm not sure that embedded ul should be there. You posted it that way back on post 8, but it wasn't that way earlier in the thread. I thought it was a sub-menu so just went with it, but looking back that's likely causing the current issue with it moving to the next line and having the spacing on the left. So, I believe you should just get rid of the embedded ul so you have,

<ul id="nav_list">
	<li><a href="index.htm">home</a></li>
	<li>services</li>
	<li><a href="gallery.htm">previous jobs</a></li>
	<li>guarantee</li>
	<li class="no_pad">contact us</li>
</ul>

 

[Cerebrus' Maw]

Thanks for all your help angelwatt, and Jim. I tried:
ul#nav_list li.no_pad {
padding:0;
float:right;
}
which brings the text flush to the right as wanted. Only thing is now big gap (see pic).
Thanks again.

I believe it is because you have float right in your CSS, which is putting in the break.

@Angelwatt: Does the non text align to inlines also apply to divs? So of he puts a div into his <li> no pad, displays it inline (since the div will have 100% of the li's width) and then text align right?

Edit: Or maybe use a span, set its width to the li, text align it right? Then we dont have to worry about inlines...

 

[Dal123]

Angelwatt thanks so much for taking the time to explain. I've found it very difficult to understand css and selectors. I think I'm starting to get it now, thanks for showing me #nav_list, #nav_list ul { so understand now how to format long selectors.
Really appreciate it . Thanks also to Jim, and Cerebrus Maw.
For reference for those that struggling with lists this is how it worked in the end thanks to angelwatt:
HTML:

<ul id="nav_list">
	<li><a href="index.htm">home</a></li>
	<li>services</li>
	<li><a href="gallery.htm">previous jobs</a></li>
	<li>guarantee
	<li class="no_pad">contact us</li>
</ul>

CSS:

ul#nav_list li.no_pad {
padding:0px 0px 5px 0px;
margin:0;
float:right;
}

ul#nav_list{
list-style:none;
margin:0px;
padding:0px;
font-family: "Lucidia Grande", Lucida Sans Unicode, Verdana, sans-serif;
font-size: 1.8em;
}
ul#nav_list li{
display:inline;
padding:5px 29px 5px 0px;
}

 

[SrWebDeveloper]

While others are helping you with styling your site, I'll spend a little more time generally helping you understand selectors and CSS , remember anything I write is merely example CSS to help you learn:

I need to look for an unordered list, called 'nav_list', that has children tags <li> that has a class 'no_pad'. Which I have no clue how to write

, I have just tried:
#nav_list li .no_pad {
text-align:right;
}
No luck

In English, your selector actually says:

Find me any element with ID named nav_list which has a descendant LI tag which has a decesdant class named no_pad. [wrong!]

See that space between li and .no_pad in your selector? That is the problem, that specific space should not be there. In CSS, when you want to associate an element with a class or ID, the . or # immediately follows the element, don't use a space. A space is only for combining elements in a parent/child relationship.

The correct selector is: #nav_list li.no_pad { ... styles ... }

Find me any element with ID named nav_list which has a descendant LI tag which has a class named no_pad. [better]

In the REAL selector, based on the last few replies I've seen from others, includes UL added on the front so the ID nav_list is associated with it, and hopefully by now you see it is optional because you only have one ID nav_list in your HTML and it can be referenced directly.

-jim

 

[Dal123]

it can be referenced directly.

Cool I understand that bit now, was getting complicated with ul then the id or other way around. That makes sense now as there's only one id.
Thanks Jim, really appreciate it .

 

[SrWebDeveloper]

Anytime. Cheers!

 

[angelwatt]

@Angelwatt: Does the non text align to inlines also apply to divs? So if he puts a div into his <li> no pad, displays it inline (since the div will have 100% of the li's width) and then text align right?

Edit: Or maybe use a span, set its width to the li, text align it right? Then we dont have to worry about inlines...

text-align will apply to a div, as it's a block element. If you make the div inline via CSS then it will no longer take 100% of the li's width (unless there's nothing else inside this li which is also set as inline). The li items here haven't been given a width, which makes applying text alignment harder. One alternative is set a width on the li items and float them, which allows them to keep their block status and text aligning could be used on them. There's also display:inline-block that can be powerful (though IE is sometimes stupid on that so it's not used as much, but does work properly when applied to tags that are naturally inline elements such as the span and label tags.).

@Dal
On that last posting of the HTML, it looks like there's a missing end li tag on the guarantee item. And don't worry too much about my above paragraph, it was a general discussion so don't try to apply it to your navigation, it was just discussing alternative approaches. CSS has it's strength and confusion that things can be accomplished through multiple tactics, but look the same in the end.

 

[Dal123]

Thanks angelwatt,
much appreciated .

 

[Dal123]

Sorry I've just found a decent tutorial, Please ignore this thread. Sorry .

 

[kedruff]

I would also use an advanced selector of li:last-child in my CSS which should work with all browsers. You'd have something like this:

<div id="navbar">
<ul id="nav_list">
	<li><a href="index.htm">home</a></li>
	<li>services</li>
	<li><a href="gallery.htm">previous jobs</a></li>
	<li>guarantee</li>
	<li>contact us</li>
</ul>
</div>

And your css would read

ul#nav_list li { padding-right:30px;}
ul#nav_list li:last-child{padding-right:0px;}

 

[angelwatt]

I would also use an advanced selector of li:last-child in my CSS which should work with all browsers.

Limited support for last-child. (No IE support <= v8)

--

(Edit: The below part was actually meant for this thread. Dal123 found it though.)

In your HTML move the H3 block to after the #case section and before your br tag. Then, in your CSS we'll change the h3's CSS to,

h3 {
padding:0;
margin:0;
/*float:left;  [COLOR="Red"]REMOVED[/COLOR] */
}

 

[Dal123]

kedruff thanks for that, didn't realise it was possible to use a selector like that. Angelwatt, great links, bookmarked one of them . Cheers chaps , excellent input . Thanks .