layout problem

samv · #1 (**permalink**) Feb 2nd, 2007, 00:07

Hi all

I am looking to reverse the cells in the right column. So have the bigger one at the bottom and the smaller one at the top. As shown in the jpeg attached.

How do you do this?

Sam

Ryan Fait · #2 (**permalink**) Feb 2nd, 2007, 01:03

You'll need to restructure the HTML and modify the CSS. If it's table-based, you won't have to worry about CSS as much. A link would be best.

samv · #3 (**permalink**) Feb 2nd, 2007, 08:08

It isnt online at the moment - but the code is below if that helps? I guess i can try and put it up somewhere - i am rather new to all this!

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>dressed to a tee - home of 'The Swing Easy Tour'</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<meta name="description" content="Hi, we are the official sponsors of 'The Swing Easy Golf Tour.' We supply all the clothing and accessories for all the players">
<meta name="keywords" content="golf clothes clothing attire shirt shirts tee tees organic cotton sports fashion lifestyle keep smiling swing easy">

<link rel="stylesheet" href="homepage.css" type="text/css">

</head>

<body bgcolor="#FFFFFF" text="#000000">
<table width="890" border="0" cellpadding="0" cellspacing="10" align="center">
<tr>
<td colspan="2" valign="top"> <img src="picture.jpg" width="550" height="265" alt="front page picture"/></td>
<td width="310" height="265"></td>
</tr>
<tr>
<td width="270" valign="top" height="165"><img src="swingeasygif.jpg" width="270" height="165" alt="swing easy tour gif"/></td>
<td width="270" valign="top"><img src="tourclothinggif.jpg" width="270" height="165" alt="tour clothing gif"/></td>
<td></td>
</tr>
</table>
</body>

</html>

Lchad · #4 (**permalink**) Feb 2nd, 2007, 10:59

Here you go!

Code: Select all

<body><body bgcolor="#FFFFFF" text="#000000">
<table width="890" border="0" cellpadding="0" cellspacing="10" align="center">
<tr>
<td colspan="2" rowspan="2" valign="top"> <img src="picture.jpg" width="550" height="265" alt="front page picture"/></td>
<td width="310" height="127"></td>
</tr>
<tr>
  <td rowspan="2"></td>
</tr>
<tr>
<td width="270" valign="top" height="165"><img src="swingeasygif.jpg" width="270" height="165" alt="swing easy tour gif"/></td>
<td width="270" valign="top"><img src="tourclothinggif.jpg" width="270" height="165" alt="tour clothing gif"/></td>
</tr>
</table>
</body>

daygon · #5 (**permalink**) Feb 2nd, 2007, 15:49

by the way when you're going to put in code please use [code]. make it easier for all of us.

samv · #6 (**permalink**) Feb 3rd, 2007, 11:16

Hello

Wow! Lchad - you don't know how helpful that bit of code is to me!? I have added my banners to it and the page is really starting to look good. So thank you very much for your help.

I have attached a pic of the draft with the banners. There is a bit of a bigger gap between the bottom banner and the rest of the page and I am not sure why that is? This leads to a question I have with my original code i got the lay out ok (ish!), in terms of the number of tables and rough layout. But i could not get the smart look that you got in terms of my spacing between the different tables. With your code the spacing is really consistent and gives the page a great look, whereas with mine it was all over the shop with some gaps bigger and some smaller. Is there any advice you can give to me about how to do this with my future pages?

Also is there any way to control the spacing of the banner from the top of the page. I would like to make this a little smaller than it is at the moment.

Finally when i look at the page in explorer and mozilla the right hand side looks slightly different. Ideally I would like this half and half now as it is with the mozilla browser, why does IE make the top table longer?

Also sorry, I didn’t realize about the code point - to clarify should i use tags like these ?

Anyway many thanks everyone for all your help so far and apologies if some of these questions are no brainers - i am new to this! If you are interested I left the details of what i am doing in the introduce yourself forum.

Sam

samv · #7 (**permalink**) Feb 3rd, 2007, 11:20

sorry forgot the jpeg of the home page- should and try and get this up online somewhere i guess, then as i develop it people can see it!

