fancy borders with images... ?

[autocrat]

Okay... this is bound to result ins a whole bunch of "personal" opinions, but I shall ignore those :)

It is possible to apply borders with CSS.

What is not yet fully supported are the various special "fancy" border options for things like Curved Edges, Drop Shadows etc... so we are forced to resort to using images etc.

What I'm after is some input on what is deemed as "acceptable markup" for creating these boxes.

Right, criteria ...

• I avoid using JS/DOM as much as possible, so those are out.
• I am not a "Purist", though I would prefer to use "less code" over "more code".
• I always am for Fluid/Flexible/Dynamic designs, so fixed Height/Width is out.
• I am aiming for the "Most" potential design, thus all four edges and all four corners!

Imagine having you content in a nice little block.
Boring.
The Client wants funny shapped corners, 3D looking edging around the content, and fancies either a dropped shadow or glow around the whole lot.
Not Nice!
(Hey, They can pay for it ;) )

Now, the only method I can come up with involves either Div's to the Max and some dodgey Margin/Padding work for CSS Background-Images and Cross Browser support....
OR
Almost as many Divs and several Images for the Corners with some Positioning.

Is there a better way than having 8+ Divs?
Also, whilst I'm at it, is there really any practical CODE difference between using umpten Divs or Umpteen Spans?

[Rhyan]

Okay... this is bound to result ins a whole bunch of "personal" opinions, but I shall ignore those :)

It is possible to apply borders with CSS.

What is not yet fully supported are the various special "fancy" border options for things like Curved Edges, Drop Shadows etc... so we are forced to resort to using images etc.

What I'm after is some input on what is deemed as "acceptable markup" for creating these boxes.

Right, criteria ...

• I avoid using JS/DOM as much as possible, so those are out.
• I am not a "Purist", though I would prefer to use "less code" over "more code".
• I always am for Fluid/Flexible/Dynamic designs, so fixed Height/Width is out.
• I am aiming for the "Most" potential design, thus all four edges and all four corners!

Imagine having you content in a nice little block.
Boring.
The Client wants funny shapped corners, 3D looking edging around the content, and fancies either a dropped shadow or glow around the whole lot.
Not Nice!
(Hey, They can pay for it ;) )

Now, the only method I can come up with involves either Div's to the Max and some dodgey Margin/Padding work for CSS Background-Images and Cross Browser support....
OR
Almost as many Divs and several Images for the Corners with some Positioning.

Is there a better way than having 8+ Divs?
Also, whilst I'm at it, is there really any practical CODE difference between using umpten Divs or Umpteen Spans?

Dude,

Nice questions, however, for the time being it seems that NO is the answer to your search. And I mean - no, it is not possible for the time being to save yourself a lot of coding if you want to make everything look rounded, in different shapes, etc...

Remember - everything apearing on your monitor is squares - how big or tiny, it depends what are you aiming for, still it remains square. So there is no easy way to make it round ;). As far as the curved borders, hmm interesting, but still not easy to achieve yet.

And at the end, maybe I don't get your question right, however, the difference between DIV and SPAN is that div is a block element, while span is an in-line element. This means you can place a span between the <p> and </p>, but if you place div like that - you have a non validated code.

[autocrat]

Hey, thanks for the reply :)

Well, I can do some pretty nice boxes... same code, different images... looks fantastic!
Downside is... Minimum 8 Divs!

No matter if I nest all inside each other, with an Image per position (t/b/l/r/tl/tr/bl/br) or if I do four nested and position the corners... still 8 divs :(

As for the DIV vs SPAN ... not worried about the inline etc... it's the amount of code that makes me laugh! So many people "shout-down" about a lot of markup, and say I should use span not Div, or apply the backgrounds to P tags etc...
Yet ...
1) It's still the same amount of code
2) That method won't work for Dynamic Sites
3) No. 2. is esp. if some numpty Client is using a WYSIWYG input editor ;)

