Web Design Forums

Tripper44 · 25-10-2005, 19:39

Hi guys

ok iam still not convinced that css could ever take over tables because of things like this.

In my latest design I have rounded boxes shown above that need a red border, inner glow and a red title section at the top. now using html tables this is piss easy to do with a minimal amount of code that positions images around the edge.

I've search around the net for a way to do this is css, I have found a few methods to acomplish this, but the only ones I've found use mountains of code and sometimes a crappy seperate javascript file also with mountains of code, which seems like a whole lot of code for something so simple.

If anyone knows a way this can be done exsacly like the picture above in less than 50 lines of dam css code I will gladly eat my hat and may consider using css more.

adras · 25-10-2005, 19:58

Quote:

Eat your hat, you have no clue what you are talking about kid.

jase1000 · 25-10-2005, 20:08

One born every minute they say

mike_m · 25-10-2005, 20:38

how would you go about doing that with a re-sizable box?

Curious as we've just done this having to re-work an old fluid width table based design with loads of rounded corners into css ( my eyes are still twitching) so it works with our content management system (can you believe they wouldn't stump up 10% on top of the total cost for a re-design? bloody thing took longer to make using the old horrible design regardless.. but anyway)

Tripper44 · 25-10-2005, 20:56

Ah now you see that would be good but i think tables takes the next round aswell, as resizable is kind of a must when it comes to boxes containing text.

If i wanted to do lots of different sized boxes or add more text to that box i would have to make lots of different sized images for backgrounds? thats nasty.

Luke Redpath · 25-10-2005, 21:39

If its between using tables or coming up with a simplified design, I take the latter.

But its doable anyway. And if needs some javascript, thats fine as long as it degrades normally without it (same box, no rounded corners).

As for this:

Quote:

ok iam still not convinced that css could ever take over tables because of things like this.

CSS is already taking over tables, and frankly anybody still using table based layouts professionally in a few years time should be considered a joke.

roto · 25-10-2005, 23:11

Quote:

Originally Posted by adras

Code:

<style type="text/css">
#container {
float: left;
width: 523px;
}
#redheader {
float: left;
width: 523px;
height: 25px
background: url(images/header.gif);
font-weight: bold;
color: #fff;
}
#box {
float: left;
width: 523px;
height: 170px;
background: url(images/box.gif);
}
</style>

<html>
<div id="container">
<div id="redheader">title here</div>
<div id="box">other crap here</div>
</div>
</html>

Eat your hat, you have no clue what you are talking about kid.

He probably just wanted to get it coded in CSS and is now running off to show off his new "skills" to everyone.
Bad form...

seen.to · 26-10-2005, 00:59

Here's something I've been playing with, no tables of course: http://www.designagency.us/dev1/index2.html

Rounded, expandable boxes aplenty.

pgo · 26-10-2005, 02:50

Quote:

Originally Posted by seen.to

Here's something I've been playing with, no tables of course: http://www.designagency.us/dev1/index2.html

Rounded, expandable boxes aplenty.

Nice one, seen.to. Although, the freelance box on the right drops down on resize (FF/Win). But good going, nonetheless.

Let's ignore "Tripper" he obviously doesn't know what he's talking about, and as you said, Luke, anyone using tables as a layout device in the next few years will be considered a joke.

I already consider them jokes. Especially the ones who incite flame wars about how tables are so much better for layout when the simple fact remains, he's suggesting using the wrong tool for the job.

He's arguing that we use hammers to drive screws in. All we have to do is ignore it and use our screwdrivers.

finbarr · 26-10-2005, 04:38

surely the only problem with rounded corner boxes is when using a fluid layout? Insofar as you cant simply use one header/footer image if the width of the box is changing. It's a bit of a pain but it can be done... its just not a pleasant job. Ive personally never had a problem getting the bottom image to descend depending on the amount of text within the box.
And where the hell have you been searching for examples, Tripper? There are examples of this technique all over the net

pgo · 26-10-2005, 04:47

It's laughably easy to create an expandable rounded-corner box with a fixed width.

