Dynamic width and height of my site - need help! 1

JamesCliff · Jun 29, 2005

Hi all,

Ok ive started work on my new site, its coming along great. I successfully created a template in photoshop after many hours of work. I sliced it up as i thought would be necessery in order for the site to be liquid in width and height.

I then started constructing the tables in dreamweaver and managed to get the site to stretch 100% in width. I got the header and the footer of the site to do this successfully. It looks well. However when it comes to the nav bar on the left hand side and the content box i cannot get them to expand in width as well as height. The nav bar is set to expant to 10% and the content box to expant to 90%.

This is the index as it looks now with the site header and footer parts of the site stretching in width as i want:-

http://www.briskfire.com/new/

However i cant structure the tables successfully in order for the nav bar and content box to stretch in width and height.

This is the code for the index as above:

Code:

<body>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td height="244" align="center"><table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr> 
          <td width="138" rowspan="4"><img src="images/index_01.gif" width="138" height="225"></td>
          <td width="10%" rowspan="4" background="images/index_02.gif">&nbsp;</td>
          <td width="158" rowspan="4"><img src="images/index_03.gif" width="158" height="225"></td>
          <td width="90%" rowspan="4" background="images/index_04.gif">&nbsp;</td>
          <td width="380" height="39" background="images/index_05.gif">&nbsp;</td>
        </tr>
        <tr> 
          <td><img src="images/index_06.gif" width="380" height="119"></td>
        </tr>
        <tr> 
          <td height="23" background="images/index_07.gif">&nbsp; </td>
        </tr>
        <tr> 
          <td height="44"><img src="images/index_08.gif" width="380" height="44"></td>
        </tr>
        <tr> 
          <td colspan="5"><font color="4C4C4C" face="Arial, Helvetica, sans-serif">Nav 
            Bar goes on left hand side - Content box goes right hand side to middle.</font></td>
        </tr>
        <tr> 
          <td><img src="images/index_31.gif" width="138" height="43"></td>
          <td background="images/index_32.gif">&nbsp;</td>
          <td><img src="images/index_33.gif" width="158" height="43"></td>
          <td background="images/index_34.gif">&nbsp;</td>
          <td><img src="images/index_35.gif" width="380" height="43"></td>
        </tr>
      </table>
</table>
</body>

If you can make sense of the above code you will see how ive structured everything.

Below ive included a picture of my sliced up template in photoshop. I know its gonna be hard for u guys to help me, but im hoping this should be enough for you to get what im trying to do. I would wack a zip file with my photoshop, index and images on my server but i dnt want web noobies downloading my work.

This is the image of my sliced photoshop:

http://www.briskfire.com/new/slice.JPG

The direction of the lines shows which way there image will be stretching (in theory).

Ok as you can see from that photoshop i have a nav bar with 3 sections, 1 main section, an info section and an affiliates section. This makes the nav bar a little more tricky to make stretch width ways and height ways. The content box also has an extra box at the bottom which dosnt need to expand, that can stay static.

Basiclly im wanting to know how to make the rest of my site stretch width and height ways depending on the amount of into put into the content boxes. The header and footer work width ways but i now need the middle sections: nav bar and content box's to stretch height and width ways. Im finding it extemely differcult to do.

I cant work any more on my site unless i get past this problem. Its doing my head in. And the site needs to be up fairly soon as my domain gets alot of hits.

Any help would be greatly appriciated on this as im compleltly stumped.

If you feel you can help me privatly with this i can send the photoshop, index and images accross. Contact me via the briskfire forums which are up at:

http://www.briskfire.com/phpBB2/

Please help me guys, i really need it.

Thanks in advance

Jim

Vragabond · Jun 30, 2005

This will not really help with answering your question, however: Have you considered stepping away from tables and doing the page via css. Looking at your current output I cannot see any difficulties in converting the page to true css page.

JamesCliff · Jun 30, 2005

I have no experience what so ever in coding the page with CSS in order to make it fluid in width and height.

I really wouldnt know where to start mate.

Got any help about using CSS to achieve exactly what i want or any more ideas with the tables?

Thanks

Jim

ChrisHunt · Jun 30, 2005

Even if you stick with tables, you should be able to achieve this look with CSS borders and background colours, and a single background image for those two-tone cells. There's no need for all those big, sliced-up images.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

ChrisHunt · Jun 30, 2005

Where to start:
[ul]
[li]Anything that stretches across the full width of your page doesn't need to be in a table.
[/li]
[li]Boxes that sit side-by-side can be positioned in various ways, tables being frowned upon these days, but remaining a possible solution.
[/li]
[li]Wherever possible, avoid the use of images to represent text[/li]
[/ul]
With these principles in mind, start to build up the bare bones of your layout. Don't worry about backgrounds and borders just yet...

Code:

<html>
<head>
  <title>Briskfire.com</title>
</head>
<body>
  <div id="welcome">Welcome to Briskfire.com</div>
  <div id="logo"><img src="briskfire.gif" alt="Briskfire.com" /></div>
  <div id="login">Login:</div>
  <div id="main">
    <table>
      <tr>
        <th width="10%" scope="col">Navigation:</th>
        <th scope="col">Content:</th>
      </tr>
      <tr>
        <td>Nav here</td>
        <td rowspan="5">Content here</td>
      </tr>
      <tr>
        <th scope="col">Information:</th>
      </tr>
      <tr>
        <td>Info here</td>
      </tr>
      <tr>
        <th scope="col">Games(?):</th>
      </tr>
      <tr>
        <td rowspan="3">Games here</td>
      </tr>
      <tr>
        <th scope="col">Extra:</th>
      </tr>
      <tr>
        <td>Extra here</td>
      </tr>
    </table>
  </div>
  <div id="footer">Briskfire.com -- Copyright 2005 -- All Rights Reserved</div>
