HTML picture border

[Enormator]

Hi

This is something I made

It is written in poor HTML (for the spaces I used empty pngs with the same size)

This is not a tut because this is a request.

Can anyone tell me how to make this into a frame for websites or a border for tables? The picture is just a test, I don't need sites that complicated.

What I got is vertical.png, horizontal.png, upperleftcorner.png, upperrichtcorner.png, lowerleftcorner.png, lowerrightcorner.png, uppermiddle.png, lowermiddle.png, leftmiddle.png, rightmiddle.png and centercross.png

All with alpha and in size 50x50px

If anyone tells me, I'll make a tut from this and then I'll also tell you how I did the small pics and not just how to arrange them in HTML.

For people who are interested in poor HTML:

(u=lower, o=upper, l=left, r=right, c=centercross, m=middle, e=empty)

[Crazy Man Dan]

I don't mean to sound rude here, but may I ask: Why would you want borders that distracting? The frame there is very large and quite loud, and could easily draw the viewers eye away from the content you most likely would like them to see.

That being said, it'd be pretty easy to do that in CSS. Tables too, I guess, but I do not support the use of tables as a layout mechanism.

The problem you will face, however, is the same problem all layouts with vertically variant repeating images face - getting the bottom diamond color and position to line up with the color and indentation of the diamond shape on the bottom horizontal piece. Unless you set the height specifically, any variance in the length of the content will cause the body of your page to change in total height, changing the orientation of the bottom bar compared to the repeating background.

[moc426]

While I agree with you ... I can't seem to not use them in some cases, mainly dynamically generated content, esp. generated from an application, such as java application returning html code to display. Tables are messy code, but some times positioning content with css, is a pain, specifically dynamic content. Like the last case I had with this, was I was dynamically generating drop down menus which can have any number of items, in the end just went back to tables and that worked out.

That being said, it'd be pretty easy to do that in CSS. Tables too, I guess, but I do not support the use of tables as a layout mechanism.

[Crazy Man Dan]

For dynamic content, I find it's best to use floated divs. For instance, on The Sketchpad, though none of the content is technically "dynamic" at this point (the tutorial is all contained in one text file which is referenced in a database), the site is dynamic-ready. Both the main content div and the side links div are floated in their positions, so regardless of which one is taller, the footer will rest at the bottom and the body background will extend to the end. In this way, it functions much like a table, giving you the result you need without locking you in to a design. Imagine having to rework the entire table structure for a new layout. Now shudder in horror. :wink:

Absolute positioning is a great tool when used sparingly, but the element is set in a specific place regardless of what's around it, and whatever may be around it ignores it in return. I tried reworking the current design using absolute positioning for more flexibility, but it wouldn't work with the fluctuating content height from page to page. I use it for a few things in the header, such as the Links, but those are of a set height and will always be the same, so it works.

As for Drop-downs, I use nested unordered lists.

For instance, instead of your code dynamically outputting:

Dynamic link

for each link, you could have:

Dynamic link

All you have to do then is use CSS to style the li based on the nesting depth (e.g.: ul#mainlinks ul li { STYLE!; }), and it makes life better for the bunnies.

[moc426]

Yah hard to explain, but I work on a java application (yuck) and its such a pain to do the html to return in it. I hate it, in php I can do things very easy. I have actually used absolute with dynamic content, so you set the position in the css, then set the left value of the style html attribute on the div to 0px, then +50px, then +100px ... etc. based on the loop, it incremented the value.

Using unordered lists is good, haven't messed with that too much though.

For dynamic content, I find it's best to use floated divs. For instance, on The Sketchpad, though none of the content is technically "dynamic" at this point (the tutorial is all contained in one text file which is referenced in a database), the site is dynamic-ready. Both the main content div and the side links div are floated in their positions, so regardless of which one is taller, the footer will rest at the bottom and the body background will extend to the end. In this way, it functions much like a table, giving you the result you need without locking you in to a design. Imagine having to rework the entire table structure for a new layout. Now shudder in horror. :wink:

Absolute positioning is a great tool when used sparingly, but the element is set in a specific place regardless of what's around it, and whatever may be around it ignores it in return. I tried reworking the current design using absolute positioning for more flexibility, but it wouldn't work with the fluctuating content height from page to page. I use it for a few things in the header, such as the Links, but those are of a set height and will always be the same, so it works.

As for Drop-downs, I use nested unordered lists.

For instance, instead of your code dynamically outputting:

Dynamic link

for each link, you could have:

Dynamic link

All you have to do then is use CSS to style the li based on the nesting depth (e.g.: ul#mainlinks ul li { STYLE!; }), and it makes life better for the bunnies.

[drakaan]

Beyond that, even, sometimes accessibility needs to be kept in mind. Try using a screenreader to navigate a table-heavy site, and it quickly becomes obvious how much trouble that can cause.

If CSS isn't your best buddy already when you design pages, it's well worth getting to know. Less markup, easier layout changes, more uniform appearance, and a nice seperation between content and appearance are all very real benefits to using CSS. There are places for tables...mainly when you need to show information in a table-like format .

I know that IE6 can be a pain in the butt when it comes to having pages render sanely, but there are still ways to get around using tables.

Valuable CSS hint when you need something to show up differently in IE (or need to set a different value to get the same on-screen result): In firefox, safari, and IE7, attributes prefixed with "_" (underscore) are ignored. In IE6, however, they're accepted.

Put your normal value first (margin-left: 1em;) and the IE6 fix after that (_margin-left: 10px;).

Definitely overflow conversation.

[Enormator]

I'm very new to HTML, CSS and that stuff. Also, my English is not very good.

I uploaded the pics to http://www.esnips.com/web/things2share/.

It would be very nice if someone could give an exemple with source and screenshot maybe.

Thanks in advantage

[FireFly]

looks like very messy code for a very messy cause.