Krewe Posted February 7, 2011 Share Posted February 7, 2011 Ok, so know I have my code and everything for the horizontal nav bar. But the background image for the text isn't showing up.Also, I would like to know how to center it. I tried (Which you can see in the code, but nothing happened)Thanks guys!HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Community Krewe</title><link rel="stylesheet" type="text/css" href="style.css" /></head><body> <div class="nav"> <ul> <li><a href="index.html">Home</a></li> <li><a href="abouth.html">About Us</a></li> <li><a href="add.html">Add Your Site</a></li> <li><a href="communities.html">Communities</a></li> <li><a href="forum.html">Forum</a></li> <li><a href="contact.html">Contact Us</a></li> </ul> </div></body></html>CSS Code:body{background-color:#b3b3b3; background-image:url('mainpage/gradient.png'); background-repeat:repeat-x; background-position:left top;}.nav{margin-top:125px; margin-left:-10px; margin-right:-5px;}ul{text-align:center;}li{float:left; padding-left:25px;}a{background-image:url('mainpage/navbar.png')}-----------------------------------------------------------------------------------------------What it looks like right now:http://i1000.photobucket.com/albums/af130/krewd/sitehelp.jpgWhat I am hoping I can get it too look like:http://i1000.photobucket.com/albums/af130/...ialLayout-1.pngThanks guys.~krewe Link to comment Share on other sites More sharing options...
ekuemoah Posted February 7, 2011 Share Posted February 7, 2011 Ok, so know I have my code and everything for the horizontal nav bar. But the background image for the text isn't showing up.Also, I would like to know how to center it. I tried (Which you can see in the code, but nothing happened)Thanks guys!HTML Code:CSS Code:-----------------------------------------------------------------------------------------------What it looks like right now:http://i1000.photobucket.com/albums/af130/krewd/sitehelp.jpgWhat I am hoping I can get it too look like:http://i1000.photobucket.com/albums/af130/...ialLayout-1.pngThanks guys.~kreweI looked the picture you wanted and tried to code it for you. I thought of two ways to create the effect you wanted -- one is using divisions and the other is using tables. Here's my code for divisions: ( I read somewhere that this is the way you are supposed to hold content that is not data.)/I created a division to hold my image file. I set the z-index to 0, which makes it lie on the backmost layer of your page. 1.)<div class="navback" style="z-index: 0;width: 100%;float: left"><img src="graybar.png" style="width: 100%;position: absolute;top: 200px"/></div>//I created a set of divisions to hold each of your menutitles. I assigned each division to the same class. I wrote the division and the content in the order in which I want my menutitles to appear starting from the left side of the screen. I wrote it like this because the CSS style float property. I used the left property to make sure that each division lined up on the same line or row. The left property will arrange whichever division tag is written first on the leftmost side of your screen. The last division tag that is floated will be on the farthest right side of your screen.my styles for this division looks like this: div.menutitle{position: relative;top: 205px;color: white;font-size: 28px;margin-left: 30px;margin-right: 50px;vertical-align: bottom;font-family: Arial;float: left;z-index: 1}I set the position to relative. When I used absolute, the divisions overlapped and the float property did not align the divisions the way I wanted it to.I set a left and right margin for each division to separate the divisions. I used vertical-align to make sure the text in each division was set at the bottom. I used the float: left statement to make sure the divisions lined up on the same line. Lastly, I set the z-index to 1 to make sure that the menu divisions were on the layer on top of the image.If you play around with it, you might be able to group the navigation divisions into a container and then set that z-index to 1 so that you do not have to set each divisions z individually. //<div class="menutitle">Home</div><div class="menutitle">About Us</div><div class="menutitle">Add Your Site</div><div class="menutitle">Forum</div><div class="menutitle">Contact</div>=======================================================================================The other way I did it was by using a table. Tables, I read, are supposed to be used to hold only data. You can try to use the table format also.I set the picture as the background of my table. I set the cellspacing to 20px to create spacing between each cell. I set the text-align to center so that each text stayed in the center of each cell. I set the width to 100% so that the navigation bar would span across the width of the page. I assigned each table cell to a class called navlink.Here is my css for the navlink: (It is much less than the division tags because I did not have to set the alignment, position, and dimensions property by hand. It is already built into the table. Also, I did not have to create a separate division for my image. I just set it as the background for the table.It took less time to do the table than to use the division method.td.navlink{font-size: 28px;color: white}<table style="background: url('graybar.png');cell-spacing: 20px;text-align: center;z-index: 1;width: 105%;border-bottom: inset 4px teal"><tr><td class="navlink">Home</td><td class="navlink">About Us</td><td class="navlink">Add Your Site</td><td class="navlink">Forum</td><td class="navlink">Contact</td></tr></table>Here is What Both versions look like: The upper box with the lower blue border using the created using a table.the lower box without a border was created using the division method.OK, I hope that helps. If you can't see the image, please let me know.here's the link to the image file if you can't see it. You should see two menu bars with the navigation text for your bar on the page. The page should also be gray. If you see anything else, please let me know. The content is not mine or what I put on the page.http://proficiencymargin.tripod.com/Naviga...b._07_00.57.gif Link to comment Share on other sites More sharing options...
dsonesuk Posted February 7, 2011 Share Posted February 7, 2011 OR, just use typical menu setup with css, without the dreaded positioning, and tables. .nav{margin-top:125px;margin-left:-10px;margin-right:-5px;}.nav ul,.nav li{ /*Important befrore you start*/list-style:none; /*most important to remove default styling for list tags ul and li*/padding:0; /*remove default padding*/margin:0;; /*remove default margin*/}.nav li{float:left; /*float li element and content, side by side to each other*/}.nav li a{display:block; /*turn anchor into block element so you define area of height */height:45px; /*match height of image including shadow??????*/line-height:30px; /* adjust vertical alignment of text to allow for shadow*/padding:0 14px; /*set padding ethier side of anchor*/background-image:url('mainpage/navbar.png');background-repeat:repeat-x;text-decoration:none; /*remove underline;*/color:#fff; /*set color of text*/} Link to comment Share on other sites More sharing options...
Krewe Posted February 7, 2011 Author Share Posted February 7, 2011 Thats Dsone and Moah, I did what Dson told me too, purely, because that is what I have heard from other members.It worked in a sense that the image did go as the background of each word, BUT, I still can't seem to figure out how to center the links.Any help with that?http://i1000.photobucket.com/albums/af130/krewd/lalasite.jpgThanks!~krewe Link to comment Share on other sites More sharing options...
dsonesuk Posted February 7, 2011 Share Posted February 7, 2011 center? or vertical align, I think you mean vertical align, as the text uses equal amount of padding each side. Adjust line height, until text is v aligned to requirements. Link to comment Share on other sites More sharing options...
Krewe Posted February 7, 2011 Author Share Posted February 7, 2011 Sorry, not what I meant :X I worded that horribly.What I meant was, how do I move the links to the center of the page. Where I get the textboxes to be aligned in the center of the page.Hopefully that made sense.Ex:*here now* *where I want to be* (This seems like a real stupid question to me, but I have tried a lot to get it centered.)Thanks!~Krewe Link to comment Share on other sites More sharing options...
Nico03 Posted February 7, 2011 Share Posted February 7, 2011 Sorry, not what I meant :X I worded that horribly.What I meant was, how do I move the links to the center of the page. Where I get the textboxes to be aligned in the center of the page.Hopefully that made sense.Ex:*here now**where I want to be* (This seems like a real stupid question to me, but I have tried a lot to get it centered.)Thanks!~Krewe Hi, tried thetext-align:center; ? Link to comment Share on other sites More sharing options...
dsonesuk Posted February 7, 2011 Share Posted February 7, 2011 text-align center alone, won't affect floated elements, try .nav{margin-top:125px;margin-left:-10px;margin-right:-5px;text-align:center; /* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX newly added by dsonesuk*/}.nav ul,.nav li{ /*Important befrore you start*/list-style:none; /*important remove default button styling for list tags ul and li*/padding:0; /*remove default padding*/margin:0;; /*remove default margin*/}.nav ul {position:relative; left:50%;float:left; } /*XXXXXXXXXXXXXXXXXXXXXXXXXXX newly added by dsonesuk*/.nav li{float:left; /*float li element and content, side by side to each other*/position:relative; /* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX newly added by dsonesuk*/right:50%; /* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX newly added by dsonesuk*/}.nav li a{display:block; /*turn anchor into block element so you define area of height */height:50px; /*match height of image including shadow??????*/line-height:35px; /* adjust vertical alignment of text to allow for shadow*/padding:0 14px; /*set padding ethier side of anchor*/background-image:url('navbar.png');background-repeat:repeat-x;text-decoration:none; /*remove underline;*/color:#fff; /*set color of text*/} Link to comment Share on other sites More sharing options...
Krewe Posted February 7, 2011 Author Share Posted February 7, 2011 Ok I'll try that when i get home thanks both of you.And Nico, yes I did try that. As Dsone said, it didn't affect it at all. Link to comment Share on other sites More sharing options...
Ingolme Posted February 7, 2011 Share Posted February 7, 2011 There are two ways I'd do it: Make the <li> elements inline blocks Float them left and give them a width of 16.6% Link to comment Share on other sites More sharing options...
Krewe Posted February 7, 2011 Author Share Posted February 7, 2011 Dsone thank you! It worked. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.