SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot mrtopher's Avatar
    Join Date
    Mar 2004
    Location
    VA
    Posts
    150
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Recommendations for how to place this image?

    I am in the process of slicing a design and putting it in HTML and am almost done but I'm struggling with how to place one final image.

    This is what the design is supposed to look like:
    http://www.practisinc.com/dev/pedCare/interior.html

    I've got it mostly sliced and built out:
    http://ns3.practisinc.com/~pediatric...om/content.php

    I'm struggling with how to place the image of the girl at the bottom left of the content like it is on the image. The trouble I'm having is that it overlaps the border of the content background and it blends in with the bottom of the curved corners box. I've contemplated absolute positioning and other things but nothing has worked so far.

    Can anyone make any recommendations for how I should go about placing this image?
    The blog: ChrisMonnat.com

  2. #2
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    I had a similar issue. The easiest is to just make her image incorporate the border and everything.

    Then you would need 2 bounding boxes, 1 outside that is invisible holding the stuff you have, sorta like this:
    [code]
    ===============
    | =============|
    | = content goes here |
    |ggg more content goes|
    |ggg here |
    |ggg ===========|

    The 'g' represent the girl.

    Hope that helps.

  3. #3
    Zero Point Zero Siebird's Avatar
    Join Date
    Feb 2007
    Location
    York, PA
    Posts
    456
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have done something similar to this, and this worked fine. Not sure if it's the "correct" way, but it works. Take a look at my footer, I positioned the logo to sit right on top of line.

    Code CSS:
    #footer .girl {
    	float: left; 
    	position: relative; 
    	margin: 0; /*play with margins */
    	top: -Xpx; /* use negative position  */ 
    left: -Xpx; /* use negative position */ }
    Place the image right below the <div id="footer">
    Code HTML4Strict:
    <div id="footer">
    			<img class="girl" src="girlfilepath" height="x" width="x" alt="Happy Girl">
    	</div>

  4. #4
    SitePoint Zealot mrtopher's Avatar
    Join Date
    Mar 2004
    Location
    VA
    Posts
    150
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Very cool!! Looks like that does the trick... there only a couple of odd things. First, the image is throwing off the centering of the nav and copyright at the bottom of the page. I thought floating it would take it out of the flow, but apparently not. Second, it's adding a lot of empty space at the bottom of the page in IE and FF but not in Safari.

    http://ns3.practisinc.com/~pediatric...om/content.php

    Any ideas how to fix these two little bugs?
    The blog: ChrisMonnat.com

  5. #5
    Zero Point Zero Siebird's Avatar
    Join Date
    Feb 2007
    Location
    York, PA
    Posts
    456
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try removing the float: left, and then play with the positioning some more. (i.e. left -Xpx)


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
  •