SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Zealot
    Join Date
    Mar 2010
    Posts
    197
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problems with placing a small gallery on sticky footer...

    Hi...

    I am sorry I am back with more questions! Please help me with this problem. I would like to place a small gallery on my sticky footer this page... http://www.rajeevthomas.com/news.php... but it adds so much space below it. I tried removing the top padding of the footer but it is not helping... is this happening because I used ul and il ? How can I pull my search form and footnote back up and avoid that gap? Any help is appreciated... I hope I am not being too annoying with all the questions I have.... Thank you for any help...

    My CSS for the page is
    Code:
    .nfooter {
    height:92px;
    background:url(/photos/2.jpg) no-repeat 50% 0;
    padding:307px 0 0;
    margin:auto;
    clear:both;
    font-size:11px;
    text-align:center;
    width:1024px;
    }.nfootinner {
    width:100%;
    text-align:center;
    padding:0;
    }
    .nfootinner {
    width:100%;
    text-align:center;
    padding:0;
    }
    .newpics {
    position:relative;
    left:110px;
    width:500px;
    bottom:200px;
    padding:0;
    
    }
    
    ul.newpics,ul.newpics li {
    list-style:none;
    margin:0;
    padding:0;
    }
    
    ul.newpics li {
    float:left;
    margin-right:2px;
    border:5px solid #000;
    z-index:1;
    padding:0;
    }
    
    ul.newpics a {
    display:block;
    float:left;
    width:90px;
    height:90px;
    line-height:10px;
    overflow:hidden;
    position:relative;
    z-index:1;
    }
    
    ul.newpics a img {
    float:left;
    position:absolute;
    top:-20px;
    left:-20px;
    }
    
    ul.newpics a:hover {
    overflow:visible;
    z-index:10;
    border:none;
    }
    
    ul.newpics a:hover img {
    border:1px solid #000;
    background:#000;
    padding:2px;
    }
    
    ul.newpics:after,li.newpics:after {
    content:".";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
    }
    
    ul.newpics,li.newpics {
    display:block;
    min-height:1%;
    }
    
    * html ul.newpics,* html li.newpics {
    height:1%;
    }
    
    .news {
    position:relative;
    top:30px;
    width:800px;
    left:-5px;
    text-align:center;
    min-height:700px;
    height:auto!important;
    height:700px;
    color:#A67445;
    }
    
    .news-inner{
    position:relative;
    top:0px;
    
    }
    
    .news-content{
    position:relative;
    bottom:0px;
    }
    
    
    .ndate {
    text-align:left;
    font-size:28px;
    width:58px;
    border-bottom-width:thin;
    border-bottom-style:solid;
    border-bottom-color:#774937;
    position:absolute;
    height:20px;
    top:-3px;
    left:-2px;
    margin:0;
    padding:0 3px 22px 0;
    color:#C48B4E;
    }
    
    .nmonth {
    text-align:left;
    font-size:12px;
    border-left-width:thin;
    border-left-style:solid;
    height:20px;
    position:absolute;
    top:0;
    left:28px;
    margin:0;
    padding:2px 20px 9px 4px;
    color:#774937;
    }
    
    .nyear {
    text-align:left;
    font-size:12px;
    position:absolute;
    top:0;
    left:28px;
    margin:0;
    padding:20px 20px 0 6px;
    color:#774937;
    }
    
    .datebox {
    position:relative;
    text-align:left;
    top:90px;
    left:23px;
    padding:2px 0;
    }
    
    .ntitle {
    text-align:left;
    font-size:22px;
    padding:20px 0 0 100px;
    color:#ef6702;
    }
    
    .nimage {
    text-align:left;
    margin:0;
    padding:2px 2px 2px 100px;
    }
    
    .npost {
    text-align:left;
    font-size:17px;
    position:relative;
    zoom:1.0;
    padding:10px 0 0px 100px;
    color:#A67445;
    }
    
    .title {
    text-align:left;
    font-size:17px;
    position:relative;
    top:0px;
    left:10px;
    margin:0;
    padding:0 0 0 30px;
    }

  2. #2
    SitePoint Member diginetwork's Avatar
    Join Date
    Oct 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You have this css:

    .newpics {
    position:relative;
    left:110px;
    width:500px;
    bottom:200px;
    padding:0;

    }

    Try removing line 'bottom:200px;' and check.

  3. #3
    SitePoint Zealot
    Join Date
    Mar 2010
    Posts
    197
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    diginetwork... I did that but that doesn't change the gap.... :-(

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,386
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    I'm not sure what you are trying to do there but as mentioned above the bottom:300px should be removed.

    I think you are trying to do something like this:

    Code:
    ul.newpics{margin:0 0 20px}
    
    .nfooter {
        background: url("/photos/2.jpg") no-repeat scroll 50% 0 transparent;
        clear: both;
        font-size: 11px;
        height: 300px;
        margin: auto;
        padding: 100px 0 0px;
        text-align: center;
        width: 1024px;
    }
    
    .newpics {
        bottom: 0;
        left: 110px;
        padding: 0;
        position: relative;
        width: 500px;
    }

  5. #5
    SitePoint Zealot
    Join Date
    Mar 2010
    Posts
    197
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Paul and diginetwork.... thank you!

    Paul... that was it!! That was what I was looking for ... BUT there is a major shift to the right on IE6... I thought it is the width of .newpics messing with the width of my footer... but I don't think that's what's causing it.

    In the future if I need to move around this gallery in this footer, should I just use
    ul.newpics{margin:0 0 20px}
    or relative positioning and use top, left, etc,.?

    Also I have question about
    Code:
    background:url(/photos/2.jpg) no-repeat 50% 0 transparent;
    what does the transparent stands for?

    Paul... thank you so much...without your help I wouldn't have been able to have this gallery!
    Last edited by yathrakaaran; Oct 24, 2011 at 01:37. Reason: corrections

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,386
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by yathrakaaran View Post
    Paul... that was it!! That was what I was looking for ... BUT there is a major shift to the right on IE6... I thought it is the width of .newpics messing with the width of my footer... but I don't think that's what's causing it.
    It's probably the text-align:center on the parent centering the block element in error.

    Code:
    .nfooter {
        background: url("/photos/2.jpg") no-repeat scroll 50% 0 transparent;
        clear: both;
        font-size: 11px;
        height: 310px;
        margin: auto;
        padding: 90px 0 0;
        text-align: center;
        width: 1024px;
    }
    Change it to text-align:left;

    Code:
    In the future if I need to move around this gallery in this footer, should I just use   or relative positioning and use top, left, etc,.?
    Relative positioning doesn't move anything physically and is only used in special occasions where you want to maintain the flow of the page exactly as it is but make an element appear somewhere else. It however still takes part in the flow as if it were in its original position which can appear to cause holes on the page where the element should have been. Most times you would use margins instead.
    Also I have question about
    Code:
    background:url(/photos/2.jpg) no-repeat 50% 0 transparent;
    what does the transparent stands for?
    Transparent is the default and doesn't need to be specified and basically means no background color for that element. i.e. it will be transparent and what ever else is beneath the div will shine through. This is the default and only needs to be specified if over-ruling something that went before.

  7. #7
    SitePoint Zealot
    Join Date
    Mar 2010
    Posts
    197
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Paul.... it fixes...

    Paul...your solutions fixes everything... Thank you Thank you!! text-align: left did the magic...

    About margins...to understand it better ..let me ask you ... since it is confusing to me... when we use margins I noticed that it changes the height of the page ( margin-bottom to bring up the small gallery closer to the "Latest Images" headline... and I made changes in
    Code:
    ul.newpics{margin:0px 0px 0px 0px }
    ) and it looks like margin-bottom pushes my footnote down. Do we make changes to compensate for the changes margin does to a page? Or is it inevitable to have height, width of the page changes when you move around elements in them?

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,386
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by yathrakaaran View Post
    About margins...to understand it better ..let me ask you ... since it is confusing to me... when we use margins I noticed that it changes the height of the page
    At a simple level margins push elements away from each other and effectively form part of the whole box that the element occupies. This is what we call controlling the flow and should one element be removed the other elements will fill the void.

    In a logical structure the margins hold each element away from each other and each element can follow naturally.

    It's only when you have set heights to work in that you have to take care as the margins may push out of the box or make the element bigger than the space available. That's the reason that in most cases you don't want to set height on containers when you don't have to. In some cases where the height is explicit (such as in a sticky footer) the you have to work within this height and just be careful

    You can use margins to push elements away from each other but you can also use padding to make room inside the element itself. Most layouts are a mixture of each depending on situation.

    ( margin-bottom to bring up the small gallery closer to the "Latest Images" headline..
    No margin bottom pushes the element underneath away from the element with the margin. You would need to use negative margins to drag an element upwards.

    Note that there are special rules about margins and some elements (lie floats) and collapsing margins (see the entry in the Sitepoint reference on collapsing margins for more info).

  9. #9
    SitePoint Zealot
    Join Date
    Mar 2010
    Posts
    197
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile Paul....

    Thank you Paul for explaining in detail.... that's probably the best explanations of positioning in simple terms ever where I could I understand everything Your patience is incredible...


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
  •