Problems with placing a small gallery on sticky footer

HTML & CSS
1

Hi…

I am sorry I am back with more questions!:confused: 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… :confused: Thank you for any help…

My CSS for the page is

.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

You have this css:

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

}

Try removing line ‘bottom:200px;’ and check.

3

diginetwork… I did that but that doesn’t change the gap… :frowning:

4

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:


[B]ul.newpics{margin:0 0 20px}[/B]

.nfooter {
    background: url("/photos/2.jpg") no-repeat scroll 50% 0 transparent;
    clear: both;
    font-size: 11px;
[B]    height: 300px;
    margin: auto;
    padding: 100px 0 0px;[/B]
    text-align: center;
    width: 1024px;
}

.newpics {
[B]    bottom: 0;[/B]
    left: 110px;
    padding: 0;
    position: relative;
    width: 500px;
}
5

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

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!

6

It’s probably the text-align:center on the parent centering the block element in error.


.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;
   [B] text-align: center;[/B]
    width: 1024px;
}

Change it to text-align:left;


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

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

Paul…your solutions fixes everything… :slight_smile: Thank you Thank you!! :slight_smile: 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

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

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

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 :slight_smile: Your patience is incredible…