Can someone help me with an HTML problem?

I am making a website for my grandfather. My html is a little bit rusty. I have a left column with links, a header, footer, then the main section of the page. In the main section I have a picture to the left with text directly to the right. I have the text in a <P> then i used <BR CLEAR="all"> to stop the text wrap. I am happy with how this part is but when I started a new <P> it leaves a huge gap. I need 3 <P> all together and I have huge gaps in between. I am also using a CSS sheet. I want the content of each <P> to be just under one another. Can anyone help?

HTML...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"

"http://www.w3.org/TR/1998/REC-html40-19980424/loos...

<html>

<head>

<title>Concordia Cemetery</title>

<link rel="stylesheet" href="cemeterymain.css" type="text/css">

<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

</head>

<body id="body">

<div id="header">

<ul id="head">

<li id="ccl1">Concordia Cemetery</li>

<li id="ccl2">of Indianapolis Indiana INC</li>

<li id="ccl3">Serving Indianapolis since 1890</li>

<li id="ccl4">Beautiful, Peaceful, and Affordable</li>

</ul>

</div>

<div id="leftcol">

<ul id="links">

<li>Link</li>

<li>Link</li>

<li>Link</li>

</ul>

</div>

<div id="main">

<img id="pic1" src="entrance.jpg" Align="left">

<p id="copy1">Concordia Cemetery has been a traditional and revered place to memorialize

loved ones since 1870. For almost a century and a half, many members of the

same families have selected Concordia as a resting place near there forefathers.

As new families move into the area they continue the tradition of considering

Concordia as there own. <br>

<br>Centrally located on the Southside of Indianapolis, it

offers easy access to visitors and quiet tranquility in the mist the busy city.

<BR CLEAR="all">

</p>

<img id="pic2" src="pic2.jpg" Align="left">

<img id="pic3" src="pic3.jpg" Align="right">

<p id="copy2"> Mature trees and well maintained grounds give each section a unique setting.

Your preferred selection will not require a premium since all grave sites are priced

the same. <br><br>Michael Kallio, who has served as manager for more than 25 years, will

provide professional and sensitive consultation to all who inquire.All faiths, races and

ethnic heritages are welcome.

<BR CLEAR="all">

</p>

<p id="copy3">Concordia's continued service during its second century and beyond is guaranteed by

its conservatively managed Perpetual Care Fund.<br><br> Concordia is organized as a Not-For-Profit

Corporation affiliated with area churches.

</p>

</div>

<div id="footer">

<p>

2706 S. Meridian Street

<br>

Indianapolis, IN 46225

<br>

Phone (317)786-7733

</p>

</div>

</body>

</html>

CSS...

#leftcol{

float: left;

width: 150px;

height:500px;

padding: 10px;

background: rgb(204,255,204);

}

#header{

width: 100%;

padding: 10px;

background: rgb(51,102,255);

}

#main{

padding-top: 10px;

padding-bottom: 0px;

background: rgb(153,204,255);

}

#body{ margin:0px

}

#links{

list-style-type:none;

padding:0px;

margin:0px;

text-align:center

}

#head{

list-style-type:none;

padding:0px;

margin-left: 250px;

text-align:left;

color: white

}

#footer{ text-align: center;

background: rgb(51,102,255);

margin-top: 5px;

}

#copy1{

padding-left: 500px;

padding-right: 15px;

font-family: Arial;

font-size: 10pt

}

#copy2{ padding-left: 500px;

padding-right: 220px;

font-family: Arial;

font-size: 10pt;

}

#copy3{ padding-left: 175px;

padding-right: 220px;

font-family: Arial;

font-size: 10pt

}

#ccl1{

font-size: 20pt;

font-family: Old English Text MT

}

#ccl2{

font-size: 13pt;

font-family: Arial

}

#ccl3{

font-size: 11pt;

font-family: Arial

}

#ccl4{

font-size: 16pt;

font-family: Arial;

font-weight: bold

}

#pic1{ height: 195px;

width: 290px

}

#pic2{ height: 195px;

width: 290px;

margin-left: 175px;

margin-bottom: 550px

}

#pic3{ height: 225px;

width: 185px;

margin-right: 10px;

margin-bottom: 550px

}

2 Answers

Relevance
  • Anonymous
    1 decade ago
    Favorite Answer

    Hard to set this for you since you are using relative paths to images and gave no online site link for page. Your image tag is incorrect as you need to use the width/height attributes, too. ALWAYS tell browsers how you want your page parsed.

    "p" tags provide spaces above/below the tags soI am not sure what you are trying to achieve. The <br clear="all"> is not required here.Just adds another line space at that point before clearing.

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

    <html><head>

    <title>Concordia Cemetery</title>

    <!-- <link rel="stylesheet" href="cemeterymain.css" type="text/css"> -->

    <meta name="created" content="Thu, 12 Nov 2009 03:29:53 GMT">

    <meta http-equiv="content-type" content="text/html;charset=utf-8">

    <meta name="description" content="">

    <meta name="keywords" content="">

    <style type="type/css">

    * { margin:0; padding: 0; border: 0; }

    #body {

    }

    #leftcol {

    float: left;

    width: 150px;

    height: 500px;

    padding: 10px;

    background: rgb(204,255,204);

    }

    #header {

    width: 100%;

    padding: 10px;

    background: rgb(51,102,255);

    }

    #main {

    padding-top: 10px;

    background: rgb(153,204,255);

    }

    #links {

    list-style-type: none;

    text-align: center;

    }

    #head {

    list-style-type: none;

    margin-left: 250px;

    text-align: left;

    color: #fff;

    }

    #footer {

    text-align: center;

    background: rgb(51,102,255);

    margin-top: 5px;

    }

    #copy1 {

    padding-left: 500px;

    padding-right: 15px;

    font-family: Arial;

    font-size: 10pt

    }

    #copy2 {

    padding-left: 500px;

    padding-right: 220px;

    font-family: Arial;

    font-size: 10pt;

    }

    #copy3 {

    padding-left: 175px;

    padding-right: 220px;

    font-family: Arial;

    font-size: 10pt

    }

    #ccl1 {

    font-size: 20pt;

    font-family: 'Old English Text MT';

    }

    #ccl2 {

    font-size: 13pt;

    font-family: Arial;

    }

    #ccl3 {

    font-size: 11pt;

    font-family: Arial;

    }

    #ccl4 {

    font-size: 16pt;

    font-family: Arial;

    font-weight: bold;

    }

    #pic1 {

    height: 195px;

    width: 290px;

    }

    #pic2 {

    height: 195px;

    width: 290px;

    margin-left: 175px;

    margin-bottom: 550px;

    }

    #pic3 {

    height: 225px;

    width: 185px;

    margin-right: 10px;

    margin-bottom: 550px;

    }

    </style>

    </head>

    <body id="body">

    <div id="header">

    <ul id="head">

    <li id="ccl1">Concordia Cemetery</li>

    <li id="ccl2">of Indianapolis Indiana INC</li>

    <li id="ccl3">Serving Indianapolis since 1890</li>

    <li id="ccl4">Beautiful, Peaceful, and Affordable</li>

    </ul>

    </div>

    <div id="leftcol">

    <ul id="links">

    <li>Link</li>

    <li>Link</li>

    <li>Link</li>

    </ul>

    </div>

    <div id="main">

    <p><img id="pic1" src="entrance.jpg" align="left" alt="Entrance"></p>

    <p id="copy1">Concordia Cemetery has been a traditional and revered place to memorialize loved ones since 1870. For almost a century and a half, many members of the same families have selected Concordia as a resting place near there forefathers. As new families move into the area they continue the tradition of considering Concordia as there own.<br><br>Centrally located on the Southside of Indianapolis, it offers easy access to visitors and quiet tranquility in the mist the busy city.</p>

    <p><img id="pic2" src="pic2.jpg" align="left" alt="Pic2"></p>

    <p><img id="pic3" src="pic3.jpg" align="right" alt="Pic3"></p>

    <p id="copy2">Mature trees and well maintained grounds give each section a unique setting. Your preferred selection will not require a premium since all grave sites are priced the same. <br><br>Michael Kallio, who has served as manager for more than 25 years, will provide professional and sensitive consultation to all who inquire.All faiths, races and ethnic heritages are welcome.</p>

    <p id="copy3">Concordia's continued service during its second century and beyond is guaranteed by its conservatively managed Perpetual Care Fund.<br><br>Concordia is organized as a Not-For-Profit Corporation affiliated with area churches.</p>

    </div>

    <div id="footer">

    <p>2706 S. Meridian Street<br>Indianapolis, IN 46225<br>Phone (317)786-7733</p>

    </div>

    </body></html>

    Ron

  • Anonymous
    4 years ago

    it may be so ordinary as a browser placing - im not too accustomed to mac/safari yet via fact your loading the report out of your hard stress it relatively is treating it like each previous form of text cloth record and showing you the text cloth as adversarial to rendering it as an internet site. in case you cant locate such an determination on your browser settings, do you have get admission to to a pair webspace? (yahoo provides freebie area) - see how your browser acts once you get admission to it on line. The code itself is definately ok.

Still have questions? Get your answers by asking now.