Jump to content

2 questions


thewindmaker

Recommended Posts

Hi there everyone,I was wondering about the following 2 things. How to make an image appear behind a menu/pictures/text. And how to make a colored block appear when you put your mouse over a link.First off here is what i need done for the pictures.Click hereAs you can see on the right and left side of the site there are two beautiful pictures we have had our image master create for us. Then underneath them you can see that they have a menu bar. I was wondering how would I bring the Menus and the Links up and over top of the image? I want the pictures to be a menu background. For the second question I would like it so that when you put your mouse over top of a link on the page it would it would highlight it with a different color. In a small rectangle. Here is a website which has this who we are part of a network with.Click HereAs you can see when you put your mouse over the text on there menu it highlights it. Thanks for your time!Nick

Link to comment
Share on other sites

very simple:)question 1 - put the menu in a div and give the div the background you require using cssdiv.content{background-image:url(image.jpg);background-repeat:no-repeat;}the no-repeat is there to stop it repeating. if you use height and width attributes to conmtrol the div, then having the backround repeating or some of it missing shouldn't happen.question 2 - take a look at the source of that website to see how they do it.its all based on css, so take a look at their stylesheet.based around lists, and displayed as blocks, using a different background colour and font colour on hover.hope that helps:)

Link to comment
Share on other sites

In Styles.content{background-image:url(/images/leftbanner.jpg);background-repeat:no-repeat;}In HTML:<div class="content"><!-- Inside this DIV tag put your HTML menu --><img src='http://img227.imageshack.us/img227/3705/mainmenu0cd.png'>   .: <a href=index.html >Homepage</a><br>   .: <a href=history.htm>Site History</a><br>   .: <a href= >Affiliation</a><br>   .: <a href= >Link To Us</a><br>   .: <a href= >Links</a><br>   .: <a href=http://s4.invisionfree.com/justzelda/index.php?showtopic=1443> Past Updates</a><br>   .: <a href= >Staff</a><br>   .: <a href="mail.htm" >Mail Bag</a><br>   .: <a href="mailto:myfriendnicholas@canada.com">Email</a><br><br>.....................................<!-- End of Menu Code --><div>

Link to comment
Share on other sites

K so this is the code iam using so far.

<div class="img src="/images/leftbanner.jpg"><img src='http://img227.imageshack.us/img227/3705/mainmenu0cd.png'>       .: <a href=index.html >Homepage</a><br>               .: <a href=history.htm>Site History</a><br>               .: <a href=  >Affiliation</a><br>               .: <a href=  >Link To Us</a><br>               .: <a href=  >Links</a><br>               .: <a href=http://s4.invisionfree.com/justzelda/index.php?showtopic=1443> Past Updates</a><br>        .: <a href=  >Staff</a><br>               .: <a href="mail.htm" >Mail             Bag</a><br>   .: <a href="mailto:myfriendnicholas@canada.com">Email</a><br><br><img src='http://img128.imageshack.us/img128/1831/zeldainfomenu3ru.png'>       .: <a href=articles.htm >Articles</a>  <br>               .: <a href=  >Creation Of Hyrule</a><br>               .: <a href=  >Games</a><br>               .: <a href=  >Lands Of Hyrule</a><br>               .: <a href=  >Races Of Hyrule</a><br>               .: <a href="">Timeline theory</a><br>              .: <a href="">Oddities/articles</a><br><br><img src="http://img96.imageshack.us/img96/645/downloadsmenu24px.png">         .: <a href=  >Avatars</a><br>               .: <a href=  >Commercials</a><br>               .: <a href=  >Fan Games</a> <br>               .: <a href=  >Forum Banners</a><br>               .: <a href=  >GIF Animations</a><br>               .: <a href=  >Midis</a><br>              .: <a href=  >Screensavers</a><br>              .: <a href=  >Sprites</a><br>              .: <a href=  >Story Animations</a><br>              .: <a href=  >Wallpaper</a> <br><div> 

And I tried this one

<div class="<img src="/images/leftbanner.jpg"><img src='http://img227.imageshack.us/img227/3705/mainmenu0cd.png'>       .: <a href=index.html >Homepage</a><br>               .: <a href=history.htm>Site History</a><br>               .: <a href=  >Affiliation</a><br>               .: <a href=  >Link To Us</a><br>               .: <a href=  >Links</a><br>               .: <a href=http://s4.invisionfree.com/justzelda/index.php?showtopic=1443> Past Updates</a><br>        .: <a href=  >Staff</a><br>               .: <a href="mail.htm" >Mail             Bag</a><br>   .: <a href="mailto:myfriendnicholas@canada.com">Email</a><br><br><img src='http://img128.imageshack.us/img128/1831/zeldainfomenu3ru.png'>       .: <a href=articles.htm >Articles</a>  <br>               .: <a href=  >Creation Of Hyrule</a><br>               .: <a href=  >Games</a><br>               .: <a href=  >Lands Of Hyrule</a><br>               .: <a href=  >Races Of Hyrule</a><br>               .: <a href="">Timeline theory</a><br>              .: <a href="">Oddities/articles</a><br><br><img src="http://img96.imageshack.us/img96/645/downloadsmenu24px.png">         .: <a href=  >Avatars</a><br>               .: <a href=  >Commercials</a><br>               .: <a href=  >Fan Games</a> <br>               .: <a href=  >Forum Banners</a><br>               .: <a href=  >GIF Animations</a><br>               .: <a href=  >Midis</a><br>              .: <a href=  >Screensavers</a><br>              .: <a href=  >Sprites</a><br>              .: <a href=  >Story Animations</a><br>              .: <a href=  >Wallpaper</a> <br>"><div> 

Neither are working!

Link to comment
Share on other sites

Did you write the div.content along with other styles?? <style>a:link { color: #AABCCD; text-decoration: none;} a:visited { color: #AABCCD; text-decoration: none;} a:active { color: #AABCCD; text-decoration: none;} .tb { border: 1px dotted #697F94;} a:hover { color: #FBCA20; text-decoration: none;}div.content{background-image:url(/images/leftbanner.jpg);background-repeat:no-repeat;}/* With the other styles you already wrote... */</style></head>..... Your HTML code...................<div class="content">img src='http://img227.imageshack.us/img227/3705/mainmenu0cd.png'>   .: <a href=index.html >Homepage</a><br>   .: <a href=history.htm>Site History</a><br>   .: <a href= >Affiliation</a><br>   .: <a href= >Link To Us</a><br>   .: <a href= >Links</a><br>   .: <a href=http://s4.invisionfree.com/justzelda/index.php?showtopic=1443> Past Updates</a><br>   .: <a href= >Staff</a><br>   .: <a href="mail.htm" >Mail Bag</a><br>   .: <a href="mailto:myfriendnicholas@canada.com">Email</a><br><br>...........................</div>

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...