CSS Forum

**silverglade** · 08:25 AM

hi, im learning from this html page and its css. i want to recreate it in 2 blank documents, but am unsure as to the order that it has to be typed. do i start with typing basic divs in the html, then style them, then add the content to the divs starting from top to bottom, then style them? or do i put one div at a time in the html, style it, add content, and style the content then move to the next div? any help greatly appreciated. thank you. derek. here is the code below that im trying to recreate the steps in. the html and the css after it. im also unsure when to add the top right image in the code.

here is the html for the page

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<!-- 
This is an Elated PageKit - www.elated.com. 
All artwork copyright (c) 1996-2008 Elated Communications Ltd.
By using this PageKit, you are agreeing to the Terms of Use available online at www.elated.com/usage/ 
-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tope</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<!-- Outer Container -->
<div id="container" class="homepage">
<!-- Header -->
<div id="page-header">
<!-- Site Title -->
<h1><a href="index.html">Site title here</a></h1>
<p>Introduce the site here with a little bit of copy</p>
<!-- Menu -->
<ul id="menu">
<li><a href="index.html">Homepage</a></li>
<li><a href="page.html">News</a></li>
<li><a href="page.html">Gallery</a></li>
<li><a href="page.html">Services</a></li>
<li><a href="page.html">Downloads</a></li>
<li><a href="page.html">Contact</a></li>
</ul>
<!-- End Menu -->
</div>
<!-- End Header -->
<!-- Top Image -->
<img id="main-image" src="http://www.webmaster-talk.com/images/palms-big.jpg" alt="Palm trees" style="height: 379px;" />
<!-- Page Body -->
<div id="page-body">
 
<!-- Content -->
<div id="main-content">
<p>Lorem ipsum dolor sit amet, con sectetuer adipiscing elit, sed diam nonnumy nibh eeuismod tempor inci dunt ut labore et dolore magna ali quam erat volupat. Ut wisi enim ad minim veniam, quis <a href="#">nostrud</a> exerci tation ullamcorper suscipt laboris nisl ut aliquip ex ea commodo consequat. Duis autem vel eum irure dolor in henderit in vulputate velit esse consequat.</p>
<p>Vel illum dolore eu feugiat nulla facilise at vero eos et accusam et ius to odio dignissim qui blandit prae sent luptatum zzril delenit aigue dous dolore et molestias exceptur sint occaecat cupidiata non simil pro vident tempor sunt in clulpa qui officia deserunt mollit anium ib est abor um et dolor fuga. Et harumd dereud facilis est er expedit distinct. Nam liber tempor *** soluta nobis eligend option congue nihil impediet doming id quod mazim placeat facer possim omnis voluptas assumenda est, omnis repellend.</p>
<p>Temporibud auteui quinusd et aur office debit aut tum rerum neccessit atib saepe eveniet ut er molestia non recusand. Itaque earud rerum hic ten tury sapient delectus au aut prefer zim endis dolorib asperiore repellat.</p>
</div>
<div id="sidebar">
<p>Lorem ipsum dolor sit amet, con sectetuer adipiscing elit, sed diam nonnumy nibh eeuismod tempor inci dunt ut labore et dolore magna ali quam erat volupat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipt laboris nisl ut aliquip ex ea commodo consequat. Duis autem vel eum irure dolor in henderit in vulputate velit esse consequat.<br /><a href="#">More</a></p>
<p>Lorem ipsum dolor sit amet, con sectetuer adipiscing elit, sed diam nonnumy nibh eeuismod tempor inci dunt ut labore et dolore magna ali quam erat volupat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipt laboris nisl ut aliquip ex ea commodo consequat. Duis autem vel eum irure dolor in henderit in vulputate velit esse consequat.<br /><a href="#">More</a></p>
</div>
<!-- End Content -->
<div class="clear">&nbsp;</div>
 
</div>
<!-- End Page Body -->
<div class="clear">&nbsp;</div>
 
<!-- Page Footer -->
<div id="page-footer">
<p>ELATED PageKits &copy; 1996-2008 <a href="

here is the CSS for the page

Code:

/*
This is an Elated PageKit - www.elated.com.
All artwork copyright (c) 1996-2008 Elated Communications Ltd.
By using this PageKit, you are agreeing to be bound by the
usage agreement available online at http://www.pagekits.com/usage/
*/
 
/* Page body style */
body
{
 margin: 0;
 padding: 0;
  color: #393b4a;
  background: #d4d5c5 url(images/pinstripe.png) repeat 0 0;
  font-family: Georgia, "Times New Roman", Times, serif;
 font-size: 0.85em;
  line-height: 1.3em;
}
 
/* Standard paragraph style */
p, ul
{
 margin: 0 0 1.4em 0;
}
 
/* Links */
a:link, a:active
{
  color: #2e5a8c;
 background-color: inherit;
}
a:visited
{
 color: #802f8c;
 background-color: inherit;
}
a:hover
{
  color: #000;
}
 
/* Headings */
h1, h2, h3
{
 font-weight: normal;
  color: #484743;
  padding-top: 0.8em;
}
h1
{
 font-size: 1.4em;
  line-height: 1.0em;
  margin: 0 0 15px 0;
}
h2
{
 font-size: 1.2em;
  line-height: 1.0em;
  margin: 0 0 10px 0;
}
h3
{
 font-weight: bold;
 font-size: 0.8em;
  margin: 0 0 10px 0;
}
 
