Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Jan 2006
    Posts
    111
    Thanks
    0
    Thanked 0 Times in 0 Posts

    problem with justifying text

    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.....

    SCREENSHOT




    CSS

    Code:
    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

    Code:
    <!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.

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Right and we are supposed to magically some how know where the images are at? Meaning we need a link.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    Regular Coder
    Join Date
    Jan 2006
    Posts
    111
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Doesn't the screen shot help? Anyway here ya go:


    http://http://www.rainstormphotograp.../websites.html

    Becka
    Last edited by blacktears; 09-26-2006 at 04:41 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •