businessman332211@hotmail.com Posted June 5, 2006 Share Posted June 5, 2006 (edited) Then entire layout is finished, and I was about to start working on the backend programming, but I ran into a problem, above is the html, below is the css, after that are notes about what's going on <!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=iso-8859-1" /><link rel="stylesheet" type="text/css" href="funnyemails.css" /><meta name="Description" content="If you have a funny email, feel free to put it into our database, to send to all the people signed up to recieve funny emails" /><meta name="Keywords" content="funny, emails, email, fowards, joke, video, song, poem, picture, yellow pages, services" /><meta name="author" content="A service of Yellow Pages Online" /><title>Funny Email Forwards</title></head><body><div id="header"><img src="images/logo.gif" /><br /><p id="headertext">The web's directory of funny Email forwards<br /><a href="http://www.yellowpagesservices.com" id="headerbelow" title="The Yellow Pages Services" target="_blank"><img src="images/ypol.gif" /></a></p></div><div id="containleftright"><div id="leftdiv"><h3>Add Something Funny:</h3><form name="submitinformation" id="submitinformation" action="post"><label for="type">What Type of Funny is it:</label><select name="type" id="type"><option>Video</option><option>Picture</option><option selected="selected">Joke</option><option>Song</option><option>Poem</option><option>Story</option></select><br /><label for="name">Name the Funny:</label><input name="name" id="name" type="text" maxlength="80" /><br /><label for="keywords"><a href="keywords.htm">Keywords:</a></label><input name="keywords" id="keywords" type="text" maxlength="80" /><br /><label for="file">Upload your file here:</label><input name="file" id="file" type="file" /><br /><input name="submit" id="submit" type="submit" value="Do It!" /></form></div><div id="middlediv"><p>OR</p></div><div id="rightdiv"><h3>Search For Something Funny:</h3><form name="search" id="search"><label for="searchfield">What would you like to search for?</label><input name="searchfield" id="searchfield" type="text" maxlength="60" /><br /><input name="search" id="search" type="submit" value="Do It!" /></form></div></div><div id="wrapupperbottom"><h3>Directory of Listings:</h3><div id="upperleft"><h3 id="specialheader1">VIDEOS</h3><ul><li>Link Number one will go here</li><li>Link Number two will go here</li><li>Link Number three will go here</li></ul></div><div id="uppermid"><h3 id="specialheader2">PICTURES</h3><ul><li>Link Number one will go here</li><li>Link Number two will go here</li><li>Link Number three will go here</li></ul></div><div id="upperright"><h3 id="specialheader3">JOKES</h3><ul><li>Link Number one will go here</li><li>Link Number two will go here</li><li>Link Number three will go here</li></ul></div><div id="lowerleft"><h3 id="specialheader1">SONG</h3><ul><li>Link Number one will go here</li><li>Link Number two will go here</li><li>Link Number three will go here</li></ul></div><div id="lowermid"><h3 id="specialheader2">POEM</h3><ul><li>Link Number one will go here</li><li>Link Number two will go here</li><li>Link Number three will go here</li></ul></div><div id="lowerright"><h3 id="specialheader3">STORY</h3><ul><li>Link Number one will go here</li><li>Link Number two will go here</li><li>Link Number three will go here</li></ul></div></body></html> body /* This part styles the body, and prepares it for the content */{margin-left:0px;margin-top:0px;margin-right:0px;margin-bottom:0px;font-family:Arial, Helvetica, sans-serif; /*this sets the font type*/font-size:15px; /*This sets the general setup of the text on the site*/}h3{font-weight:bold;text-decoration:underline;}img /* this removes borders around linked images */{border:none;}/*Everything in this section below here controls the form field boxes, this allows them to all be spaces properly and make them all look even from the form names */#type{margin-left:50px;}#name{margin-left:100px;}#keywords{margin-left:142px;}#file{margin-left:75px;}/* End working with form fields *//* Below starts working with the header, situating the text, and the images for the header, and getting it all aligned and set up properly */#header{padding-left:10px;padding-top:10px;}#headertext{padding-left:15px;text-indent:0px;margin-top:0px;margin-bottom:0px;padding-top:0px;padding-bottom:0px;font-weight:bold;}#headerbelow{padding-left:20px;}/* End header modification *//*Everything in the following sections lays the foundation for the main body set up. What happens here is I set the 3 main sections in the middle, below the header. I wrapped them in something, and put them all in a container, and working with all 3 I set them up to style correctly, and made it easier to make any types of modifications on any of the 3 elements in the containment div */#containleftright{padding:0px;width:1000px;margin-top:20px;margin-left:8px;}#leftdiv{float:left;margin-right:4px;}#middlediv{font-weight:bold;float:left;margin-right:80px;margin-top:30px;}#rightdiv{float:left;margin-top:4px;}/*end structuring main sections */\/* everything in this section is going to set up the way the stuff looks at the bottom, and how it is all organized. This whole part may seem confusing, what it does to wrap the entire section at the bottom in 1 div, then it has 6 different sections for new divs, I made it this way so someone could very easily add in more rows if necessary with only having to change around a few tag names, and working a little bit adding some to the css. This way also allows it to wrap around as it minimizes, it just adds more rows for people with smaller browser windows. */#wrapupperbottom{width:900px;}#upperleft{float:left;}#uppermid{float:left;}#upperright{float:left;}#lowerleft{float:left;}#lowermid{float:left;}#lowerright{float:left;}#specialheader1{background-color:#000099;color:#FFFFFF;text-decoration:none;font-size:1em;width:300px;}#specialheader2{background-color:#000099;color:#FFFFFF;text-decoration:none;font-size:1em;width:300px;}#specialheader3{background-color:#000099;color:#FFFFFF;text-decoration:none;font-size:1em;width:400px;}/* end bottom structuralization *//* This below here is goign to kill some of the obnoxious parts out of the lists, removing the bullets, pulling away the padding on the left hand side ex cetera. */li{list-style-type:none;margin-left:0px;padding-left:0px;}/* end the part with messing around with the lists */#bottom{clear:both;} Here is a url to the websiteWebsite HereNow the problem I am having the the footer at the bottom, the copyright information is at the bottom, great.But what is going wrong, is when I minimize the screen, everything works 100% like I anticipated except for the fact that the footer(copyright information), get's kicked up into the upper part, I don't understand why this is happenening, this layout is a little deeper than my other projects but most of the time it flows just fine with the rest of the page content. Edited June 5, 2006 by aspnetguy Link to comment Share on other sites More sharing options...
Kosher Kid Posted June 5, 2006 Share Posted June 5, 2006 i'm sorry, perhaps i'm missing something...i did not see any problems with the bottom copyright line but saw some real alignment problems within the body...what issue are you trying to resolve? Link to comment Share on other sites More sharing options...
businessman332211@hotmail.com Posted June 5, 2006 Author Share Posted June 5, 2006 I fixed it, but what alignment problems in the body, can you point those out so I can fix them. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now