SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2008
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Trouble getting the corner placed

    Ok guys I am trying to get a 10x10 gif to align in the bottom left of my content div, but cannot get it there...

    Here is the site skeleton:
    HTML Code:
    <div id="content" class="clearfix">
    
    <p class="BL_Corner"></p>
    <p class="TR_Corner"></p>
    
    <div class="col1">
    <div id="content1"></div>
    </div>
    
    <div class="col2">
    <div id="content2"></div>
    <div id="content3"></div>
    </div>
    
    </div>
    And here is the relevant CSS:
    Code:
    #content {
        border: 1px solid #333366;
        padding: 5px;
        background: #DDDDFF url(Images/fauxCol_bg.gif) repeat-y scroll;
    }
    #content p.TR_corner {
        background-image: url(Images/TR_Corner.gif);
        width: 10px;
        height: 10px;
        float: right;
        margin: -6px -6px;
    }
    #content p.BL_corner {
        background-image: url(Images/BL_Corner.gif);
        width: 10px;
        height: 10px;
        float: left;
        margin: -6px -6px;
        position: relative;
        top: 100%;
    }
    #content .col1 {
        float: left;
        width: 500px;
        height: 100%;
        margin-right: 5px;
    }
    #content .col2 {
        width: 282px;
        float: right;
    }

  2. #2
    SitePoint Wizard Blake Tallos's Avatar
    Join Date
    Jun 2008
    Location
    Cuyahoga Falls, Ohio.
    Posts
    1,510
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by djXternal View Post
    Ok guys I am trying to get a 10x10 gif to align in the bottom left of my content div, but cannot get it there...

    Here is the site skeleton:
    HTML Code:
    <div id="content" class="clearfix">
    
    <p class="BL_Corner"></p>
    <p class="TR_Corner"></p>
    
    <div class="col1">
    <div id="content1"></div>
    </div>
    
    <div class="col2">
    <div id="content2"></div>
    <div id="content3"></div>
    </div>
    
    </div>
    And here is the relevant CSS:
    Code:
    #content {
        border: 1px solid #333366;
        padding: 5px;
        background: #DDDDFF url(Images/fauxCol_bg.gif) repeat-y scroll;
    }
    #content p.TR_corner {
        background-image: url(Images/TR_Corner.gif);
        width: 10px;
        height: 10px;
        float: right;
        margin: -6px -6px;
    }
    #content p.BL_corner {
        background-image: url(Images/BL_Corner.gif);
        width: 10px;
        height: 10px;
        float: left;
        margin: -6px -6px;
        position: relative;
        top: 100&#37;;
    }
    #content .col1 {
        float: left;
        width: 500px;
        height: 100%;
        margin-right: 5px;
    }
    #content .col2 {
        width: 282px;
        float: right;
    }


    Code:
    #content {
        border: 1px solid #333366;
        padding: 5px;
        background: #DDDDFF url(Images/fauxCol_bg.gif)  repeat-y scroll;
        absolute;  bottom:0;
    }
    ???
    Idk if this will work iwill give it a try Im going to do some reasearching.
    Blake Tallos - Software Engineer for Sanctuary
    Software Studio, Inc. C# - Fanatic!
    http://www.sancsoft.com/


  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2008
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I changed the code to what you wrote and nothing was changed.

    Also, maybe I should add that the corner image is 'BL_corner.gif' and the current background for the content div is 'fauxCol_bg' and it is used for the Faux column technique used

  4. #4
    SitePoint Wizard Blake Tallos's Avatar
    Join Date
    Jun 2008
    Location
    Cuyahoga Falls, Ohio.
    Posts
    1,510
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm, Im trying to mess around with it and nothing seems to be working.. Now im getting confused LOL, i have also been up all night so im Like Im going to try to fix this.
    Blake Tallos - Software Engineer for Sanctuary
    Software Studio, Inc. C# - Fanatic!
    http://www.sancsoft.com/


  5. #5
    SitePoint Enthusiast
    Join Date
    Jul 2008
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok sounds like we are in the same boat then, I was also up most of the night, and was making good progress til I decided to put a corner image in

  6. #6
    Addicted to the Source of Life PowerBit's Avatar
    Join Date
    Feb 2004
    Location
    Loveland Co
    Posts
    548
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    DO you have a link to the actual page. I would give this a shot if I could down load your images to work with.

  7. #7
    SitePoint Enthusiast
    Join Date
    Jul 2008
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I just got it uploaded to the server, but I don't have enough posts to post a link to it

  8. #8
    SitePoint Enthusiast
    Join Date
    Jul 2008
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    wow ok, so I've spent all day working on this and couldnt figure it out, well I temporarily set it to:

    Code:
    position: absolute;
    bottom: 30px;
    to get it lined up with where it needs to be, then later realized that by positioning it from the bottom that it will remain in the right place, so long as I set an absolute height for my footer, which isnt a problem since it remains the same all the time


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
  •