Krewe Posted February 8, 2011 Share Posted February 8, 2011 Hey All,Well I am almost done with my main page, until I learn PHP so I can get the login functionality I am hoping for :)Here is a link to what it looks like: http://i1000.photobucket.com/albums/af130/...nalmostdone.jpgHere is all my code-----------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="login" align="right"> <img src="mainpage/login.png" /> </div> <div class="nav" style="100%"> <ul> <li><a href="index.html">Home</a></li> <li><a href="about.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> <div class="news" align="center"> <img src="mainpage/news.png" alt="main new pic" /> </div></body></html> ---------------CSS CODE------------------ body{background-color:#b3b3b3; background-image:url('mainpage/gradient.png'); background-repeat:repeat-x; background-position:left top; padding-left:-5px; padding-right:-5px;}.nav {margin-top:-5px; margin-left:-10px; margin-right:-5px; text-align:center;}.nav ul, .nav li{list-style:none; padding:0; margin:0;}.nav ul{position:relative; left:50%; float:left;}.nav li{float:left; position:relative; right:50%;}.nav li a{display:block; height:0px; line-height:0px; padding:14px; background-image:url('mainpage/navbar.png'); background-repeat:repeat-x; text-decoration:none; color:#FFFFFF; font-family:"Lucida Sans Typewriter";}.nav li a:hover{background-image:url('mainpage/navbar2.png')}.news{margin-bottom:100px; margin-left:140px; margin-right:140px;}.login{margin-right:-5px;} Thanks Guys,~Krewe Link to comment Share on other sites More sharing options...
markfh11q Posted February 8, 2011 Share Posted February 8, 2011 Hi Krewe (into Mardi Gras?),Aesthetically, I think that the block in the middle of the page should be distinguished a little more from the background. Maybe make it another color and add a border, add some sort of shadow, etc.From a functionality standpoint, you could make the page a lot more flexible. There are plenty of tutorials for rounded corners using CSS and images (CSS3 is gaining support, be patient), which would allow you to scale your rounded boxes and allow re-usability. My repertoire doesn't include a method for doing this with the gradients you want to use, but I'm sure there's somebody out there who knows how.Also, you could easily convert your XHTML Transitional to XHTML Strict, just remove the ALIGN tags, move the functionality to CSS, and add the correct DOCTYPE tag. Your images will also all need ALT attributes. One question, what is the purpose of (style="100%") in the nav class DIV element?Good job otherwise, it should look good either way, but load speeds might be a problem as it is now (Speaking as a web design hobbyist with a turtle-slow connection). Link to comment Share on other sites More sharing options...
Krewe Posted February 8, 2011 Author Share Posted February 8, 2011 Hi Krewe (into Mardi Gras?),Aesthetically, I think that the block in the middle of the page should be distinguished a little more from the background. Maybe make it another color and add a border, add some sort of shadow, etc.From a functionality standpoint, you could make the page a lot more flexible. There are plenty of tutorials for rounded corners using CSS and images (CSS3 is gaining support, be patient), which would allow you to scale your rounded boxes and allow re-usability. My repertoire doesn't include a method for doing this with the gradients you want to use, but I'm sure there's somebody out there who knows how.Also, you could easily convert your XHTML Transitional to XHTML Strict, just remove the ALIGN tags, move the functionality to CSS, and add the correct DOCTYPE tag. Your images will also all need ALT attributes. One question, what is the purpose of (style="100%") in the nav class DIV element?Good job otherwise, it should look good either way, but load speeds might be a problem as it is now (Speaking as a web design hobbyist with a turtle-slow connection).You are the first person to get my name on any forum! :)And the style 100% i thought I took out :x so thanks for point that out.And The loading speed (for me) is fine the link on my post is just a screenshot of the site. as of now I have no host.Also, the block in the middle of the page I am trying to figure out how to move down. Might just have to use margins.And that is gonna be for news so it will stand out when I able able to use it ask such.Thanks~Krewe Link to comment Share on other sites More sharing options...
markfh11q Posted February 9, 2011 Share Posted February 9, 2011 With the way the code is now it would be easier to use padding-top to move the "news" image down.Also, loading speed on your local computer is much faster than if the files were hosted on a web server and you were loading them for the first time in your browser. I don't know the size of your images for the template but it's something to consider.Also, there's nothing like putting out, picking up, emptying, and cleaning 500 trashcans after Mardi Gras (at my old job). I got "Krewe" just fine. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.