Spunky Posted November 11, 2008 Share Posted November 11, 2008 Ok, I am creating menus as shown how to do at this site's tutorial for CSS Worked fine, I just inserted an image instead. However, I cannot figure out how to have each menu a different image as well as different link..infact..the tutorial didn't even show how to link..so I need to know that as well. But anyways, I am fairly new to CSS and I tried using div classes to maybe specify each individual menu giving them their own width, height, margins, etc (though all that would be the same) and I just couldn't do it. I know how to make a class and style it as I did with Header, but, this is a "ul" and I couldnt just stick .Home before the ul to change the class and then to specify it at the bottom with the individual '<li>'. Or maybe I can and don't know how?This coding is the entire coding in which I am currently working with. If you copy and paste the code, you will see that the menus aren't centered...I couldn't figure it out why, I have 5 menus, the width is 900 so I took 900 / 5 and got 180 so they are each 180px long. I had decided to just skip this issue cuz it wasn't a big deal but while I have a different question why not ask this one as well. <html><head><style type="text/css">body {background-color: #000000}.Header {width: 900px; height: auto; margin-top: auto; margin-right: auto; margin-bottom: auto; margin-left: auto;}ul{width:900px;height: auto;margin-right:auto; margin-bottom: auto; margin-left:auto; margin-top: auto;list-style-type:none;}a{float:left;width:180px;height:49px;background-image: url('HomeButton.gif');}//a:hover {background-image: url('HomeButtonOver.gif')}li {display:inline}</style></head><body><div class="Header"><img src="Header.gif" width="900" height="119" alt="Header" /></div><p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></div></div></ul></body></html> Also, could someone explain to me what the "<a href="#"> is for? I know "a href" is for links..OH! Is that where I put the "http://"??? Yes that makes sense...I just now realized that..lol I just had no idea what '#' was for, thought it had something to do with the hover which I currently have disabled. Link to comment Share on other sites More sharing options...
Spunky Posted November 11, 2008 Author Share Posted November 11, 2008 Ok I was almost proud of myself for almost figuring this out myself. Here I found another tutorial and I thought I was saved. Tried it and nothing happened. Could it be I have to do something with the 'a' when it is called in the head after the 'ul'?Here's the changed code. *note I am only testing it on the first 2 menues so those last 3 arent being messed with. <html><head><style type="text/css">body {background-color: #000000}.Header {width: 900px; height: auto; margin-top: auto; margin-right: auto; margin-bottom: auto; margin-left: auto;}.body {font-family: trebucket; font-size: 12px; font-color: #00ff00;}ul.home {list-style-type: none;width:900px;height: auto;margin-right:auto; margin-bottom: auto; margin-left:auto; margin-top: auto;}a{float:left;width:180px;height:49px;background-image: url('HomeButton.gif');}a:hover {background-image: url('HomeButtonOver.gif')}li {display:inline}ul.RPG {list-style-type:none;width:900px;height: auto;margin-right:auto; margin-bottom: auto; margin-left:auto; margin-top: auto;}a{float:left;width:180px;height:49px;background-image: url('RPGButton.gif');}a:hover {background-image: url('RPGButtonOver.gif')}li {display:inline}</style></head><body><div class="Header"><img src="Header.gif" width="900" height="119" alt="Header" /></div><br><br><ul class="Home"><li><a href="#"></a></li></ul><ul class="RPG"><li><a href="#"></a></li></ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></body></html> Link to comment Share on other sites More sharing options...
Spunky Posted November 12, 2008 Author Share Posted November 12, 2008 Ok I found out how to make it centered...putting a padding in..yay..anyways and now I am trying an alternate way in doing this and that's the original way how I got it from the tutorials site..only thing is I can figure out how to make the text centered on the image. Link to comment Share on other sites More sharing options...
Spunky Posted November 12, 2008 Author Share Posted November 12, 2008 ok by using text-indent I was able to move it over but how do I adjust it up or down? I cannot find it in my notes or anywhere. Link to comment Share on other sites More sharing options...
jlhaslip Posted November 12, 2008 Share Posted November 12, 2008 try using margin-top or padding-top, depending on what you want it to look like.Or margin/padding-bottom... Link to comment Share on other sites More sharing options...
Spunky Posted November 12, 2008 Author Share Posted November 12, 2008 I hadn't realized you could specify top., bottom, left or right of padding so when you mentioned it I checked it out and it made the code go screwy, take a look at it, I changed it back to padding: 0em 0em; and it STILL is screwy and I really do not know why. Here is what it looks like now, the menues are completely screwy: <html><head><style type="text/css">body {background-color: #000000}.Header {width: 900px; height: auto; margin-top: auto; margin-right: auto; margin-bottom: auto; margin-left: auto;}.body {font-family: trebucket; font-size: 12px; font-color: #00ff00;}ul{float: left;width:900px;padding:0;margin-right: auto; margin-top: auto; margin-left: auto; margin-bottom: auto;list-style-type:none;}a{width:180px;height:49px;text-decoration:none;font-size: 20px;text-indent: 1cm;color:white;background-image: url('Button.gif');padding: 0em 0em;}a:hover {background-color:#ff3300}li {display:inline}</style></head><body><div class="Header"><img src="Header.gif" width="900" height="119" alt="Header" /></div><ul><li><a href="#">Link one</a></li><li><a href="#">Link two</a></li><li><a href="#">Link three</a></li><li><a href="#">Link four</a></li><li><a href="#">Link four</a></li></ul></body></html> Link to comment Share on other sites More sharing options...
jlhaslip Posted November 12, 2008 Share Posted November 12, 2008 http://www.cssplay.co.uk/menus/tutorial.html Link to comment Share on other sites More sharing options...
Spunky Posted November 12, 2008 Author Share Posted November 12, 2008 I appreciate the website, can do things a little different, however, what I am doing is not wrong. It worked, just all of a sudden it did not. But thank you, I will use that site for reference and to add neat stuff for it. Link to comment Share on other sites More sharing options...
Spunky Posted November 12, 2008 Author Share Posted November 12, 2008 I made a menu according to that website you linked and I made it just fine, even when I used an image instead, however, I am still having an issue with making the text in the center of the button, I can indent the text but how do I move it up and down? Also, because that way doesn't use div tags I dont know where to add the width of the entire thing. For example, the width I use is 900px, then by making all the margins auto it centers the entire thing as a whole. When I try using line-height: px (with a number) nothing happens. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.