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 10 of 10
  1. #1
    New to the CF scene
    Join Date
    Dec 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    website layout problem

    hi,
    i'm using stylesheets to develop a site for my university assignment, when the page is viewed on a smaller screen, why does it shift some of the sections down and mess the whole page up?

    my website layout consists of a section on the left which has the menu links. a section to the right of that which contains thumbnail pictures of cars and a section to the right of that which contains a description of a motor vehicle. when viewed on smaller screens, the section which contains the description of car moves down under the 1st two sections (links and thumbnails).

    hope that helps


    heres some of the CSS code:

    Code:
    #leftcontent 
    	{
    	width:128px;
       	background:#ffffff;
       	margin-bottm:0px;
       	margin-left:65px;
       	padding-bottom:0px;
       	padding-right: 0px;
       	margin-right:0px;
       	margin-top: 0px;
       	float: left;
    
    	}
    
    #thumbnailcontent
    	{
    	width:260px;
    	border-top-style: solid;
    	border-left-style: solid;
    	border-left-color: #4682B4; /* DARK BLUE*/
    	border-top-color: #4682B4; /* DARK BLUE*/
    	border-top-width: 2px;
    	border-left-width: 2px;
    	background:#F5F5DC; /* BEIGE */
    	margin-left:0px;
    	margin-right:0px;
    	padding-bottom:2px;
    	padding-left: 4px;
    	padding-right:0px;
    	float: left;
    	margin-top: 0px;
    	}
    
    #descriptioncontent
    	{
    	font-family: Arial;
    	font-size: 10pt;
    	text-align: justify;
    	background: #b0c4de;
    	width: 550px;
    	padding-left:3px;
    	padding-right:3px;
    	padding-top:3px;
    	padding-bottom:88px;
    	margin-top: 0px;
    	margin-left: 0px;
    	margin-bottom: 0px;
    	float: left;
    	border-top-color: #4682B4; /* DARK BLUE*/
    	border-top-style: solid;
    	border-top-width: 2px;
    	}
    and the html:
    Code:
    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" lang="en"
             xml:lang="en">
    <head>
    <title>WSD&T Coursework</title>
    <meta http-equiv="Content-Type"
                content="text/html; charset=windows-1252" />
    <link rel="stylesheet" type="text/css" href="pagelayout.css" />
    <link rel="stylesheet" media="print" type="text/css"
             href="print.css" />
    <script src="astonjavascript.js"
      language="javascript"
      type="text/javascript">
    </script>
    </head>
    <body background="backdot.gif">
    
    
    
    <div id="leftcontent">
      <div id="nav">
        <table height="700" cellspacing="0" cellpadding="0" border="0" align="center">
    
          <tr>
            <td><a class="menulink" href=".html">Home</a></td>
          </tr>
          <tr>
            <td><a class="menulink" href="lamborghinigallardo.html">Lamborghini Gallardo</a></td>
          </tr>
          <tr>
            <td><a class="menulink" href=".html">Mitsubushi Lancer</a></td>
          </tr>
          <tr>
            <td><a class="currentlink">Aston Martin DB9 Coupe</a></td>
          </tr>
          <tr>
            <td><a class="menulink" href="ferrarif430.html">Ferrari F430</a></td>
          </tr>
          <tr>
            <td><a class="menulink" href=".html">Nissan 350z</a></td>
          </tr>
          <tr>
            <td><a class="menulink" href=".html">Subaru Impreza WR1</a></td>
          </tr>
          <tr>
            <td><a class="menulink" href="compare.html">Compare Cars</a></td>
          </tr>
          <tr>
            <td><a class="menulink" href=".html">Contact Us</a></td>
          </tr>
          <tr>
    	    <td><a class="menulink" href="links.html">Links</a></td>
          </tr>
        </table>
      </div>
    </div>
    <div id="thumbnailcontent">
      <table height="600" align="left">
        <tr>
          <td colspan="2"><img src="AstonMartinLogo.gif" align="middle" alt="Aston Martin" /></td>
        </tr>
        <tr>
          <td>THUMBNAILS GO IN HERE      <td>
        </tr>
      </table>
    </div>
    <div id="descriptioncontent">
      <h1 align="center">Aston Martin DB9 Coupe</h1>
      	<p>
      	<table border="0" cellpadding="2">
      	<tr>
    		<td valign="top">
     CAR DESCRIPTION GOES HERE
    	<table a class="tablefont" border="0" cellspacing="0" cellpadding="0" width="100%">
        <tr>
          <td a class="tablebg4">Specifications</td>
          <td a class="tablebg4">&nbsp;</td>
        </tr>
        <tr>
          <td a class="tablebg3">Body:</td>
          <td a class="tablebg3">&nbsp;</td>
        </tr>
        <tr>
          <td a class="tablebg1">Type:</td>
          <td a class="tablebg1">2 door coupe</td>
        </tr>
        <tr>
          <td a class="tablebg3">Engine:</td>
          <td a class="tablebg3">&nbsp;</td>
        </tr>
        <tr>
          <td a class="tablebg1">Type:</td>
          <td a class="tablebg1">V12</td>
        </tr>
        <tr>
          <td a class="tablebg2">Displacement:</td>
          <td a class="tablebg2">6000 cc</td>
        </tr>
        <tr>
          <td a class="tablebg1">Horsepower:</td>
          <td a class="tablebg1">444 bhp @ 6000 rpm</td>
        </tr>
        <tr>
          <td a class="tablebg2">Torque:</td>
          <td a class="tablebg2">420 lb-ft @ 5000 rpm</td>
        </tr>
        <tr>
          <td a class="tablebg1">Redline:</td>
          <td a class="tablebg1">6800 rpm</td>
        <tr>
          <td a class="tablebg3">Performance:</td>
          <td a class="tablebg3">&nbsp;</td>
        </tr>
        <tr>
          <td a class="tablebg1">Maximum Speed:</td>
          <td a class="tablebg1">186 mph (Auto & Manual)</td>
        </tr>
        <tr>
          <td a class="tablebg2" valign="top">0 - 60 mph:</td>
          <td a class="tablebg2">4.7 seconds (Manual)<br/>
            4.9 seconds (Auto)</td>
        </tr>
        <tr>
          <td a class="tablebg1">0 - 100 mph:</td>
          <td a class="tablebg1">10.3 seconds</td>
        </tr>
        <tr>
          <td a class="tablebg2">Quarter Mile:</td>
          <td a class="tablebg2">12.9 seconds @ 112 mph</td>
        </tr>
        <tr>
          <td a class="tablebg1">Skidpad: </td>
          <td a class="tablebg1">.96g </td>
        </tr>
        <tr>
          <td a class="tablebg3">Dimensions:</td>
          <td a class="tablebg3">&nbsp;</td>
        <tr>
        <tr>
          <td a class="tablebg1">Length:</td>
          <td a class="tablebg1">4710mm</td>
        </tr>
        <tr>
          <td a class="tablebg2">Width:</td>
          <td a class="tablebg2">1875mm</td>
        </tr>
        <tr>
          <td a class="tablebg1">Height:</td>
          <td a class="tablebg1">1270mm</td>
        </tr>
        <tr>
          <td a class="tablebg3">Fuel:</td>
          <td a class="tablebg3">&nbsp;</td>
        </tr>
        <tr>
          <td a class="tablebg1">Fuel Type:</td>
          <td a class="tablebg1">Unleaded Petrol</td>
        </tr>
        <tr>
          <td a class="tablebg2"valign="top">Fuel Capacity:</td>
          <td a class="tablebg2">85 litres / 18.70 gallons</td>
        </tr>
        <tr>
          <td a class="tablebg1">Combined Fuel<br />
            Consumption</td>
          <td a class="tablebg1" valign="top">17.1 mpg</td>
        </tr>
      </table>
    
    </div>
    <div id="footer">
    &copy Cali Fast Cars 2005
    <center><a href="index.html">Home</a>
    		|
    		<a href="lamborghinigallardo.html">Lamborghini Gallardo</a>
    		|
    		<a href="lancer.html">Mitsubushi Lancer</a>
    		|
    		<a href="astonmartin.html">Aston Martin DB9</a>
    		| <br />
    		<a href="ferrarif430.html">Ferrari F430</a>
    		|
    		<a href="nissan.html">Nissan 350z</a>
    		|
    		<a href="subaru.html">Subaru Impreza</a>
    		|
    		<a href="compare.html">Compare</a>
    		|
    		<a href="contactus.html">Contact Us</a>
    		|
    		<a href="links.html">Links</a>
    
    </center>
    </div>
    </body>
    </html>
    also can any1 tell me how i can modify the code so that the layout looks something like this website? http://www.liverpoolfc.tv/news/

    in the way that the whole content is in the centre of the page with the background visible on either side.

    apologies for this, this assignment is for 2moro afternoon!
    Last edited by 5aq1b; 12-15-2005 at 01:50 AM.

  • #2
    Senior Coder
    Join Date
    Jul 2005
    Location
    UK
    Posts
    1,051
    Thanks
    6
    Thanked 13 Times in 13 Posts
    Hi,

    The total width of your three elements, not including any borders, padding and margins, is well over 900 pixels. Therefore, if the screen is any less than this the tables have no choice but to collapse downwards.

    I suggest you fix width the two outside columns but leave the central column with a variable width.

    As for centering the page you need to put everything between the <body></body> tags into some kind of containing element (ie, another div or table> which you can then center using some arcane attribute...align=center would do it

  • #3
    New to the CF scene
    Join Date
    Dec 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks alot

  • #4
    New to the CF scene
    Join Date
    Dec 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    what should the ideal width be altogether?

  • #5
    New to the CF scene
    Join Date
    Dec 2005
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Really, the width should be variable but if you're going for fixed width, I'd use 750px wide as the max so you can fit 800x600 screens.

  • #6
    Senior Coder
    Join Date
    Jul 2005
    Location
    UK
    Posts
    1,051
    Thanks
    6
    Thanked 13 Times in 13 Posts
    The argument for variable width is two fold - on larger screens of 1152 pixels wide or more (which are at least as widespread nowadays as 800 pixel resolutions) layouts that are fixed to be viewable at 800x600 start to look far too small.

    Secondly, your fixed width layout will still break horribly if someone browses your site with a smaller resized window, even if their resolution is nominally big enough.

  • #7
    New to the CF scene
    Join Date
    Dec 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks again

    how do i 'variable width' centre column?

    i presume the fix width is what i'v done already?

  • #8
    Senior Coder
    Join Date
    Jul 2005
    Location
    UK
    Posts
    1,051
    Thanks
    6
    Thanked 13 Times in 13 Posts
    Just remove the width declaration in your CSS.

    The content within the centre column will automatically expand it to the widest it can be within the users browser.

  • #9
    Regular Coder Ranger56's Avatar
    Join Date
    Mar 2005
    Location
    Kent, WA.
    Posts
    783
    Thanks
    0
    Thanked 0 Times in 0 Posts
    [ code ][ /code ]

  • #10
    New to the CF scene
    Join Date
    Dec 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Pennimus
    Just remove the width declaration in your CSS.

    The content within the centre column will automatically expand it to the widest it can be within the users browser.
    thanks, ok jus did that , the description column(centre column because i'v swapped the thumbnail column and description column about) jus expanded so wide that it moved the thumbnail content down.


  •  

    Posting Permissions

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