Please help-text not minimizing with screen!

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

[SIZE=“2”][COLOR=“Black”]<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>

&lt;li&gt;&lt;a href="ourservice.htm" id="current"&gt;Our service&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;a href="personaltraining.htm"&gt;Personal Training&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;a href="lifestylemanagement.htm"&gt;Lifestyle Management&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;a href="faq.htm"&gt;FAQ&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;a href="price.htm"&gt;Price&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;a href="specialoffers.htm"&gt;Special Offers&lt;/a&gt;&lt;/li&gt;     

</ul>

</div>

<div id=“navigation”>

&lt;a href="index.htm"&gt;Home&lt;/a&gt;

&lt;br/&gt;

&lt;a href="aboutus.htm"&gt;About us&lt;/a&gt;

&lt;br/&gt;

&lt;a href="facilities.htm"&gt;Facilities&lt;/a&gt;

&lt;br/&gt;

&lt;a href="location.htm"&gt;Location&lt;/a&gt;

&lt;br/&gt;

&lt;a href="ourtrainers.htm"&gt;Our Trainers&lt;/a&gt;

&lt;br/&gt;      

&lt;a href="testimonies.htm"&gt;Testimonies&lt;/a&gt;

</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;

}

Hey DeadlyByDesign,

Why don’t you try starting with a fixed width design. It would make your life easier. You could make it 960px wide as that’s the most popular width today.

Your content is getting “squashed” because your width is liquid.

Let me know if I can help in any way.

Good luck!

Thanks a million guys. I am still quite a novice in this and learn as I go. I will try the above as suggested. Would it make any differnce if I Tried adding a main container around allthe content and give it a width
This will constrain all the divs divs/content and should resolve the collapsing issue?

Apologies I did not make it clearer, I posted in a panic last night. I do nont have a link as I do not have it on a server at the moment. Basically the problem is as follows;

When one minimizes the screen and via the border, as the screen is minimized the text collapses on top of itself. Further more and div element I have in there does not be have as it should either. In stead of the screen simply minimizing over the content, it moves any div box it goes over.

I hope this is clearer.

It is not completely clear to me what is going wrong with your text when you minimize the screen. Do you have a link or something?

Furthermore I think it would be appreciated when you use a certain sytax to display your code. You can make a choice from the select sytax menu at the top of the post screen.

You’re absoluely right! I would do the same but apparently did he wanted it this way, looking at the sidebars

Thanks Donboe

Just tried it now. Even after the #wrapper addition, It still seems the left and right nav panels are moving with the minimized window and squashing the text into a single column. I will play with it a bit more, as I do not want to take up any more of your time.

That’s what I did:

#wrapper{
    width: 100%; min-height: 100%; margin-bottom: -30px; font-size: 0.9em;
}  
    

I used 100% since that’s how I understand you wanted it :slight_smile:

I see what you mean. Both your CSS and html are full of errors I think you need to re-write it. You have things like float: center(doen’t exist) and content { height: 100%} 100% of what? You furthermore make it very difficult for yourself. You have some widths in percentage and others in pixels. You have your a attribute declared on three four places, instad of margins you use quite a lot of breaks <br> You should try to be more consistent. I have, as far as possible re-written you CSS a bit.


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; }

html, body {
	height: 100%; margin: 0; padding: 0;	
}

body {
	font: Verdana, Geneva, sans-serif 100.01%; color: #000; 	
}

* html #wrapper {
	height: 100%;	
}

#wrapper {
	width: 100%; min-height: 100%; margin-bottom: -30px; font-size: 0.9em;	
}

#header {
background-image:url('banner.png'); padding: 10px; height: 120px; width:670px; margin: 0 auto; background-repeat:repeat-x; text-align: center;
}

#content-wrapper {
	width: 100%; margin: 48px 0; overflow: hidden;	
}

#content {
width:50%; border-color:black; border-style:solid; border-width:1px; 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: 45%; color: #ffffff; background-image:url('gradient4.png'); background-repeat:repeat-x; border: 1px solid #000; padding: 5px;
}


#footer {
	width: 100%; height: 30px; line-height: 30px; background-image: url('gradient4.png'); border: 1px solid #000; padding : 5px;
}

.push {
	height: 30px; clear: both;	
}


<div id="wrapper"><!-- Start Wrapper -->

<div id="header"><!-- Start Header -->
<marquee>test</marquee>
<strong>BANNER/LOGO</strong>
</div>
<div id="content-wrapper">
<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><!-- End Content-->
</div> <!-- End Content Wrapper-->
<div class="push"></div>
</div><!-- End Wrapper -->
<div id="footer">
<a href="">Contact us</a>
</div>

I would suggest have a look at this and play a bit arround with it

There are various things happening like you using; percentages for heights and floated content plus you have misspelt a few words such as ‘center’. CSS uses the American spelling CENTER rather than the correct British English spelling, i.e. centre. Furthermore there is no “float: center” only: left | right | none | (inherit).

You need to get the HTML and CSS syntax sorted first: http://validator.w3.org/ and http://jigsaw.w3.org/css-validator/ will be of use. Then it will make it easier to sort-out the other problems.