2 replies [Last post]
alt731
alt731's picture
Offline
newbie
Last seen: 2 years 43 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: 4 hours 55 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9252
Points: 3258

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

UI design should be egoless; if you succumb to the temptation to show off, you’re probably doing it wrong. (from ESR)

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

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

thanks

thanks