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 :o) but I'm still struggling with lists:o.
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:p.
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:eek:. 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 :confused:.
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. (http://www.tizag.com/cssT/selector.php)

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 :D.
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:o.
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 :o. Padding is set to 0 and margin :confused:. Cannot even get the text to change alignment :mad:.
I think it's quite hard to get the grasps of how everything is displayed in internet design, very different from graphic design:eek:. 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:confused:, 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 :o.
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 :o.

[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 25px 5px 0px; /* you set the right padding here */
margin:0px;
}
#nav_list li.no_pad{
padding-right: 0; /* now you unset it for the one list item */
}

[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 :eek:.
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 :eek:.
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, #nav_list ul {
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 writehttp://images.macrumors.com/vb/images/smilies/confused.gif, 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:o. Sorry :o.

[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. (http://www.quirksmode.org/css/firstchild.html) (No IE support <= v8 (http://www.quirksmode.org/css/contents.html))

--

(Edit: The below part was actually meant for this thread (http://forums.macrumors.com/showthread.php?t=779128). 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; REMOVED */
}

[Dal123]

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

[SrWebDeveloper]

I need to chime in here, this is for the OP...

There are plenty of extremely helpful selectors out there to make the job of applying styles easier. However, be sure to thoroughly research the compatibility. I personally like to visit the W3C Schools CSS Reference (http://www.w3schools.com/CSS/CSS_reference.asp) for example. I clicked on the Pseudo-classes/elements (http://www.w3schools.com/CSS/CSS_reference.asp#pseudo) link on that page and they don't even list the :last-child pseudo class. Remember CSS3 has not been officially standardized yet, its still in revision mode. CSS1 and CSS2 are documented on that site, so if you don't find it there it's either CSS3 which is not widely supported or a browser quirk, meaning a specific element for one or a small number of browsers due to limited support. When developing for a general web audience as most sites are, you always think cross browser compatibility with respect to your layout and code base. It doesn't mean you can't use quirk/CSS3 - so long as you know the implications.

On an informal note, alot of folks like to use the JQuery (http://docs.jquery.com/Downloading_jQuery) framework with extends Javascript and is very useful for making very complex CSS quite simple and arguably more powerful. Of course, as always, learn W3C CSS first - then advance to neat tools in the toolbox like this, knowing it has limitations also. That goes without saying. There are many other frameworks out there, this is but one example of one of the most popular and stable ones out there. FYI only.

That's the final lesson for you and others following - the rest you need to learn on your own, and learn by doing and making mistakes as we all do to increase our experience and knowledge.

-jim

[Dal123]

Thanks for the input Jim, bookmarked JQuery, only briskly looked through it; looks interesting, bit advanced for myself at the moment :o.
I didn't even know there were different formats of CSS, just thought it was CSS :o.
News was on in the background yesterday; a web designer was saying "qualifications in web-design are fairly worthless. The true professionals are those that keep updated with the latest technology, as the internet is constantly changing and evolving" which I agree with, and so easy to get stuck in old ways.
The brilliant thing about this forum is the generous genius's share the latest technology with us that were not even aware it existed.
:):):):)
Thanks Jim.Much appreciated:D

[woodlandtrek]

If you're working on a mac, I would at least check out cssedit by Macrabbit. It provides live updates to the page you're working on as you edit your css code. This feature alone taught me more about what css does than all the tutorials I have read on the topic. There are still some things that you can't learn by trial and error, but it definitely helps.

(I think the new live view in Dreamweaver CS4 does this as well, but haven't tried it yet)

[Dal123]

Cheers woodlandtruk, I've been using firefox's developer toolbar and this allows css live edit.
I've been all-day trying to create a footer :o. I have a list within another list and thought that this was the proper way.
I want it to set out like this:

Precise Formwork Limited Web:website Formwork/ Shuttering
Office: 01708 736500 Web:other web Steel-fixing/ Reinforced
email@preciseformwork.co.uk Sub-Contractor Concrete Placement

So far I'm struggling to clear my floats, then tried position:relative, all sort of things so I could try to understand, clearing them: I think I'm starting to understand correct syntax (I have had to use 'spacer tags' and did not really understand the meaning of them, as pro's say that it's not semantic, think I understand that each element is supposed to have it's position/ attributes specified so no spacers needed.
This is how I have my lists: Obviously there will be a third list within this list but I cannot figure out how to get it left and nice and neat, I have used a header for the 'Precise Formwork Limited' which makes it harder but needed.
<div id="footer">
<h5>Precise Formwork Limited</h5>
<ul id="left_foot">
<li>Office: 01708 736500</li>
<li>email: <a href="mailto:email@preciseformwork.co.uk">email@preciseformwork.co.uk</a>
<ul id="mid_foot">
<li><a href="index.htm">Website: www.preciseformwork.co.uk</a></li>
<li><a href="index.htm">Website: www.preciseformwork.com</a></li>
</ul>
</li>
</ul>
</div>
#footer {
font-family:"Lucidia Grande", "Lucidia Sans Unicode", Helvetica Neue, Helvitica;
list-style-type:none;
margin:0;
padding:0;

}

#left_foot {
padding:0;
margin:0;
float:left;
}

#mid_foot {
float:right;
}

h5 {
font-size:1em;
font-weight:600;
font-family:"Lucidia Grande", "Lucidia Sans Unicode", Helvetica Neue, Helvitica;
margin:0;
padding:0;
}

[angelwatt]

Can you explain a little more in how you're wanting the footer to look? I don't think I'm following your example.

Quick note in your CSS: On the font-family there's a Helvetica Neue item, but it doesn't have quotes around it. Since there's a space in the name you'll need to quote the entire font name.

[samwich]

you also used the spelling helvitica instead of helvetica

[Dal123]

Sorry, chaps; I've really been rushing, trying to get this done by the weekend and my girlfriends computer (PC) has been messing up so trying to fix that while doing this and I'm doing too much and messing my work :(.
Thank you for bringing my attention to space needed when fonts have a gap; my book should have warned me of this :mad:.
Attached picture is what I want to achieve.
Also with all the rushing I have accidently selected my hard-drive and dragged on desktop. Tried putting it back by dragging it, wont go back. Anyone know how to fix this, everything working fine, when go to drag to trash it ejects (but nothing happens :confused:) stupid stupid mistake of mine :o.
How embarassing:o.

[angelwatt]

I think you forgot the attachment.

Not sure what you mean about the dragging your hard drive to your desktop. Where did you drag it from? Normally it would just create a link that you can delete. But when you mentioned ejecting it, well you can't eject your hard drive, unless you're referring to an external one.

[Dal123]

Sorry about that, having problems sending jpeg attachments from Photoshop, so had to format in preview.
What happened accidentally dragged from the the finder, once it's on desktop you can't delete it. I had to go through finder preferences and 'general' tab uncheck hard disks to show on desktop.:) Mysterious :).

[angelwatt]

OK, here's what I came up with. It looked the same with Firefox, Safari, and Opera on Mac. Currently the footer will take up the entire width of where it's at. You can add a width to #footer if you need to shrink it up. Both the HTML and CSS are valid. Hopefully it'll fit right when placed on your page, but it at least works on its own. Attached is what it looks like for me. Also, I left off the links and such, but you can easily enough add those back it.

<div id="footer">
<ul>
<li><h5>Precise Formwork Limited</h5></li>
<li>Tel: 01708 736500</li>
<li>Mo: 07590 657295</li>
</ul>
<ul>
<li>Sub-Contractor</li>
<li>Specialist RC Stairs</li>
<li>Precision Formwork</li>
</ul>
<ul>
<li>Web: Website</li>
<li>Web: Other Site</li>
</ul>
</div>
#footer {
position: relative;
margin: 0; padding: 0;
font-family:"Lucidia Grande", "Lucidia Sans Unicode", "Helvetica Neue", Helvetica;
}
#footer h5 {
margin: 0; padding: 0;
font-weight: 600;
font-size: 1em;
}
#footer ul {
margin: 0; padding: 0;
width: 33.3%; float: left;
}
#footer li {
margin: 0; padding: 0;
list-style: none;
}

[Dal123]

That's exactly what I wanted :D.
Thank you very much angelwatt :). I owe you big time. Just couldn't figure out how to do it. Site is really coming on now :D thanks to you buddy :).
Much, much appreciated. Cheers :).