SitePoint Sponsor

User Tag List

Results 1 to 23 of 23
  1. #1
    SitePoint Evangelist
    Join Date
    Jul 2008
    Location
    Port Elizabeth, South Africa
    Posts
    408
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    h2 w/ image in parallel boxes?

    Hi - I like to do all my h2 sub-headers in a 2-cell table, with image in left cell, and h2 in right cell with colored bg, as seen here:

    http://www.greensmoothie.com/test/best.php

    Please is there a way to do this without tables and with *no* floats in
    pure css for this page here:

    http://www.greensmoothie.com/gs/

    I see in another page, I've used a table for an image + text next to each other, here:

    http://www.greensmoothie.com/test/index.php

    scroll to page bottom just above Sprouting Links, pic of wheatgrass with txt box next to it.

    I recall Paul giving me wide variety of options to do that image-w-parallel-txt but in the end a table seemed the simplest.

    But a problem I foresee with using a table in my new pure-css file at

    http://www.greensmoothie.com/gs/

    is that the h2 has to be flush against the edge of txtbox (or content? I get confused) - there can't be any white space between the page bgcolor and the bgcolor of h2 box. I guess I could give the table a negative margin?

    Perhaps Gary's .photo code (for 2 photos next to each other, with caps) can be copied + fixed to make my h2-with-image work?

    .photo {
    text-align: center;
    margin: 20px 0; /*sets para before + after*/
    }
    .photo div {display: inline-block; vertical-align: middle}
    * + html .photo div {display: inline}
    * html .photo div {display: inline}
    .photo pre { /*use spaces at start + end of each line to align cap under pic*/
    display: table;
    margin: 5px 20px; /*space betw phot-cap + betw photos*/
    }

    I'm hopelessly unsure where to begin...

    thank you! - Val

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Hi Val, I'm sure what you need is easily done with CSS, but to be honest I'm totally confused about what you want next to what. I didn't see H2 elements where you seemed to be saying they'd be.

    Could you just clarify what section you are talking about? E.g. give the text you want as an H2, and cite the image you want next to it.

  3. #3
    SitePoint Evangelist
    Join Date
    Jul 2008
    Location
    Port Elizabeth, South Africa
    Posts
    408
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Ralph - yes sure you'll see on this page

    http://www.greensmoothie.com/test/best.php

    the h2 "Sprouter Plans" on the right with a leaf image to the left of it. The code looks like this:

    <table BORDER=0 CELLSPACING=0 CELLPADDING=0 COLS=2 WIDTH="100&#37;" >
    <tr>
    <td ALIGN=CENTER BGCOLOR="#FFFFFF"><img SRC="pg-mid-30.gif" height=25 width=30></td>

    <td ALIGN=CENTER WIDTH="275" HEIGHT="35" BGCOLOR="#E5FFBF">
    <h2>
    Sprouter Plans</h2>
    </td>
    </tr>
    </table>

    Now I need to move that h2-design into this template:

    http://www.greensmoothie.com/gs/

    hopefully without using <table> or floats. Or if I use table, it's right-cell bgcolor (the cell that contains the h2 text) must be flush with the page bgcolor - no white space.

    thanks! - Val

  4. #4
    SitePoint Evangelist
    Join Date
    Jul 2008
    Location
    Port Elizabeth, South Africa
    Posts
    408
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I just re-did http://www.greensmoothie.com/gs/ so you can see exactly how the h2 box needs to fit in there.

    Basically I need http://www.greensmoothie.com/gs/

    to look like http://www.greensmoothie.com/test/best.php

    best.php is a css/<tables> hybrid, while index.php is pure css.

    thanks, Val

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Try this, Val:

    HTML:

    Code:
    <div class="leaf25">
      <h2>Sprouter Plans</h2>
    </div>
    CSS:
    Code:
    .leaf25 {
      height: 35px; 
      width: 100%; 
      background: url(gr-pg/leaf25.gif) no-repeat scroll 50% 50%; 
      margin: 20px 0;
    }
    
    .leaf25 h2 {
      text-align: center;
      float: right;
      width: 275px;
      font-weight: bold;
      font-size: 18px;
      font-family:Arial,Helvetica,sans-serif;
      color:#F00251;
      background: #e5ffbf;
      margin-right: -40px;
    }
    This worked for me in testing.

  6. #6
    SitePoint Evangelist
    Join Date
    Jul 2008
    Location
    Port Elizabeth, South Africa
    Posts
    408
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Ralph - thanks million, it's starting to work. See

    http://www.greensmoothie.com/gs/

    Few problems:

    (1) leaf25.gif needs to be centered horizontally on its side (at 800x600 it's slap bang against h2 text and

    (2) also centered vertically against h2 text when h2 is long header AND when it's short header (right now leaf25 is top-aligned)

    (3) h2 is ignoring "vertical-align:middle" - is that because it's a float?

    (4) paragraph below must consistently display below h2 when h2 is very long header AND when it's only short one-word header

    (5) in txtbox2 (full-width) I'd like the extra 56px (on right) to be dealt with in a way so that the text of all H2's in all txtboxes align directly under each other. Right now h2 in txtbox2 is 56px to the right of h2 in txtbox.

    I guess I don't need to clear the h2 float at all because it's within a containing div?

    thank you! - Val

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by valarcher View Post
    (1) leaf25.gif needs to be centered horizontally on its side (at 800x600 it's slap bang against h2 text
    Personally, I'd leave it that way. If you really want it to change, some more complex solution will be required. (Won't be alble to do it as a background image.)

    (2) also centered vertically against h2 text when h2 is long header AND when it's short header (right now leaf25 is top-aligned)

    (3) h2 is ignoring "vertical-align:middle" - is that because it's a float?

    (4) paragraph below must consistently display below h2 when h2 is very long header AND when it's only short one-word header
    Try replacing the css for leafh2.

    Change

    Code:
    .leafh2 {
    background:transparent url(gr-pg/leaf25.gif) no-repeat scroll 50&#37; 50%;
    height:25px;
    margin:20px 0;
    width:100%;
    }
    to

    Code:
    .leafh2 {
    float: left;
    background:transparent url(gr-pg/leaf25.gif) no-repeat scroll 50% 50%;
    margin:20px 0;
    width:100%;
    }
    vertical-align:middle only works for inline elements like images. The code above should fix that issue.

    (5) in txtbox2 (full-width) I'd like the extra 56px (on right) to be dealt with in a way so that the text of all H2's in all txtboxes align directly under each other. Right now h2 in txtbox2 is 56px to the right of h2 in txtbox.
    You have 56px margins on #content. Do you really want that?

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by valarcher View Post
    I guess I don't need to clear the h2 float at all because it's within a containing div?
    (It certainly did need clearing. I used a float for that. overflow:hidden was not an option, as the h2 extends out of the div via the negative margin.)

  9. #9
    SitePoint Evangelist
    Join Date
    Jul 2008
    Location
    Port Elizabeth, South Africa
    Posts
    408
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Ralph - latest version uploaded to: http://www.greensmoothie.com/gs/

    (1) I need gif centered on left - Am interested in the "more complex solution" because if I use a table it's not a bg image either

    (2) + (4) fixed now with your new leafh2 - thank you!

    (3) Still need H2 text ("Long Header" + "Short Header") centered vertically in middle of box - any way to do this?

    (5) >56px margins on #content. Do you really want that?

    yes it's the 53px width of the leafy branch image in .down-rgt + 3px to keep leafy branch slightly away from txtbox.

    Any ideas as to how to align text of all H2's in all txtboxes directly under each other? What I did doesn't work, viz add the 56px into the width of 300px:

    .leafh22 h2 {
    float: right;
    width: 356px; /*content margn*/
    background: #e5ffbf;
    margin-right: -40px;
    font: bold 1.2em Helvetica, sans-serif; color: #f00251;
    text-align:center; vertical-align:middle;
    }

    We haven't cleared the floats? Shall I do this?:

    <div class="leafh2 clearfix">

    thank you! - Val

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Argh! Have spent quite a while on this and not found a satisfactory solution. It's nearly 3am, so better to bed.

    Quote Originally Posted by valarcher View Post
    Still need H2 text ("Long Header" + "Short Header") centered vertically in middle of box - any way to do this?
    Looks like it already is to me. What browser are you looking at?

    Any ideas as to how to align text of all H2's in all txtboxes directly under each other?
    Yes:
    Code:
    .leafh22 h2 {
    	float: right;
    	width: 300px;
    	background: #e5ffbf;
    	margin-right: -40px;
    	font: bold 1.2em Helvetica, sans-serif; color: #f00251;
    	text-align:center; 
            padding-right: 56px;
    }
    We haven't cleared the floats? Shall I do this?:
    We did. We used float on the container, which makes it clear the floated inn h2.

    Hopefully someone else can take over. Must to bed!

  11. #11
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by valarcher View Post
    Hi Ralph - latest version uploaded to: http://www.greensmoothie.com/gs/

    (1) I need gif centered on left - Am interested in the "more complex solution" because if I use a table it's not a bg image either
    Where exactly is that..?
    (3) Still need H2 text ("Long Header" + "Short Header") centered vertically in middle of box - any way to do this?
    It appaers that it is centered, though that's only because you use padding to space it out thus it appears centered.

    It's appearing centered for me and Ralph though

    (5) >56px margins on #content. Do you really want that?

    yes it's the 53px width of the leafy branch image in .down-rgt + 3px to keep leafy branch slightly away from txtbox.

    Any ideas as to how to align text of all H2's in all txtboxes directly under each other? What I did doesn't work, viz add the 56px into the width of 300px:

    .leafh22 h2 {
    float: right;
    width: 356px; /*content margn*/
    background: #e5ffbf;
    margin-right: -40px;
    font: bold 1.2em Helvetica, sans-serif; color: #f00251;
    text-align:center; vertical-align:middle;
    }

    We haven't cleared the floats? Shall I do this?:

    <div class="leafh2 clearfix">

    thank you! - Val
    When you float something, the immediate element after needs to have a clear on it. So in the case here, the <p> would need a clear:both

    Don't just give p{clear:both;} because not EVERY <p> in your page will want a clear:both. Assign a class to those <p> after the floated <h2> and then give that clear:both or clear:right whatever
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  12. #12
    SitePoint Evangelist
    Join Date
    Jul 2008
    Location
    Port Elizabeth, South Africa
    Posts
    408
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi - Yes I guess that h2 text is centered vertically

    Ralph - thanks for the paddng-right!

    >We used float on the container, which makes it clear the floated inn h2

    Sorry I'm not quite following. Are you saying because we used .leafh2 {float: left} that clears the float in .leafh2 h2 {float: right}? So therefore I don't need <div class="leafh2 clearfix">?

    Ryan, surely clear:both on the <P> is doing the same as clearfix? I prefer doing it the clearfix way, it's how Paul taught me to do it.

    So my only problem now (besides getting me to understand how the float is being cleared) is (1) to center horizontally the leaf-image to the left of h2 text. Ryan it's leaf25.gif in .leafh2 - Ralph you were going to mention the more complicated way?

    thanks! Val

  13. #13
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by valarcher View Post
    Are you saying because we used .leafh2 {float: left} that clears the float in .leafh2 h2 {float: right}? So therefore I don't need <div class="leafh2 clearfix">?
    Yes. A floated container encloses floated content by default. So floating a container is a valid way to clear floated contents. The reason why it works to float the container here is that the block-level content above and below it (that is, the paragraphs) is width 100&#37;.

    Ralph you were going to mention the more complicated way?
    Yes, but unfortunately I was talking off the top of my head. When I went away and tried it—for a couple of hours!!!—I couldn't get a satisfactory result that would work cross browser. I almost got there, and I have a solution that would do fine if I knew that the H2 would only ever be one line tall. But if the H2s really are going to get taller, then that's a problem for my solution. I'm sure Paul and the like could do it.

    To be honest, I'm half tempted to say 'use a table' in this instance... though I'm ashamed to admit it.

    Off Topic:

    Also, I still don't feel that the leaf position you want is aesthetically the best idea. To me it looks better in the center of the page.

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,342
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ralph.m View Post
    . But if the H2s really are going to get taller, then that's a problem for my solution. I'm sure Paul and the like could do it.
    Both Gary and I gave various solutions for this previously and can be found by searching Vals threads.

    One of the methods proposed was something like this one which is a little complicated which is why a table was suggested.

    To be honest, I'm half tempted to say 'use a table' in this instance... though I'm ashamed to admit it.
    If IE6 and 7 need to be supported then a table is still the easiest way.

  15. #15
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    If IE6 and 7 need to be supported then a table is still the easiest way.
    I'm glad to hear you say that. Still feel guilty, though. Thanks for those links, Paul.

  16. #16
    SitePoint Evangelist
    Join Date
    Jul 2008
    Location
    Port Elizabeth, South Africa
    Posts
    408
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul - thank you! I mentioned in my post at the top of the page - "I recall Paul giving me wide variety of options to do that image-w-parallel-txt but in the end a table seemed the simplest."

    I still have all your other options saved

    Ralph - thank you for all your hard work! And for pointing out the float works because the para's above + below are 100&#37; width. Now I understand.

    So table it is then - it seems I need to create a special h2 table?

    I tried this:

    table.h2 {
    table-layout: fixed;
    width:100%;
    background: #e5ffbf;
    margin:20px 0 30px 40px; /*txtbox padng 40px*/
    }
    table.h2 td {border:none; padding:0}
    table.h2.td1 {background:transparent url(gr-pg/leaf25.gif) no-repeat scroll 50% 50%}
    table.h2.td2 {width:300px}

    - - - - - -

    <table class="h2" summary="h2">
    <tr>
    <td class="td1 wh"><img src="leaf25.gif" alt="leaf" width="30" height="25" />
    </td>
    <td><h2 class="cnt">Long Header Let's try long header and see what happens</h2>
    </td>
    </tr>
    </table>

    .wh = background:white
    .cnt = text-align:center
    .txtbox, .txtbox2 {padding: 25px 40px}

    You can see it here (the table is the 2nd Long Header):

    http://www.greensmoothie.com/gs/

    Problems:

    (1) table - it will recognize only one margin, either on left or right, but not on both sides

    so I can get either the leaf side up against left txtbox edge with:
    margin:20px 0 30px -40px; (to negate txtbox padding of 40px)

    OR I can get text side up against right txtbox edge with:
    margin:20px 0 30px 40px;

    But no matter what I define that right-margin to be, it ignores it (so that's why it's 0 now).

    I need *both* sides up against txtbox edge on both left and right sides. How do I do that?

    (2) leaf on left - it won't display it as css background in td1. I have to use <img src= in the html.

    (3) text on right - it won't let me define the cell width, ignores width:300px

    I actually need that text cell as a percent width, not px, so the relation between leaf + text stays the same at different screen resolutions. But it ignores both width:40% and width:300px!

    I hope a table is going to work when I tell wordpress I want an h2. I have no experience in WP

    thank you! - Val

  17. #17
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    1)The table does recognize left AND right margins but it's just you don't notice the right margin probably . If you are trying to center it just give it margin:0 auto;
    You don't even set a right margin in that code. In margin:0 1px 2px 3px it goes top/right/bottom/left like a clock

    I just looked at the page. You set 100&#37; width and then you try adding margins to it. It will recognize the right margin but if you want it to actually be usable you can lower the left margins value and increase the right

    2) Put it without the <img> because otherwise we can't see where you would go wrong

    3) Where? I looked through the source code and was unable to find a 300px width table cell. Please be more descriptive.

    I just looked at the CSS and I found a background image of a leaf and the width of 300px. THis may be your problem
    Code:
    table.h2.td1 {background:transparent url(gr-pg/leaf25.gif) no-repeat scroll 50% 50%}
    table.h2.td2 {width:300px}
    There is no space between the table.h2 and the .td1(and .td2)

    Try adding a sapce there for both rules
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  18. #18
    SitePoint Evangelist
    Join Date
    Jul 2008
    Location
    Port Elizabeth, South Africa
    Posts
    408
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul - I forgot to mention, I was hoping we might be able to avoid using table here, because there's no cap under the image. That's why I started this thread and gave Ryan so much work!

    Hi Ryan - thank you, putting that space before .td1 works! It now displays the image from css.

    (1) Am I correct, is this all I need in the html:

    <td class="td1"></td>

    when I have:
    table.h2 .td1 {background:transparent url(gr-pg/leaf25.gif) no-repeat scroll 50&#37; 50%}

    (2) However it doesn't work putting a space before .td2. It won't respond to this:

    table.h2 .td2 {width:300px}

    I can make that 3000px or 30 px, it ignores it. In addition, what I really need is % not px - that text cell to be 60% of table width.

    (3) >You set 100% width and then you try adding margins to it.

    The problem is if I delete the 100% width, it displays the table as a small width centered in middle of page.

    (4) >It will recognize the right margin but if you want it to actually be usable you can lower the left margins value and increase the right

    No that doesn't work, e.g.

    instead of this (where td2 the text cell is correctly aligned against right edge of txtbox):

    margin:20px 0 30px 40px;

    I can do this (to try get td1 the image cell to correctly align against left edge of txtbox):

    margin:20px 100px 30px 40px;

    It makes no difference, It stays exactly as if it were 0.

    The problem is it's seeing its 100% width as the same width of the paragraphs, namely 40px on each side (defined in txtbox not in p). So when I move the table left or right (e.g. lft-margin 40px moves it to the right by 40px), it keeps that same width.

    I can't get the table to widen its width to reach the edges of the txtbox on both sides. You can see what I mean in "display block size"

    (5) New question: In firebug it looks like h2 here is picking up:
    h1, h2, h3 {padding:15px 0 10px}

    But in display, it looks like this:
    table.h2 td {border:none; padding:0}

    is over-riding that h1,h2. I want it to over-ride it. Is the padding 0 round that h2 text in td2?

    thanks! - Val

  19. #19
    SitePoint Evangelist
    Join Date
    Jul 2008
    Location
    Port Elizabeth, South Africa
    Posts
    408
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Ryan - delete (2) above. It DOES work when I put space before .td2, I'd just forgotten to do this in the html: <td class="td2">. The text cell now displays at 40&#37; width or whatever I want it.

    My real big problem remains (4) above.

    thanks, Val

  20. #20
    SitePoint Evangelist
    Join Date
    Jul 2008
    Location
    Port Elizabeth, South Africa
    Posts
    408
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Ryan - scratch all the above. I discovered

    (1) I can get your neat div to work simply by moving the horiz.position of leaf, make it 20&#37; instead of 50%:

    .leafh2 {
    float: left;
    width: 100%;
    background:transparent url(gr-pg/leaf25.gif) no-repeat scroll 20% 50%;
    margin:20px 0;
    }

    (2) NOTHING works in IE6. The div does not work, the table does not work, and the right leafy down branch no longer works either!

    Does Paul perhaps know a fix for IE6? Ideally for the div?

    The div html is so neat:

    <div class="leafh2">
    <h2>Header</h2></div>

    whereas the table html is so much junk, esp. for cell phones in Africa and esp. as it has to display multiple times on one page:

    <table class="h2" summary="h2">
    <tr>
    <td class="td1"></td>
    <td class="td2 bg"><h2>Header</h2>
    </td>
    </tr>
    </table>

    here's our css - can you talk to IE6 somehow? IE7 is happy. And don't ask me why the leafy branch moves its position in IE6 only!

    .leafh2 {
    float: left;
    width: 100%;
    background:transparent url(gr-pg/leaf25.gif) no-repeat scroll 20% 50%;
    margin:20px 0;
    }
    .leafh2 h2 {
    float: right;
    width: 50%;
    background: #e5ffbf;
    margin-right: -40px; /*txtbox padng*/
    font: bold 1.2em Helvetica, sans-serif; color: #f00251;
    text-align:center; vertical-align:middle;
    }

    table.h2 {
    table-layout:fixed;
    width:100%;
    background:white;
    margin:20px 0 30px 40px; /*txtbox padng*/
    }
    table.h2 h2 {text-align:center}
    table.h2 h2.lft {text-align:left}
    table.h2 td {border:none; padding:0 15px}
    table.h2 .td1 {background:transparent url(gr-pg/leaf25.gif) no-repeat scroll 30% 50%}
    table.h2 .td2 {width:50%}

    I've uploaded the latest to:

    http://www.greensmoothie.com/gs/

    thank you! - Val

  21. #21
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,342
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi Val.

    I'm not sure where you are with this as there's too many changes above to follow through but I can tell you why the first header is cut short in IE6.

    You need to add position:relative here:

    Code:
    .leafh2 h2 {
        float: right;
        width: 50&#37;;
        background: #e5ffbf;
        margin-right: -40px; /*txtbox padng*/
        font: bold 1.2em Helvetica, sans-serif;
        color: #f00251;
        text-align:center;
        position:relative;
    }
    Elements with negative margins will often need position:relative added or they go under the background.

    What other differences were there with this line as it looks much the same as IE7 to me?

  22. #22
    SitePoint Evangelist
    Join Date
    Jul 2008
    Location
    Port Elizabeth, South Africa
    Posts
    408
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul - tnx! That position:relative does the trick.

    It all works perfectly now as a div I'm really happy with it. It's at (ignore that the includes don't work):

    http://www.greensmoothie.com/gs/wp-c...index-nowp.php

    thank you Ralph and Paul! - Val

  23. #23
    SitePoint Evangelist
    Join Date
    Jul 2008
    Location
    Port Elizabeth, South Africa
    Posts
    408
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    p.s. I'm right proud of myself for seeing the solution to get the div to work, just move the image 30&#37; to the left!

    I'm still under the ignorance-is-bliss belief that we didn't need a table because there's no caption under the image... That time I needed a table Paul, the image + its caption in the left-hand cell were always different sizes, each time I used the table

    whereas here we just have one image with no cap that's always the same image, so it's size/position never changes relative to the text in right-hand cell.

    I just uploaded an example to that same page, of when a table IS needed, check it out (scroll down below h2's):

    http://www.greensmoothie.com/gs/wp-c...index-nowp.php

    best, Val


Bookmarks

Posting Permissions

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