Jump to content

changing div id attribute causes problem


Recommended Posts

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: post-93978-0-58547500-1341556632_thumb.png 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: post-93978-0-43748600-1341557198_thumb.png 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

Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...