SitePoint Sponsor |
|
User Tag List
Results 1 to 5 of 5
-
Sep 28, 2007, 11:04 #1
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
-
Sep 28, 2007, 11:40 #2
- 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.Xazure.Net - My Blog - About Programming and Web Development
Follow Me on Twitter!
Christian Snodgrass
-
Sep 28, 2007, 12:24 #3
- 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 */ }
Code HTML4Strict:<div id="footer"> <img class="girl" src="girlfilepath" height="x" width="x" alt="Happy Girl"> </div>
-
Oct 1, 2007, 06:50 #4
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
-
Oct 1, 2007, 07:45 #5
- 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