CSS Forum

**silverglade** · 06:47 PM

hi, my form , when i load the page, pops out of its containing div, all the way to the top left of the wrapper div. if anyone could help me out that would be great. any help greatly appreciated. note how my form is inside the div tag #contactform. thanks. derek. here is my code.

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" />
<link href="footer.css" rel="stylesheet" type="text/css" />
<title>dr alexander home</title>
<style type="text/css">
body {
 margin: 0;
 padding: 0;
<!-- zeroing out for browsers -->
;   background-color: #5475AB;
}
#wrapper {
 background-image:url('docbackground3.jpg');
 background-repeat:no-repeat; 
 width: 800px;
 height: 700px;
 margin-right: auto;
 margin-left: auto;
 margin-top: 50px;
  }
 
 
 #doctext {
 
   margin-top:150px;
   margin-left: 500px;
   width:200px;
   color: blue;
   } 
 #navigation {
margin-top: 550px;
height: 50px;
width: 800px;
height: 50px;
padding:0;
} 
 
table.move, #navigation, #testtext, #caduceus , #doccontent, #doctext , #contactinfo, #contactform {
 position: absolute;
}   
table.move {
margin-left: 350px;
margin-top: 50px;
width: 300px;
}
table.move td {
font-size: small;
font-weight: bold;
color: blue;
 
}
#doccontent {
  margin-top: 250px;
  margin-left: 465px;
  height: 200px;
  width: 300px;
}  
#contactinfo {
  margin-top: 150px;
  margin-left: 250px;
  height: 100px;
  width: 200px;
  .style1 {
 color: #0066FF;
 font-weight: bold;
}
.style1 {
 color: #0066CC;
 font-weight: bold;
}
#contactform {
   margin-top: 120px;
   margin-left: 475px;
   width: 300px;
   height: 300px;
 
}   
</style>
 
 
</head><body> 
<div id="wrapper">
<table class="move" width="200" border="0">
  <tr>
    <td>104 E. 40th St.<br />
      Suite 508<br />
      New York, NY 01234</td>
    <td><p>Phone<br />
    Fax</p>
      </td>
    <td>123-123-1234<br />
      142-143-1423</td>
  </tr>
</table>
 
  <div id="contactinfo">
    <h2 align="center" class="style1">Contact Information</h2>
    <p>Address: 104 E 40th St<br />
      Suite 508<br />
      New York, NY 01234<br />
    123.123.1234<br />
  Fax:123.123.1234</p>
 </div>
 
 <div id="contactform">
    <form id="form1" name="form1" method="post" action="">
      <label>
 
        <p>Send us a message</p>
        <p>
          <textarea name="message" id="message" cols="45" rows="5"></textarea>
          </p>
        <p>Name
          <input type="text" name="name" id="name" />
          <br />
      Phone
      <input type="text" name="phone" id="phone" />
      <br />
          </p>
 
      </label>
      <label>
      Email     
        <input type="text" name="email" id="email" />
        <br />
        <br />
        <input type="submit" name="message2" id="message2" value="Submit" />
 
      </label>
    </form>
</div> <!-- end contactform -->
  <div id="navigation"><a href="home.html"><img src="home.jpg" width="159" height="40" border="0" /></a><a href="aboutus.html"><img src="about.jpg" width="199" height="40" border="0" /></a><a href="services.html"><img src="services.jpg" width="181" height="40" border="0" /></a><a href="contact.html"><img src="contact.jpg" width="261" height="40" border="0" /></a> </div>
 
  <div id="footer" align="center"> &copy; Derek Van Derven website design 2009</div>
 
 
 
 
</div> <!-- end wrapper div -->
</body>
</html>

**chrishirst** · 12-31-2008, 07:06 PM

link to the page needed.

**silverglade** · 12-31-2008, 07:16 PM

here is the page i am trying to make. the form pops out of the div.
the div is positioned to the right in that empty space. thanks. derek

http://derekvanderven.com/doctorsite2/contact.html

**chrishirst** · 12-31-2008, 07:44 PM

get rid of the position:absolute on every element.

**silverglade** · 12-31-2008, 08:17 PM

thank you. but now my page is messed up again. http://derekvanderven.com/doctorsite2/contact.html

the navigation shows way way down below, and wont move up. and the divs all move in relation to eachother now making it impossible for me to put 2 divs next to eachother, like the form, next to the address. please any help greatly appreciated.

**chrishirst** · 12-31-2008, 08:40 PM

You need to use the document flow rather a lot of unnecessary positioning, back in a few mins with a demo.

**silverglade** · 12-31-2008, 08:46 PM

cool thanks very much! the book i bought only uses absolute positioning, and it is "make your own website the RIGHT WAY" and i though finally i found a book that would teach me the right way. it did teach me tableless layouts, but i dont think it taught me to use divs properly as you saw what i did. ive found no book that teaches me the "right way". i always seem to have to ask on the forum . LOL

