|
Welcome
Guest
|
Register
| Login
|
|
|
| Index | Recent Threads | Unanswered Threads | Who's Online | User List | Help |
Killersites.com Forum
General Web Design
Killer Web Design Tips, Secrets and Techniques.
Thread: Graphic borders around blocks
|
| No member browsing this thread |
|
Thread Status: Active Total posts in this thread: 9
|
|
| Author |
|
RaptorRex
Advanced Member Joined: Sep 16, 2005 Post Count: 126 Status: Offline |
Recently I had to jazz up my default templates and thought hard about how to make graphic borders easy for anyone to implement since my scripts produce the HTML and the users provide the style sheets. Here is the solution I came up with. It is the easiest method I can think of but I wonder what other techniques people are using. For example, imagine a comment box and you want a pretty shadowed border around it. There are 2 conditions on this: 1) the verticle size is variable since you don't know how large a comment someone wants to leave. 2) The horizontal size is fixed. The page designer decides that. Solution: 3 div blocks: header, body, footer. The left and right borders are comprised of the background of the body where left/right padding is used so text doesn't cover the border. <div class='header'></div> <div class='body'>comment here</div> <div class='footer'></div> div.header { width: 100px; background-image: url(h.png); height: 10px; } div.body { width: 80px; padding: 10px; background-image: url(b.png); } div.footer { width: 100px; background-image: url(f.png); height: 10px; } This solution leaves things pretty easy to allow css to completely control whether or not the block has a border at all, and what it will look like. I know some people like to chop up a 3x3 grid. What other techniques are there? |
||
|
|
newseed
Advanced Member Joined: Apr 2, 2005 Post Count: 2141 Status: Offline |
Do you have a sample site to show the results? I have seen serveral methods that work but most of them uses too much coding, table cells or images. I got one that I am working on now from a template that I thought was well done. When I get it done, I will post it. ---------------------------------------- Success is based on how much you spend. If it's not money, then the alternative is your time. The Kasper Group |
||
|
lm
Advanced Member Joined: Oct 27, 2004 Post Count: 2550 Status: Offline |
i use the same technique fixing backgrounds to upper and bottom div and tiling the middle one. For fancy borders i cut out pieces from Photoshop template and save them as .jpg together with the background. Often conditional comments for IE6 are needed to fix top and bottom correctly. ---------------------------------------- My blog |
||
|
|
RaptorRex
Advanced Member Joined: Sep 16, 2005 Post Count: 126 Status: Offline |
Here is an example. I decided to turn it into an actual article: http://upwithabang.com/articles/css-graphic-borders.html |
||
|
|
billyboy
Advanced Member Joined: Sep 3, 2005 Post Count: 2206 Status: Offline |
I would just make one minor change, set the widths of all divs the same and apply the padding to the content inside the divs. Versions of IE < 6 will not add padding or borders to overall width, they shrink the content instead, so the layout will break in those browsers. And in some cases, usually in IE6, with positioning or floats there can be a discrepancy in placement cross browser because of the padding. ---------------------------------------- Quiquid latine dictum sit altum viditur |
||
|
|
RaptorRex
Advanced Member Joined: Sep 16, 2005 Post Count: 126 Status: Offline |
I find that problem disappears in IE6+ if you set your DOCTYPE to HTML4.01 or xHTML. If you don't set DOCTYPE then that width/padding/border sizing issue crops up. I don't know about IE5 (and not sure I care) Browser stats from http://www.w3schools.com/browsers/browsers_stats.asp 2007 IE7 IE6 IE5 Fx Moz S O July 20.1% 36.9% 1.5% 34.5% 1.4% 1.5% 1.9% I recently did an indepth inspection on the DOCTYPE/padding IE issue but didn't record the conclusions. I'll write it up and post what I find. Then can get some peer review. Maybe I missed a problem. |
||
|
|
RaptorRex
Advanced Member Joined: Sep 16, 2005 Post Count: 126 Status: Offline |
I have posted examples of what I mean about IE and DOCTYPE. http://upwithabang.com/articles/css-doctype-width.html That links to demo pages I setup showing firstly a page without a doctype. In IE6 it has problems. Then for other examples with DOCTYPE specified and IE6 has no problems. There are probably more variations to test but I'm not sure how popular those are in the wild. In conclusion, I always just make sure I set a DOCTYPE of 4.01 or xhtml. That way the technique I show here seems to always work. |
||
|
|
lm
Advanced Member Joined: Oct 27, 2004 Post Count: 2550 Status: Offline |
i think here should be said that you can experiment with the Doctype any way you want but if you build website you need to choose Doctype correctlly. Please read this thread about making the right choice. If you need to fix your divs borders, you dont change the Doctype - you either change margins and paddins to have a workaround or use conditional comments for IE. There are probably more variations to test but I'm not sure how popular those are in the wild. In a "wild" you can see a rich variety of code horror but it is written by people who dont bother to learn how to code correctly. ---------------------------------------- My blog ---------------------------------------- [Edit 1 times, last edit by lm at Oct 14, 2007 4:10:51 AM] |
||
|
|
billyboy
Advanced Member Joined: Sep 3, 2005 Post Count: 2206 Status: Offline |
What I said was " And in some cases, usually in IE6, with positioning or floats there can be a discrepancy in placement cross browser because of the padding." Since your demo doesnt use either it doesn't apply. Still, knowing there can be issues, it's best avoid applying padding and width to the same element. Not using a proper doctype will put any browser into quirks mode and you run the risk of pages rendering differently, that doesn't just apply to IE. I can't imagine why on earth would anyone knowingly omit it. Stats will vary from site to site. W3 Schools are most likely skewed towards tech savy users with decent browsers like FF, Opera or Safari. But even if you take 1.5% at face value, with between 1.2 and 1.3 billion internet users world wide that's still 18 - 19.5 million users with IE5.x By your logic Mozilla(1.4%), Safari (1.5%), and Opera (1.9%) should be ignored also. IE 6 and 7 and FF are the only browsers that have significant numbers, so does that mean that's all we should cater to? Should we also ignore assistive technolgies and alternate methods of accessing the internet? Those numbers are so miniscule they don't even show up. When to stop catering to older browsers is a developers choice. Personally I'd love to ignore IE altogether, but thats just not feasable. I certainly wouldn't spend hours redesigning a site for IE5.x or any other legacy browser, but if all it takes is one minor change - which would have taken a fraction of the time of looking up stats, and doing an "in depth inspection" - I don't see valid reason not to do it. ---------------------------------------- Quiquid latine dictum sit altum viditur ---------------------------------------- [Edit 1 times, last edit by billyboy at Oct 15, 2007 2:08:52 AM] |
||
|
|
|
|
Current timezone is GMT Sep 2, 2010 8:47:40 PM |
