[SOLVED] image behind sub nav bar

[acrikey]

I am having issues putting a image behind the sub nav bar, I can make it work in Joomla but not in my web page, also I have no idea how to centralize the main header, every thing I try just puts it in a list in the centre, can some one please help?

http://www.lightex.co.uk/south/

in Joomla:
http://www.lightex.co.uk/south/cms/index.php

[Marc]

You will need to use CSS for this... This thread explains it: http://www.webforumz.com/html-forum/...reamweaver.htm.

[acrikey]

It is using css hence the attached css file

[Marc]

Well why do you have this:
<img src="images/banner.png" alt="" width="145" height="599" />...

Surely this code added to your sub menu would work?

Code: Select all

background-image:url(images/banner.png);
backgoound-repeat:repeat-y;

[acrikey]

It sits below the nav buttons though, not behind

[Marc]

Do you want it to be below the nav buttons, or behind? You are confusing me. What i have showed you should put it behind....

[AdRock]

That's the way it looks for me

The code marc has supplied you would put in the div which holds the navigation

so in your case you need to add that css to the div with the id leftcolumn

[acrikey]

That has done nothing, it is still sitting below even with the changes

[Marc]

Can we see the updated code, please? You must be doing somthing wrong.... Mind you, it doesnt help the way you have named your classes.

[acrikey]

here it is

[Nortus]

According to this -

HTML: Select all

<div id="leftColumn"><p class="style32">Sub Menu.</p>
 <ul>
<li><a href="http://www.lightex.co.uk/south/kamchatka.html" target="_parent">Kamchatka</a><a href="#" title="Foo"></a></li>
<li><a href="http://www.lightex.co.uk/south/davos.html" target="_parent">DK Ride</a><a href="#" title="Foo"></a></li>
<li><a href="http://www.lightex.co.uk/south/runjumpfly.html" target="_parent">Run Jump Fly </a><a href="#" title="Foo"></a></li>
<li><a href="http://www.lightex.co.uk/south/school.html" target="_parent">School Talks</a><a href="#" title="Foo"></a></li>
 <li><a href="http://www.lightex.co.uk/south/sponsors.html" target="_parent">Sponsors</a></li>
 </ul>
 <p class="style33">IMAGE WILL BE UNDER SUB MENU</p>
 <p><img src="http://www.webforumz.com/images/banner.png" alt="" width="145" height="599" /></p>
 </div>

You are calling the image AFTER the end of the list.
You dont need to call the image at all in the HTML.
As Marc suggested you need is this in your CSS

Code: Select all

#leftcolumn {
background-image:images/banner.png;
background-repeat:no-repeat;
}

------------------

Edit -
Sorry you posted while I was posting.
Back in a mo......

[acrikey]

Ok it is in the css and removed from he html and the image has disappeared completely

[Nortus]

I made a boo boo -
should have put

Code: Select all

background-image:url(images/banner.png);

when I put

Code: Select all

background-image:images/banner.png;

Try adding

Code: Select all

../

before images/banner

[MikeHopley]

Originally Posted by acrikey

Ok it is in the css and removed from he html and the image has disappeared completely

Did you specify a width and height in your CSS? The background image will be clipped by the element's dimensions; so if you apply it to a zero-area element, then it will "disappear".

[acrikey]

ok I think I need to but how, sorry still learning css

[acrikey]

Every time I think I have got it, I get stumped by another problem

[Marc]

If you would like to go into Thread Tools -> Mark Thread as Solved - that would be great!

Cheers,
Marc

[acrikey]

but it's not solved yet

[Lchad]

Ok Acrikey..where are you at in this problem now?

[acrikey]

I have done all the changes to the css, but the image is not there any more, there was suggestions to change it to a zero-area element but I don't know how to do it, I only know how to do it in html, but it's not in html it's in css.