Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > Web Programming > CSS > CSS Cascading Style Sheets
Password Reminder
Register
| FAQ | Members List | Calendar | Search | Today's Posts | Mark Forums Read
CSS Cascading Style Sheets All issues relating to Cascading Style Sheets (CSS).
Welcome to the p2p.wrox.com Forums.

You are currently viewing the CSS Cascading Style Sheets section of the Wrox Programmer to Programmer discussions. This is a community of tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developers’ questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Search this Thread Display Modes
  #1 (permalink)  
Old July 9th, 2008, 03:31 AM
Friend of Wrox
 
Join Date: Mar 2007
Location: Hampshire, United Kingdom.
Posts: 432
Thanks: 0
Thanked 1 Time in 1 Post
Default Custom Control - Image "Bordered" Content

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
__________________
Rob
http://cantgrokwontgrok.blogspot.com
Reply With Quote
  #2 (permalink)  
Old July 15th, 2008, 02:38 AM
Friend of Wrox
Points: 1,749, Level: 16
Points: 1,749, Level: 16 Points: 1,749, Level: 16 Points: 1,749, Level: 16
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2007
Location: San Diego, CA, USA.
Posts: 477
Thanks: 10
Thanked 19 Times in 18 Posts
Default

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.
Reply With Quote
  #3 (permalink)  
Old July 15th, 2008, 03:02 AM
Friend of Wrox
 
Join Date: Mar 2007
Location: Hampshire, United Kingdom.
Posts: 432
Thanks: 0
Thanked 1 Time in 1 Post
Default

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
Reply With Quote
Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Custom Server Control....Custom Property Editor ZArrinPour ASP.NET 1.0 and 1.1 Basics 1 June 15th, 2010 11:30 AM
Web Service, Custom Control, Custom Return Type robzyc ASP.NET 2.0 Basics 6 June 10th, 2008 08:03 AM
custom control inside custom control issues StevesonD ASP.NET 2.0 Professional 1 February 19th, 2008 06:54 PM
Evaluating body content of a custom tag Tag Librarian Pro JSP 0 May 13th, 2005 02:40 PM



All times are GMT -4. The time now is 03:04 PM.


Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.