/* Container for page */
#container
{
 position: relative;
 margin: 0 auto;
  padding: 0;
 width: 780px;
  background-color: #efedd9;
}
 
/* Page header area */
#page-header
{
  float: left;
  width: 180px;
  margin: 0;
  padding: 0 0 0 10px;
}
#page-header h1
{
  margin: 83px 0 15px 0;
  font-size: 3.5em;
  line-height: 0.85em;
  color: #000;
}
#page-header h1 a
{
  text-decoration: none;
  color: #000;
}
 
/* Menu */
ul#menu
{
  margin: 168px 0 0 0;
  padding: 0;
}
ul#menu li
{
  list-style-type: none;
  margin: 0;
  padding: 0;
}
#menu a:link, #menu a:visited
{
  color: #2e5a8c;
  text-decoration: none;
}
#menu a:hover
{
  color: #000;
}
 
/* Top image */
#main-image
{
  float: right;
  width: 560px;
}
 
/* Page body */
#page-body
{
  float: right;
  width: 560px;
  margin-top: 18px;
}
div.homepage #page-body
{
  float: right;
  width: 560px;
  margin-top: 40px;
}
 
/* Main content area */
#main-content
{
  float: left;
  width: 340px;
}
 
/* Sidebar area */
#sidebar
{
  float: right;
  width: 190px;
  padding: 2px 10px 0 0;
  font-size: 0.9em;
  line-height: 1.2em;
}
 
/* Standard images */
img
{
 border: none;
}
 
/* Page footer */
#page-footer
{
  margin: 10px 0 0 0;
 padding: 20px 0;
 background: transparent url(images/footer-rule.png) repeat-x 0 0;
}
 
#page-footer p
{
  margin-left: 220px;
}
/* Clearing element */
.clear
{
  position: relative; clear: both; height: 1px; line-height: 1px; font-size: 1px;
}

**silverglade** · 10:51 AM

i finally did this web page so that it looks right. i was wondering if anyone could look at it and review my code below for improper positioning or code. i have a feeling it is on the fly spaghetti code done by a newbie. i had no choice that i could see but to use absolute positioning on the "caduceus.jpg" div. i hope it is correct form. thank you. derek

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

here is the code, any help greatly appreciated.

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( docbackground.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:right; /* 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:45%;          /* puts the box near center by its size compared to whole width*/
 float:right;        /* floats it to the right first, then 75percent shrinks it.*/
 margin:5em 0 0;    /* top 0, (right left 0) , bottom 5 -->  /* a margin of 5em bottom pushes down the form content */
}
#contactinfo p {
 position:relative; /* pushes text to the right 8em relative to the contactinfo box. */
 left:5em;
 margin:0 0 .1em;     /* <!-- top 0, (right left  0) , bottom 1 space between lines-->*/
}
#content {
 width:50%;          /* puts the box near center by its size compared to whole width*/
 float:right;
 height: 7em;
 /* top 0, (right left 0) , bottom 5 -->  /* a margin of 5em bottom pushes down the form content */
    clear:both;
 margin-top: 0em;
 margin-right: 1em;
 margin-bottom: 0em;
 margin-left: 0;
}
#content p {
 position:relative; /* pushes text to the right 8em relative to the contactinfo box. */
  
 margin:0 0 .1em;     /* <!-- top 0, (right left  0) , bottom 1 space between lines-->*/
}
#caduceus {
 background-image: url( caduceus.png);
 background-repeat:no-repeat;
 position:absolute;
 height: 191px;
 width:  109px;
 margin-top: 5em;
 margin-left: 20em;  
}   
.style1 {
 color: #0066CC;
 font-weight: bold;
 text-align:center;
 font-size: xx-large;
}
#doctext {
 float:right;
 width: 30%;
 height: 1em;
 margin-top: 2em;
 margin-bottom:2em;
 margin-right:2em;
 clear:both;
}
 
</style>
</head>
<body> 
<div id="wrapper">
<div id="contactblock">
  <div id="contactinfo">
    
    <p>Address: 104 E 40th St Suite 508</p>
    <p>New York, NY 01234</p>
    <p>123.123.1234</p>
   <p>Fax:123.123.1234</p>
 </div>
<div id="caduceus"></div>
  <div class="style1 style2" id="doctext"> Dr. Alexander</div>
  <div id="content">Over two-thirds of Americans will at some point in their life suffer from an Infectious Disease. 
  Dr. Alexander has been treating and researching these diseases for 
over 20 years. His compassionate patient care and vast knowledge make him one of the most highly qualified 
doctors in New York City.
</div>
</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** · 10:59 AM

Everyone has their own methods for coding a page. I tend to 'wireframe' the code based on my design. I lay out the HTML structure with the divs and elements I need, then I work on the CSS.

The code on your site looks pretty decent, but I would make a div for the address block rather than using position:relative on all those <p>'s.

**silverglade** · 01-04-2009, 02:48 PM

awesome thanks very much ladynred. i will take that advice and work the same way i think. thank you for looking at my code. derek