Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    Regular Coder
    Join Date
    Aug 2008
    Posts
    133
    Thanks
    14
    Thanked 0 Times in 0 Posts

    Fitting to the Screen - Help?!

    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?

    Code:
    #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.

  • #2
    Regular Coder
    Join Date
    May 2008
    Location
    Lost in Localhost...
    Posts
    702
    Thanks
    3
    Thanked 43 Times in 42 Posts
    Code:
    #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:

    Code:
    #container
    {
    width:80%px;
    }
    Also, because the rest of your CSS elements are fixed, try turning them into percentages too.
    Last edited by Millenia; 11-03-2008 at 08:58 AM.

  • #3
    Senior Coder jerry62704's Avatar
    Join Date
    Oct 2007
    Location
    Springfield, IL
    Posts
    1,100
    Thanks
    13
    Thanked 87 Times in 87 Posts
    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?
    .
    .
    ...and gladly would he learn and gladly teach

    Visit www.LiberalsWin.com for humor and the unique Bush/Obama Approval Polls

  • #4
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    #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
    Last edited by effpeetee; 11-03-2008 at 03:36 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #5
    Regular Coder
    Join Date
    Aug 2008
    Posts
    133
    Thanks
    14
    Thanked 0 Times in 0 Posts
    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.

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Can we have a link to your page? I think http://bonrouge.com/3c-hf-fluid.php would be fine for you.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #7
    Regular Coder
    Join Date
    Aug 2008
    Posts
    133
    Thanks
    14
    Thanked 0 Times in 0 Posts
    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!




    Code:
    <!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>

  • #8
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    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,
    I am still working on it.

    Frank
    Last edited by effpeetee; 11-04-2008 at 03:10 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #9
    Regular Coder
    Join Date
    May 2008
    Location
    Lost in Localhost...
    Posts
    702
    Thanks
    3
    Thanked 43 Times in 42 Posts
    Quote Originally Posted by gh05 View Post
    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.

  • #10
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    However you could set a min-width to a fluid layout and mock it for IE by an IE specific expression() in CSS
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #11
    Regular Coder
    Join Date
    Aug 2008
    Posts
    133
    Thanks
    14
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    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?

  • #12
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #13
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Quote Originally Posted by gh05 View Post
    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
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •