Remove padding last item on inline list.

[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 for example. I clicked on the Pseudo-classes/elements 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 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 .
I didn't even know there were different formats of CSS, just thought it was CSS .
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

 

[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]

Footer, list within another list.

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 . 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 Webther 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 .
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 ) stupid stupid mistake of mine .
How embarassing.

 

[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 .
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 thanks to you buddy .
Much, much appreciated. Cheers .