PDA

View Full Version : Bottom center images in div



Superflu
Feb 5th, 2010, 08:17 PM
Hi guys, I need some help with this ...

I have 2 clickable images and I want them centered right next to each other, and on the bottom of the page, using CSS.

How should I do this? I can't seem to figure it out.

To clarify, this is the HTML (strict 1.0):


<div id="images">
<a href="#"><img alt="one" src="one.gif" /></a><a href="#"><img alt="two" src="two.gif" /></a>
</div>

Cheers!

harrierdh
Feb 5th, 2010, 09:20 PM
<style>
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -34px;
}
.footer, .push {
height: 34px;
text-align: center;
}
</style>
<body>
<div class="wrapper">
<p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer">
<a href="#"><img alt="one" src="one.gif" /></a><a href="#"><img alt="two" src="two.gif" /></a>
</div>
</body>
</html>

jenius
Feb 5th, 2010, 09:29 PM
Well, you aren't using css in the example here, other than the div, this seems to be all html.

The way I would do this using css is as follows:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">

* {
margin: 0;
padding: 0;
}

#images ul {
width: 204px;
overflow: auto;
margin-left: auto;
margin-right: auto;
}
#images li {
list-style-type: none;
}
#images ul li a {
display: block;
outline: 0;
}

.image1 a {
width: 100px;
height: 100px;
float: left;
background: url(one.gif) no-repeat;
}

.image2 a {
width: 100px;
height: 100px;
float: left;
background: url(two.gif) no-repeat;
}

/* add borders

#images ul, .image1 a, .image2 a {border: 1px solid;} */

</style>
</head>
<body>
<div id="images">
<ul>
<li class="image1"><a href="#"></a></li>
<li class="image2"><a href="#"></a></li>
</ul>
</div>
</body>
</html>


Hope this helps! I defined the widths and height arbitrarily, but you will want to change this to the dimensions of your images. In addition, you will want to change the width of the ul to mirror the widths of both your images added together. This should be pretty straightforward though. I put in an "add borders" line, which you can uncomment if you want to see the borders around the content. It makes everything easier to visualize.

To get it to the bottom of your page, just put the images div below all your other content

Superflu
Feb 5th, 2010, 10:51 PM
Thanks for the quick reply, guys! These are 2 great solutions.

I went with jenius' solution, because I prefer the images being handled through CSS.

One more question though: I want the images to be at the absolute bottom of the page. I really want them to sit on the bottom of the browser window.

How can I do this?

Cheers, you guys rock!

Excavator
Feb 5th, 2010, 11:20 PM
Hello Superflu,
Using a different (much easier) full height solution (http://nopeople.com/CSS/full-height-layout/index.html) than harrierdh and taking the images out of the ul (just extra markup), I've come up with this valid XHTML/CSS solution -
<!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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body, html {
height: 100%;
font: 100% Verdana, Geneva, sans-serif;
background: #FC6;
}
* {
margin: 0;
padding: 0;
}
#wrap {
width: 798px;
min-height: 100%;
margin: 0 auto -100px; /* the bottom margin is the negative value of the footer's height */
position: relative;
text-align: left;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
background: #CBBE94;
}
#images {
height: 100px;
width: 798px;
position:absolute;
bottom: 0;
background: #000;
text-align: center;
}
#images a {
width: 100px;
height: 100px;
display: inline-block;
}
a#image1 {background: url(one.gif) no-repeat;}
a#image2 {background: url(two.gif) no-repeat;}
</style>
</head>
<body>
<div id="wrap">
<h1>YOUR WEBSITE HERE</h1>
<div id="images">
<a id="image1" href="#"></a>
<a id="image2" href="#"></a>
<!--end images--></div>
<!--end wrap--></div>
</body>
</html>

Superflu
Feb 6th, 2010, 01:37 PM
Hello Superflu,
Using a different (much easier) full height solution (http://nopeople.com/CSS/full-height-layout/index.html) than harrierdh and taking the images out of the ul (just extra markup), I've come up with this valid XHTML/CSS solution -

Hi Excavator, your solution does seem to do the trick.

There's just one little thing: there's still a small gap of a few pixels between the images and the bottom of the page. Any ideas?

I would really want them to stick on to the bottom of the browser window.

This is what I did, but maybe I did something wrong:


<div id="wrap">
<div id="images">
<a id="image1" href="#"></a><a id="image2" href="#"></a>
</div>
</div>


* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}

#wrap {
width: 446px; /* total width of both the images */
min-height: 100%;
margin: 0 auto -86px; /* the bottom margin is the negative value of the footer's height */
position: relative;
text-align: left;
}
#images {
height: 86px; /* height of both images */
width: 446px; /*total width of both the images*/
position:absolute;
bottom: 0;
text-align: center;
}
#images a {
width: 446px;
height: 86px;
display: inline-block;
}

a#image1 {background: url('one.png') no-repeat;
width: 223px;}
a#image2 {background: url('two.png') no-repeat;
width: 223px;}

Could you help me once more?

abduraooft
Feb 6th, 2010, 01:46 PM
There's just one little thing: there's still a small gap of a few pixels between the images and the bottom of the page. Any ideas? Could you post a link to your page?

Superflu
Feb 6th, 2010, 04:04 PM
Could you post a link to your page?

Yeah, sure. Here it is:

http://thelocaldude.com/public/websites/gap/

Do you see what I mean?

abduraooft
Feb 6th, 2010, 04:13 PM
Nothing is visible in that page since you've applied the images as the background of two inline items(which won't follow width/height is CSS), with no content.

Superflu
Feb 6th, 2010, 04:20 PM
Nothing is visible in that page since you've applied the images as the background of two inline items(which won't follow width/height is CSS), with no content.

What do you mean with "nothing is visible"? Don't you see the 2 images (green and blue) at the bottom of the page?

abduraooft
Feb 6th, 2010, 04:28 PM
What do you mean with "nothing is visible"? Don't you see the 2 images (green and blue) at the bottom of the page?No! To see what you've mentioned, I need to add the following into your CSS(via firebug)

#images a{
display:block;
}
But, then I get something like following ... http://www.codingforums.com/attachment.php?attachmentid=8184&stc=1&d=1265470090
There's no such gap, as you mentioned.

Excavator
Feb 6th, 2010, 05:55 PM
Hello superflu,
Looks like the gap went away as soon as you made links out of the images.
Will that fix the problem for you?

There are some width problems with your code, I've commented about it on mine below -
<!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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body, html {
height: 100%;
font: 100% Verdana, Geneva, sans-serif;
background: #FC6;
}
* {
margin: 0;
padding: 0;
}
#wrap {
width: 798px;
min-height: 100%;
margin: 0 auto -100px;
position: relative;
text-align: left;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
background: #CBBE94;
}
#images {
height: 100px;
width: 798px;
position:absolute;
bottom: 0;
background: #000;
text-align: center;
}
#images a {
width: 100px; /*this assumes all images in container to be 100px high*/
height: 100px; /*this assums all images in container to be 100px wide*/
display: inline-block;
}
a#image1 {background: url(one.gif) no-repeat;}
a#image2 {background: url(two.gif) no-repeat;}
</style>
</head>
<body>
<div id="wrap">
<h1>YOUR WEBSITE HERE</h1>
<div id="images">
<a id="image1" href="#"></a><a id="image2" href="#"></a>
<!--end images--></div>
<!--end wrap--></div>
</body>
</html>


In my example the images are 100px square so there is no problems stating a width from the containing #images.
In your example, with different widths, you need to make that statement seperately when styling each image.