Guys,

I would like to use the right hand div on my page as a nav bar.
is there anyway I can make the "blocks" be the same width? regardless of the length of the string, using a table?

www.dtec-addonnis.co.uk/indexbeta3.htm

Also what effect will using png images have on my ratings etc?

Thanks

Hi,

I'm really not sure if I understand what you mean, but you don't need to use a table to set a block width. You can set a block width in pixels, in fact you could create a special <ul> & <li> width in pixels too.

Check out this site for the definitive guide to css lists:

http://css.maxdesign.com.au/listutorial/

Give us an example of another site that you want to look like, and I can get a better idea of what you mean.

Using images instead of text isn't the best for seo, to be honest, but you are after a special "look" for your text font, so you have to decide which is more important. You can use alt text and titles (for graphical links) though.

Also you might want to consider other formats other than png. This format can't be displayed by some of the older browsers, and as I remember you can get better compression in other formats.

Cheers,
Paz.

__________________
10.3 million entries for Hotels in Turkey but I'm still chipping away.

Paz,


On site I am working on www.dtec-addonnis.co.uk the right hand NavBar is the text I want to make all the same width, so to give the effect of a button or table where in a table I would change the cell background, can I not acheive the same result with CSS?

You will notice from my CSS Style sheet that I have achieved the rollover by ammending the <a > tag but the Navbar is already within my ammended <ul > & <li > tags. Could I ammend either the Anchor or unorderd list attributes in the CSS file to create the desired effect?


Thanks

You can have background colours and graphics in divs, same as tables.

eg some div {color:black;background-color:white;}
another div {background-image: url(image.gif);background-position:left;background-repeat:repeat-both;}

Also you should read that tutorial again because it shows you how to use custom buttons in unordered lists.



If I understand what you mean, then I would use the standard rollover effect on the <a> tag, I'm not sure if it works on <li> tags...

Cheers,
Paz.

__________________
10.3 million entries for Hotels in Turkey but I'm still chipping away.

Paz,

I want to try and avoid using nested frames, I still want to keep the div background colour (white) But have the Links in the same size of a block, I dont think that the

#navcontainer a
{
display: block;
color: #FFF;
background-color: #036;
width: 9em;
padding: .2em .8em;
text-decoration: none;
}

#navcontainer a:hover
{
background-color: #369;
color: #FFF;
}

Code would let me do this because this is changing the DIV properties. What I am trying to achieve is a list similar to the horizontal one here http://css.maxdesign.com.au/listuto...orizontal08.htm but vertical & Within a DIV with a white background with the list items having their own background colour, Am I being to demanding of CSS?

I would know how to achieve the background Image/Colour for the DIV but was wondering if I can alter the width of the <li> so that all the rollover and blocks are inline?

I don't see what you mean! Do you mean you want to avoid placing divs within divs, because that's no problem.


I don't understand... but I can say in general you can test this
<li style="width:100px;">100 px wide</li> also yes, you can have different background colours for divs and list items.

Cheers,
Paz.

__________________
10.3 million entries for Hotels in Turkey but I'm still chipping away.

Sorry for the poor explanation, I did mean nested DIVS but I was trying to avoid it, needlessly it would seem!

It was the <ul style="width:100px; background-color:#339933;") has gave me a suitable effect.

if you look at http://www.dtec-addonnis.co.uk now, what I wanted to achieve was.... the NAVBAR on the right rather than have the area around the text chage on rollover (BgColor) but the whole line change bgcolor upon rollover.

Thanks though, I knew there was a simple soloution!!

Hi,

yes it's working ok fine, but I would prefer to see left-hand aligned link text though, rather than centered.

Nesting divs doesn't give a performance problem like it does with tables. It can cause some issues in older browsers & Macs (apparently), but 99% of your users will be happy with the speed and you can do a hack for the rest - I don't bother with the Mac users though... haha.

Cheers,
Paz.

__________________
10.3 million entries for Hotels in Turkey but I'm still chipping away.

<snip>