Rules      FAQ       Register        Login
It is currently October 20th, 2018, 5:42 pm

All times are UTC - 5 hours [ DST ]




Post new topic Reply to topic  [ 3 posts ] 
Author Message
 Post subject: Help With Navigation Image
PostPosted: February 16th, 2010, 5:13 pm 
Welcomator
Welcomator
User avatar

Joined: 10 July 2005
Posts: 23149
Location: Where there are handsome heroes and sexy villains.. all that need some lovin' ;)
Country: Gondor (xg)
Gender: Female

Offline
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:

_________________
Image

Image

^ By me and my SS *squiggle hugs*


Top
 Profile       WWW            
 
 Post subject:
PostPosted: February 22nd, 2010, 12:40 am 
Rider of Rohan
Rider of Rohan
User avatar

Joined: 10 December 2005
Posts: 134

Offline
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.

_________________
<img src="http://thulcandra.com/randombanner/banner.php" title="Banner by Arwen">
I can help with HTML/CSS/JavaScript/PHP/ASP. I can't do graphics or layouts.
Post in Site Help, I'll see it. Or PM me.


Top
 Profile                  
 
 Post subject:
PostPosted: April 19th, 2010, 12:38 am 
Welcomator
Welcomator
User avatar

Joined: 10 July 2005
Posts: 23149
Location: Where there are handsome heroes and sexy villains.. all that need some lovin' ;)
Country: Gondor (xg)
Gender: Female

Offline
Thanks a lot! That was really very helpful. I have been wanting to know for ages. :-)

_________________
Image

Image

^ By me and my SS *squiggle hugs*


Top
 Profile       WWW            
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 3 posts ] 

All times are UTC - 5 hours [ DST ]




Who is online

Users browsing this forum: No registered users and 1 guest


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Jump to:  




Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
Boyz theme by Zarron Media 2003