</body>
</html>

Ugh, table-based layout, I feel dirty. Still, it does the job. If you temporarily add a [tt]border="1"[/tt] to the <table> tag, you'll see that it has the structure of your page. The only image that I've used - briskfire.gif - is one for one of your logos (I'll put the other one in later), let's say it's the blue gemstone thingy, with a little grey space around it.

Now to add some style. In the <head> section of the page, start building up a style element (eventually, you'll want to put the CSS declarations in a seperate file, but let's start with it inline):

Code:

  <style type="text/css">
    body {
      margin: 0;
      padding: 0;
      font-family: arial, helvetica, sans-serif;
      font-size: small;
      color: #666;
    }

    #welcome,#main {
      background: #EDECEC;
    }

    #logo {
      background: #D8DBDB url(otherlogo.gif) 80% 50% no-repeat;
      border-bottom: 1px solid #B5B5B5;
      margin-bottom: 5px;
    }

    #login {
      background: url(twotone.gif) 0 50% repeat-x;
      border-top: 1px solid #B5B5B5;
      border-bottom: 1px solid #B5B5B5;
      margin-bottom: 5px;
    }


    #main {
      padding: 5px 0;
      border-top: 1px solid #B5B5B5;
      border-bottom: 1px solid #B5B5B5;
      margin-bottom: 5px;
    }

    #main table {
      width: 100%;
      border-collapse: collapse;
    }

    #main th {
      background: url(twotone.gif) 0 50% repeat-x;
      text-align: left;
      font-weight: normal;
      height: 1em;
      border: 1px solid #B5B5B5;
    }
    
    #main td {
       vertical-align: top;
       border: 1px solid #B5B5B5;
    }

    .left {
      width: 10%;
    }

   #footer {
      background: url(twotone.gif) 0 50% repeat-x;
      border-top: 1px solid #B5B5B5;
      text-align: right;
      margin-bottom: 5px;
    }
  </style>

I'm struggling to get a gap between the two table columns (margin-right doesn't seem to work with table cells), so I'm gonna add an empty cell to the first row:

Code:

      <tr>
        <th width="10%" scope="col">Navigation:</th>
        [b]<td id="spacer" rowspan="8">&nbsp</td>[/b]
        <th scope="col">Content:</th>
      </tr>

and some CSS to style it:

Code:

    #main td#spacer {
      width: 5px;
      border: 0;
    }

twotone.gif is a tall, narrow image with the top half light grey, the bottom half dark. otherlogo.gif is your other logo.

Hopefully this should put you well on the road to sorting out your site.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

JamesCliff · Jun 30, 2005

Thats amazing,

Thanks alot chris, i never knew it was possible to do so much with css. Im gonna start researching more and learn abit more so it can aid me in the design of my site.

The code you posted above is great, it looks great to. Its a big help. However.... i was woundering if its possible to integrate some images into the table setup such as my header with the banner and nav and content headings and then use css to make them expand. Basiclly just like youve done above, except using some of the images instead?

I dont know if its possible to do, just curious.

Thanks alot

Jim

towerbase · Jun 30, 2005

Jim,

Why not give Chris a star? I think he deserves it! All you have to do is click on Thank ChrisHunt

Andrew
Hampshire, UK

JamesCliff · Jun 30, 2005

ahhh cool,

didnt know u could give other users star. Yeh i think he deserves it as well.

Thanks for letting me know howto do it

Jim

ChrisHunt · Jun 30, 2005

With regard to using images and making them expand...

You can use the plain old <img> tag with a percentage height and/or width to stretch it to the required size:

Code:

<td><img src="someimg.gif" height="100%" width="100%" /></td>

This can be useful sometimes, but it will distort the image to fit the space.

You can also use CSS to define background images that can repeat themselves horizontally, vertically, or in both or neither direction. I've used this technique in my example above.

If you're devious, you can combine <img>s and backgrounds to make images that appear to extend fluidly. For example, in my code above you could have:

Code:

<th scope="col"><img src="inf.gif" alt="Information:" /></th>

Where inf.gif is just an image of the word "Information:" on the two-tone background, it doesn't need to be wider than the text. When the image stops, the background image defined in the stylesheet shows through, and appears to extend the image to the end of the cell.

I strongly advise you NOT to do that is this case, but to use normal text instead. I know you the images-as-text approach looks smoother, and gives you the choice of font, but it's also less friendly to visitors on slow connections and those who might need/want to re-size your text in order to read it. It's also slightly more fiddly to implement and maintain. It's not worth it on your page, imo.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Dynamic width and height of my site - need help! 1

JamesCliff

Programmer

Vragabond

Programmer

JamesCliff

Programmer

ChrisHunt

Programmer

ChrisHunt

Programmer

JamesCliff

Programmer

towerbase

Programmer

JamesCliff

Programmer

ChrisHunt

Programmer

Similar threads

Part and Inventory Search

Sponsor