Ad:

HTML and CSS Discussion Thread
Unsolved
Views: 16542

Page 1
2
Next

You are currently viewing page 1 of this multi-page discussion thread

Permalink

Nov 2nd, 2006

fancy borders with images... ?

Expand Post »

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?

Similar Threads

Getting rid off the border round link images in HTML and CSS

autocrat

Reputation Points: 63

Solved Threads: 12

Posting Pro in Training

Offline

427 posts
since Feb 2005

Permalink

Nov 2nd, 2006

Re: fancy borders with images... ?

Click to Expand / Collapse Quote originally posted by 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?

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.

Rhyan

Reputation Points: 21

Solved Threads: 26

Posting Whiz in Training

Offline

240 posts
since Oct 2006

Permalink

Nov 2nd, 2006

Re: fancy borders with images... ?

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

Reputation Points: 63

Solved Threads: 12

Posting Pro in Training

Offline

427 posts
since Feb 2005

Permalink

Nov 2nd, 2006

Re: fancy borders with images... ?

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

autocrat

Reputation Points: 63

Solved Threads: 12

Posting Pro in Training

Offline

427 posts
since Feb 2005

Permalink

Nov 2nd, 2006

Re: fancy borders with images... ?

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.

tgreer

Team Colleague

Reputation Points: 227

Solved Threads: 37

Made Her Cry

Offline

1,697 posts
since Dec 2004

Permalink

Nov 2nd, 2006

Re: fancy borders with images... ?

Click to Expand / Collapse Quote originally posted by 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

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; " >

but let's see

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

Rhyan

Reputation Points: 21

Solved Threads: 26

Posting Whiz in Training

Offline

240 posts
since Oct 2006

Permalink

Nov 2nd, 2006

Re: fancy borders with images... ?

P.S. - hey, they're doing it

Take a look here...

http://www.w3.org/TR/2002/WD-css3-bo...-border-radius

Rhyan

Reputation Points: 21

Solved Threads: 26

Posting Whiz in Training

Offline

240 posts
since Oct 2006

Permalink

Nov 3rd, 2006

Re: fancy borders with images... ?

...

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

autocrat

Reputation Points: 63

Solved Threads: 12

Posting Pro in Training

Offline

427 posts
since Feb 2005

Permalink

Nov 4th, 2006

Re: fancy borders with images... ?

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.

[html]
<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>

[/html]

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:

Attached Thumbnails

Click image for larger version

Name: example.JPG
Views: 1390
Size: 5.1 KB
ID: 2485

Attached Files

PinkGlowBorderFiles.zip (10.4 KB, 67 views)

Godfear1

Reputation Points: 12

Solved Threads: 3

Unverified User

Offline

46 posts
since Oct 2006

Permalink

Nov 6th, 2006

Re: fancy borders with images... ?

Click to Expand / Collapse Quote originally posted by 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

Agree... I think I am in love with CSS!

- 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.

Rhyan

Reputation Points: 21

Solved Threads: 26

Posting Whiz in Training

Offline

240 posts
since Oct 2006

Page 1
2
Next

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in HTML and CSS Forum Timeline: Footer

Next Thread in HTML and CSS Forum Timeline: Browser problem's

DaniWeb Message

Cancel Changes

User Name
Password