Hmmm, maybe something similar to the sliding doors? using 4 large Images instead of 8 little ones ?

[autocrat]

And no, thats not flexible enough... 4 divs breaks far to easily!!!

6 Divs works well enough though (two for either side, plus one for corner, ((one top long, one top short, same for bottom)))

Further, I don't think there ever will be an easier method of doing this.... not unless they are able to make CSS read images, emulate & replicate the data for varied output!

Also, just to pick a fight with any purists.... ( ;) ) .... how is making images 5 times the size better than code twice the size?
(I won't accept the answer of "they can turn images off" :) )

well, if anyone ever does figure this out... give us a PM or something :)

[tgreer]

I don't see any of these imaginary purists whom you're addressing, but I'd imagine they'd tell you that you can have as much markup as you need in order to achieve your effect, however, you have to structure it so that it is maintainable. That usually equates to having the smallest amount of elements as possible.

As for images vs. code: whichever produces the least bandwidth and renders fastest on the client. The fancy effect is kind of ruined when the objects are slowly built-up piecemeal.

[Rhyan]

And no, thats not flexible enough... 4 divs breaks far to easily!!!

6 Divs works well enough though (two for either side, plus one for corner, ((one top long, one top short, same for bottom)))

Further, I don't think there ever will be an easier method of doing this.... not unless they are able to make CSS read images, emulate & replicate the data for varied output!

Also, just to pick a fight with any purists.... ( ;) ) .... how is making images 5 times the size better than code twice the size?
(I won't accept the answer of "they can turn images off" :) )

well, if anyone ever does figure this out... give us a PM or something :)

Interesting posts, however, 6divs for round corners seems too much if you want to "round" a small box. For big text area, etc, - I agree - 6 is well enough.

Buttons can be done with 2, actually - 1 span and the link itself. I've seen this, but never used.

As long as dynamic sites are concerned - I will disagree. You can always plan your layout, set your css code in external file and make the php or asp or whatever you prefer generate exactly the same code you have planned.

You can always control your h1, h2, p, span, div, elements, etc, no matter if they are generated or not, but the requirement is that you make the generated code include the classes and id's. And it is not hard.

About the ammount of code added - the good thing is that you put it once and then control it. :) Still you can't ignore it. Hopefully in css3 specs we will be able to do something like this:
<div style="border-corners: round 20%; background: primary color red, secondary orange, orientation top-to-botom; " > :D but let's see :)

By the way, i think that mozilla supports round corners, however not pretty sure. Have you heard of it?

[Rhyan]

P.S. - hey, they're doing it:) Take a look here...

http://www.w3.org/TR/2002/WD-css3-border-20021107/#the-border-radius

[autocrat]

...
:)

Okay, as for the "Imaginery Purists", they do exist (honestyl!)... they tend to scream and shout about markup for pretty stuff!
Ah well - kind of glad none have shown.

Regarding the Dynamic... I wans't refering to the creation of entities etc.... more the number of techniques that rely on set figures, px based width/height etc.
These are design techniques I am unable to use simply for the fact that I never know exactly what the client will do to the site!
(Unfortunately it is not possbily to programme an "Electric Moronic Client" button onto Sites - Yet!)

As for using only 2, for Span and Links... for some presentations/looks/feels, this is feasible, but not if you intend for the "Entire" site to be scalable (changing text-size etc.).

Point of fact... Any site I look at, I change the Width of the Browser Window and Change Text Size - one or the other of these two things will often screw-over about 60% of sites.
Then load up without JS.... even more fail to render nicely.
With CSS-amazingly enough, quite a few still look the same - which is a shame - as I now love CSS :)

[Godfear1]

Maybe I'm missing the point, but tables work pretty well for making rounded corners and nice borders. This is some code I came up with.