**chrishirst** · 12-31-2008, 09:16 PM

www.modtalk.co.uk/_site/demos/wmt/sg-contact/

No odd margins or absolute positioning, only the one element with any positioning at all and that could have been done with padding.
No jiggery-pokery needed for IE

and NO TABLES

**silverglade** · 09:53 PM

god chris. that was incredible. i understood some of your css/html. but some i didnt. like "clear" and margin: 0 0 3em etc. i think that is top, bottom and ? but anyway, thank you so much for showing me what PERFECT code looks like. its beautiful. what editor did you use to make it? the indenting is perfect. what do you use to make your webpages? i use dreamweaver code view, but my indenting is not perfect like yours. also, is there a book where i can learn the proper way to lay out pages like you can, perfectly? that teaches clear and float left, and when to use relative etc? WOW. thank you very much. i will be studying that page you made for a while. thanks. derek

also, basically, where/how did you learn to do this? i keep wasting money on bad books. thanks. derek

**chrishirst** · 01-01-2009, 11:23 AM

Not sure about being "perfect" code but hey

I use Dreamweaver MX (ver 6.0) in code view if I'm working on a structured site. It makes site management and synchronising between development site and live site easier, but if I just need to throw a couple of pages together EditPlus does perfectly well seeing as it has FTP capabilities as well. I don't need "visual" prompts for the layout other than a delimited sketch of where each "box" should be or a print of a photoshop design that I have "boxed" out with felt tips

Learning how to structure code for readability is a product of 20+ years of writing code, when you may have to go back to something that was written a year previously (or longer), having code that is readable is essential.

margin: 0 0 3em is a shorthand method of setting the values for the margin property.
The order is, as with all properties that apply to the "box", top right bottom left (clockwise from the top), it can also be property: [top & bottom] [right & left]. In the above case leaving off the left (last) value means it will be the same as the value applied to the right margin.
Once you understand and use the shorthand methods, it makes for cleaner and compact code.

Clearing and floats:
http://css.maxdesign.com.au/floatutorial/
http://www.smashingmagazine.com/2007...u-should-know/
I keep meaning to make a organised list (on-line) of all the tutorials and reference sites I have used over the years but there is always something more pressing to get done.

**silverglade** · 04:45 PM

cool thank you very much for that info and tutorials, and doing my page the right way. i tried to apply what you taught me to another page but was unable to do it, i was using relative positioning and floats. but when i viewed the page in the browser, everything popped all over the place. LOL.

im glad im using the same tool as you to make my code. dreamweaver. i will work on making it look as good as yours. its pleasant to look at. heh. anyway, i was also wondering, if there are any books that you used to learn to make pages without absolute positioning? the book i got "make your own website the right way" taught me to use absolute positioning only with overly simplified layouts , as well as a number of other books. i have trouble finding the relevant tutorials. like if i tried to duplicate the page you made, i couldnt do it. i dont think, even with that tutorial, but im not sure yet. . im not the smartest person. i was wondering if you used any books to help you get there? any book recommendations id be VERY please to hear from you about. or tips on how to find relevant tutorials. if not thats ok too. thanks very much i added to your talkupation and put you on my buddies list. also, did you learn anything from books, or did you do it all with tutorials?thank you. derek

**chrishirst** · 01-02-2009, 05:39 AM

absolute positioning for everything is fine provided you are only concerned with a fixed page size / screen resolution, and every element can be inside a single "wrapper" container.
Beyond that, the layout may as well use tables because it will be easier to control.

When I first started with HTML, tutorials were a bit thinner on the ground as the "Internet explosion" was only just starting.
One of the first places I found was Elated and I took apart some of the Page Kits to see how they worked. Then started playing with different things.
One of the best ways of learning ways of doing things is by looking at other peoples problems and the solutions others have offered, then see if there is a different way to handle it.
Places such as CSS Creator can be useful sources.

We were all "newbies" once and asking the same questions as you have, just that 11 - 12 years ago answers were harder to find.

On books. The only HTML one I have on my shelf is Sams HTML 4.0, not opened it for a fair while though

CSS structure and rules. Initially I used the DW visual editor to create rules then I edited them to see what happened. Now it gets pulled up as a "colour picker" only.

**silverglade** · 09:49 AM

thank you chris. i wish i started this earlier, im already 34. crud. anyway, at least i know html LOL