Not quite as easy when it needs to scale along both axes, but still attainable relatively simply. Just look at www.mozilla.org

finbarr · 26-10-2005, 04:55

Quote:

Originally Posted by pgo

It's laughably easy to create an expandable rounded-corner box with a fixed width.

Not quite as easy when it needs to scale along both axes, but still attainable relatively simply.

thats what I said, isnt it?

pgo · 26-10-2005, 07:17

Quote:

Originally Posted by finbarr

thats what I said, isnt it?

For the most part, but it bears repeating.

finbarr · 26-10-2005, 07:21

Quote:

Originally Posted by pgo

For the most part, but it bears repeating.

very true

weldo · 26-10-2005, 07:34

I can't be arsed trying to figure out the resizable CSS etc, but I'm sure it can be done.

Whether you like CSS or not - it is a developing area.
You can keep your tables, and shove 'em up your arse along with your VHS tapes, 8 track cartridges and your BBC Micro ...

d*d · 26-10-2005, 07:44

http://www.w3.org/Style/Examples/007/roundshadow.html

there y'are

pgo · 26-10-2005, 07:48

Quote:

Originally Posted by d*d

http://www.w3.org/Style/Examples/007/roundshadow.html

there y'are

The before and after pseudoclasses don't work in IE do they?

d*d · 26-10-2005, 07:55

ah feck

pgo · 26-10-2005, 08:05

You could do it this way... http://www.redmelon.net/tstme/4corners/ ...though it requires extra, non-semantic markup. Or this way - http://www.vertexwerks.com/tests/sidebox/ .

Not as much markup as with a big ol' table, though.

To make it fluid (expandable in all directions) with a table I think you'd have to do it like so...

HTML Code:

<table>
<thead>
  <td>top left corner</td>
  <td>heading/title - top graphic</td>
  <td>top right corner</td>
</thead>
<tbody>
  <td>left side</td>
  <td>text - background-color or graphic</td>
  <td>right side</td>
</tbody>
<tfoot>
  <td>bottom left corner</td>
  <td>bottom graphic</td>
  <td>bottom right corner</td>
</tfoot>
</table>

And then you'd have to repeat that bloated code every time you wanted an expandable box. And then there's the issue of whether or not the contents are tabular data (which they aren't) - so, again, using the wrong tool for the job. Utter nonsense.

seen.to · 26-10-2005, 08:09

I've pulled one of the boxes from the WIP I posted above... with it you can see how the box will scale both horizontally and vertically. It will break fairly quickly because I only created the images to work in the confines of the design shown previously but you can get the idea if you start by dragging your browser to be as narrow as possible then resizing outwards and seeing how the box moves in both directions.

http://www.designagency.us/dev1/just-a-box.html

25-10-2005, 19:39	#1 (permalink)
Tripper44 Registered User Join Date: Sep 2005 Posts: 14	Yay For Tables! Hi guys ok iam still not convinced that css could ever take over tables because of things like this. In my latest design I have rounded boxes shown above that need a red border, inner glow and a red title section at the top. now using html tables this is piss easy to do with a minimal amount of code that positions images around the edge. I've search around the net for a way to do this is css, I have found a few methods to acomplish this, but the only ones I've found use mountains of code and sometimes a crappy seperate javascript file also with mountains of code, which seems like a whole lot of code for something so simple. If anyone knows a way this can be done exsacly like the picture above in less than 50 lines of dam css code I will gladly eat my hat and may consider using css more.

25-10-2005, 20:38	#4 (permalink)
mike_m Work faster microphone .. Join Date: Feb 2003 Location: Dubai Posts: 1,739	how would you go about doing that with a re-sizable box? Curious as we've just done this having to re-work an old fluid width table based design with loads of rounded corners into css ( my eyes are still twitching) so it works with our content management system (can you believe they wouldn't stump up 10% on top of the total cost for a re-design? bloody thing took longer to make using the old horrible design regardless.. but anyway) __________________

