[Do Gooder]

working on this simple site...

trying to make a nice flexible single layer navigation down the left hand side.

at the moment the arrow graphics are block elements and are stretching to the width of the div

what is the best way of setting them so they stick to the width of the text?

floating does the trick but i need the clear the floats - which feels like a bit of a bodge too far.

cheers alls

link: The Good Academy

[herkalees]

Wrap a span around the text, inside of the anchor tags, and set the background on the span with background-position:right top;

[Do Gooder]

will give that a pops. cheers

[Do Gooder]

not working so far..

will give it another go after this sandwich. probably me not coding proper.

the sandwich might help me think.

[Do Gooder]

need to work on the speed of the rollovers.. will sort that first.

[Do Gooder]

what a pain in the arse... trying to something simple and it is turning into porridge... back to the drawing board on this one me thinks.

[pgo]

I may not be understanding what you're asking, but...

<ul>
  <li><a href="#">That</a></li>
</ul>

ul a {
  display: block;
  padding: 5px;
  margin: 0 0 5px 0;
  background: url(/path/to/image.gif) no-repeat right center;
}

That should work. Just make sure your image is exactly a mirror of itself or it'll be off center. And make it a lot taller than it needs to be so your nav arrows can expand.

[herkalees]

pgo - I believe he wants the arrow graphic to be only as wide as the text itself.

I'm surprised the span around the text thing didn't work...

[Do Gooder]

- yup. as herkalees said..

but anywayz

that is neater than my code for a start. cheers.

i am going to do a bit of research and get back on this one.

i might be digging myself a bit of a CSS hole. the rollover graphics are doing my cold ridden brain in.

[Do Gooder]

i have reworked the links using floats - then clearing each nav link with

<br class="clearfloat" />

seems to work...

uploaded the files so you can see.



now the rollovers... Mmm a cup of tea first though.

[Do Gooder]

Been working on this site again tonight.

The Good Academy

A wee question about the nav links. Do i need to repeat all the styles for the:
ul a
ul a:hover
ul a:visited
ul a:active

or do i style the 'ul a' and those styles they carry on to the next link state and i only need to mark the changes for the rollovers?

Hope this question makes sense.. i'm a bit tired.

Richard 'Dumbass' Rogers

[Do Gooder]

good morning bump

[4024anna]

can't help with the webby stuff but 'The Good Academy' sounds like a great idea!

[Do Gooder]

Why thank you. It's been hard work and a serious learning curve.. but we are on the way to being a proper charity... and bizarrely, I am now on the advisory board for the Glasgow Met College. Makes me feel very grown up.

We are about to start nagging glasgow agencies for student mentors... I will ad you to my mithering list.

We are well pleased that Hyphen are on board!

[Kev]

Try it like this:

ul li {
display: block;
overflow: hidden;
margin-bottom: 6px;
}

ul a {
display: block;
float: left;
text-decoration: none;
text-transform: uppercase;
color: #FFFFFF;
padding: 10px 30px 10px 10px;
background-image: url(../academy-images/arrow-black.gif);
background-repeat: no-repeat;
background-position: right center;
}

ul a:hover {
padding-right: 40px;
}

You should be able to lose those BR's then.
Also, I would include the id of the containing div i.e.

#nav ul a {...}

otherwise if you use a list elsewhere it'll end up being styled like your navigation.

[Do Gooder]

I luv kev.

will try popping that code in. thank you.

[Kev]

Aww... thanks. Hope it works.

I can crawl back to my corporate design pit now.

[Do Gooder]

i tempted him out with charity cheese.

[Do Gooder]

just got a £3k start up grant through.. Wooooo