SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast Elmiee's Avatar
    Join Date
    Oct 2005
    Location
    England
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Box, fixed to photo?

    Okay, so I've roughed out a layout I want to do for my photography site in PS, I'm going to code in CSS and use pixelpost
    (here's the screen cap of it - http://elmiee.be/site.jpg )

    Now, There will be portrait and landscape photos/different sized photos so I'm guessing I'd use CSS boxes, but how will I make it so when a landscape photo is posted up that it stretchs? So the logo and text shifts to where it should be (so the logo is on the left, the text in the right places etc)

    Actually, to make it eaiser I've drawn up what I think I need to do/how I want to to look, I just need help as to how to do it. I've worked with CSS boxes before, but only fixed ones




    Just say if I've confused you all :S

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

    At the simplest level you could float an outer wthout width which will shrinkwrap to the image size and the you can place the elements at the edges as required.

    http://www.pmob.co.uk/temp/caption7.htm

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    * {margin:0;padding:0}
    .outer{
    float:left;
    padding:25px;
    background:#f2f2f2;
    margin:10px;
    clear:both;
    }
    .image1{
    width:300px;
    height:400px;
    clear:both;
    background:red;
    }
    .image2{
    width:200px;
    height:200px;
    clear:both;
    background:red;
    }
    .image3{
    width:700px;
    height:300px;
    clear:both;
    background:red;
    }
    .left-foot,.left-head{
    text-align:right;
    }
    .left-foot span,.left-head span {float:left;text-align:left;}
    </style>
    </head>
    <body>
    <div class="outer">
    <div class="left-head">
    <p><span>left stuff</span> Right stuff</p>
    </div>
    <div class="image1">this would be an image</div>
    <div class="left-foot">
    <p><span>left stuff</span> Right stuff</p>
    </div>
    </div>
    <div class="outer">
    <div class="left-head">
    <p><span>left stuff</span> Right stuff</p>
    </div>
    <div class="image2">this would be an image</div>
    <div class="left-foot">
    <p><span>left stuff</span> Right stuff</p>
    </div>
    </div>
    <div class="outer">
    <div class="left-head">
    <p><span>left stuff</span> Right stuff</p>
    </div>
    <div class="image3">this would be an image</div>
    <div class="left-foot">
    <p><span>left stuff</span> Right stuff</p>
    </div>
    </div>
    </body>
    </html>
    Of course you may need to float the smaller elements to the right as well as I have just used text-align because there is only text in the demo. However the effect should be what you wanted I think

  3. #3
    SitePoint Enthusiast Elmiee's Avatar
    Join Date
    Oct 2005
    Location
    England
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So I would need to apply image1, image2, image3 etc to each indivdual image depending on size? Because with pixelpost you just automatically upload the photo from your pixelpost cpanel so I can't see it working as I won't be putting in the code manually

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    So I would need to apply image1, image2, image3 etc to each indivdual image depending on size?
    Err... no

    The class for each image was just to show you how a different sized image would look and was there just to save me the trouble of finding some images to show you

    Here it is with images:

    http://www.pmob.co.uk/temp/caption8.htm


    Hope it helps

  5. #5
    SitePoint Enthusiast Elmiee's Avatar
    Join Date
    Oct 2005
    Location
    England
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    oh! okay, silly me >.<;;
    Here's what I have so far - http://www.irismemoirs.org/shh/
    the logo isn't showing up in the top left though. Thanks for helping me and such though, I can see that it's soo almost there!

    edit - nevermind, some idiot forgot to put logo.gif instead of logo.jpg ! rofl. Now I just have to figure how to make the top right text come down and make the logo join onto the main photo and get rid of the red bit at the bottem of the photo!

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Now I just have to figure how to make the top right text come down and make the logo join onto the main photo and get rid of the red bit at the bottem of the photo
    One way would be like this (assuming the top is consistent of course):

    Code:
    img {display:block}
    .outer {padding-top:70px}
    .left-head span{
    margin-top:-45px
    }


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
  •