17 replies [Last post]
UEBen
Offline
newbie
Last seen: 17 years 41 weeks ago
Joined: 2005-02-20
Posts: 3
Points: 0

I've been trying to recreate the following table-based layout solely using CSS & DIV's (in other words, not using table tags).
No luck. I'm frustrated and think it can't be done. Would anyone care to prove me wrong?

<table style="border-spacing:0px; border-collapse:0px; width:750px; border:1px solid black;">
<tr>
	<td colspan="2" style="background-color:#FFFF33; border-bottom:1px solid black;">
		<p>TITLE</p>
	</td>
	<td rowspan="3" style="background-color:#CC0000; border-left:1px solid black; width:130px; vertical-align:top;">
		<p>text</p>
		<p>text</p>
		<p>text</p>
		<p>text</p>
		<p>text</p>
		<p>text</p>
	</td>
</tr>
<tr>
	<td colspan="2" style="background-color:#009900; border-bottom:1px solid black;">
		image
	</td>	
</tr>
<tr>
	<td style="background-color:#6600CC; border-right:1px solid black; vertical-align:top; width:155px;">
		<p>link</p>
		<p>link</p>
		<p>link</p>
		<p>link</p>
		<p>link</p>
		<p>link</p>
	</td>
	<td style="background-color:#FFFFFF; vertical-align:top;">
		<p>content</p>
		<p>content</p>
		<p>content</p>
		<p>content</p>
		<p>content</p>
		<p>content</p>
	</td>
</tr>
</table>

Thanks.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

CSS Guru needed: Design this!

Hi UEBen,
Hmm, being asked to prove a point eh; Wink

Personally no I don't feel the need to prove you wrong if your wanting to believe it can't be done then your wish is likely to be granted , if you really want a better understanding of why sometimes tables may not translate directly to css layouts then I would ask you firstly to read this topic, from the last post on the first page through all the others on page two
http://www.csscreator.com/css-forum/ftopic7781.html

If your anything to do with that topic and specifically the last sentence of the last post, page one, then shame on you.
If your not and your wondering what this idiot is blathering on about, my apologies, but do read the posts they do give an insight into the table vs css-p debate.

I'm sure someone will come along shortly and rise to the challenge and attempt to demonstrate their CSS prowess by sorting you out a shinny new CSS layout, there lots of new bloods eager to prove their worth Smile

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Anonymous
Anonymous's picture
Guru

Re: CSS Guru needed: Design this!

UEBen wrote:
Would anyone care to prove me wrong?
Depends on what the prize is. Smile

Helen
Offline
Enthusiast
NYC
Last seen: 17 years 46 weeks ago
NYC
Timezone: GMT-6
Joined: 2005-01-16
Posts: 135
Points: 0

CSS Guru needed: Design this!

LOL - that was my question.

I have a layout in pure CSS almost exactly like that around here somewhere - question is, what problems have you specifically encountered trying to put it together? Can folks here help you to help yourself? ("give a man a layout, he's done for a day, but teach a man ... etc") Wink

Helen

Anonymous
Anonymous's picture
Guru

CSS Guru needed: Design this!

Yeah, it really doesn't seem very complex.

Helen
Offline
Enthusiast
NYC
Last seen: 17 years 46 weeks ago
NYC
Timezone: GMT-6
Joined: 2005-01-16
Posts: 135
Points: 0

CSS Guru needed: Design this!

Well, OK, I relented, 'cause I'm new, I'm home sick with the flu, and I needed something to entertain me. Wink

You can grab the code from the page, I put the CSS in the header. You'll want to add some padding or center the text, text styling, fiddle with your top two row heights, etc; I just followed your table output.

http://www.bpdresources.com/testlayout2.html

Helen

Anonymous
Anonymous's picture
Guru

CSS Guru needed: Design this!

Nice work Helen. It was pretty simple. Laughing out loud

I wonder why it was such a conundrum for UEBen.

Helen
Offline
Enthusiast
NYC
Last seen: 17 years 46 weeks ago
NYC
Timezone: GMT-6
Joined: 2005-01-16
Posts: 135
Points: 0

CSS Guru needed: Design this!

Triumph wrote:
Nice work Helen. It was pretty simple. Laughing out loud

Hey! I labored for hours on that ... kidding. Took about 45 minutes. Good exercise for me as a newbie to CSS. My code isn't the most elegant, but I'm learning.

