[SOLVED] image behind sub nav bar

acrikey · #1 Oct 22nd, 2007, 17:35

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 · #2 Oct 22nd, 2007, 18:16

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

acrikey · #3 Oct 22nd, 2007, 20:58

It is using css hence the attached css file

Marc · #4 Oct 22nd, 2007, 21:02

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 · #5 Oct 22nd, 2007, 21:08

It sits below the nav buttons though, not behind

Marc · #6 Oct 22nd, 2007, 21:10

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 · #7 Oct 22nd, 2007, 21:33

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 · #8 Oct 23rd, 2007, 10:19

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

Marc · #9 Oct 23rd, 2007, 10:33

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 · #10 Oct 23rd, 2007, 10:51

here it is

Nortus · #11 Oct 23rd, 2007, 11:01

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 · #12 Oct 23rd, 2007, 11:23

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

Nortus · #13 Oct 23rd, 2007, 11:44

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 · #14 Oct 23rd, 2007, 11:44

Quote:

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 · #15 Oct 28th, 2007, 23:18

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

acrikey · #16 Oct 28th, 2007, 23:18

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

Marc · #17 Oct 29th, 2007, 06:40

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

Cheers,
Marc

acrikey · #18 Oct 29th, 2007, 11:32

but it's not solved yet

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
[SOLVED] image behind sub nav bar