2 replies [Last post]
alt731
alt731's picture
Offline
newbie
Last seen: 2 years 31 weeks ago
Joined: 2011-12-27
Posts: 6
Points: 8

Hi, I'm just in the process of converting my table based website to css. I haven't yet got rid of the superstructure, 3rows by 3 cols, with all my content in the centre cell (surrounded by cells for an image border and image corners).

Does anyone know how I get the main paragraph text to shift onto the next line when I reduce the width of the window? It used to do this in my old format, but isn't doing it anymore. I've tried sticking "word-wrap: break-word;" into the table cell with the content, but that didn't seem to do much. I've looked around on the internet but can’t seem to figure it out.

Here's my code, cut down significantly, but with the error still fully intact:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
 
<!------------------
             Styles
------------------->
 
<style media="screen" type="text/css">
 
 
/******************
        Paragraph
*******************/
 
p{text-indent:0px;
line-height:160%;
text-align:justify;
font-family:Verdana;
font-size:1.00em;
margin-left:20px;
margin-right:20px;}
 
 
/******************
    Paragraph Box
*******************/
 
p.widebox {text-indent:0px;
line-height:160%;
/*text-align: justify*/
font-family:Verdana;
font-size:1.00em;
background: #ecd9cb;
border: 1px solid #c6a890;
margin-left:52px;
padding: 15px;
width: 601px;
 
 
/******************
         H. Line
*******************/
 
hr{width:694px;
height:0px;
margin-top:25px;
margin-bottom:25px;}
 
 
/******************
          Table
*******************/
 
table.header, tr.header, td.header {border-collapse:collapse;
width:100%;
/*height:100%;*/
margin-left:10px;
margin-right:10px;
margin-left:10px;
margin-top:50px;
text-align: left;
border:0px;
padding:0px;
spacing:0px;
}
 
 
/******************
      Nav Menu
*******************/
 
#navlist{position:relative;
margin-top:0px;
padding-top:0px}
 
#navlist li{margin:0;
padding-top:0;
list-style:none;
position:absolute;
top:0;
height:28px;
display:block;}
 
#navlist a{height:28px;
display:block;}
 
#Learn{left:158px;
width:140px;
background:url('/images/button.jpg') 0 0;}
#Learn a:hover{background: url('/images/button.jpg') -0 -29px;}
#Learn a:active{background: url('/images/button.jpg') -0 -58px;}
 
#QuestionAnswer{left:298px;
width:140px;
background:url('/images/button.jpg') 0 0;}
#QuestionAnswer a:hover{background: url('/images/button.jpg') -0 -29px;}
#QuestionAnswer a:active{background: url('/images/button.jpg') -0 -58px;}
 
#Thoughts{left:438px;
width:140px;
background:url('/images/button.jpg') 0 0;}
#Thoughts a:hover{background: url('/images/button.jpg') -0 -29px;}
#Thoughts a:active{background: url('/images/button.jpg') -0 -58px;}
 
#Resources{left:578px;
width:140px;
background:url('/images/button.jpg') 0 0;}
#Resources a:hover{background: url('/images/button.jpg') -0 -29px;}
#Resources a:active{background: url('/images/button.jpg') -0 -58px;}
 
 
 
</style>
</head>
 
<body>
 
 
<!------------------
     Table Beginning
------------------->
 
<table style="margin-left: auto; margin-right: auto;" border="0" cellpadding="0" cellspacing="0">
  <tbody>
          <tr align="center">
                <td style="background-image: url(images/cornerul.png); width: 30px; text-align: center; height: 30px;">
                  <br>
                </td>
                <td style="text-align: center; height: 30px; width: 736px; background-image: url(images/sideu.png);">
                  <br>
                </td>
                <td style="background-image: url(images/cornerur.png); text-align: center; height: 30px; width: 30px;">
                  <br>
                </td>
          </tr>
          <tr>
                <td style="height: 600px; width: 30px; text-align: center; background-image: url(images/sidel.png);"><br>
                </td>
                <td style="height: 600px; background-color: rgb(255, 255, 255); width: 736px; vertical-align: top; word-wrap: break-word;">
 
 
<!------------------
     Nav Menu
------------------->
 
<ul id="navlist">
 
<li id="Learn"><span class="nav"><a href="learn.php" style="height:21px;">LEARN MORE</a></span></li>
<li id="QuestionAnswer"><span class="nav"><a href="qa.php" style="height:21px;">QUESTION & ANSWER</a></span></li>
<li id="Thoughts"><span class="nav"><a href="thoughts.php" style="height:21px;">THOUGHTS</a></span></li>
<li id="Resources"><span class="nav"><a href="resources.php" style="height:21px;">FURTHER RESOURCES</a></span></li>
 
</li>
 
 
<!------------------
          Content
------------------->
 
<p class="widebox" style="margin-top:20px;">
This is all introductory content
</p>
 
<h1 style="margin-left:10px; margin-top:23px;">
Here is my title
</h1>
 
<p>Here is my paragraph which is not contracting when I reduce the width of the window. Blar Blar Blar. Hi,  Im just in the process of converting my table based website to css. I havent yet got rid of the superstructure, 3rows by 3 cols, with all my content in the centre cell (surrounded by cells for an image border and image corners). Does anyone know how I get the main paragraph text to shift onto the next line when I reduce the width of the window? It used to do this in my old format, but isnt doing it anymore.</p>
 
 
<!------------------
         Table End
------------------->
 
          </td>
          <td style="height: 600px; text-align: center; width: 30px; background-image: url(images/sider.png);"><br>
          </td>
    </tr>
    <tr>
          <td style="background-image: url(images/cornerll.png); height: 30px; width: 30px; text-align: center;" valign="undefined"><br>
          </td>
 
          <td style="text-align: center; width: 736px; background-image: url(images/sideb.png);"><br>
          </td>
 
          <td style="background-image: url(images/cornerlr.png); height: 30px; text-align: center; width: 30px;" valign="undefined"><br>
          </td>
    </tr>
  </tbody>
</table>
 
</div>
 
 
</body>
</html>

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 8 hours 57 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9176
Points: 3172

Your center TDs have widths

Your center TDs have widths stated. Get rid of them. Once you've done that, the controlling element is p.widesomething. Its width plus padding plus margin limits how narrow the TD can be. As is, your paragraph word wraps just fine until it reaches the imposed limits.

cheers,

gary

Unplanned code results in a tangled wad of brain-cramping confusion.

There are enough html & css demos and tutorials to be interesting. Please visit.

alt731
alt731's picture
Offline
newbie
Last seen: 2 years 31 weeks ago
Joined: 2011-12-27
Posts: 6
Points: 8

thanks

thanks