Hi, I'm working through "PHP Solutions" by David Powers so some of you may recognize the code. But please ignore the fact that it's a PHP book that assumes you know what you're doing with HTML/CSS. My problem is with CSS. It's been several years since I've touched HTML and CSS, and when I did it was through Dreamweaver. I'm missing something basic about CSS, particularly how to position stuff on the screen. Which if I recall correctly is the reason I opted for Dreamweaver and tables those many years ago. What seems to be a simple change to me has an unexpected affect. My question is really a simple one but since I have no idea where the problem lies I'm going to drown you with code. In the code below you can see that CSS attributes for #maincontent and #uploadcontent are the same. My problem is this: Just above the <form ...> is a DIV with an ID attribute of id="maincontent". When I run the program i get this: I know it's tiny, but you can see the location of the upload image dialogue and you can explode it if you want. Now if I change I change the DIV ID from id="maincontent" to id="uploadcontent", I get this: Why? Below is the code and (i think) relevant CSS.
<?php include('./includes/title.inc.php'); ?><!DOCTYPE HTML><html><head><meta charset=utf-8"><title>Japan Journey<?php if (isset($title)) {echo "—{$title}";} ?></title><link href="styles/journey.css" rel="stylesheet" type="text/css" media="screen"></head> <body><div id="header"> <h1>Upload to Japan Journey</h1></div><div id="wrapper"> <?php include('./includes/menu.inc.php'); ?> <div id="maincontent"> <form action="" method="post" enctype="multipart/form-data" id="uploadImage"> <p> <label for="image">Upload image:</label> <input type="file" name="image" id="image"> </p> </form> </div> <?php include('./includes/footer.inc.php'); ?></div></body></html>
And the CSS
#wrapper {padding:90px 0 45px;background: #fff url(../images/fuji.jpg) top left no-repeat;width:900px;margin:0 auto;position:relative;border-left: 1px solid #A4C8D8;border-right: 1px solid #A4C8D8;min-height:490px;} #maincontent { margin: 0 10% 0 190px; min-width: 525px; max-width: 640px;} #uploadcontent { margin: 0 10% 0 190px; min-width: 525px; max-width: 640px; }
There is a reason I duplicated the maincontent css into the uploadcontent css. I just wanted to move the upload dialogue down a bit. But, I don't really care about that right now. I just trying to understand why changing the id causes the shift in the position of the upload dialogue. Thanks,David Morris P.S. As far as I can see, there is nothing else in the program or the CSS file that positions the upload dialogue on the screen, but here is the entire CSS file anyway.
/* Styles defined in the body remove any default margin or padding on the page.* Some browsers add margin, others add padding, so setting them both to zero means the page offset looks the same in all browsers.* The background rule sets the page background to white with the image of Mount Fuji in the top left.* The background image also contains the main page heading in both Japanese and English.* The text is set to a very dark gray, which is easier on the eyes than black.* The font-family applies to all text on the page, except where specifically overridden by other rules. */ body {margin: 0;padding: 0;color: #333;font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;overflow-y:scroll;background-color: #EAE2D7;} /* All margins are removed from h1 and h2 tags, except for the bottom margin, which is set to 10px.* The main font-family is reset to Verdana, which looks better for titles, and the color is reset to a dark blue.*/ h1, h2 { margin: 0 0 10px 0; font-family: Verdana, Arial, Helvetica, sans-serif; color: #036;} h2 { font-size: 140%;} /* Paragraphs have the left and top margins reduced to zero. The auto rule leaves the right margin untouched,* while the bottom margin is set to 1em. The default font size is reduced, and the spacing between lines increased* for greater readability. */ p { margin: 0 auto 1em 0; padding: 0 20px; font-size: 85%; line-height: 1.4;} /* Because the page heading "Japan Journey" is embedded in the background image, the page needs an HTML heading* that won't appear on screen. This makes the page more user-friendly to search engines and screen readers.* By setting the position as absolute with a top of minus 100px, the page heading is safely moved offscreen. */ #header { position: absolute; top: -100px;} /* The wrapper div wraps the rest of the page content and adds a 90px top margin so that it clears the "Japan Journey"* page title in the background image. */ #wrapper {padding:90px 0 45px;background: #fff url(../images/fuji.jpg) top left no-repeat;width:900px;margin:0 auto;position:relative;border-left: 1px solid #A4C8D8;border-right: 1px solid #A4C8D8;min-height:490px;} /* The navigation menu is contained in an absolutely positioned div 140px from the top of the page and 60px from the left margin. */ #nav { position: absolute; top: 140px; left: 60px; width: 90px;} /* Styles for the navigation menu. */ ul#nav { list-style: none; margin: 0; padding: 0;} #nav a { display: block; width: 100px; padding-left: 10px; margin: 3px 0; text-decoration: none; font-family: Geneva, Arial, Helvetica, sans-serif; font-variant: small-caps; font-weight: bold;} #nav a:link, #nav a:visited { border-left: #00425E solid 10px; color: #00425E;} #nav a:hover, #nav a:active { border-left-color: #fff; background-color: #00425E; color: #fff;} /* The here ID identifies the current page and applies a white stripe to the left as a visual indicator. */ a#here { border-left-color: #fff !important; background-color: transparent !important; color: #0074A5 !important;} /* The maincontent div has zero top and bottom margins. The right margin is 10% of page width to give breathing space on the right.* The left margin is set at 190px to make room for the navigation menu. Minimum and maximum widths are set to keep the layout flexible. */ #maincontent { margin: 0 10% 0 190px; min-width: 525px; max-width: 640px;} #uploadcontent { margin: 0 10% 0 190px; min-width: 525px; max-width: 640px; } /* Styles for links in the maincontent div. */ #maincontent a { font-weight: bold; text-decoration: none; padding: 2px 4px;} #maincontent a:link, #maincontent a:visited { color: #00425E; border-bottom: #00425E dashed 1px;} #maincontent a:hover, #maincontent a:active { color: #fff; background-color: #00425E; border-bottom: none;} /* The pictureWrapper div is for the random image on the front page. It floats to the right with a 20px right margin and a 10px left one. */ #pictureWrapper { float: right; margin: 0 20px 0 10px;} /* Border and background color for the random image. */ .picBorder { background-color: #fff; padding: 10px; border: #00425E solid 2px;} /* The caption on the front page is bold and centered. */ p#caption { margin: 0; padding: 3px 10px; font-weight: bold; text-align: center;} /* The footer needs to appear below anything that is floated, so clear: both is added to the rule. */ #footer {clear: both;background-color: #A4C8D8;color: #FFF;padding:12px;width:876px;position:absolute;bottom:0;} #footer p {margin-bottom:0;font-size: 90%;font-weight:bold;} /* Styles for the contact form. */ form { margin: 0 0 0 20px;} form h2 { color: #036; font-size: 80%; font-weight: bold; margin: 0 0 5px 10px;} form p { margin: 0 0 5px 0;} .formbox { width: 250px;} fieldset { border: none;} /* Setting display to block forces the label for each form element onto a line of its own. */ label { font-weight: bold; color: #036; display: block;} /* This needs to be overridden for the subscribe and interests labels, so display is reset to inline. */ #subscribe label, #interests label { display: inline; padding: 0 20px 0 3px;} #interests div { float: left;} /* The warning class makes the error messages on the feedback form bold and red. */ .warning { font-weight: bold; color: #f00;} /* Styles for the image gallery. */ #gallery { width: 525px;} #picCount { color:#00425E; font-weight:bold; } #thumbs { float: left; margin-top: 10px;} #thumbs td { text-align: center;} #thumbs img { border: none;display:block;} #thumbs a:link, #thumbs a:visited, #thumbs a:hover, #thumbs a:active { border: none; padding: 0;} #main_image { float: right; text-align: center; width: 350px;} #main_image p { color:#00425E; font-weight: bold; margin: 0; padding: 0;}
Thanks Again
