dukxud Posted July 16, 2009 Share Posted July 16, 2009 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Fading Earth</title> <link rel="stylesheet" href="style.css" type="text/css" charset="utf-8" /> <style type="text/css"><!--.style1 {color: #FFFFFF}--> </style></head><body> <div id="wrapper"><div id="navbar" > <ul> <div id="home2"> <li><a href="http://www.freewebsitetemplates.com">Home</a></li></div> <div id="guides2"> <li><a href="http://www.freewebsitetemplates.com">Step-by-Step Guides </a></li> </div> <li><a href="http://www.freewebsitetemplates.com">HHO Generator </a></li> <li><a href="http://www.freewebsitetemplates.com">Product List</a></li> </ul> </div> <div id="spacer"></div> <div id="left"> <div id="logo"> <h1>Fading Earth </h1> <p>Saving the world starts here!! </p> </div> <div id="nav"> <ul> <div id="home"> <li><a href="http://www.fadingearth/home.com">Home</a></li> </div> <div id="guides"> <li><a href="http://www.fadingearth.com/guides">Step by Step Guides </a></li> </div> <div id="info"> <li><a href="http://www.fadingearth.com/info">Information</a></li> </div> <div id="products"> <li><a href="http://www.fadingearth.com/products">Products</a></li> </div> <div id="newsnav"> <li><a href="http://www.fadingearth.com/news">News</a></li> </div> <div id="photo"> <li><a href="http://www.fadingearth.com/photo">Photo Gallery </a></li> </div> <div id="contact"> <li><a href="Fadingearth.com/contact">Contact us</a></li> </div> </ul> </div> <div id="news"> <h2>Latest News</h2> <h3>02/03/09</h3> <p>Subscribe to our newsletter and stay up to date on free energy news! Subscribe <a href="www.infiniteenergysolutions.com/subscribe">here.</a></p> <div class="hr-dots"> </div> <h3>01/14/09</h3> <p>Support@fadingearth.com</p> </div> <div id="support"> <p></p> </div> </div> <div id="right"> <h2>Welcome to Fading Earth!</h2> <div id="welcome"> <p align="left">. </p> </div> <h3>Featured Products </h3> <div id="profile"> <div id="corp"> <div id="corp-img">Solar Panel </div> <p align="left">Some of the best things that you can do are things that don't actually cost you anything in the first place. There are many things that people do around the house and in everyday life that waste energy. Click here to learn about ways to live green and Probably save some green while doin so. </p> </div> <div id="indu"> <div id="indu-img">HHO Generator </div> <p align="left">I currently have one of these bad boys that I built and installed in my truck. It's called a HHO generator and it uses water to increase my gas milage by over 20%. It took me about a day to build it and another to intall this easy money saver. Click <a href="www.infiniteenergysolutions.com/HHO">here</a> to see what I did. </p> </div> <div class="clear"> </div> <p class="more"> </p> </div> </div> <div class="clear"> </div> <div id="spacer"> </div> <div id="footer"> <div id="copyright"> <p>Powered by <br /> Copyright © 2009 FadingEarth.com All right reserved. </p> </div> <div id="footerline"></div> </div></div></body></html> can someone explain to me exactly why the <div> isn't making a box around the hyperlink in the progress bar {navbar} like it is on the navagation {nav} on the side? so i don't have to make a new whole new back ground picture everytime they go to a new page and i can just replace the background in the div? html, body, h1, h2, h3, h4, ul, li { margin: 0; padding: 0;}h1 img { display: block;}img { border: 0;}a { color: #464544;}a:hover { color: #FFA405;}.left { float: left;}.right { float: right;}.more { text-align: right;}.clear { clear: both;}body { background: #000000 url(images/earth.jpg) no-repeat; text-align: center; font: 11px verdana, arial, sans-serif; color: #000000; padding-bottom: 10px; padding-top: 31px;}/** nav**/#home { background: #2A2A2A 6px 7px url(images/home.jpg) no-repeat; }#guides { background: #2A2A2A 4px 7px url(images/guides.jpg) no-repeat; }#info { background: #2A2A2A 5px 7px url(images/info.jpg) no-repeat; }#products { background: #2A2A2A 5px 7px url(images/gear.jpg) no-repeat; } #newsnav { background: #2A2A2A 0px 9px url(images/news.jpg) no-repeat; } #photo { background: #2A2A2A 2px 8px url(images/photo.jpg) no-repeat; } #contact { background: #2A2A2A 7px 6px url(images/contact.jpg) no-repeat; } #navbar { background: #333333 url(images/navbar.jpg) no-repeat; font: 11px verdana, arial, sans-serif; color: #FFF; height: 2em; }#navbar li { list-style: none; float: left; background: #333333; padding-left: 25px; padding-right:0px; padding-top: 10px; padding-bottom: 10px;}#navbar a { color: #000; text-decoration: none; font-weight: bold; display: block;}#navbar a:hover { color: #FFFFFF;} #wrapper { text-align: left; margin: auto; width: 778px; position: relative; background: url(images/body_bg.gif) repeat-y; } /**layout**/#header { position: absolute; top: 0px; left: 243px; width: 526px; height: 273px; background: url(images/earth-at-night.jpg) no-repeat;}#left { float: left; width: 243px;}#logo { width: 244px; height: 152px; background: url(images/header_1.jpg) no-repeat; text-align: center; color: #595959;}#logo h1 { padding-top: 30px; font: 24px "arial narrow", arial, sans-serif;}#logo p { margin: 8px 25px 4px 25px; border-top: 1px solid #B8B8B8; border-bottom: 1px solid #B8B8B8; padding: 3px; letter-spacing: 0.2em; font-weight: bold;}/**sidenav**/#nav { background: url(images/nav_left.jpg) no-repeat;}#nav ul { margin-left: 9px; padding-left: 1px; padding-bottom: 29px; background: #2a2a2a bottom left url(images/nav_bot.jpg) no-repeat;}#nav li { list-style: none; font: 14px "arial narrow", arial, sans-serif; border-top: 1px solid #959595; background: 188px 10px url(images/arr_white.gif) no-repeat; padding: 7px 0 0 31px;}#nav a { color: #fff; text-decoration: none; border-left: 1px solid #959595; padding-left: 10px; display: block; width: 90%; padding: 2px 0 6px 8px;}#nav a:hover { text-decoration: underline}#nav .important { border: none; background: 188px 10px url(images/arr_orange.gif) no-repeat;}#nav .important a { color: #FFFFFF;}/**news**/#news { background: url(images/news_bg.jpg) repeat-y; padding-left: 37px; padding-right: 22px; padding-bottom: 3px; text-align: justify;}#news h2 { font-size: 12px;}#news h3, #news p { font-size: 11px; margin: 1em 8px 1em 0;}#news a { color: #000066; font-weight: bold; text-decoration: underline;}#news a:hover { color: #38301A;}#news .more { font-size: 9px;}#news .hr-dots { background: center url(images/dots.gif) repeat-x; height: 10px;}#support { background: url(images/support.jpg) no-repeat; padding: 1px; height: 97px; color: #1A1A18;}#support p { margin: 0.7em 2.6em;}#right { float: right; width: 490px; padding-right: 9px; padding-top: 20px;}#right h2 { font: 18px arial, sans-serif; color: #000066; border-bottom: 1px solid #C4AE7C; padding-bottom: 6px; margin-bottom: 1em;}#right h3 { font: 14px arial, sans-serif; color: #000066; border-bottom: 1px solid #C4AE7C; padding-bottom: 6px; margin-bottom: 1em; margin-top: 2em;}#welcome { margin-right: 20px;}#profile { margin-right: 16px;}#right .left { margin-right: 18px;}#right .more { font-weight: bold; font-size: 10px;}/**body**/#corp, #indu { float: left; width: 49%;}#corp { margin-right: 1%;}#corp-img, #indu-img { background: url(images/pic_2.jpg) no-repeat; width: 112px; height: 23px; float: left; margin-right: 18px; text-align: center; padding-top: 90px; font-size: 9px; font-weight: bold;}#indu-img { background: url(images/pic_3.jpg) no-repeat;}#spacer { height: 2em;}#footer { background: url(images/footer_bg.gif) repeat-y;}#copyright { text-align: center; padding: 22px 0px 30px 00px; font-size: 9px; color: #333333; font-weight: bold;}#footerline{ background: url(images/footerline.gif) no-repeat; height:10px; margin-top:0px; display:block; font-size:1px;} Link to comment Share on other sites More sharing options...
Ingolme Posted July 16, 2009 Share Posted July 16, 2009 If you want a <div> inside a <ul> element, you have to put it inside an <li> element. Nothing can go directly under a <ul> element except an <li> element.When your code isn't working right, pass it through the validator. Link to comment Share on other sites More sharing options...
dukxud Posted July 16, 2009 Author Share Posted July 16, 2009 If you want a <div> inside a <ul> element, you have to put it inside an <li> element. Nothing can go directly under a <ul> element except an <li> element.When your code isn't working right, pass it through the validator.thanks for the site, i'll have to try that from now on, but if what you say is true, then why does it work like that on the nav on the left side? i know i'm new at this but i'm not seeing the logic. Link to comment Share on other sites More sharing options...
DtD Posted July 16, 2009 Share Posted July 16, 2009 Also, in Opera you can right-click your and select Validate page and it will send it to the validator (not the url, the content so no login issues on dynamic pages) I would assume you could find an addon for Fire Fox users.~DtD Link to comment Share on other sites More sharing options...
dukxud Posted July 16, 2009 Author Share Posted July 16, 2009 so pretty much what your saying is that it is completely impossiable to make a div around each one of those links and that my only choice is to make a background picture for the whole {navbar} <div>? and that it is somehow glitching on the left {nav} and doing what i want it to do? even tho it tells me it's impossiable on the script check. Link to comment Share on other sites More sharing options...
Ingolme Posted July 16, 2009 Share Posted July 16, 2009 so pretty much what your saying is that it is completely impossiable to make a div around each one of those links and that my only choice is to make a background picture for the whole {navbar} <div>? and that it is somehow glitching on the left {nav} and doing what i want it to do? even tho it tells me it's impossiable on the script check.You can put a background on the <li> element iself.And if you need some of them to be different from other ones, you can give the <li> element a class name. Link to comment Share on other sites More sharing options...
dukxud Posted July 16, 2009 Author Share Posted July 16, 2009 ok look at the nav bar on fadingearth.com now that's what i've got on the home page but when you go away from the home page i want there to be a progressbar along the top with the same pictures. can i do that within the <li> or will the background i will edit only be as big as the text? and yes each diffrent link on the progress bar will need a diffrent picture Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.