PDA

View Full Version : order of html and css coding, and div position questions


silverglade
01-04-2009, 02:36 PM
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

<!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 (http://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/ (http://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="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 cum 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="<A href="http://www.elated.com/">ELATED</a">http://www.elated.com/">ELATED</a> &amp; <a href="<A href="http://www.pagekits.com/">PageKits.com</a></p">http://www.pagekits.com/">PageKits.com</a></p>
</div>
</div>
<!-- End Outer Container -->
</body>
</html>


and here is the CSS

/*
This is an Elated PageKit - www.elated.com (http://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
01-04-2009, 02:37 PM
i am also having a problem with a paragraph on this web page . and the "dr alexander" text.

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

i want the "dr alexander " (div id #doctext) to appear under the address. and the content paragraph to appear under the "Dr. Alexander" heading but i cant get it there. any help greatly appreciated. here is the code for the page. id REALLY appreciate it, ive spent an hour trying to get it there. thanks. derek ( the div id im trying to move is "#content" and #doctext. )

here is the code for the page.

<!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: 10em;/* floats it to the right first, then 75percent shrinks it.*/
margin:1.5em 0 5em; <!-- top 0, (right left 0) , bottom 5 --> /* a margin of 5em bottom pushes down the form content */
clear:both;
}
#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;
float: right;
height: 191px;
width: 109px;
margin-top: 7em;
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-right:2em;

}

</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>

silverglade
01-04-2009, 03:48 PM
nevermind i fixed the page so that it looks ok now, but i was wondering if someone could please look at the page and look at my code to review it for errors in form or bad code. any help greatly appreciated. i could not find any other way to position the "caduceus.jpg" other than absolute positioning. i used float for the rest. i still think it might be a newbie solution though. here is the link

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

and here is the code for the page

<!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>

coloeagle
01-04-2009, 04:24 PM
Not bad :) only a few errors in your code http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fderekvanderven.com%2Fnew_doctor_s ite%2Fhome.html

You should place all your css in an external style sheet and then call for it from each page. This will allow you to make site wide changes by working with only one page.

Place all css in one page
Save this page as a .css
In your web pages inside the head tags place the style call tag.<style type="text/css" media="screen" "pathto/nameofpage.css"</style>

silverglade
01-04-2009, 07:50 PM
wow thanks very much for that help! derek

coloeagle
01-04-2009, 09:26 PM
Hi Derek,

Just noticed I goofed on the above call tag.
Should be;
<link rel="stylesheet" type="text/css" media="screen" href="pathto/nameofpage.css" />Just goes to show what can happen when you get to typing to fast while thinking of something different :mrgreen: