Re: I'm having trouple with <p>s and <div>s

foul5town — Fri Jul 03, 2009 6:38 am

Author: foul5town

Posted: Fri Jul 03, 2009 6:38 am

Dude thanks a lot man that worked.

Re: I'm having trouple with <p>s and <div>s

sticks464 — Thu Jul 02, 2009 1:54 pm

Author: sticks464

Posted: Thu Jul 02, 2009 1:54 pm

Correct these errors and it will probably work correctly in IE (it is ok in Firefox).

Remove the blank line at the top of the code. There cannot be any space before the doctype or browsers go into quirks mode rendering code as they see fit.

You cannot put an h3 element inside a p element nor can you put a p inside an h3.

Using xhtml img tags must use the short tag closing method

Code:

Remove margin and padding defaults by using the '* hack'.

Code:

* {
padding:0;
margin:0;
}

I'm having trouple with <p>s and <div>s

foul5town — Thu Jul 02, 2009 11:51 am

Author: foul5town

Posted: Thu Jul 02, 2009 11:51 am

The layout consists of divs. The side bar has an <h3> heading, and the content has an <h3> heading. But when I look at the site, the two headings do not line up evenly. The "content" heading is dropped down one line (which is obvious since the <p> automatically does that), but the side bar heading is unaffected and stays where it's at...at the top of the div.

here is a link to the "test" site

The side bar is labled as "left"
And content is labled as "content"

here is the code for the page...and I highlighted the divs and the style codes. Thanks a lot in advance...

<!doctype html public "-//w3c//dtd xhtml 1.0 strict//en"
"http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd">

<html>
<head>
<title>layout 2</title>
<style type=text/css>

body {
background-color:white;
font-family:candara;
font-size:13px;
color:rgb(125,125,135)}

/*headings*/
h1,h2,h3,h4,h5,h6 {padding:0px;margin:0px}

/*links*/
a.menu {color:rgb(75,185,220);text-decoration:none}
a.menu:hover {color:rgb(115,215,255)}

/*layout*/
#container {width:700px;margin-left:auto;margin-right:auto}
#header {background-color:rgb(75,185,220);color:white;margin:0;border:0;padding:15px}
#headpic {border:0;margin:0;padding:0}
#menubar {background-color:white;margin:0;padding:3px;text-transform:uppercase;word-spacing:60px;text-align:center;font-weight:bold;font-size:23px}
#left {width:200px;padding:10px;margin:0;border:0;float:left;text-align:center}
#content {padding:10px;margin-left:200px;border:0}
#footer {background-color:white;font-size:8px;color:rgb(150,150,150);clear:left;padding:3px}

/*images*/
img.space {margin:25px}

</style>

</head>
<body>

<div id="container">
<div id="header">
<h1>layout number 2</h1></div>
<div id="headpic"><img src="http://www.foul5town.webs.com/plant.jpg"></div>
<div id="menubar"><a class="menu" href="http://www.google.com/">test</a> <a class="menu" href="http://www.google.com/">test</a> <a class="menu" href="http://www.google.com/">test</a> <a class="menu" href="http://www.google.com/">test</a> <a class="menu" href="http://www.google.com/">test</a> <a class="menu" href="http://www.google.com/">test</a></div>
<div id="left">
<p><h3>Side Bar</h3></p>
</div>
<div id="content">
<p><h3>Content</h3></p>
<p>
<h3>samples</h3>
</p>
<p><img class=space height=100 src="http://www.foul5town.webs.com/flower.jpg" width=100> <img class=space height=100 src="http://www.foul5town.webs.com/flower.jpg" width=100> <img class=space height=100 src="http://www.foul5town.webs.com/flower.jpg" width=100></p></div><div id="footer">copyright info 2009 </div></div>

</body>
</html>

HTML Help

Re: I'm having trouple with <p>s and <div>s

Re: I'm having trouple with <p>s and <div>s

I'm having trouple with <p>s and <div>s