Thanks
Sam

Lchad · #8 (**permalink**) Feb 3rd, 2007, 19:20

Hey Sam, glad I could help! I'm usually the one on the receiving end of help...

If you could post your new code it would be easier for me to see what you see. Your jpeg looks excellent so it's hard to tell what you are questioning.

Quote:

But i could not get the smart look that you got in terms of my spacing between the different tables.

Your code looked good to me. The cell padding and cell spacing wasn't something I had to play with. I did that with Dreamweaver so I have to give the credit the program...

Quote:

Also is there any way to control the spacing of the banner from the top of the page. I would like to make this a little smaller than it is at the moment.

Do you want the height smaller, width smaller or distance from the top of the page smaller?

Quote:

Ideally I would like this half and half now as it is with the mozilla browser, why does IE make the top table longer?

You don't have table heights specified so it's doing it's own thing. Add the height of the table with golf ball pic + cellspacing + Offical tour swing table.
That's your total height. Let's say for instance it's 400 pixels. Give the top right table a height of 200 px and the same for the bottom right.

samv · #9 (**permalink**) Feb 15th, 2007, 11:51

Hello Lchad,

Sorry i didnt get back to you but i decided you were right and i was fussing a bit, and best to sort the little bits out at the end. In the meantime i have stormed on to page 2 of the site! This involves a side navigation which i am having some problems with. I have the layout done fine but i would like to put the gifs on the left hand side into individual table cells - which i will then link to other pages, but when i try to do this though the whole page starts going all over the place.

I would like the navigation on the left to not adversely affect the content on the right - eventually i will put product pics in the 8 cells on the right hand side. Do I need two separate tables to do this, at the moment it is all in the one?

Could you throw any light on this for me - here is the code I have done so far:

Code: Select all

<body><body bgcolor="#FFFFFF" text="#000000">
<table width="870" border="0" cellpadding="0" cellspacing="10" align="center">
<tr>
<td colspan="5"><img src="banner.gif" width="870" height="139" alt="banner"/></td>
</tr>
<tr>
<td width="200" rowspan="3"><img src="mensgolfshirts.gif"/><img src="menstshirts.gif"/><img src="womensgolfshirts.gif"/><img src="womenstshirts.gif"/>
<img src="blank.gif"/><img src="sizing.gif"/><img src="organiccotton.gif"/><img src="madeinportugal.gif"/><img src="personalisation.gif"/></td>
<td width="660" colspan="4" height="100" bgcolor="#E62B86"></td>
</tr>
<tr>
<td width="165" bgcolor="#CCCCCC"></td>
<td width="165" bgcolor="#E62B86"></td>
<td width="165" bgcolor="#CCCCCC"></td>
<td width="165" bgcolor="#E62B86"></td>
</tr>
<tr>
<td width="165" bgcolor="#CCCCCC"></td>
<td width="165" bgcolor="#E62B86"></td>
<td width="165" bgcolor="#CCCCCC"></td>
<td width="165" bgcolor="#E62B86"></td>
</tr>
<tr>

<td colspan="5"><img src="bottombanner.gif" width="870" height="26" alt="bottom banner"/></td>
</tr>
</table>
</body>

I have attached the 2 banner gifs and one of the navigation gifs if that helps - any help much appreciated - many thanks

Sam

karinne · #10 (**permalink**) Feb 15th, 2007, 14:14

Quote:

Originally Posted by Lchad

Hey Sam, glad I could help! I'm usually the one on the receiving end of help...

You are a good learner young grasshopper

sorry ... couldn't resist

Lchad · #11 (**permalink**) Feb 15th, 2007, 16:19

Hey:
Copy and paste this in your code and see if it's what you need...

Code: Select all

<table width="870" border="0" cellpadding="0" cellspacing="10" align="center">
<tr>
<td colspan="2"><img src="banner.gif" width="870" height="139" alt="banner"/></td>
</tr>
<tr>
<td width="200" height="32"><img src="mensgolfshirts.gif"/></td>
<td width="660" rowspan="9" bgcolor="#E62B86"></td>
</tr>
<tr>
  <td><img src="menstshirts.gif"/></td>
