What happened to the Messenger Plus! forums on msghelp.net?
Shoutbox » MsgHelp Archive » Skype & Technology » Tech Talk » Coding Suggestions?

Pages: (2): « First [ 1 ] 2 » Last »
Coding Suggestions?
Author: Message:
Eddie
Veteran Member
*****


Posts: 2078
Reputation: 30
32 / Male / Flag
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
Profile PM Web Find Quote Report
NanaFreak
Scripting Contest Winner
*****


Posts: 1476
Reputation: 53
32 / Male / Flag
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
Profile PM Find Quote Report
Eddie
Veteran Member
*****


Posts: 2078
Reputation: 30
32 / Male / Flag
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
Profile PM Web Find Quote Report
NanaFreak
Scripting Contest Winner
*****


Posts: 1476
Reputation: 53
32 / Male / Flag
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
Profile PM Find Quote Report
stoshrocket
Senior Member
****

Avatar
formerly methos

Posts: 748
Reputation: 31
34 / Male / Flag
Joined: Aug 2005
RE: Coding Suggestions?
I'd just use divs, but that's becuase i'm scared of tables. :P

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.
formerly methos
04-13-2009 12:21 PM
Profile PM Web Find Quote Report
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
Profile PM Find Quote Report
NanaFreak
Scripting Contest Winner
*****


Posts: 1476
Reputation: 53
32 / Male / Flag
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
Profile PM Find Quote Report
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
Profile PM Find Quote Report
Eddie
Veteran Member
*****


Posts: 2078
Reputation: 30
32 / Male / Flag
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 :D Thanks for the help.
...there used to be a signature here :)
04-13-2009 07:45 PM
Profile PM Web Find Quote Report
stoshrocket
Senior Member
****

Avatar
formerly methos

Posts: 748
Reputation: 31
34 / Male / Flag
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.
formerly methos
04-13-2009 10:15 PM
Profile PM Web Find Quote Report
Pages: (2): « First [ 1 ] 2 » Last »
« Next Oldest Return to Top Next Newest »


Threaded Mode | Linear Mode
View a Printable Version
Send this Thread to a Friend
Subscribe | Add to Favorites
Rate This Thread:

Forum Jump:

Forum Rules:
You cannot post new threads
You cannot post replies
You cannot post attachments
You can edit your posts
HTML is Off
myCode is On
Smilies are On
[img] Code is On