How can I best use a config property to position text within a rectangle?

Question

0.00/5 (No votes)

See more:

I am building a web part where I display a banner images and overlaid text inside a rectangle. In the properties for each image I want to allow the end user to specify the vertical and horizontal orientation of the text within the bounding rectangle of the image. That is, "for image 1, text is horizontally centred and vertically at the top. This gives eight combined orientations.

This cries out for using table based layout, because in a table cell you can directly specify these properties as I describe them, and the entire layout will be one table cell, with nothing else to worry about falling under the evil influence of table based layout.

Table or not, I also need to enable the designer to align with my intentions, so she will create a set of classes, one per layout combo, but using eight nearly identical classes seems a bit redundant. If I do use table layout, we can leave the text orientation out of the predefined styling and I simply use jQuery to set the vertical and horizontal orientation for the text each time I load a new picture.

All suggestions on how to minimise code and css for this are welcome.

Posted 13-Dec-14 6:40am

Brady Kelly

Add a Solution

Comments

Kornfeld Eliyahu Peter 14-Dec-14 13:27pm

"table based layout" - NO!!! Never use it!

Brady Kelly 14-Dec-14 14:38pm

Haha. I'm busy using a bloody iFrame for an ajax file upload right now, to pander to the needs of IE - elephanting - 9, so I'm not scared of a little, responsible table type layout. I have often been burnt with table layouts, but only ever when the table isn't the only thing on the page. If the entire page is a table, I see nothing wrong with using table type styling.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Kornfeld Eliyahu Peter · Answer 1 · 2014-12-14T07:48:00

If I had to to such a thing I would create CSS rules like (Left, Center, Right) and (Top, Middle, Bottom)...This way you need only 6 rules and not 8!
In this rules I would position an image and a div (with the text), both enclosed in an other div and all I have done is assign the right rule to the enclosing div

HTML

<div class="L T">
  <image alt="" src="" />
  <div>[text]</div>
</div>

Now - you can load those rule names from the server side or set by a single jQuery method...Of no more than one and a half line...