UEBen (if you weren't a spoof poster), it's really not hard once you learn to conceptualize your layout in terms of block elements, instead of vertically arrayed as table-designers have learned to do.

I suspect your difficulty might have been in getting the red div to match the full length of the purple one? Solution: make the whole background red and float everything else on top of it, then add an invisible clearing element to pull the red down to the bottom. Smile

Helen
Offline
Enthusiast
NYC
Last seen: 17 years 46 weeks ago
NYC
Timezone: GMT-6
Joined: 2005-01-16
Posts: 135
Points: 0

CSS Guru needed: Design this!

PS: oh yes - I also made it to the exact pixel size you specified, but if it were mine, I'd designate the widths in % so that it's more fluid for folks who resize text, etc.

UEBen
Offline
newbie
Last seen: 17 years 41 weeks ago
Joined: 2005-02-20
Posts: 3
Points: 0

CSS Guru needed: Design this!

To Hugo: This has been my first post to these forums. I've been browsing them for a day or two, but to be honest I'm rather impatient about finding a plausible solutions/alternative to my example (as I have been banging my head against the wall about this for some time now). I'm not a cheat or a novice to designing sites with extensive CSS - I just couldn't figure this one out and thought I'd get some quicker responses by "challenging" you guys (and it worked Smile )

So to Helen: Thank you very much! You've steered me in the right direction, although there are some problems with your code in terms of what I need the page to do (which is understandable since I didn't make myself clear). For example, if you add more "content" to the white center area (thus exceeding the height of the content in the purple box on the left), the red background for the main "#wrapper" DIV is shown under the purple box. I've since wrapped the text for the red box in a div which has helped some.

Regardless, I appreciate the help and will now work on this a bit more.

Thanks again.
Ben

To Triumph: thanks for your help. Wink

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

CSS Guru needed: Design this!

Ben glad to hear that your not a novice to CSS, but impatience and coding especially CSS tend not to sit together well.

It would have been proper of you and good forum etiquette if you had shown some of your workings and where you had reached in your own endeavors.
As it is it's a wee bit cheeky to throw up a challenge as you did considering that it would get the job done for you; hence some of the reactions to your post.

Yes it worked and you got lucky with Helens coding but - and no offence intended towards helen - that CSS layout is not particularly difficult thus it surprises me that it foxed you despite your extensive knowledge .

Ah well cheekiness seems to be the order of the day , welcome to the forum regardless, lets hope that in the future you can endeavor to demonstrate some degree of effort on your part then we shall rush to help you Smile

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

UEBen
Offline
newbie
Last seen: 17 years 41 weeks ago
Joined: 2005-02-20
Posts: 3
Points: 0

CSS Guru needed: Design this!

Ouch! Thanks, but no thanks.

If I'd known I was going to be lectured on "good forum etiquette" and then belittled for bringing up something "not particularly difficult" I would have stayed way clear of this forum.

You have a "holier-then-thou" attitude that's not appreciated.

But I guess I've learned your lesson - "avoid this forum if you want any quick answers - cause we'll debase you for it."
Gotcha. Wink

Good-bye.

PS. Don't bother replying, I won't be back to read it (unless it makes you feel better to do so anyway - you seem to enjoy that.)

Anonymous
Anonymous's picture
Guru

CSS Guru needed: Design this!

UEBen wrote:
PS. Don't bother replying, I won't be back to read it (unless it makes you feel better to do so anyway - you seem to enjoy that.)
Yep, I feel great. Laughing out loud

Helen
Offline
Enthusiast
NYC
Last seen: 17 years 46 weeks ago
NYC
Timezone: GMT-6
Joined: 2005-01-16
Posts: 135
Points: 0

CSS Guru needed: Design this!

Well, then, guess that solves that. I rather thought an interesting discussion could have been generated via working through a table ~ > CSS conversion process, but apparently not with this particular poster. :?

I suspect this guy's client and I are probably the only ones who got anything out of it. Sorry, folks, I kinda jumped the gun there; to be fair I didn't give him much time to respond before leaping back in with a solution. Lesson learned.* Smile

H

*("quick answer with my interaction" and "do the work and gimme the answer now" are not always two separate things for some folks)

Anonymous
Anonymous's picture
Guru

CSS Guru needed: Design this!

Yeah, he got what he wanted and now is gone. Ah well.

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 9 years 19 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

CSS Guru needed: Design this!

UEBen (I'm sure you'll be back to read this) - A lot of people give a lot of valuable time and experience to help others on this forum, and Hugo gives more of his time than most. The one thing that really winds up such helpers is being taken for granted and your attitude from the very start was therefore guaranteed to get a jaded response. Just look at your thread title ( CSS Guru needed: Design this! ) and read it again from the perspective of someone who is busy with their own work but who likes to help others if they can. Personally I'm surprised you got any help whatsoever.

Life's a b*tch and then you die!

StibPelle
Offline
Regular
Last seen: 15 years 17 weeks ago
Timezone: GMT+1
Joined: 2004-07-01
Posts: 22
Points: 0

CSS Guru needed: Design this!

Helen wrote:
Well, then, guess that solves that. I rather thought an interesting discussion could have been generated via working through a table ~ > CSS conversion process, but apparently not with this particular poster. :?

Well I realy would love to continue this thread.
i have almost the same problem as that particular poster. have worked quite much with CSS but is definitely not a gury, yet Wink

But to avoid javascript for resizing the divs height, it has to create a soloution that doesnt take care of the contents lenght in the center/left column. And to make it even worse, stay out of border and use backgrouns images instead. otherwise we could use the "online editor" here at CSScreator.com Smile

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

CSS Guru needed: Design this!

StibPelle,

By all means open a discussion, but I think that it would be better to start a new thread , this one has run it's course and I would rather see it fade away rather than be kept alive.

I'll leave it open for a while but lock it out in due course.

Hugo.

As StibPelle has started a fresh topic (thanks StibPelle) this one will be locked out, any other mods/admin that feel a need to re-open please do so.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me