thescientist Posted December 4, 2010 Share Posted December 4, 2010 You are right. I do NOT need those extra features. I don't even know what all the modernizr plugin does, except for I was told to use it to allow IE to be able to read html5.But in the past 5 or so minutes I've remove the header and footer tags, and have replaced them with divs. CSS changed to respond to the html change.Now...I'm still stuck with the problem of centering my navigation menu items.what does the code look like presently? Link to comment Share on other sites More sharing options...
psionicsin Posted December 4, 2010 Author Share Posted December 4, 2010 HTML: <!DOCTYPE HTML><!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]--><!--[if IE 7 ]> <html lang="en" class="no-js ie7"> <![endif]--><!--[if IE 8 ]> <html lang="en" class="no-js ie8"> <![endif]--><!--[if IE 9 ]> <html lang="en" class="no-js ie9"> <![endif]--><!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]--><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Ruth Olson Photography</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="css/style.css"/> <script src="js/modernizr-1.6.min.js"></script></head><body><div id="header"> <div id="nav-container"> <ul id="navMenu"> <li><a href="#">Home</a></li> <li><a href="#">At A Glance</a></li> <li><a href="#">About</a></li> <li><a href="#">Gallery</a></li> <li><a href="#">Senior Challenge</a></li> <li><a href="#">Prices</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Log-In</a></li> </ul> </div></div> <div id="main-container"></div> <div id="footer"><p>Copyright © 2003 - <?php echo date('Y');?> Ruth Olson Photography</p></div><script type="text/javascript" src="js/jquery-1.4.4.min.js"></script><script type="text/javascript" src="js/js_script.js"></script></body></html> CSS: @charset "utf-8";/* CSS Styling */* { margin: 0; padding: 0;}/* Styling the body */body { margin: 0; font-size: 62.5%; font-family: Arial, Helvetica, sans-serif; background: url(images/body_bg.png) repeat-x top #c4c0bf;}/* Styling the Header */#header { margin: 0 auto; height: 397px; width: 884px; background: url(images/header_bg.jpg);}/* Styling the Footer */#footer { background: #3a3a3a; font-size: 12px; color: white; padding: 5px 0 10px 0; border-top: 2px solid #606060; text-align: center;}/* Styling the Navigation Menu */ul#navMenu { margin: 0; padding: 0; text-align: center; list-style: none;}ul#navMenu li{ display: block; width: 100px; float: left; margin-top: 48px;} Link to comment Share on other sites More sharing options...
thescientist Posted December 4, 2010 Share Posted December 4, 2010 I though you were going to get rid of all that hacky stuff? :)add this to your CSS: #nav-container{ margin: 0px auto; width: 800px;} Link to comment Share on other sites More sharing options...
psionicsin Posted December 4, 2010 Author Share Posted December 4, 2010 I though you were going to get rid of all that hacky stuff? :)add this to your CSS:#nav-container{ margin: 0px auto; width: 800px;} Yes, I'm editing the hacky stuff out lol.Hmm that didn't do anything...unless I need to remove some formatting elsewhere. Link to comment Share on other sites More sharing options...
thescientist Posted December 4, 2010 Share Posted December 4, 2010 try using underscores (_) instead of hyphen's (-) for the class namesedit: I thought you had a horizontal nav bar, but its looks vertical. on top of the name change, give nav container a width equal to the width of one of the <li>'s Link to comment Share on other sites More sharing options...
psionicsin Posted December 4, 2010 Author Share Posted December 4, 2010 try using underscores (_) instead of hyphen's (-) for the class namesedit: I thought you had a horizontal nav bar, but its looks vertical. on top of the name change, give nav container a width equal to the width of one of the <li>'sNOTE: It IS a horizontal nav bar. Or at least is supposed to be.Nada.Here's the latest HTML:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Ruth Olson Photography</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="css/style.css"/></head><body><div id="header"> <div id="nav_container"> <ul id="navMenu"> <li><a href="#">Home</a></li> <li><a href="#">At A Glance</a></li> <li><a href="#">About</a></li> <li><a href="#">Gallery</a></li> <li><a href="#">Senior Challenge</a></li> <li><a href="#">Prices</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Log-In</a></li> </ul> </div></div> <div id="main_container"></div> <div id="footer"><p>Copyright © 2003 - <?php echo date('Y');?> Ruth Olson Photography</p></div><script type="text/javascript" src="js/jquery-1.4.4.min.js"></script><script type="text/javascript" src="js/js_script.js"></script></body></html> Latest CSS: @charset "utf-8";/* CSS Styling */* { margin: 0; padding: 0;}/* Styling the body */body { margin: 0; font-size: 62.5%; font-family: Arial, Helvetica, sans-serif; background: url(images/body_bg.png) repeat-x top #c4c0bf;}/* Styling the Header */#header { margin: 0 auto; height: 397px; width: 884px; background: url(images/header_bg.jpg);}/* Styling the Footer */#footer { background: #3a3a3a; font-size: 12px; color: white; padding: 5px 0 10px 0; border-top: 2px solid #606060; text-align: center;}/* Styling the Navigation Menu */#nav_container { margin: 0px auto; width: 884px;}ul#navMenu { margin: 0px; padding: 0px; text-align: center; list-style: none;}ul#navMenu li a{ display: block; width: 100px; float: left; margin-top: 48px; text-decoration: none; color: white; font-weight: bold;} Link to comment Share on other sites More sharing options...
psionicsin Posted December 4, 2010 Author Share Posted December 4, 2010 So far this is what I'm getting. This is a screenshot directly out of Dreamweaver. Link to comment Share on other sites More sharing options...
thescientist Posted December 4, 2010 Share Posted December 4, 2010 ok, I threw your code into my text editor and fired it up. As I suspected, it was just a matter of some trial and error with element widths. For ul#navMenu li a change the width to 90px.For #nav_container change the width to 720px.btw, I like the look of it so far. :)edit: changed 70 to 90 Link to comment Share on other sites More sharing options...
thescientist Posted December 4, 2010 Share Posted December 4, 2010 So far this is what I'm getting. This is a screenshot directly out of Dreamweaver. oh! be aware, you should always be testing your work in a real, standards compliant browser like FF or Chrome. From there expand outward to test the others (starting with IE and working your way down the list) Link to comment Share on other sites More sharing options...
thescientist Posted December 4, 2010 Share Posted December 4, 2010 nm, getting ahead of myself Link to comment Share on other sites More sharing options...
psionicsin Posted December 4, 2010 Author Share Posted December 4, 2010 ok, I threw your code into my text editor and fired it up. As I suspected, it was just a matter of some trial and error with element widths. For ul#navMenu li a change the width to 70px.For #nav_container change the width to 720px.btw, I like the look of it so far. Ok why are 70px and 720px relavent numbers? Yes it did work, and centered them just fine, but I'm wondering why because that main graphic is 884px wide. And also the 70px made the "senior challenge" menu item into a two tiered word.Also, yes, I'm actually checking it back-to-back in FF, Chrome, and IE.And thanks. I'm FAR more of a designer than an actual coder, so each time I do this it ends up being a PITA for me and people like you lol. Link to comment Share on other sites More sharing options...
thescientist Posted December 4, 2010 Share Posted December 4, 2010 I meant 90px. 90 was the smallest value I could get where all the text was on one line. 90 * 8 = 720px. That's as wide as the nav menu needs to be. Link to comment Share on other sites More sharing options...
psionicsin Posted December 4, 2010 Author Share Posted December 4, 2010 Ok. One more question, and then I'm done for tonight.I just specified the dimensions for my main_container div, but it's currently sitting at the bottom of the header div. What do I need to add to my coding in order for the main_container div to sit 68px from the top of the browser screen? #main_container {height: 540px;width: 800px;margin-left: auto;margin-right: auto;} Link to comment Share on other sites More sharing options...
thescientist Posted December 4, 2010 Share Posted December 4, 2010 margin-top: 68px;in the vein of one of the great poster's round this part, "you're homework for tonight"... is to read up on the box model.http://www.w3schools.com/css/css_boxmodel.asplook good so far. keep up the good work. Link to comment Share on other sites More sharing options...
psionicsin Posted December 4, 2010 Author Share Posted December 4, 2010 margin-top: 68px;in the vein of one of the great poster's round this part, "you're homework for tonight"... is to read up on the box model.http://www.w3schools.com/css/css_boxmodel.asplook good so far. keep up the good work.Will definitely read up on that. Although adding "margin-top: 68px" just made that the distance between both divs now, instead of positioning it 68px form the top of the screen. Link to comment Share on other sites More sharing options...
thescientist Posted December 4, 2010 Share Posted December 4, 2010 sorry I mis-understood your request. Can you post what you have now? Link to comment Share on other sites More sharing options...
psionicsin Posted December 5, 2010 Author Share Posted December 5, 2010 sorry I understood your request. Can you post what you have now?HTML:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Ruth Olson Photography</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="css/style.css"/></head><body><div id="header"> <div id="nav_container"> <ul id="navMenu"> <li><a href="#">Home</a></li> <li><a href="#">At A Glance</a></li> <li><a href="#">About</a></li> <li><a href="#">Gallery</a></li> <li><a href="#">Senior Challenge</a></li> <li><a href="#">Prices</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Log-In</a></li> </ul> </div></div> <div id="main_container"></div> <div id="footer"><p>Copyright © 2003 - <?php echo date('Y');?> Ruth Olson Photography</p></div><script type="text/javascript" src="js/jquery-1.4.4.min.js"></script><script type="text/javascript" src="js/js_script.js"></script></body></html> CSS: @charset "utf-8";/* CSS Styling */* { margin: 0; padding: 0;}/* Styling the body */body { margin: 0; font-size: 62.5%; font-family: Arial, Helvetica, sans-serif; background: url(images/body_bg.png) repeat-x top #c4c0bf;}/* Styling the Header */#header { margin: 0 auto; height: 397px; width: 884px; background: url(images/header_bg.jpg);}/* Styling the Footer */#footer { background: #292929; font-size: 12px; color: white; padding: 5px 0 10px 0; border-top: 2px solid #606060; text-align: center;}/* Styling the Navigation Menu */#nav_container { margin: 0px auto; width: 720px;}ul#navMenu { margin: 0px; padding: 0px; text-align: center; list-style: none;}ul#navMenu li a{ display: block; width: 90px; float: left; margin-top: 48px; text-decoration: none; color: white; font-weight: bold; background: url(images/dark_bg.gif);}/* Styling the Main Content */#main_container { height: 540px; width: 800px; margin-top: 68px; margin-left: auto; margin-right: auto;} Link to comment Share on other sites More sharing options...
thescientist Posted December 5, 2010 Share Posted December 5, 2010 Ah, I see what's going on now. Just change the height of header to 68px. (unless there's a reason why it needs to be so tall). Link to comment Share on other sites More sharing options...
psionicsin Posted December 5, 2010 Author Share Posted December 5, 2010 Ah, I see what's going on now. Just change the height of header to 68px. (unless there's a reason why it needs to be so tall).There is. It's that tall because the graphic linked to the header has a rather large gradient on it. So to make sure I had all of the gradient, I had to have it that big.This is the actual graphic that's sitting in that space.Is this one of those times where positioning comes into play? Link to comment Share on other sites More sharing options...
thescientist Posted December 5, 2010 Share Posted December 5, 2010 if it's a gradient, then just make it the background image, and depending on if it's horizontal or vertical, you slice a piece of it is wide or as tall as you need and make the other dimension 1px. Then you just have it repeat-x (across) or repeat-y (down). If you need help, post the picture (and you're header for that matter) and we can work through it. Link to comment Share on other sites More sharing options...
psionicsin Posted December 5, 2010 Author Share Posted December 5, 2010 if it's a gradient, then just make it the background image, and depending on if it's horizontal or vertical, you slice a piece of it is wide or as tall as you need and make the other dimension 1px. Then you just have it repeat-x (across) or repeat-y (down). If you need help, post the picture (and you're header for that matter) and we can work through it.Haha I don't think you're understanding. That whole picture up above is the graphic that is sitting on top of the ALREADY background image applied 4px x tile.The only thing I can do to it is remove the name, but those bars and the gradient are embedded into the image. No way to separate them.Do me a huge favor and just download this package. You can see what is happening visually in one go without any misunderstandings. You don't have to send anything back, just take and look.Site Build Link to comment Share on other sites More sharing options...
thescientist Posted December 5, 2010 Share Posted December 5, 2010 hmm, maybe if you could give a live link instead. In the mean time, try this. Make a wrapper div to contain all the div's you have so far. Give it this as its CSS. #wrapper{ width: 884px; margin: 0px auto; background-image: url('path_to_image/image.jpg');} Put main_container in between header and footer. Link to comment Share on other sites More sharing options...
psionicsin Posted December 5, 2010 Author Share Posted December 5, 2010 hmm, maybe if you could give a live link instead.I'm confused by what you mean as a live link? I gave you a link that's hosted on our web server.In case you're computer isn't seeing the anchor, here's the full link:http://www.rutholsonphoto.com/Site%20Build.zip Link to comment Share on other sites More sharing options...
thescientist Posted December 5, 2010 Share Posted December 5, 2010 no, as in put it on a host somewhere. Not too many people here download files off of posts, no offense. It's pretty easy nowadays to find a free host just to throw some files up to share with people. Plus a lot of people here check in while at work, so they can't download stuff. I (and I think most people here prefer this way) like to use something like Firebug to work on people's sites in cases like this. Link to comment Share on other sites More sharing options...
psionicsin Posted December 5, 2010 Author Share Posted December 5, 2010 no, as in put it on a host somewhere. Not too many people here download files off of posts, no offense. It's pretty easy nowadays to find a free host just to throw some files up to share with people. Plus a lot of people here check in while at work, so they can't download stuff. I (and I think most people here prefer this way) like to use something like Firebug to work on people's sites in cases like this.Oh ok. Well then I am not sure how to get the files to you then. I tried using sendpsace, and then hosting on our actual server, so I'm out of ideas. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.