25-10-2005, 20:56	#5 (permalink)
Tripper44 Registered User Join Date: Sep 2005 Posts: 14	:) Ah now you see that would be good but i think tables takes the next round aswell, as resizable is kind of a must when it comes to boxes containing text. If i wanted to do lots of different sized boxes or add more text to that box i would have to make lots of different sized images for backgrounds? thats nasty.

26-10-2005, 00:59	#8 (permalink)
seen.to unusual suspect ™ Join Date: Jul 2004 Location: DE, USA Posts: 3,116	Here's something I've been playing with, no tables of course: http://www.designagency.us/dev1/index2.html Rounded, expandable boxes aplenty. __________________ [[proverbs and quotes]] [[blog]] [[work]] [[photowebby - some photo's by me]]

26-10-2005, 07:34	#15 (permalink)
weldo now with added beard Join Date: Mar 2004 Location: Liverpool Posts: 5,602	I can't be arsed trying to figure out the resizable CSS etc, but I'm sure it can be done. Whether you like CSS or not - it is a developing area. You can keep your tables, and shove 'em up your arse along with your VHS tapes, 8 track cartridges and your BBC Micro ... __________________ fuck signatures

25-10-2005, 20:08	#3 (permalink)
jase1000 turd 2.0 Join Date: Aug 2005 Location: Right on your tit end Posts: 1,163	One born every minute they say

26-10-2005, 04:38	#10 (permalink)
finbarr who the fuck am i? Join Date: Apr 2005 Location: london Posts: 2,670	surely the only problem with rounded corner boxes is when using a fluid layout? Insofar as you cant simply use one header/footer image if the width of the box is changing. It's a bit of a pain but it can be done... its just not a pleasant job. Ive personally never had a problem getting the bottom image to descend depending on the amount of text within the box. And where the hell have you been searching for examples, Tripper? There are examples of this technique all over the net

26-10-2005, 04:47	#11 (permalink)
pgo Senior Member Join Date: Jan 2005 Posts: 12,340	It's laughably easy to create an expandable rounded-corner box with a fixed width. Not quite as easy when it needs to scale along both axes, but still attainable relatively simply. Just look at www.mozilla.org

26-10-2005, 07:44	#16 (permalink)
d*d Moderator Join Date: Oct 2004 Location: Bristol Posts: 3,401	http://www.w3.org/Style/Examples/007/roundshadow.html there y'are

26-10-2005, 07:55	#18 (permalink)
d*d Moderator Join Date: Oct 2004 Location: Bristol Posts: 3,401	ah feck

26-10-2005, 08:05	#19 (permalink)
pgo Senior Member Join Date: Jan 2005 Posts: 12,340	You could do it this way... http://www.redmelon.net/tstme/4corners/ ...though it requires extra, non-semantic markup. Or this way - http://www.vertexwerks.com/tests/sidebox/ . Not as much markup as with a big ol' table, though. To make it fluid (expandable in all directions) with a table I think you'd have to do it like so... HTML Code: <table> <thead> <td>top left corner</td> <td>heading/title - top graphic</td> <td>top right corner</td> </thead> <tbody> <td>left side</td> <td>text - background-color or graphic</td> <td>right side</td> </tbody> <tfoot> <td>bottom left corner</td> <td>bottom graphic</td> <td>bottom right corner</td> </tfoot> </table> And then you'd have to repeat that bloated code every time you wanted an expandable box. And then there's the issue of whether or not the contents are tabular data (which they aren't) - so, again, using the wrong tool for the job. Utter nonsense.

26-10-2005, 08:09	#20 (permalink)
seen.to unusual suspect ™ Join Date: Jul 2004 Location: DE, USA Posts: 3,116	I've pulled one of the boxes from the WIP I posted above... with it you can see how the box will scale both horizontally and vertically. It will break fairly quickly because I only created the images to work in the confines of the design shown previously but you can get the idea if you start by dragging your browser to be as narrow as possible then resizing outwards and seeing how the box moves in both directions. http://www.designagency.us/dev1/just-a-box.html __________________ [[proverbs and quotes]] [[blog]] [[work]] [[photowebby - some photo's by me]]

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search