Fitting to the Screen - Help?!

gh05

11-03-2008, 08:45 AM

Hiya

I've got the below code working for Internet Explorer and Firefox, but I've just tried it on my home PC and the page does not fit onto the screen as it does elsewhere. I'm not sure if this is because my screen at home is a different size to the other PCs I've tried it on?

Could you please have a look at the below and see if you can tell where I need to change the code so that it fits onto the screen it is being viewed on, rather than having scroll bars?

#container
{
width:1109px;
}

A:link {text-decoration: none; color: #0000FF;}
A:visited {text-decoration: none; color: #0000FF;}
A:active {text-decoration: none}
A:hover {text-decoration: underline; color: red;}
img{border:0;}

h1{font-size:19px};

body{
background-color:#ffffff;
}

#topleftimage
{
float:left;
}

#topcentertext{
margin: 25px 0 0;
color:#ffffff;
}

#toprightimage
{
float:right;
}

#topPanel
{
height:100px;
font-weight: bold;
background-color: #008080;
font-size: 26px;
text-align:center;
color: #0000EE;
border:medium double #000080;
margin: 10px 0 0 0;
padding 7px 7px 7px 7px;
}

#leftPanel
{
float:left;
height:400px;
width:250px;
font-weight: bold;
background-color: #FFFF7E;
text-align:center;
border:medium double #000080;
margin: 5px 5px 0 0;
padding 7px 7px 7px 7px;
}

#rightPanel
{
float:right;
height:400px;
width:250px;
font-weight: bold;
background-color: #FFFF7E;
text-align:center;
border:medium double #000080;
margin: 5px 0 0 0;
padding 7px 7px 7px 7px;
}

#centerPanel
{
float:left;
height:400px;
width:570px;
background-color: #FFFF7E;
font-weight:bold;
text-align:center;
border:medium double #000080;
margin: 5px 5px 0 5px;
padding 7px 7px 7px 7px;

}

#bottomPanel
{
clear:both;
height:100px;
font-weight: bold;
background-color: #ffffff;
font-size: 20px;
text-align:center;
color: #0000EE;
margin: 10px 90px 0 90px;
padding 7px 7px 7px 7px;

}

</style>

</head>
<body>

<div id="container">
<div id="topPanel">

<div id="topleftimage">
<a href=""><img src="image1.jpg" height="90" width="145" alt=""/></a>
</div>

<div id="toprightimage">
<a href=""><img src="image1.jpg" height="90" width="145" alt=""/></a>
</div>

<div id="topcentertext">
Community Learning Network
</div>

</div>

<div id="leftPanel">
<h1><b>Partners</b></h1><br/><br/>
<a href=""> Link One</a><br/><br/>
<a href=""> Link Two</a><br/><br/>
<a href=""> Link Three</a><br/><br/>
<a href=""> Link Four</a><br/><br/>
<a href=""> Link Five</a><br/><br/>
<a href=""> Link Six</a><br/><br/>
<a href=""> Link Seven</a>
</div>

<div id="rightPanel">
<h1><b>Forthcoming Events</b></h1><br/><br/>
Mon 12th January<br/>
<a href="">Event One</a><br/><br/>
Wed 15th February<br/>
<a href="">Event Two</a><br/><br/>
Fri 7th February<br/>
<a href="">Event Three</a><br/>
</div>

<div id="centerPanel">

<div id="topCenter">
<br/><br/><br/><br/>
<p>Centred Text</p>

<p>Centred Text</p>

<p>Centred Text<a href="">Click Here</a>.</p>
</div>

<div id="bottomCenter">
</div>

</div>

<div id="bottomPanel">
<a href=""><img src="image006.jpg" height="80" width="120" alt=""/></a>
<a href=""><img src="image008.jpg" height="85" width="160" alt=""/></a>
<a href=""><img src="image002.jpg" height="85" width="160" alt=""/></a>
<a href=""><img src="image003.jpg" height="105" width="72" alt=""/></a>
<a href=""><img src="image004.png" height="75" width="70" alt=""/></a>
<a href=""><img src="image007.png" height="85" width="120" alt=""/></a>

</div>

</div>

</body>
</html>

Thanks for any help in advance.

Millenia

11-03-2008, 08:55 AM

#container
{
width:1109px;
}Change that. It's called a fixed layout where your design is a certain number of pixels. Try using percentages, that is called a fluid layout. For example:

#container
{
width:80%px;
}

Also, because the rest of your CSS elements are fixed, try turning them into percentages too.

jerry62704

11-03-2008, 02:59 PM

With a width of 1109, people with 1024 or lower will always get a scroll bar or cutoff. Is your target only people with large screens and young eyes?

effpeetee

11-03-2008, 03:29 PM

#container
{
width:80%px;
}

You dont need the px.

Also-

Set the html and body to

html, body{
width:100%;
Height:100%;}

at the start of your css.

Frank

gh05

11-04-2008, 10:44 AM

abduraooft

11-04-2008, 10:50 AM

Can we have a link to your page? I think http://bonrouge.com/3c-hf-fluid.php would be fine for you.

gh05

11-04-2008, 01:05 PM

My page has not been uploaded to the internet yet (just editing locally) but if you save the code below then it should display as i see it.

That template does look something like what i want but i'd really prefer not to have to start again as i now have my page looking exactly as i want it on most screens apart from the occassion when the window is resized. Is there a simple way of fixing this problem while keeping the % so that the site fits any screen?

Thanks!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Welcome to the CCLN Website</title>
<style type="text/css">

#container
{
width:100%;
}

A:link {text-decoration: none; color: #0000FF;}
A:visited {text-decoration: none; color: #0000FF;}
A:active {text-decoration: none}
A:hover {text-decoration: underline; color: red;}
img{border:0;}

h1{font-size:19px};

body{
background-color:#ffffff;
font:12px arial;
}

#topleftimage
{
float:left;
}

#topcentertext{
margin: 25px 0 0;
color:#ffffff;
}

#toprightimage
{
float:right;
}

#topPanel
{
height:100px;
font-weight: bold;
background-color: #008080;
font-size: 26px;
text-align:center;
color: #0000EE;
border:medium double #000080;
margin: 10px 0 0 0;
padding 7px 7px 7px 7px;
}

#leftPanel
{
float:left;
height:400px;
width:20%;
font-weight: bold;
background-color: #FFFF7E;
text-align:center;
border:medium double #000080;
margin: 5px 5px 0 0;
padding 7px 7px 7px 7px;
}

#rightPanel
{
float:right;
height:400px;
width:20%;
font-weight: bold;
background-color: #FFFF7E;
text-align:center;
border:medium double #000080;
margin: 5px 0 0 0;
padding 7px 7px 7px 7px;
}

#centerPanel
{
float:left;
height:400px;
width:56%;
background-color: #FFFF7E;
font-weight:bold;
text-align:center;
border:medium double #000080;
margin: 5px 5px 0 5px;
padding 7px 7px 7px 7px;

}

#bottomPanel
{
clear:both;
height:100px;
font-weight: bold;
background-color: #ffffff;
font-size: 20px;
text-align:center;
color: #0000EE;
margin: 10px 90px 0 90px;
padding 7px 7px 7px 7px;

}

</style>

</head>
<body>

<div id="container">
<div id="topPanel">

<div id="topleftimage">
<a href=""><img src="file:///H|/CCLNFiles/CCLNimage.jpg" height="90" width="145" alt=""/></a>
</div>

<div id="toprightimage">
<a href=""><img src="file:///H|/CCLNFiles/CCLNimage.jpg" height="90" width="145" alt=""/></a>
</div>

<div id="topcentertext">
Learning Network
</div>

</div>

<div id="leftPanel">
<h1><b>Partners</b></h1><br/><br/>
<a href=""> Learning Service</a><br/><br/>
<a href=""> College</a><br/><br/>
<a href=""> Coleg Glan </a><br/><br/>
<a href=""> WEA</a><br/><br/>
<a href=""> Welsh for Adults</a><br/><br/>
<a href=""> Voluntary Action</a><br/><br/>
<a href=""> YMCA</a>
</div>

<div id="rightPanel">
<h1><b>Forthcoming Events</b></h1><br/><br/>
Mon 12th January<br/>
<a href="">Adult Learning Event - National Museum </a><br/><br/>
Wed 15th February<br/>
<a href="">Taster sessions - Central Library</a><br/><br/>
Fri 7th February<br/>
<a href="">Learning Network Meeting - Howardian</a><br/>
</div>

<div id="centerPanel">

<div id="topCenter">
<br/><br/><br/><br/>
<p>Centered Text</p>
</div>

<div id="bottomCenter">
</div>

</div>

<div id="bottomPanel">
<a href=""><img src="file:///H|/CCLNFiles/image006.jpg" height="80" width="120" alt=""/></a>
<a href=""><img src="file:///H|/CCLNFiles/image008.jpg" height="85" width="160" alt=""/></a>
<a href=""><img src="file:///H|/CCLNFiles/image002.jpg" height="85" width="160" alt=""/></a>
<a href=""><img src="file:///H|/CCLNFiles/image003.jpg" height="105" width="72" alt=""/></a>
<a href=""><img src="file:///H|/CCLNFiles/image004.png" height="75" width="70" alt=""/></a>
<a href=""><img src="file:///H|/CCLNFiles/image007.png" height="85" width="120" alt=""/></a>

</div>

</div>

</body>
</html>

effpeetee

11-04-2008, 02:21 PM

I have put some css at the head of your css and made a few alterations to the css.
the result can be seen here, (http://exitfegs.co.uk/AWelcomeb.html)
I am still working on it.

Frank

Millenia

11-04-2008, 02:41 PM

I've converted everything to % so now the site fits every screen prefectly.

My problem now is that when i resize the window, the panels move all over the place. Is the only solution to choose a fixed width page that looks better on some screens than others?

Thanks.

With a fluid layout, it changes depending on the size of your browser. So when you resize it, your site layout will change. If you are going to use a fixed layout, it will have to have a smaller width than the average screen resolution.

abduraooft

11-04-2008, 02:56 PM

However you could set a min-width to a fluid layout and mock it for IE by an IE specific expression() in CSS

gh05

11-04-2008, 04:30 PM

However you could set a min-width to a fluid layout and mock it for IE by an IE specific expression() in CSS

Aye?? So are you saying that it's fluid to an extent and then when you resize it becomes fixed? How do i do that?

effpeetee

11-04-2008, 04:48 PM

Have you seen this one? (http://nopeople.com/CSS/background_image_resize/):D

Frank

abduraooft

11-05-2008, 06:33 AM

Aye?? So are you saying that it's fluid to an extent and then when you resize it becomes fixed? How do i do that?
Yes, have a look at http://bonrouge.com/2c-hf-fullyfluid.php