treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Forums

Illustration by Nick Sirotich

Text is going outside and I don't know why

  • brianatlarge
    Permalink to comment #
    Here's the site: http://stuckpixelstudio.com/clients/pay ... clips.html

    On the last item, the text is going outside the box that is containing it. I have that text in a span so does that have anything to do with it?

    HTML:

    	<body>
    		<div class=\"header\"></div>
    		<div class=\"navbar\">
    			<ul id=\"nav\">
    				<li><a href=\"../index.html\">Home</a></li>
    				<li><a href=\"index.html\">Products</a>
    					<ul>
    						<li><a href=\"flow_restrictors.html\">Flow Restrictors</a></li>
    						<li><a href=\"drain_saddles.html\">Drain Saddles</a></li>
    						<li><a href=\"mounting_clips.html\">Mounting Clips</a></li>
    						<li><a href=\"automatic_shutoff.html\">Automatic Shut Off Valves</a></li>
    						<li><a href=\"accessories.html\">Accessories</a></li>
    						<li><a href=\"membrane_housings.html\">Membrane Housings</a></li>
    					</ul>
    					<li><a href=\"../about.html\">About</a></li>
    					<li><a href=\"../contact.html\">Contact</a></li>
    				</li>
    			</ul>
    		</div>
    		<div class=\"maindescription\"><h1>Mounting Clips</h1><br>
    			Polypropylene material. Standard white. Also available in black.<br><br>
    		</div>
    		<div class=\"productbox\">
    			<a href=\"#\"><img class=\"product\" src=\"images/ppc-202-thumb.jpg\" alt=\"\"></a><span class=\"description\"><b>PPC-202</b><br> Single Super clip.   Extra strong clip that provides very firm support for membrane housing.  Requires strong hand to mount housing.   Fits 2.375\" cylinder. 
    			</span>
    		</div>
    		<div class=\"enlarge\"><a href=\"#\">(enlarge)</a></div>
    		<div class=\"productbox\">
    			<a href=\"#\"><img class=\"product\" src=\"images/ppc-204-thumb.jpg\" alt=\"\"></a><span class=\"description\"><b>PPC-204</b><br>  Single clip.   Mounts water saver shut off valve or an inline filter to a flat surface.   Fits 1.91\" OD cylinder.
    			</span>
    		</div>
    		<div class=\"enlarge\"><a href=\"#\">(enlarge)</a></div>
    		<div class=\"productbox\">
    			<a href=\"#\"><img class=\"product\" src=\"images/ppc-212-thumb.jpg\" alt=\"\"></a><span class=\"description\"><b>PPC-212</b><br>Single clip.  Standard clip for mounting membrane housings.  Provides firm support as well as easy placement of the membrane housing.  Two holes for 1/4\" tubing.  Fits 2.375\" cylinder.
    			</span>
    		</div>
    		<div class=\"enlarge\"><a href=\"#\">(enlarge)</a></div>
    		
    		<br>
    		<div id=\"footer\">
    			<span id=\"footer_text\">
    				&copy; Copyright 2008 Payne Industries<br/>
    				All Rights Reserved<br/>
    			</span>
    		</div>
    	</body>


    CSS:

    body {
    margin:0px; padding:0px;
    font-family:Helvetica, Arial, sans-serif;
    }

    .header {
    background:url(images/header.jpg);
    width:1000px;
    height:200px;
    min-height:200px;
    margin: 0px;
    padding:0px;
    }

    .navbar {
    background:url(images/navbar.jpg) repeat-x;
    min-height:21px;
    height:21px;
    color:#ffffff;
    }

    .waterdrop {
    background:url(images/test.jpg);
    width:1000px;
    min-height:439px;
    height:439px;

    }

    .hometext {
    position:absolute;
    top:350px;
    left:400px;
    width:586px;
    font-size:22px;
    }

    .contactimage {
    background:url(images/contact.jpg);
    min-height:685px;
    height:685px;
    width:733px;
    color:#ffffff;
    }

    .contactaddress {position:absolute;
    top:250px;
    left:100px;
    }

    .contact {
    color:#ffffff;
    margin-left:100px;
    padding: 30px 0px 0px 0px;
    }

    h1, h2 {display:inline;}

    .column1 { float:left; width:250px; margin-right:30px; margin-left:70px;}
    .column2 { float:right; width:282px; color:#000000;}

    .content {
    background:#cccccc;
    width:500px;
    margin: 0px auto;
    padding: 10px;
    }

    .maindescription {
    width: 750px;
    margin-left:50px;
    margin-top:20px;
    }

    .productbox {
    background-color:#f8f8f8;
    height:150px;
    min-height:150px;
    width:750px;
    border-style:solid;
    border-width:1px;
    margin-left:50px;
    margin-top:10px;
    margin-bottom:0px;
    padding: 0px 10px 0px 0px;
    }

    img.product {position:relative;
    top:6px;
    left:7px;
    float:left;
    }

    .description {
    position:relative;
    top:6px;
    left:22px;
    }

    .enlarge {
    margin-left:105px;
    margin-top:-17px;
    font-size:12px;
    }





    a {color:#333333;
    text-decoration:none;
    }

    #nav, #nav ul{
    margin:0px;
    padding:4px 0px 0px 0px; 
    list-style-type:none;
    list-style-position:outside;
    position:relative;
    margin-top:-2px;
    margin-right:10px;
    font-size:12px;
    text-transform:uppercase;
    z-index:1;
    }

    #nav a{
    display:block;
    padding:0px 5px;
    color:#fff;
    text-decoration:none;
    background-color:#b31212;
    }

    #nav a:hover{
    background-color:#fff;
    color:#333;
    }

    #nav li{
    float:left;
    position:relative;
    }

    #nav ul {
    position:absolute;
    display:none;
    width:12em;
    top:1.1em;
    }

    #nav li ul a{
    width:12em;
    height:auto;
    float:left;
    }

    #nav ul ul{
    top:auto;
    }	


    #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
    display:none;
    }
    #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
    display:block;
    }

    /*
    	Footer
    */
    #footer {
    	border-top:1px solid #c0c0c0;
    	padding:10px 0px 70px 0px;
    	color:#c0c0c0;
    	background-color:#001c84;
    	font-size:9px;
    	text-align: left;
    	line-height:20px;

    }
    #footer img {
    	float:left;
    	margin-right:10px;
    }
    #footer span {
    	display:block;
    	float:left;
    	width:250px;
    	margin-left:50px;
    }
    #footer a {
    	color:#9e8292;
    	text-decoration:none;
    }



    img {border:none;}


    Thanks.
  • al_m473
    Permalink to comment #
    all in the box on my pc, using IE7

    Al
  • cybershot
    Permalink to comment #
    try adding a span rule to your site with a width. that should do it.

    span { width:200px; } //or whatever your width needs to be.

    that should keep it in the box
  • gheidorn
    Permalink to comment #
    Remove "position: relative" from both your img.product and .description classes. Then style your b and span tags with margin or padding to provide spacing between the borders and the text.

    You might consider taking a step back and redesign your text area to be more semantic. Instead of:


    <div class=\"productbox\">
        <a href=\"images/enlarge/ppc-208_black.jpg\">
            <img class=\"product\" alt=\"\" src=\"images/ppc-208-thumb.jpg\"/>
        </a>
        <span class=\"description\">
        <b>PPC-208</b>
        <br/>
        Double clip. Mounts two inline filters piggyback style. Cylinder sizes are both 1.950\".
        </span>
    </div>


    Use:


    <div class=\"productbox\">
        <a href=\"images/enlarge/ppc-208_black.jpg\"><img src=\"ppc-205-thumb.jpg\" style=\"\" /></a>
        <h5>PPC-208</h5>
        <p>Double clip. Mounts two inline filters piggyback style. Cylinder sizes are both 1.950\".</p>
    </div>


    Since all your images seem to be the same width (150px), start styling those elements with:


    .productbox h5 {
      margin-left: 180px;
    }
    .productbox p {
      margin-left: 180px;
    }


    You might also consider using the * { margin: 0px; padding:0; } strategy to reduce confusion when aligning things.
Add a Comment