Hi there,
Please check out : http://clarifysolutions.co.uk/certenroll/
The source is included below. This page is a test, so I can play about
with paddings, margins and layouts using divs as semantically
meaningless containers for bunch's of other elements - like everyone
keeps telling me to make my code standards compliant.
This request is not because I want a fix, but because I want to
UNDERSTAND why this is happening.
If you check the link you'll see that the content of that <Ptag just
keeps going and going and going along the line, however, as soon as I
put a space in there, the line breaks. But surely the <ptag should
adhere to the width of it's containing <div>? Can you help me
understand why this is happening.
As you can see I tried resorting to giving the paragraph a set width,
which the background-colour adheres to!!! so why not the text?
I am a beginner with this stuff and I am pulling my hair out as to why
this will not work. And it will not work in all browsers! in IE6 it
just looks broken completely.
IE7 and firefox its alright apart from the paragraph thing.
Can anyone help and MAKE ME UNDERSTAND!
Many many thanks if you can help
Gregory
Here is the source:
BEGIN 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=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css" title="somecss">
*
{
margin:0px;
padding:0px;
}
body
{
background-color:#000000;
margin:0px;
padding:5px;
}
#mainpageset
{
width:545px;
height:547px;
padding:2px;
background-image:url(abackground.gif);
}
#navbarmain
{
width:375px;
height:30px;
}
#navbarmain a
{
color:#FFFFFF;
}
..buttonbarmain
{
width:75px;
height:30px;
padding-top:5px;
float:left;
background-image:url(button.rest1.gif);
background-repeat:no-repeat;
text-align:center;
font-family:Geneva, Arial, Helvetica, sans-serif
}
..buttonbarmain:hover
{
background-image:url(button.active1.gif);
}
#adbarright
{
float:right;
text-align:center;
color:#000066;
border: solid #00CC66 1px;
width:160px;
height:545px;
margin-left:2px;
padding:0px 2px 0px 2px;
overflow:hidden;
}
..adbarimage
{
width:160px;
height:auto;
}
#mainpagecont
{
border:solid 1px #00CC66;
width:375px;
height:510px;
margin-top:5px;
text-align:center jeustify;
}
#maincontsometext
{
width:370px;
background-color:#993300;
height:400px;
padding:2px;
}
</style>
</head>
<body>
<div id="mainpagesetpos" align="center">
<div id="mainpageset" align="left">
<div id="adbarright">
<br />
<a href="#NULL">ADS!</a>
<br />
<div id="adbarimageset" align="center">
<img class="adbarimage" src="world_of_warcraft_050905.jpg" />
<img class="adbarimage" src="world_of_warcraft_050905.jpg" />
<img class="adbarimage" src="world_of_warcraft_050905.jpg" />
<img class="adbarimage" src="world_of_warcraft_050905.jpg" />
</div>
</div>
<div id="navbarmain">
<div class="buttonbarmain"><a href="#NULL">Home</a></div>
<div class="buttonbarmain"><a href="#NULL">News</a></div>
<div class="buttonbarmain"><a href="#NULL">Reviews</a></div>
<div class="buttonbarmain"><a href="#NULL">Discuss</a></div>
<div class="buttonbarmain"><a href="#NULL">Links</a></div>
</div>
<div id="mainpagecont">
<p
id="maincontsometext">xxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxv</
p>
</div>
</div>
</div>
</body>
</html>
END CODE
************************************************** ************************
