SitePoint Sponsor

User Tag List

Results 1 to 17 of 17

Thread: Alignment Issue

  1. #1
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Alignment Issue

    I'm having a problem with the background images behind the images of the paper pile. I don't know if it's related to the graphics or the styling. I want the graphic to be placed directly behind the paper pile graphic with a border around, as I don't expect the graphic to be seen and the paper clip to be shown to some extent. I hope someone can pin point what is wrong cause I've been mingling with the graphic and just can't solve it.

  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)
    So what's actually meant to happen? I can't quite figure what you want it to look like.

  3. #3
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I want it to align in the middle of the paper pile graphic but show some of the background graphic edge and the paper clip.

  4. #4
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    It looks like you can do that by adding more top padding to the <p> tag that contains the paperpile image.

    Try this and then change the top padding to suit your taste.
    Code:
        #inner p {
            margin:0;
            padding:55px 20px 20px;
            font-size:1em;
            background: url(images/background_image_graphic2_03.gif) no-repeat;
            /* background-position: 15% 12% 35% 12%; */
        }

    I removed your background-position as it was not correct. It can't have four values applied to it. I don't think you need to use it at all either with padding adjustments.

    If you want the paper clip to lay on top of the paperpile image then you will need to AP another element above and set the paper clip only as a small BG image.

  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)
    The pager image is centered over the background image now. If you are going to have an opaque image on the top (the paper stack image) the background image can't show through. Why not just merge them into one image? Or delete the wihite portion of the page image and make is a transparent png.

  6. #6
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The page is good, except the paper pile graphic needs to be positioned more to the left so it's under the paper clip, refresh to see an update of the page unless I have to adjust the graphic?

  7. #7
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    paper pile graphic needs to be positioned more to the left so it's under the paper clip
    That ain't going to happen with just two images.

    You can't slide the paperpile underneath a PORTION of the BG image.

    That's why I said this:
    If you want the paper clip to lay on top of the paperpile image then you will need to AP another element above and set the paper clip only as a small BG image.

  8. #8
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    I would probably remove the paperclip from the BG image completely. Then make it the third image in the stack.

    Here is an example of what I was suggesting
    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Test</title>
     
    <style type="text/css">
    p {
        float:left;
        position:relative;
        margin:0;
        padding:40px;
        background:orange;
    }
    p img {
        display:block;
        width:250px;
        height:250px;
        background:blue;
    }
    p span {
        position:absolute;
        top:20px;
        left:30px;
        width:40px;
        height:80px;
        background:red; /*paperclip image here*/
    }
    </style>
     
    </head>
    <body>
     
    <p>
        <img src="paperpile.jpg" alt="#"><span></span>
    </p>
     
     
    </body>
    </html>

  9. #9
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've been trying to figure out how to nest that HTML,

    Code HTML4Strict:
    <div class="floatwrap">
    <p>
        <img src="paperpile.jpg" alt="#"><span></span>
            <p class="left"><a href="tutorials/ramen/paperpile.jpg" class="highslide left" onclick="return hs.expand(this)">
                        <img src="tutorials/ramen/paperpile.jpg" alt="Highslide JS" title="Click to enlarge" height="200" width="200" />
                    </a>
    </p>
                </p>

  10. #10
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by SiberianHuskey View Post
    I've been trying to figure out how to nest that HTML,

    Code HTML4Strict:
    <div class="floatwrap">
    <p>
        <img src="paperpile.jpg" alt="#"><span></span>
            <p class="left"><a href="tutorials/ramen/paperpile.jpg" class="highslide left" onclick="return hs.expand(this)">
                        <img src="tutorials/ramen/paperpile.jpg" alt="Highslide JS" title="Click to enlarge" height="200" width="200" />
                    </a>
    </p>
                </p>
    You can't have a <p> within a <p>. If you have a <p> open and then open another one, the browser silently inserts a </p> to close the first one before opening the second one.

  11. #11
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by SiberianHuskey View Post
    I've been trying to figure out how to nest that HTML
    My example was not meant to be nested into your existing code. It was meant to show you the concept.

    You already had the <p> tag and the image in place, all you had to do was add the <span> and then style it in your CSS like I did.

    Now that I see what you are doing there is no need use the padding on the <p> tag. Just set dimensions on it that are the same size as your shadow BG image. After that you can position your paperpile image with margins.

  12. #12
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Here's what you need to do:


    1. Take your BG image and REMOVE the paper clip from it.
    2. Now make a NEW png image with paper clip only. (as small as possible)
    3. Post the links to those two NEW IMAGES


    Then we can start adjusting your code

  13. #13
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    I cropped the paperclip out from the top to make a temporary image. When you get those image corrections done I can plug them into this new code.

    http://www.css-lab.com/test/husky/tutorial-3.html

    Then you will have your paperclip on top of the paperpile img.

    I have also reworked a lot of the html/css so it will be futile to try and copy bits and pieces from my page to yours. Just save the page and start fresh.

    You had a .left class set along with the .highslide class on the anchors. Not sure why you did that, it was applying left floats to them. I removed that left class and just used margins instead.

  14. #14
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah, I forgot something I can't figure out what is causing the gap look at the bottom of the page to see what I mean, it's noticeable

  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 SiberianHuskey View Post
    Ah, I forgot something...
    Is that the phrase for "thank you!" in another language?

    I can't figure out what is causing the gap look at the bottom...
    I don't see a gap in FF. Maybe post a screen shot and indicate what browser you are using.

  16. #16
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    ^ Well at this point it is not a gap, it is just the text creating the extra height.

    The problem is just a lack of a background. I would move the BG color from #inner to #wrap. That will set the BG color down the entire page.

    Code:
    #wrap {
        width:700px;
        margin:auto;
        background:#b7b7b7;
    }

  17. #17
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is that the phrase for "thank you!" in another language?
    Probably

    The problem is just a lack of a background. I would move the BG color from #inner to #wrap. That will set the BG color down the entire page.
    Clever !


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
  •