</tr>
<tr>
  <td><img src="womensgolfshirts.gif"/></td>
</tr>
<tr>
  <td><img src="womenstshirts.gif"/></td>
</tr>
<tr>
  <td><img src="blank.gif"/></td>
</tr>
<tr>
  <td><img src="sizing.gif"/></td>
</tr>
<tr>
  <td width="200"><img src="organiccotton.gif"/></td>
</tr>
<tr>
  <td width="200"><img src="madeinportugal.gif"/></td>
</tr>
<tr>
  <td><img src="personalisation.gif"/></td>
</tr>
<tr>

<td colspan="2"><img src="bottombanner.gif" width="870" height="26" alt="bottom banner"/></td>
</tr>
</table>

samv · #12 (**permalink**) Feb 16th, 2007, 10:03

Hi

Thank you - that helped but wasnt quite right. So I got to where i wanted to be by using the code below - I think its a nested table which is probably dreadfull to use, but it seems to get round the problem I had.

I have one more question. When using tables (which i know are not the best to use, but are getting me out of tight spot right now). Is there a correct order to use for their attributes. The attributes i use are align, background, bg color, border, cell padding, cell spacing, height and width. I can make up my own 'best order' but i was wondering whether there was a best practice for this?

Sam

[code]

<body><body bgcolor="#FFFFFF" text="#000000">
<table width="870" border="0" cellpadding="0" cellspacing="10" align="center">
<tr>
<td colspan="5"><img src="banner.gif" width="870" height="139" alt="banner"/></td>
</tr>
<tr>
<td width="204" rowspan="3">
<table width="100%">
<tr>
<td><img src="mensgolfshirts.gif"/></td>
</tr>
<tr>
<td><img src="menstshirts.gif"/></td>
</tr>
<tr>
<td><img src="womensgolfshirts.gif"/></td>
</tr>
<tr>
<td><img src="womenstshirts.gif"/></td>
</tr>
<tr>
<td height="26"> </td>
</tr>
<tr>
<td><img src="sizing.gif"/></td>
</tr>
<tr>
<td><img src="organiccotton.gif"/></td>
</tr>
<tr>
<td><img src="madeinportugal.gif"/></td>
</tr>
<tr>
<td><img src="personalisation.gif"/></td>
</tr>
</table>
<td width="656" colspan="4" height="100" bgcolor="#E62B86"></td>
</tr>
<tr>
<td width="164" bgcolor="#CCCCCC"></td>
<td width="164" bgcolor="#E62B86"></td>
<td width="164" bgcolor="#CCCCCC"></td>
<td width="164" bgcolor="#E62B86"></td>
</tr>
<tr>
<td width="164" bgcolor="#CCCCCC"></td>
<td width="164" bgcolor="#E62B86"></td>
<td width="164" bgcolor="#CCCCCC"></td>
<td width="164" bgcolor="#E62B86"></td>
</tr>
<tr>

<td colspan="5"><img src="bottombanner.gif" width="870" height="26" alt="bottom banner"/></td>
</tr>
</table>
</body>

Lchad · #13 (**permalink**) Feb 16th, 2007, 10:38

Glad you were able to get it working! Most of us have nested a table a time or two! Well at least those of us who have been out of college for a long time!

Here's the order that I use:

table width, height, borde, align, cellpadding. cellspacing, bordercolor, bgcolor

daygon · #14 (**permalink**) Feb 16th, 2007, 16:35

i use height width bgcolor border bordercolor padding spacing align

samv · #15 (**permalink**) Feb 16th, 2007, 18:37

Hi guys

Thanks for your 'orders' - thats a real help. I can see that organisation is key with all this. So best to get organised with things like this. I am now up to 6 pages - Yay! Not completely finished by any means but going in the right direction. Thanks for all your help so far, i quite literally couldnt have got here without some help. Unfortunatley i am asking for more!

I have backtracked a bit to put in the XHTML doc type code and meta tags at the top of the pages. And yep, you guessed it, this seems to have a caused a problem with the homepage. In internet explorer it looks great with all the alignment looking like it should, but in the mozilla browser the page has big gaps under the top banner and main pic, which although dont stop it functioning make it look untidy. It looks how it should though in mozilla if you take the <head> section out of the code.

I have triple checked all the tags and things and it looks fine. I wonder if this is a quirk with mozilla. Normally its internet explorer that messes things up though?

The code is below (and i have attached the banner and main pic) so you can see the annoying gap! Any help much appreciated (as always).

Sam

Code: Select all

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>dressed to a tee - the new home of golf</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="description" content="We are the sponsors of 'The Swing Easy Golf Tour.' We report all the action as it happens and offer the full range of offical tour merchandise">
<meta name="keywords" content="golf clothes clothing attire shirt shirts tee tees organic cotton sports fashion lifestyle keep smiling swing easy">
</head>

<body bgcolor="#FFFFFF" text="#000000">

<!--********** BANNER IMAGE MAP ***************-->

<map name="banner" id="banner">
<area alt="clothing" shape="poly" coords="246,116,337,110,339,127,249,132" href="clothing.html"/>
<area alt="accessories" shape="poly" coords="361,118,473,109,475,122,362,132" href="accessories.html"/>
<area alt="swing easy tour" shape="poly" coords="497,122,645,109,648,123,499,135" href="swingeasytour.html"/>
<area alt="news" shape="poly" coords="669,116,714,112,716,125,671,129" href="news.html"/>
<area alt="info" shape="poly" coords="738,116,775,112,777,112,777,125,740,128" href="info.html"/>
<area alt="bag" shape="poly" coords="800,119,831,114,835,128,801,133" href="bag.html"/>
</map>

<!--********** /BANNER IMAGE MAP ***************-->

<!--********** MAIN CONTENT ***************-->

<table width="870" border="0" align="center" cellpadding="0" cellspacing="10" >
<tr>
<td colspan="3"><img src="http://www.webforumz.com/images/banner.gif" alt="banner" usemap="#banner" width="870" height="139" border="0" /></td>
</tr>
<tr>
<td colspan="2" rowspan="2" valign="top"> <img src="http://www.webforumz.com/images/mainpic.jpg" alt="mainpic" width="550" height="265" /></td>
<td width="310" height="215" bgcolor="#00AEED"></td>
</tr>
<tr>
<td rowspan="2" bgcolor="#CCCCCC"></td>
</tr>
<tr>
<td width="270" height="165" valign="top"><img src="http://www.webforumz.com/images/swingeasytour.gif" alt="swing easy tour" width="270" height="165" /></td>
<td width="270" valign="top"><img src="http://www.webforumz.com/images/officialtourclothing.gif" alt="clothing" width="270" height="165" /></td>
</tr>
<tr>
<td colspan="3"><img src="http://www.webforumz.com/images/bottombanner.gif" alt="bottom banner" width="870" height="26" /></td>
</tr>
</table>

<!--********** /MAIN CONTENT ***************-->

<!--********** GOOGLE ANALYTICS CODE ***************-->

<!--********** /GOOGLE ANALYTICS CODE ***************-->

</body>

</html>

daygon · #16 (**permalink**) Feb 16th, 2007, 19:04

AHHHHHHH

DUDE USE THE [code] TAG!!!!!!!!!!! Got to advaced reply and use the code tag. GOD THATS ANNOYING!!!!

moojoo · #17 (**permalink**) Feb 16th, 2007, 19:09

He did use the code tag, he just forgot the closing [/code] tag.. I added it.

samv · #18 (**permalink**) Feb 16th, 2007, 19:15

sorry, am new to the site but i have made that mistake before, so apologies.

is there anyway on the site that explains protocol like this - dont want to be upsetting people. Maybe just a better memory needed this end.

moojoo · #19 (**permalink**) Feb 16th, 2007, 19:20

Eh I forget my pants sometimes. These things happen.

Lchad · #20 (**permalink**) Feb 16th, 2007, 23:52

Why don't you try validating the code to see if it picks up an error.

Are you familiar with www.w3.org? Here's the site..

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
CSS layout problem in FF	benracer	Web Page Design	4	Mar 28th, 2008 16:30
CSS Layout Problem	AlexDS

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
layout problem