. im amazed that you learned mainly by the net and was able to find what you were looking for without books. but im going to follow exactly what you did or try to... so im first going to elated.com and going to dissect some of their layouts. then i will come back i guess to ask more when i have more knowledge under my belt. i did order another book "html utopia. designing web pages without tables" it only shows me how to make a few non fixed layouts, but only like 3. so i think your advice to take apart the elated pages was a better idea. well, i can only offer you painting advice here http://derekvanderven.com if you have any questions about painting, im the one to ask. haha. ok here i go,..im off to the elated site. thank you very much. ill be around this forum of course, just hopefully when i have learned more. thank you. derek

edit[ ok that was too hard LOL. im going back to w3schools css now.. ROFL. then ill try the dissecting page kits again. derek]

**silverglade** · 01-05-2009, 09:52 AM

i decided to make my #conactinfo div with the address a regular floated div and made the content regular instead of relative. now my form pops out of the #contactform div in firefox. any help greatly appreciated. here is the link to the messed up page.

http://derekvanderven.com/new_doctor_site/contact.html

and here is the code for the page. note the div that haves its form popping out is the #contactform div. .

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">
<link href="/_site/demos/wmt/sg-contact/include/footer.css" rel="stylesheet" type="text/css">
<title>dr alexander home</title>
<style type="text/css">
body {
 margin: 0;  /* <!-- clear for browsers -->*/
 padding: 0;
 background-color: #3E728E;  
  
}
#wrapper {
 background-image: url(docbackground3.jpg);
 background-repeat:no-repeat; 
 width: 800px;                   
 margin:50px auto 0;    /*<!-- top, (right left auto) , bottom zero centers the wrapper-->*/
}
#contactblock {
 width:100%;      
 height:560px;  /*<!-- encloses the contact info, before the navigation. down to just above navigation-->*/
}
   
 
#navigation {
 clear:both; /* code has no effect it appears */
 width:100%;
 height:50px;    /* somehow  this box gets magically pushed down to the bottom i dont know how */
 padding:0;
} 
#contactinfo {
 width:50%;          /* puts the box near center by its size compared to whole width*/
 float:right;     /*<!-- top 0, (right left 0) , bottom 5 -->  /* a margin of 5em bottom pushes down the form content */
 margin-top: 1em;
 margin-right: 0;
 margin-bottom: .5em;
 margin-left: 0;
 line-height: 50%;
 padding-top: 10px;
}
 
 
}
#contactform {
 width: 60%;   /* this box flows right under the contactinfo box naturally? */
 float:right;
 margin-top: 1.5em;  
}   
#contactform label {
 float:left;    /* floats inputs left, then pushes them 120 to the right*/
 width:120px;
}
/*#contactform input, #contactform textarea {
 clear:right;      
}*/
 
.style1 {color: #0099CC;
font-weight: bold;}
 
</style>
</head>
<body> 
<div id="wrapper">
<div id="contactblock">
  <div id="contactinfo">
    <h2 class="style1">Contact Information</h2>
    <p>Address: 104 E 40th St</p>
    <p>Suite 508</p>
    <p>New York, NY 01234</p>
    <p>123.123.1234</p>
   <p>Fax:123.123.1234</p>
   <p>&nbsp;</p>
  </div>
 
 <div id="contactform">
    <form id="form1" name="form1" method="post" action="">
  <div><label for="message">Send us a message</label><textarea name="message" id="message" cols="35" rows="5"></textarea></div>
  <div><label for="name">Name</label><input name="name" id="name" type="text"></div>
  <div><label for="phone">Phone</label><input name="phone" id="phone" type="text"></div>
  <div><label for="email">Email</label><input name="email" id="email" type="text"></div>
  <div><input name="message2" id="message2" value="Submit" type="submit"></div>
    </form>
</div> <!-- end contactform -->
</div> <!-- end of contentblock -->
  <div id="navigation"><a href="home.html"><img src="home.jpg" width="159" height="40" border="0" /></a><a href="aboutus.html"><img src="about.jpg" width="199" height="40" border="0" /></a><a href="services.html"><img src="services.jpg" width="181" height="40" border="0" /></a><a href="contact.html"><img src="contact.jpg" width="261" height="40" border="0" /></a></div>
   
  <div id="footer" > &copy; Derek Van Derven website design 2009</div>
</div> <!-- end wrapper div -->
</body></html>

**LadynRed** · 01-05-2009, 11:09 AM

Clear the float from the address block first, that'll push the form down below it where you'd like it. In this case, you can put a clear:both on #contactform.

The styling for #contactform is being ignored because you have a stray } in your css just above #contactform rules.

**silverglade** · 01-05-2009, 01:16 PM

that worked PERFECTLY ladynred. THANK YOU! i put you on my buddies list. it wouldnt let me give you talkupation. but thank you so much! if it werent for you and chrishirst, i wouldnt be learning at all. id be stuck. so thank you so much. i hope you have a great new year.

**LadynRed** · 01-05-2009, 03:16 PM

Thanks, you too