Text not minimizing with screen-please help!

DeadlyByDesign · 18-08-2010 6:55pm #1

Any help is appreciated, just realised to my horror that the teyt is going haywire when I minimize the scree. This is my first page and I am very confused what I did wrong.

HTML

<html>

<head>

<title></title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="mycss.css" />

</head>

<body>

<div id="header">

<marquee>test</marquee>

<strong>BANNER/LOGO</strong>

</div>

<br/>

<br/>

<br/>

<br/>

<div id="columnRight">

<ul>

<li><a href="ourservice.htm" id="current">Our service</a></li>

<li><a href="personaltraining.htm">Personal Training</a></li>

<li><a href="lifestylemanagement.htm">Lifestyle Management</a></li>

<li><a href="faq.htm">FAQ</a></li>

<li><a href="price.htm">Price</a></li>

<li><a href="specialoffers.htm">Special Offers</a></li>

</ul>

</div>

<div id="navigation">

<a href="index.htm">Home</a>

<br/>

<a href="aboutus.htm">About us</a>

<br/>

<a href="facilities.htm">Facilities</a>

<br/>

<a href="location.htm">Location</a>

<br/>

<a href="ourtrainers.htm">Our Trainers</a>

<br/>

<a href="testimonies.htm">Testimonies</a>

</div>

<div id="content">

<img src="gym1.jpg" width="100" height="100" />

<h1>test header</h1>

<p>main content goes here</p

<h2>test header</h2>

<p> Test Test Test Test Test Test Test Test Test Test Test Test Test TestTest Test Test TestTest Test Test Test TestTest TestTest</p>

<img src="gym2.jpg" width="100" height="100" />

<h2> Test header 2</h2>

<p>Test Test Test Test Test Test Test Test Test Test Test Test Test TestTest Test Test TestTest Test Test Test Te</p>

</div>

<br/>

<br/>

<br/>

<br/>

<div id="footer">

<a href="">Contact us</a>

</div>

</body>
</html>

CSS

a:link {color: #FFFFFF; text-decoration: underline; }

a:active {color: #FFFFFF; text-decoration: underline; }

a:visited {color: #FFFFFF; text-decoration: underline; }

a:hover {color: #FFFFFF; text-decoration: none; }

#header {

background-image:url('banner.png');

padding: 10px;

height: 120px;
width:670px;
float:centre;
background-repeat:repeat-x;

text-align: center;

}

#content {

height: 100%;

width:50%;

border-color:black;

border-style:solid;

border-width:1px;

float:center;

margin: 0 auto;

padding: 10px;

}

#navigation {

float: left;

width: 200px;

height: 45%;

color: #ffffff;

background-image:url('gradient4.png');

border: 1px solid #000;

padding: 5px;

}

a {

display: block;

text-decoration: none;

}

#columnRight {

float: right;

width: 200px;

height: 40%;

color: #ffffff;

background-image:url('gradient4.png');

background-repeat:repeat-x;

border: 1px solid #000;

padding: 5px;
}

a {

display: block;

text-decoration: none;

}

#footer {
clear : right;
background-image: url('gradient4.png');
border: 1px solid #000;
padding : 5px;
}

a {

display: block;

}

DeadlyByDesign · 18-08-2010 9:46pm

any help at all here guys would be great, need to show progress tomorrow and dont want this hanging on the website

Pablod · 18-08-2010 9:58pm

Hi,

I assume you mean when you minimise the window all your divs are collapsing which in-turn collapses your text too.

Try adding a main container around all your content and give it a width
This will constrain all your divs/content and should resolve the collapsing issue.

Hope this helps
Pablo

DeadlyByDesign · 19-08-2010 8:10am

Hi Pablo,

That's exactly it sorry I was not more clearer. Posted in a panic. Can you give me a brief example of what you mean? I understand what you are saying just not sure how to apply it.

pixelburp · 19-08-2010 9:09am

DeadlyByDesign wrote: »

Hi Pablo,

That's exactly it sorry I was not more clearer. Posted in a panic. Can you give me a brief example of what you mean? I understand what you are saying just not sure how to apply it.

The problem is that because none of your HTML has a fixed width, when your browser window is resized, the text & panels get resized proportionally.

What pablod is suggesting is that around all your HTML you put a container div. For instance:

[I][...][/I]
<body>

<div id="wrapper">

[I][... the rest of your HTML goes here, header body etc. ...][/I]

</div>

</body>
[I][...][/I]

Then in your CSS file you just add the following line:

#wrapper { width: 960px; }

So now your page has a fixed width in all conditions.

DeadlyByDesign · 19-08-2010 10:03am

Thanks a million guys, the amount of stress I had about this! I will give this a bash tonight.

Text not minimizing with screen-please help!

Comments