thewindmaker Posted June 15, 2006 Share Posted June 15, 2006 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 More sharing options...
real_illusions Posted June 15, 2006 Share Posted June 15, 2006 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 More sharing options...
thewindmaker Posted June 15, 2006 Author Share Posted June 15, 2006 Yeah sorry iam not familiar with Div. here is the image source could you show me an exmple with it.<img src="/images/leftbanner.jpg">Thanks Link to comment Share on other sites More sharing options...
pulpfiction Posted June 15, 2006 Share Posted June 15, 2006 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 More sharing options...
thewindmaker Posted June 15, 2006 Author Share Posted June 15, 2006 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 More sharing options...
pulpfiction Posted June 16, 2006 Share Posted June 16, 2006 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now