Results 1 to 11 of 11
  1. #1
    Join Date
    Nov 2002
    Posts
    2,194

    Any CSS Pros out there?

    Does anybody know how to do what I'm looking for? Copy the following HTML pages and run in browser. The problem is explained within the contents of the pages. This is not urgent but
    I'm curious about how somebody else would handle this.

    Thanks in advance for any help.
    EA.

    -------- HTML file 1 ---------------------

    <html>
    <head></head>
    <body>
    <div style="width:320;
    border-styleolid;
    border-width:1px;
    border-color:black;">
    <img src="image.gif"
    width="100"
    height="100"
    alt="IMAGE"
    style="float:left;">
    <p style="text-align:center;
    margin-top:2;">
    <b style="border-styleolid;width:150;
    border-width:1px;
    border-color:red;">
    Some Text Here
    </b>
    <br>
    <b style="border-styleolid;width:150;
    border-width:1px;
    border-color:red;">
    More Text Here
    </b>
    </p>
    <p style="margin-top:-15;
    text-align:center;">
    This is frustrating me. Maybe a sharp CSS expert
    can help me with this problem. Can it be done with
    CSS without having to resort to creating my own
    algorithm or procedures for centering the text. Any
    help or ideas will be greatly appreciated. Please
    note that I've created my own way of centering the
    shorter text message, but I'm looking for strictly
    CSS. Sorry I didn't include imsge but insert your own
    or let the 'X' icon display for no imsge found. Long
    message should wrap around to below the image.
    </p>
    <div>
    </body>
    <html>

    -------- HTML file 2 ---------------------

    <html>
    <head></head>
    <body>
    <div style="width:320;
    border-styleolid;
    border-width:1px;
    border-color:black;">
    <img src="image.gif"
    width="100"
    height="100"
    alt="IMAGE"
    style="float:left;">
    <p style="width:210;text-align:center;
    margin-top:2;">
    <b style="border-styleolid;width:150;
    border-width:1px;
    border-color:red;">
    Some Text Here
    </b>
    <br>
    <b style="border-styleolid;width:150;
    border-width:1px;
    border-color:red;">
    More Text Here
    </b>
    </p>
    <p style="margin-top:-15;
    text-align:center;">
    Short message here. Everything on the
    right should be vertically centered with
    the image.
    </p>
    <div>
    </body>
    <html>

  2. #2
    Join Date
    Jan 2003
    Location
    Roanoke, VA, US
    Posts
    390
    Call me a little thick, but I'm not exactly sure what you're going for on the first one... could you be a little clearer so I can understand

  3. #3
    Join Date
    Jul 2001
    Location
    Canada
    Posts
    1,284
    There are a few problems with coding:

    - width needs a units specification eg px for pixels. ditto the width, height parameters for <img> and margin.

    -need to close the <div> and <html> tags

    -while applying a style statement to <b> may work in some browsers (especially without a <!DOCTYPE> tag, normally you don't apply style to what is after all essentially a style element itself. Use the <span> tag instead for inline content and use font-weight: bold; in the style statement.

    I'm not sure exactly what you are trying to accomplish. Also you should be aware that not all browsers will handle margins, especially negative ones the same way.

    Is this more like what you were trying to achieve?

    <html>
    <head></head>
    <body>
    <div style="width:320px; border-style: solid; border-width:1px; border-color:black; padding 6px;">
    <img src="image.gif" style="width: 100px; height: 100px; float:left;" alt="IMAGE">
    <p style="text-align: center;">
    <span style="border-style: solid; border-width:1px; border-color:red; font-weight: bold;">Some Text Here</span>
    <br>
    <span style="border-style: solid; border-width:1px; border-color:red; font-weight: bold;">More Text Here</span>
    </p>
    <p style="text-align: justified;">
    This is frustrating me. Maybe a sharp CSS expert
    can help me with this problem. Can it be done with
    CSS without having to resort to creating my own
    algorithm or procedures for centering the text. Any
    help or ideas will be greatly appreciated. Please
    note that I've created my own way of centering the
    shorter text message, but I'm looking for strictly
    CSS. Sorry I didn't include imsge but insert your own
    or let the 'X' icon display for no imsge found. Long
    message should wrap around to below the image.
    </p>
    </div>

    <br><br>

    <div style="width: 320px; border-style: solid; border-width: 1px; border-color:black;">
    <img src="image.gif" style="width: 100px; height: 100px; float: left;" alt="IMAGE">
    <p style="text-align: center;">
    <span style="border-style: solid; border-width: 1px; border-color: red; font-weight: bold;">Some Text Here</span>
    <br>
    <span style="border-style: solid; border-width: 1px; border-color: red; font-weight: bold;">More Text Here</span>
    </p>
    <p style="text-align:justified;">
    Short message here. Everything on the right should be vertically centered with the image.
    </p>
    </div>
    </body>
    </html>
    "Obsolesence is just a lack of imagination."

  4. #4
    Join Date
    Nov 2002
    Posts
    2,194
    croakingtoad: I guess you're right. I was trying to explain the problem within the contents of the page when rendered. Maybe it wasn't clear enough.

    NyteOwl: Thanks for your help, but it doesn't answer what I'm trying to accomplish.

    The page is being built dynamically. The two boxes at the right may be present, or just one box or none at all. The text message below the boxes will always be present and it can be a variable length, including just one line. When the entire contents at the right of the image are smaller than the vertical height of the image I want the entire contents at the right to be vertically centered with the image.

    Thanks again..
    E.A.

  5. #5
    Join Date
    Sep 2002
    Location
    DC
    Posts
    291
    Originally posted by adorno
    When the entire contents at the right of the image are smaller than the vertical height of the image I want the entire contents at the right to be vertically centered with the image.
    The lack of a mechanism for vertically aligning text is one of the big hurdles that comes with css. This is something that can be accomplished very easily with a table.

    The css vertical-align property will work with an image but not text.

    <table>
    <tr>
    <td style="vertical-align:middle"><img></td>
    <td valign="middle">your text here</td>
    </tr>
    </table>

  6. #6
    Join Date
    Jul 2001
    Location
    Canada
    Posts
    1,284
    Now that I see what you want to do, I must agree that atr is correct that the type of vertical alignment you want to do is almost impossible to accomplish solely in css.

    However, the vertical-align property will work just fine with text, in or out of a table but operates only on the container it applies to.

    <table>
    <tr>
    <td style="vertical-align:middle;"><img></td>
    <td style="vertical-align:middle;">your text here</td>
    </tr>
    </table>

    The above works equally well. In addition to the standard Top, Bottom, Middle, The vertical align property can also accept the following values:

    super - can be used to superscript text
    sub - can be used to subscript text
    top-text - uses top of text line
    bottom-text - uses bottom of text line

    The baseline can also be expressed as a percentage of element line height.
    "Obsolesence is just a lack of imagination."

  7. #7
    Join Date
    Sep 2002
    Location
    DC
    Posts
    291
    Originally posted by NyteOwl
    However, the vertical-align property will work just fine with text, in or out of a table but operates only on the container it applies to.

    <table>
    <tr>
    <td style="vertical-align:middle;"><img></td>
    <td style="vertical-align:middle;">your text here</td>
    </tr>
    </table>
    You are right. I just tested this (like I should have before), and it works like a charm.

  8. #8
    Join Date
    Nov 2002
    Posts
    2,194
    Thanks to you all.

    Apparently CSS cannot handle every situation that can come up.

    I had already done the strict HTML text alignement method mentioned by atr and it worked fine. It's more problematic when you have more than one element to vertically center against the image.

    Now, in order to align the three elements at the right with the image on the left I had to come up with my own solution, The elements at the right are supposed to be dyanmically built. The bordered elements at the right are dynamically built: the two boxes may be present, or one box, or none at all. The text below the boxes will always be present and it is variable in length.

    When a box is built, I know the height of each. The vertical height of the text below the boxes can also be calculated. After that, it is only a matter of calculating the total height being used on the right and then calculating the amount of blank area *margin-top) needed. Keep in mind that I also know the height of the image on the left: the image source, its height and width are coming from a database.

    I could show you my solution, but I'm sure you guys are smart enough to figure it out.

    Perhaps CSS needs a feature to allow vertical centering of a group of pre-determined elements? If CSS can't do everything
    that you can do with regular HTML then why are there so many people advocating creating web pages using CSS only solutions?
    (Just asking, no answer expected).

    Thanks again...

    E.A.

  9. #9
    Join Date
    Jul 2001
    Location
    Canada
    Posts
    1,284
    Originally posted by adorno
    Perhaps CSS needs a feature to allow vertical centering of a group of pre-determined elements? If CSS can't do everything
    that you can do with regular HTML then why are there so many people advocating creating web pages using CSS only solutions?
    Possibly because often the resulting HTML constructs are overused and used in places and manners that makes the resultant page 1) slow loading, 2) incompatible with some browsers, 3) hard to maintain.

    CSS is improving and there are more positioning options in the CSS3 specification currently being worked on.

    For the vast majority of site layouts, you can do a considerable amount using CSS.

    One of my favorite examples of it's capabilities is;

    http://www.meyerweb.com/eric/css/edge/

    Edited for typo's.
    "Obsolesence is just a lack of imagination."

  10. #10
    Join Date
    Apr 2003
    Posts
    369

    Thumbs up

    Just thought I would throw:

    glish

    The single best css resource I have found.

  11. #11
    Join Date
    Nov 2002
    Posts
    2,194
    Thanks again to all of the above who replied and tried to help.

    I suppose you can only work with what's available and be creative with it. At times you have to come up with your own (enhanced) solutions like I did with my requirements. It took some extra work (and thinking) but I solved my problem and it still uses CSS positioning.

    Thanks again.

    E.A.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •