Thu, 2004-04-29 12:59
Hi
I have been trying to make a 3D box for use in site graphic design.
If you take a look at this page you will see what I mean:
[edit: new address]
http://209.216.241.33/threeDbox.html
This is the page code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>New document</title>
<style type="text/css">
html,body{
margin:0;
padding:0;
border:0;
}
body{
font-family:verdana,arial,sans-serif;
font-size:76%;
text-align:center;
}
div,p{margin:0}
#sample {
width:173px;
overflow:hidden;
height:24px;
background:url(images/sample.gif) no-repeat;
margin-left:auto;
margin-right:auto;
margin-top:100px;
}
.outerbox {
width:173px;
overflow:hidden;
background:#3322BB;
margin-left:auto;
margin-right:auto;
margin-top:20px;
}
.headerrow div,.headerrow{
height:16px;
overflow:hidden;
color:white;
font-weight:bold;
}
.headerrow div{background:url(images/headerrowleft.gif) repeat-y left}
.headerrow{background:url(images/headerrowright.gif) repeat-y right}
.upperborder div div,.lowerborder div div{
height:4px;
overflow:hidden;
}
.upperborder div div{background:url(images/upperborderleft.gif) no-repeat top left}
.upperborder div{background:url(images/upperborderright.gif) no-repeat top right}
.upperborder{background:url(images/upperborder.gif) repeat-x}
.lowerborder div div{background:url(images/lowerborderleft.gif) no-repeat top left}
.lowerborder div{background:url(images/lowerborderright.gif) no-repeat top right}
.lowerborder{background:url(images/lowerborder.gif) repeat-x}
</style>
</head>
<body>
<div id="sample"> </div>
<div class="outerbox">
<div class="upperborder">
<div>
<div> </div>
</div>
</div>
<div class="headerrow">
<div><p>hello</p></div>
</div>
<div class="lowerborder">
<div>
<div> </div>
</div>
</div>
</div>
</body>
</html>
Now, what I was trying to do was:
1. Avoid floats.
2. Avoid using padding or borders (to avoid IE5 box model probs)
3. Keep the html tight.
4. Make the design flexible for height and width, with no change in images used.
The page url I gave has two 3D boxes. One is a 333 byte image. The other is my construct, using 8 images totalling 394 bytes.
Does it work for you?
Trevor
Thu, 2004-04-29 13:16
#1
A 3D Box Idea, No Floats. Does it Work?
It worked for me in IE6. (Providing they weren't supposed to be "clickable".)
Both buttons showed. They looked exactly the same. They loaded instantly.
Darrin
Thu, 2004-04-29 14:00
#2
A 3D Box Idea, No Floats. Does it Work?
darrin365 wrote:
It worked for me in IE6. (Providing they weren't supposed to be "clickable".)
Both buttons showed. They looked exactly the same. They loaded instantly.
Darrin
Hi Darrin
I changed the origianl post coz I found better (slimmer) code to do it.
Thanx for checking it. No, it wsn't meant to be clickable. Inded, whilst this code could be used for buttons, it wasn't intended as such. I was looking to use it the same way as folk use the rounded corner box idea. Change the images in my example and it could easily be used for that too.
I tested it in:
IE6
IE5.5 (win)
IE5.0 (win)
IE4 (win)
Firefox 0.8 (win)
Opera 7.23 (win)
Safari 1.2 (mac)
All of which looked the same. I saw so many folk getting the rounded corner thing wrong I though I would have a go. My main concern was to keep the code in the html low. And to keep the use of css to a minimum to make sure most browsers could cope with it.
As you say, loading time is fast, no great surprise given the low image sizes!
What I am looking for is an IE Mac 5.x, NN6, Opera 6 NN4 test, and any others out there.
AND, if you have any ideas that might make it work better.
Trevor
Thu, 2004-04-29 15:01
#3
A 3D Box Idea, No Floats. Does it Work?
Yep works fine on IE5 Mac... count yourself special, I only start up IE5 on my Mac for my fiancée! 
Here's an example of a stretchable round-cornered box, that I did recently for a client, maybe of some relevance...
Thu, 2004-04-29 17:24
#4
A 3D Box Idea, No Floats. Does it Work?
Hi co2
I did some modifications and broke it in Firefox. Whoops.
I'm going to have another look at it. I'll take a look at yours too.
Thanx for cranking up your old mac
Trevor
Thu, 2004-04-29 19:07
#5
A 3D Box Idea, No Floats. Does it Work?
ClevaTreva wrote:
I did some modifications and broke it in Firefox. Whoops.
I'm going to have another look at it. I'll take a look at yours too.
Hi (again)
Fixed it, slimmed down the code too.
The page now has three sample uses of the code
- A box that looks like a 3D button
- A box that is a large 3D text box, could have a logo in too, or menu, or whatever.
- A 3D rounded corner box, same use as above.
Still NO FLOATS whatsoever.
Trevor
[/]
Thu, 2004-04-29 20:25
#6
A 3D Box Idea, No Floats. Does it Work?
Nice.
I did a similar exercise to produce 3D buttons with no images.
Thu, 2004-04-29 21:29
#7
A 3D Box Idea, No Floats. Does it Work?
Stu wrote:
Nice.
I did a similar exercise to produce 3D buttons with no images.
http://www.stunicholls.myby.co.uk/menu/button.html
Hi stu
Yeh. I did an exercise like that a while back. Do you remember that tool for making a 3 column layout I'm working on? The start page was a 3D design almost (but not quite) made from html. Trouble was, my idea was to render the page quicker than an image, but the code was almost as big, and, most importantly, it loaded for every page, whereas the graphics version loaded the images only once.
I somehow wanted a happy medium
- Low html overhead, which this 3D button/box idea is.
- Use graphics just where the html would be messy to replicate, but keep these small and re-useable.
- Easy for a novice to change or adapt.
- Easy to attach the text/logo/menu to go on/in the box.
- No floats. we all know how problematic they are across browsers.
- Keep the css simple so v old browsers would still be happy.
Trevor
[/]
Sat, 2004-05-08 11:50
#8
A 3D Box Idea, No Floats. Does it Work?
I've spent ages searching for a proper 8 image css box, and yours is the only one that doesn't use oversized blocks and such. Great 
I haven't tinkered with it yet, is it possible to do the same thing with transparent corners? I haven't seen an example of this yet that doesnt use those hugely oversized images like on ALA.
Here's the 3d box images I'd like to use:
Cheers
Sat, 2004-05-08 14:01
#9
A 3D Box Idea, No Floats. Does it Work?
Hi
Yes, it might work just as well, as long as the background color is set only in the middle row. This will also mean that the images used in the upper and lower rows are all the same height. I saved a small amount of space by making the the upper and lower edges shorter and making a background color fill the space.
So, when looking at examples, the blue squre corner box would be best to compare, as each edge is 4 pixels high/wide.
I have been doing some work on this idea and changed it from inherited divs to styled div's.
I need to re-do the site I posted, but here is a full page design that uses the same basic ideas. Curiously, the corners are not transparent as they appear to be, because they match the background color. I find transparent corners always look rough. It is better to make the bits with the required background color. Non-transparent gifs/pngs are smaller anyway. This newer site uses the styled divs (so instead of #upperrow div div {foo:bar} it would be #upperrow .leftbg {foo:bar} or whatever).
I think this page example is a much better one to look at anyway, as it shows the code in real use:
[edit: new address]
http://209.216.241.33/shady_bg.html
It is a good example in that it shows a page design (pure css) that is fluid width, 100% height (and fluid if needed), with header and footer. all the code is inline, the only external files are the small images it uses.
From a practical point of view, there is no point in making small buttons from this method, but large boxes benefit hugely.
Trevor
Sun, 2004-05-09 21:05
#10
A 3D Box Idea, No Floats. Does it Work?
Hi All
I've been doing some work on this page, still here:
[edit: new address]
http://209.216.241.33/threeDbox.html
I have re-worked the original idea to be more practical.
- The page looks prettier (says he).
- The design doesn't use inherited divs (which means a bit more code in the html) but uses classes and id's, which makes it more cross-browser friendly and easier to place things on the boxes.
- It's easier to place things on the boxes. As the boxes occupy real estate in the page, the contents are placed absolutely for ease of positioning.
- Now supports transparent images in the corners (so you can do rounded designs). BUT, you must set the right/left margins of the center top and center bottom row cells to avoid the corner cells (shown in the examples)
- The theory is shown in a page design to make the ubiquitous drop shadow. NOTE: as these boxes are fluid, and IE doesn't support min-width, the page design must be fixed width. If the design is used on fluid width pages most browsers will be OK, but expect IE to mess it up if the screen size gets too narrow.
I would appreciate comments or ideas.
Trevor
[/]
Sun, 2004-05-09 22:48
#11
A 3D Box Idea, No Floats. Does it Work?
Hi. The worked for me in IE5.x/win. It did seem like the first letter on the last box was cut off.
Sun, 2004-05-09 23:16
#12
A 3D Box Idea, No Floats. Does it Work?
Hi
I'll try and get a screenshot. All the text should show, as the div is absolutely positioned and on the highest layer, but thanks for the tip.
Trevor
Mon, 2004-05-10 06:54
#13
A 3D Box Idea, No Floats. Does it Work?
Great stuff and thanks for your prompt response!
The example page looks much classier now as well, rounded boxes within rounded boxes makes the whole thing look much more impressive.
As I said before, I couldn't find a decent example of this kind of layout *anywhere*. Some came close, but this is it.
Now I'm off to attempt to design an XMambo template with this. XMambo is a tableless XMTML/CSS version of Mambo Open Source CMS, which version 5 of Mambo will support at the end of the year. It really needs some clever CSS gurus to develop/design for it, so if anyone is interested:
Official XMambo site - Download the latest XMambo here, also a great page of css links.
XMambo MOSForge Project - MOSForge is the Mambo community's SourceForge, many open source projects here.
Cheers!
Mon, 2004-05-10 08:50
#14
A 3D Box Idea, No Floats. Does it Work?
Maks wrote:
Hi. The worked for me in IE5.x/win. It did seem like the first letter on the last box was cut off.
Hi
Just had a chance to look at it in IE5.x. Aaghh
Positioning the 'contents' of the box using position:absolute completely confused it. I will go back to a differnt way and test it. Wait for a different version later today.
Trevor
Mon, 2004-05-10 10:03
#15
A 3D Box Idea, No Floats. Does it Work?
Hi All
Just posted a revised version.
What's changed?
The box that contains the three rows now has an extra row at the end; the content. This is then negatively margined up over the 3D box itself. Easy. Opera needed a height for the outer box, whereas the other browsers didn't.
Slightly less code. Easier to make it your own.
I think that's that one finished, along with the imageless 3D menu buttons (edit: new address: http://209.216.241.33/stus_buttons.html) that is yet another demo idea (thanks to stu for the latter).
I've got an idea on a flicker free rollover image menu for IE next. My trial one work great. No preloading needed, no hidden images. I may post a sample later today (depends how quickly I can make a decent menu graphic!).
Trevor