12 replies [Last post]
Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 24 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Hello again Smile

Weeeell...I seem to have got myself a freebie task of pulling together a couple of websites.

I'll call this one FMS, it's been written by a student who has now moved on to another course, of course. The college will put the files in a CMS for us, however I asked to see the code first - ahem.

Here's the site

NB: I have only changed index.html and am in the process of creating a new css (stripping out tables, a font spec in px in EVERY div etc). If you go to any other page but Home the student's xhtml AND css stylesheet will operate.

I have replaced the tabled navigation with a list and made a new blank button background to go on the 'current' item.

However, I can't get rid of the margin on the UL!!! I've spent oweeers on this and it's driving me barmy. I want it to look like it does if you go to the Practitioners page.

Will someone please straighten me out? Ta muchly Smile

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 2 days 19 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Hi Smee, long time no smee

Hi Smee,
long time no smee Big smile
here's a screenshot from chromes developer tools, that shows what you are trying to remove is the default (browser style) padding on the ul.

ul{padding:0;} 

should come close to doing what you want.

Hope that helps.

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 24 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

:)

Hello Mr Tony *waving*

Quote:

long time no smee Big smile

Laughing out loud Oh very funny! Be careful, you may soon be overwhelmed with me. I always keep an eye on the proceedings though it's just that after all these years I still struggle with every line so am still not up to troubleshooting other's code Shy

How-sum-ever...I know what it looks like, I could see it with Firebug...'cept I didn't know what purple meant. Is there a color code to that thing? I thought it was a margin but tried everything I could think of... browser eh? No wonder I jolly well couldn't target it. I kept putting things in front of the UL.

Thanks Tony {mwah}

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 24 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Oops...

...forgot to ask how I now move the list items so they always line up with the text in the 'current' one - under H in home in this instance.

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 2 days 19 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

The basic idea is to always

The basic idea is to always have the same padding and margin.
So remove the padding form .current and add it to them all.

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 24 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Ummm... no, now I've got no

Ummm... no, now I've got no 'air' between the edge of the button and the text - is there any way to do that? I don't mind if the red sticks out left, I'd just like the text to line up.

I think I may have been to clever for myself putting it on 'current' but I had to make a new button because the student didn't provide a blank one and the organisation wanted one of the menu items changed.

ETA: Changes here

ETA 2 : I need to move the background independently of the list - do I need another clas/div for it?

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 24 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Hmmm...list-style-image might

Hmmm...list-style-image might be the go but now it's waaay to far left - padding moves the list of course.

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 day 5 hours ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9745
Points: 3824

Remove padding from li, put

Remove padding from li, put it on the anchor, set li background to no-repeat, and set width for li to 189px.

If #navwrap only wraps the ul, you don't need it. UL is already a block container.

I think that's it.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 24 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Hello Gary Thanks sooo much

Hello Gary Smile

Thanks sooo much for looking at this. Unfortunately I'm due out now but I will try it later tonight when I get home. {mwah}

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 24 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

You forgot the list-style:

You forgot the list-style: none but it's okay, I figured it out Big smile

Much better but I'd still like a bit of 'air' between the text and the edge of the red button please.

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 day 5 hours ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9745
Points: 3824

Smee wrote:You forgot the

Quote:

You forgot the list-style: none but it's okay, I figured it out

I thought you'd already done that.

Quote:

Much better but I'd still like a bit of 'air' between the text and the edge of the red button please.

Um,

Quote:

Remove padding from li, put it on the anchor

Example:

#navwrap a {
    font-weight: bold;
    padding-left: 1.25em; 
    text-decoration: none;
}

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 24 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Oops...didn't know a stood

Oops...didn't know a stood for 'anchor' as well as 'active' Big smile

I will try that when I get my new ISP sorted *sigh*

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 24 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Yaaaay!....it's bayoodiful

Yaaaay!....it's bayoodiful {mwah}

Thank you sir, much appreciated Smile

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile