blacktears
09-25-2006, 10: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.
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.