Coding Suggestions? |
Author: |
Message: |
Eddie
Veteran Member
Posts: 2078 Reputation: 30
32 / /
Joined: Oct 2005
Status: Away
|
O.P. Coding Suggestions?
Ok i have tried a couple of methods to code the following design;
http://img.habboupload.com/1234340744.png
Tables, CSS/Divs.
How would you guys suggest i code it, because i can do it all in tables quite easily, except managing to get the left and right content area's backgrounds continueing down without stuffing up. Usually if i have different content areas with different heights i use multiple different tables so that it doesnt drag another table down. I dont think that makes sense but any suggestions, if you want to see the very ugly looking code at the moment then let me know.
...there used to be a signature here
|
|
04-13-2009 04:53 AM |
|
|
NanaFreak
Scripting Contest Winner
Posts: 1476 Reputation: 53
32 / /
Joined: Jul 2006
|
RE: Coding Suggestions?
how about use both?
tables for the main outline (top, left, mid, right) then divs for everything else... and by tables i mean like this:
XML code:
<table>
<tr>
<td colspan="3">Header</td>
</tr>
<tr>
<td>Left</td>
<td>mid</td>
<td>right</td>
</tr>
</table>
|
|
04-13-2009 06:06 AM |
|
|
Eddie
Veteran Member
Posts: 2078 Reputation: 30
32 / /
Joined: Oct 2005
Status: Away
|
O.P. RE: Coding Suggestions?
Yeah ive considered that, but if the content in one of the <td>'s is bigger than the others it moves them to the centre of the table.
...there used to be a signature here
|
|
04-13-2009 08:08 AM |
|
|
NanaFreak
Scripting Contest Winner
Posts: 1476 Reputation: 53
32 / /
Joined: Jul 2006
|
RE: Coding Suggestions?
thats why with the <tr> you make it <tr valign="top">
simple! =p
|
|
04-13-2009 08:35 AM |
|
|
stoshrocket
Senior Member
formerly methos
Posts: 748 Reputation: 31
34 / /
Joined: Aug 2005
|
RE: Coding Suggestions?
I'd just use divs, but that's becuase i'm scared of tables.
One container div;
- 3 column divs to split page up with defined widths
- in the left 3 divs to create the three boxes
- in the centre 2 divs for the nav bar (?) and content
- 1 div on the right for that image
That's how I'd do it anyway, but be careful with divs and browser cross-compatibility, IE treats div padding differently to firefox, just google it for a couple of solutions.
|
|
04-13-2009 12:21 PM |
|
|
segosa
Community's Choice
Posts: 1407 Reputation: 92
Joined: Feb 2003
|
RE: Coding Suggestions?
http://gifpaste.org/eddie/
That's just to demonstrate a 3-column layout. It takes very little CSS and even less HTML to make it work. I tested it in Firefox, Chrome, IE (7, 8), and Opera.
Right now it's fixed-width at 800px, but it only takes a tiny change to make it fluid with the center column expanding as the page does (simply make the width a percentage, or remove it altogether and use the margin to center it.. whatever you want).
The only issue is it doesn't seem to center correctly in IE7 (that's IE for you), and I'm not in the mood to look into why right now.
This post was edited on 04-13-2009 at 03:13 PM by segosa.
The previous sentence is false. The following sentence is true.
|
|
04-13-2009 02:34 PM |
|
|
NanaFreak
Scripting Contest Winner
Posts: 1476 Reputation: 53
32 / /
Joined: Jul 2006
|
RE: Coding Suggestions?
quote: Originally posted by segosa
The only issue is it doesn't seem to center correctly in IE7 (that's IE for you), and I'm not in the mood to look into why right now.
you need to make the body text-align: center; then the content text-align: left;
This post was edited on 04-13-2009 at 02:46 PM by NanaFreak.
|
|
04-13-2009 02:43 PM |
|
|
segosa
Community's Choice
Posts: 1407 Reputation: 92
Joined: Feb 2003
|
RE: RE: Coding Suggestions?
quote: Originally posted by NanaFreak
quote: Originally posted by segosa
The only issue is it doesn't seem to center correctly in IE7 (that's IE for you), and I'm not in the mood to look into why right now.
you need to make the body text-align: center; then the content text-align: left;
Up to now I've always been able to center divs in IE using the fixed-width auto margin method without a problem, and I've never had to resort to that text-align hack. Either way, fixed it using that.
Edit: It now works in IE 5.5, 6, 7 & 8.
This post was edited on 04-13-2009 at 03:30 PM by segosa.
The previous sentence is false. The following sentence is true.
|
|
04-13-2009 03:06 PM |
|
|
Eddie
Veteran Member
Posts: 2078 Reputation: 30
32 / /
Joined: Oct 2005
Status: Away
|
O.P. RE: Coding Suggestions?
quote: Originally posted by segosa
http://gifpaste.org/eddie/
That's just to demonstrate a 3-column layout. It takes very little CSS and even less HTML to make it work. I tested it in Firefox, Chrome, IE (7, 8), and Opera.
Right now it's fixed-width at 800px, but it only takes a tiny change to make it fluid with the center column expanding as the page does (simply make the width a percentage, or remove it altogether and use the margin to center it.. whatever you want).
The only issue is it doesn't seem to center correctly in IE7 (that's IE for you), and I'm not in the mood to look into why right now.
Cheers mate, greatly appreciated Thanks for the help.
...there used to be a signature here
|
|
04-13-2009 07:45 PM |
|
|
stoshrocket
Senior Member
formerly methos
Posts: 748 Reputation: 31
34 / /
Joined: Aug 2005
|
RE: Coding Suggestions?
quote: Originally posted by segosa
http://gifpaste.org/eddie/
That's just to demonstrate a 3-column layout. It takes very little CSS and even less HTML to make it work. I tested it in Firefox, Chrome, IE (7, 8), and Opera.
Right now it's fixed-width at 800px, but it only takes a tiny change to make it fluid with the center column expanding as the page does (simply make the width a percentage, or remove it altogether and use the margin to center it.. whatever you want).
The only issue is it doesn't seem to center correctly in IE7 (that's IE for you), and I'm not in the mood to look into why right now.
The site linked is displayed differently within IE, due to the difference in the way IE renders padding, resulting in the div's with padding appearing smaller than for example, when loaded in firefox. Not too much of a problem with this particular design, but still a thing to note as a potential future problem when developing designs.
|
|
04-13-2009 10:15 PM |
|
|
Pages: (2):
« First
[ 1 ]
2
»
Last »
|
|