...

View Full Version : problem with justifying text



blacktears
09-25-2006, 11:12 PM
I am trying to put text within each little box next to the images on the right hand side. I can do this fine but when it comes to constraining the text to a certain width in order to create a nice justify'd effect I just can't do it. I've done it before but this time it's not working for me. My original problem was that I couldn't get a nice padding around the text within the boxes to stop it from touching the borders. SO I thought of putting it in a separate list and then floating that over the top but then I still can't get the text to stick to a certain width. I have tried setting a width also..... :eek:

SCREENSHOT

http://www.rainstormphotography.co.uk/screenshot.jpg


CSS


body {

background: #000000;
color: white;


}

a {text-decoration: none;}
img {border: none;}


#wrap {

margin-top: 23px;
margin-left: -8px;
padding: 0px;
width: 1020px;
height: 547px;
background: #000000;



}

#wall {
margin-top: 0px;
margin-left: -1px;
padding: 0px;
background: #000;
color: #FFF;
width: 1020px;
height: 499px;
list-style: none;
position: absolute;
z-index: 0;

}

#wall li {
height:141px;
text-align: center;
line-height:50px;
}


#wall1 {background: url(images/wall1.jpg) no-repeat;}
#wall2 {background: url(images/wall2.jpg) no-repeat;}
#wall3 {background: url(images/wall3.jpg) no-repeat;}
#wall4 {background: url(images/wall4.jpg) no-repeat;}


#lightbulbs {

margin-top: 0px;
margin-left: 25px;
padding: 0px;
width: 345px;
height: 476px;
position: absolute;
background: url(images/lightbulbs.jpg);
z-index: 1;


}

#links {

margin-left: -50px;
margin-top; 0px;
background: transparent;
list-style: none;


}

#websites {

margin-top: 458px;
margin-left: 0px;
background: transparent;
position: absolute;
z-index: 2;
}

#galleries {

margin-top: 373px;
margin-left: 83px;
background: transparent;
position: absolute;
z-index: 3;
}

#cv {

margin-top: 170px;
margin-left: 140px;
background: transparent;
position: absolute;
z-index: 2;
}

#prose {

margin-top: 305px;
margin-left: 179px;
background: transparent;
position: absolute;
z-index: 2;
}


#contact {

margin-top: 423px;
margin-left: 191px;
background: transparent;
position: absolute;
z-index: 2;
}

#aboutme {

margin-top: 457px;
margin-left: 283px;
background: transparent;
position: absolute;
z-index: 2;
}

#rainstorm {

margin-top: 11px;
margin-left: 650px;
position: absolute;
z-index: 3;

}

#window {

margin-top: 59px;
margin-left: 456px;
background: url(images/window.gif) no-repeat;
height: 396px;
width: 513px;
position: absolute;
overflow: auto;
z-index: 4;

}


#text {

margin-top: 40px;
margin-left: 15px;
font-family: arial;
font-size: 9pt;
list-style: none;
width: 200px;
color: white;

}

#writing {

margin-top: 40px;
margin-left: 15px;
font-family: arial;
font-size: 9pt;
list-style: none;
width: 200px;
color: white;

}

#weblinks {

margin: 0px;
padding: 0px;
list-style: none;

}





#weblinks li.left {
float: left;
display: inline;
width: 213px;
height: 82px;
margin-top: 35px;


}



#weblinks li.right {

float: right;
display: inline;
width: 248px;
height: 82px;
margin-right: 10px;
margin-top: 35px;
color: white;
font-family: arial;
font-size: 9pt;
line-height: 20px;
}






#title {line-height: 60px; text-decoration: underline;}
#paragraph {padding-top: 20px;}


#box {

margin-top: 1px;
margin-left: 55px;
background: #4F6559;
height: 394px;
width: 400px;
position: absolute;
overflow: auto;
z-index: 6;




}

#rainstormcopyright {

margin-top: 5px;
margin-left: 477px;
position: absolute;
z-index: 5;



}

#mainimage {

margin-top: 38px;
margin-left: 42px;

}









HTML


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


<html>

<head>

<title>Rainstorm ~ Websites</title>

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

<meta name="author"
content="Becka Dawson" />
<meta http-equiv="content-type"
content="text/html; charset=uk-ansi" />
</head>

<body>
<div id="wrap">

<ul id="wall">

<li id="wall1"></li>
<li id="wall2"></li>
<li id="wall3"></li>
<li id="wall4"></li>

</ul>

<div id="lightbulbs">

<ul id="links">

<li id="websites"><a href="websites.html"><img src="images/websites.jpg"></a></li>
<li id="galleries"><a href="galleries.html"><img src="images/galleries.jpg"></a></li>
<li id="cv"><a href="cv.html"><img src="images/cv.jpg"></a></li>
<li id="prose"><a href="prose.html"><img src="images/prose.jpg"></a></li>
<li id="contact"><a href="mailto:shangri_la_gypsy@tiscali.co.uk"><img src="images/contact.jpg"></a></li>
<li id="aboutme"><a href="aboutme.html"><img src="images/aboutme.jpg"></a></li>

</ul>
</div>

<div id="rainstorm">

<a href="main.html"><img src="images/rainstorm.gif"></a>

</div>

<div id="window">



<ul id="weblinks">

<li class="left"><a href="http://www.katiefoxphotography.co.uk"><img src="images/katiefox.gif"></a></li>
<li class="right"><img src="images/boxfortext.gif"></li>
<li class="left"><a href="http://www.thekiddieskingdom.co.uk"><img src="images/kiddies.gif"></a></li>
<li class="right"><img src="images/boxfortext.gif"></li>
<li class="left"><a href="http://www.nigeldawson.co.uk"></a><img src="images/nigeldawson.gif"></li>
<li class="right"><img src="images/boxfortext.gif"></li>


</ul>

</div>



</div>

<img src="images/rainstormcopyright.gif" id="rainstormcopyright">


</body>
</html>


Cheers.

_Aerospace_Eng_
09-26-2006, 12:03 AM
Right and we are supposed to magically some how know where the images are at? Meaning we need a link.

blacktears
09-26-2006, 10:31 AM
Doesn't the screen shot help? Anyway here ya go:


http://http://www.rainstormphotography.co.uk/rainstorm/websites.html

Becka



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum