Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,778
    Thanks
    19
    Thanked 155 Times in 146 Posts

    CSS to position image at bottom, right of table cell

    I have this table cell with the following code (just disregard the PHP):

    PHP Code:
    <td valign="top" style="border:1px solid #000000">

    <div style="float:left"><IMG SRC="AS700_2.jpg" class="products"></div>

    <div><span style="font-weight:bold">Monitor -</span><span class="product_text1"> NEC AS700 17" CRT Monitor.<br><br>Price</span><span class="price"> $144.45</span><br><span class="product_text1">Part# MMMR-MR0125</span></div>

    <div style="float:right">

    <br><br><br><br><br><br><br>

    <form method="post" action="<?

                
    if (isset($_SESSION['username']))
                    echo 
    'shopping_cart.php#product_block';
                else
                    echo 
    'sign_in_component.php#product_block';

                
    ?>" style="margin:0">
    <input type="hidden" name="product_ID" value="MMMR-MR0125">
    <input type="image" src="cart2.jpg" valign="middle"></form>
    </div>

    </td>
    As you can see, I'm using a series of <br>'s to get the cart2.jpg image to appear at the bottom of the cell, but there has to be a better way to do this using CSS...But, I can't figure out how...

    Any help, please?

    Thanks.
    Regards, R.J.

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

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    View?

    Personally, it would help if you could supply either a live, online example, or a screen shot of this piece of the page; I've got the feeling your approach is a bit overcomplicated, and I can't really picture what it should look like.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #3
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,778
    Thanks
    19
    Thanked 155 Times in 146 Posts
    Sorry, here's a link to the page with this code:

    http://www.mediamogulsweb.com/featured_components.php

    Thanks.
    Regards, R.J.

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

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!

  • #4
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    The easy way: Since the image is in a form nested in a div, add margin to the top of the div to scoot it into place.

  • #5
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,778
    Thanks
    19
    Thanked 155 Times in 146 Posts
    I thought about that, but I hate to use CSS margins to "scoot" things into place, because I always run into problems with browser (IE vs. FF) inconsistancies (when I use margin).....is there any other way?

    Thanks.
    Regards, R.J.

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

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!

  • #6
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Relative or absolute positioning.

    You can do a number of things, really. Just apply the style to either the div holding the form or get rid of the div and apply it to the form holding the image.

    As far as browser inconsistencies, welcome to the club

  • #7
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Ditto on the abs pos

    I concur with Richard on the absolute positioning; if you want to make sure the add-to-cart form thingy is allways in the bottom right corner of the table cell, you'd be best off positioning it there. You have to make sure, though, that there's always enough room for it by adding a sufficient amount of bottom margin on the last element in the normal flow.

    Concerning the rest of the markup: You really don't need to enclose the image in a div; it can be floated perfectly on its own. Floating should make behave like it a block level element, but you can set it to "display: block;" just to be sure so you can add some margin to push the text away.

    The text itself can sit in a paragraph and again need not be in a div; the inline header can easily be created using a header element set to "display: inline;"; price and part number could be in an unordered list, but maybe that's stretching it. It would be semantically richer then spans, though.
    The form element already is a block level element and can be positioned as is, again without a div. The table cell needs to be made relative for the abs pos to work.

    Edit:
    set to "display: inline;"
    Make that: "set to 'float:left;' "; the inline idea sucked, but the float works great. I've got a working example with a dl for the price and part#, and not a single div. I can't put it online somewhere, but if you're interested I'll be happy to post the markup and styles in here.
    Last edited by ronaldb66; 02-25-2005 at 01:44 PM.
    Regards,
    Ronald.
    ronaldvanderwijden.com


  •  

    Posting Permissions

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