Custom Control

robzyc · July 9th, 2008, 03:31 AM

Hi There,

I am new to this forum (been around on C# and ASP.NET for a little while) so would like to say "hi" and any & all help is gratefully receieved!

Here is my problem, I am creating a custom control within ASP.NET, which for those that dont know, you simply specify the HTML to be rendered at design time, so really it isnt much different to writing the HTML manually.

This control will basically look like the following:

X-T-X
L C R
X-B-X

Where:
X = Corner Image
T/B = Top/Bottom, which may contain text and an image on repeat-x.
L/R = Left/Right, which does not contain text and an image on repeat-y.
C = An undefined amount of content, constricted to the width of the control, but height will obviously change.

I am sure you can picture what I am trying to do here - I want some nice bordered content. This is really simple using <TABLE> but I know that this is "frowned" up, and with the new web movement on standards, use of tables for this should be refrained.

Currently the markup is being output as:

Code:

<div id='StyledWindow1_container' style='width: 416px'>
<img src='table/tl.png' alt='tl.png' style='float: left;' />
<div id='StyledWindow1_t_container' style='background-image: url(table/t.png); float: left;width: 400px; height: 29px;'>

div>
<img src='table/tr.png' alt='tr.png' style='clear: right;' />
    <div>

    </div>
<img src='table/bl.png' alt='bl.png' style='float: left;' />

<div id='StyledWindow1_footer_middle' style='background-image: url(table/b.png); float: left; width: 400px; height: 20px'>
</div>
<img src='table/br.png' alt='br.png' />
</div>

As you can see I have used IMG for the corners, which again, I am not sure is "right"..
I have not yet been able to successfully get the side bars in either to "fill" down around the content.

The style elements are inline since they need to be for custom controls, but if you find it easier to post seperately I can handle it my end.

Again, many thanks :)

Rob
http://cantgrokwontgrok.blogspot.com

chroniclemaster1 · July 15th, 2008, 02:38 AM

I applaud you for looking at web standards. While there are sometimes this makes things more difficult (as you are finding out, design time is one of them ;) ), the long term maintenance of the code will probably more than reward you for the effort.

I have a couple recommendations that will hopefully make this easier for you. One, I've found it easier long term to work with CSS in an external style sheet (a .css file) rather than using inline styles in this way. To some extent (usually not as much as advertised), this may reduce the amount of "bloat" in your webpage. However, it does do one key thing for you. It absolutely helps with code separation and thus anytime you want to change the appearance of the webpages, you can head straight to the css file(s) and make the changes you want. Long term, I think you'll be shocked at the extreme changes you can make either to your CSS file or to your HTML code without having to do much work on the other. This is a huge way ease your maintenance of the site.

Two, I would try to go with background images all the way around. It may not be a big deal, and if using <img> tags is the only way you can get it to work, I'd do it. But by specifying the position: attributes of the background images for you divs I believe it's not that difficult. Granted I don't have much experience with that technique but I can offer two pieces of advice. One, I believe the examples at www.csszengarden.com are done without any image tags of any kind, yet many of the layouts achieve some amazing image effects. While I may not be much help, ;) I bet studying some of their examples would be. Second, if I remember correctly you can adjust corner images by using a combination of postion: top/bottom left/right. You can adjust for the unknown length of the sides (and even the un/known length of the top and bottom too) by using backgroun-repeat: repeat/repeat-x/repeat-y. Repeat-x tiles the image horizontally for top and bottom image borders, repeat-y tiles vertically for borders on the side, and repeat tiles in both directions (used for a background tile.

Hope that helps

-------------------------

Whatever you can do or dream you can, begin it. Boldness has genius, power and magic in it. Begin it now.
-Johann von Goethe

When Two Hearts Race... Both Win.
-Dove Chocolate Wrapper

Chroniclemaster1, Founder of www.EarthChronicle.com
A Growing History of our Planet, by our Planet, for our Planet.

robzyc · July 15th, 2008, 03:02 AM

Hi chroniclemaster1,

Thanks for the reply, this problem was really causing me some serious, serious frustration, not to mention the impact on my productivity at work.

Sadly, no matter how much I tried, I could not get this to render right. I did come very close by using the tutorial here: http://www.alistapart.com/articles/customcorners2 However I couldnt get it to appear right (the bottom right image never became flush with the right/bottom).

I spent 3 days - yes THREE whole days working on this :( I felt both defeated and unproductive.

It was simply taking too long and I was lost for ideas, so I reverted back to the use of tables, finished it in an afternoon and got it working/looking exactly how I want it. The rendered output passes W3C validation so it works for me. Perhaps I will revisit this later. But for now I have other stuff I need to work on.

If you have worked on something similar, I would love to dicuss it more. As said, I am still kind of new to all this web stuff so keen to get some exposure from you guys already doing the job :)

Thanks again.

Rob
http://cantgrokwontgrok.blogspot.com