Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 185
  • Last Modified:

How to keep all text visible in a browser despite screen size

I have a page built in Dreamweaver CS3. When I publish the page, it all looks fine. However, when I reduce the browser window size, the text disappears off the side, and I have to scroll left to right to see it. I want to have a page that 'squashes' the text up so it is all visible, when the browser is resized- but just pushed the text onto other lines. An example can be seen at www.appleinsider.com. Any ideas how to do this?

Seb
0
sebastiz
Asked:
sebastiz
  • 4
  • 4
  • 2
1 Solution
 
Eternal_StudentCommented:
Use percentages so your design can shrink.
0
 
oceanbeachCommented:
Hello sebastiz,

Are you looking for something like this...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>html</title>
<style type="text/css">
#content { margin-left: 300px; margin-right: 200px;}
#col1 { width: 300px; float: left; background: #ff0;}
#col2 { width: 200px; float: right; background: #f00;}
</style>
</head>
<body>
<div id="col1">
  <p>Lorem ipsum dolor sit amet...</p>
</div>
<div id="col2">
  <p>Sed et lectus in massa imperdiet...</p>
</div>
<div id="content">
  <p>Morbi consequat felis vitae...</p>
</div>
</body>
</html>

I hope this helps!

oceanbeach
0
 
Eternal_StudentCommented:
Have a look at how this shrinks the two outer columns:

http://web-graphics.com/mtarchive/Challenge.html
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
sebastizAuthor Commented:
Do you mean percentages as applied to the layer/ text/ div. Which one?
0
 
sebastizAuthor Commented:
oceanbeach- yes that's right. Which bit of the html do i need to add

Seb
0
 
oceanbeachCommented:
Hi sebastiz,

I guess that depends a little bit.  Do you have an existing page you would like to integrate this into?  If you have some existing code, I can help you put it all together.  The main parts are:

CSS:
#content { margin-left: 300px; margin-right: 200px;}
#col1 { width: 300px; float: left; background: #ff0;}
#col2 { width: 200px; float: right; background: #f00;}

HTML:
<div id="col1"> <!-- left -->
  <p>Lorem ipsum dolor sit amet...</p>
</div>
<div id="col2"> <!-- right -->
  <p>Sed et lectus in massa imperdiet...</p>
</div>
<div id="content"> <!-- center -->
  <p>Morbi consequat felis vitae...</p>
</div>

Let me know how it goes!

-OB
0
 
sebastizAuthor Commented:
The problem is, that the text is kept in a table rather than a div tag. Is there no table attribute that collapses the table when the browser size is reduced?

Seb
0
 
oceanbeachCommented:
Hi sebastiz,

Does this work a little better...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>html</title>
<style type="text/css">
#layout { width: 100%; }
#content { background: #f60;}
#col1 { width: 200px; background: #ff0;}
#col2 { width: 150px; background: #f00;}
</style>
</head>
<body>
<table id="layout">
  <tr>
    <td id="col1">Lorem ipsum dolor sit amet...</td>
    <td id="content">Sed et lectus in massa imperdiet...</td>
    <td id="col2">Morbi consequat felis vitae...</td>
  </tr>
</table>
</body>
</html>

I hope this helps!

oceanbeach
0
 
sebastizAuthor Commented:
so if I strip this down all I really need to insert are the bits of code as follows

<style type="text/css">
#layout { width: 100%; }
</style>

<table id="layout">
</table>

Is it the percent that allows the rejigging of the text?

Seb
0
 
oceanbeachCommented:
Hi sebastiz,

That bit of stripped down code will work just fine.  However, the example site you pointed out has fixed width outer columns.  If that is what you are looking for, then this is the stripped down code would be...

<style type="text/css">
#layout { width: 100%; }
#col1 { width: 200px;}
#col2 { width: 150px;}
</style>

<table id="layout">
  <tr>
    <td id="col1"></td>
    <td></td>
    <td id="col2"></td>
  </tr>
</table>

Yes, the percent is what makes the center 'stretch'.

I hope this helps!

-OB
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 4
  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now