<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="width: 25px">
<img id="topLeftCorner" src="glowctl.JPG" /></td>
<td id="topMiddle" style="background-image:url(glowt.JPG);">
</td>
<td style="width: 25px">
<img src="glowctr.JPG" id="topRightCorner" /></td>
</tr>
<tr>
<td id="leftMiddle" style="background-image: url(glowl.JPG);">
</td>
<td style="height: 19px">
<p style=" font-weight:bold">This is the content of the table.</p>
</td>
<td id="rightMiddle" style="background-image: url(glowr.JPG); width: 25px; height: 19px">
</td>
</tr>
<tr>
<td style="width:25px">
<img src="glowcbl.JPG" id="bottomLeftCorner" /></td>
<td id="bottomMiddle" style="background-image: url(glowb.JPG)">
</td>
<td style="width: 25px">
<img src="glowcbr.JPG" id="bottomRightCorner" /></td>
</tr>
</table>

I have attached a screen capture of the results and a compressed folder containing all the files that I used to create it. I tried increasing and decreasing the size of the page and it resized beautifully, if I do say so myself. Of course, you probably are not going to use a pink glow for your clients page, but its a thought!:cheesy:

[Rhyan]

...
:)

Okay, as for the "Imaginery Purists", they do exist (honestyl!)... they tend to scream and shout about markup for pretty stuff!
Ah well - kind of glad none have shown.

Regarding the Dynamic... I wans't refering to the creation of entities etc.... more the number of techniques that rely on set figures, px based width/height etc.
These are design techniques I am unable to use simply for the fact that I never know exactly what the client will do to the site!
(Unfortunately it is not possbily to programme an "Electric Moronic Client" button onto Sites - Yet!)

As for using only 2, for Span and Links... for some presentations/looks/feels, this is feasible, but not if you intend for the "Entire" site to be scalable (changing text-size etc.).

Point of fact... Any site I look at, I change the Width of the Browser Window and Change Text Size - one or the other of these two things will often screw-over about 60% of sites.
Then load up without JS.... even more fail to render nicely.
With CSS-amazingly enough, quite a few still look the same - which is a shame - as I now love CSS :)

Agree... I think I am in love with CSS! :D - Hope my girl doesn't read this post, as I am getting into questions like - who is CSS?

Scalability is a problem. If you want to make your page consistent, in most cases you have to make it fixed, otherwise it gets ruined. Text sizes as well turn out to be a problem, and this has nothing to do with accessibility for users with disabilities(I hope you understand what I mean as I am not a native English user).

A lot has to be done in order to create nice texts, as you are quite limited in font usage. Verdana, Tahoma, Arial, Times, Courier - that is all that is common for any platform and that looks the same, or at least as intended.

Still, it is getting better every day.

[autocrat]

... godfear1 ...

Pretty, but I tend to avoid tables.
After much argueing, testing, re-arguing and re-testing, I came to agree with the many CSS lovers out there, "tables just don't do it".
CSS blocks have to many advantages ove Tables in regards to lighter code and Accessability...
That said, Tables still holds some advantages (e.g. multiple columns or ratio heights)...
PLus yours was damned pretty!

... Rhyan ...
Your English was fine!
Scalability is achievable... just takes a bit of practice and some time to learn new logic.
As much as I adore CSS, I have no idea what the developers were on when they came up with NNN means XXX should happen... some of it is a little strange at first when something doesn't do what you thought.

Try setting font-size: 62.5%; in HTML, then setting font-size: 1em; in BODY in your CSS file... that should equate to being around 10px in most if not all browsers.
that makes it damned easy to make things scalable, and not just text!
you can allocated heights and widths in em's too.... as well as margins or positions.... (position: absolute; top: 2.5em; left: 5em;) means 25px from the top and 50px from the left... as the text-size is increased in the browser, so will the spacing!
:)
also works for images! just set an id or class for your image, then in the CSS allocate dimensions in em's... whatch it change according to browser text-size!

Go on, have a play - see what you can do :D