Arwen-Undomiel.com
http://arwen-undomiel.com/forum/

Help With Navigation Image
http://arwen-undomiel.com/forum/viewtopic.php?f=27&t=20739		 Page 1 of 1
Author:  Johnny's Fan [ February 16th, 2010, 5:13 pm ]
Post subject:  Help With Navigation Image
Ok, this might be difficult to explain.

If you look at my site (you need firefox) http://pavedwithstars.skyward-thoughts.com you can see that where my navigation section is, there is just a coloured bar that seperates them. On other peoples sites (wouldn't you know it, that I can't find an example at this moment), they have images above the different sections, and I'm just wondering what code they use for that.

If anyone can help I will give cookies and turkish delight to them a-plenty. :drool:
Author:  The Grey Pilgrim [ February 22nd, 2010, 12:40 am ]
Post subject: 
If you want to replace the blue bars with images, you can change them all to the same image by changing your CSS from

Code:
#sidehead{
width:152px;
display:block;
background:#01091E;
color:#D4E1C7;
}


to something like

Code:
#sidehead{
width:152px;
display:block;
background: url('image.jpg') no-repeat;
color:#D4E1C7;
}


There's more info on CSS backgrounds here: http://www.w3schools.com/css/css_background.asp




If you want to make each bar a different image, then you should probably change your page so each bar is like this:

Code:
<center><span class="sidehead" id="bar1">Welcome!</span></center>
(...then your welcome message, then...)
<center><span class="sidehead" id="bar2">Navigation</span></center>
(and so on)


and then change your css to be:

Code:
.sidehead{
width:152px;
display:block;
color:#D4E1C7;
}

#bar1 {background: url('image1.jpg') no-repeat;}
#bar2 {background: url('image2.jpg') no-repeat;}
(and so on)



Let me know if that isn't what you were looking for.
Author:  Johnny's Fan [ April 19th, 2010, 12:38 am ]
Post subject: 
Thanks a lot! That was really very helpful. I have been wanting to know for ages. :-)
Page 1 of 1 All times are UTC - 5 hours [ DST ]
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
http://www.phpbb.com/