Hello
I am trying to position a few small images at the bottom and centered of my Web page.
This is what I have in my external CSS style sheet:
p.show_date { font-size: small; text-align: right; } p.show_date sup { font-size: small; } body { color: #333; font: 100%/1.5 verdana, arial, sans-serif; /* 100% = font-size / 1.5 = line-height */ } #wrapper{margin: 0 auto;} a img {border: none} .img {float: left;margin: 0 0 0 20px; }
and this is what I have in my HTML file:
<body> <div id="wrapper"> <div class="img"> <a target="_blank" href="newWindow.html"><img src="twitter.jpg" alt="Twitter" width="39" height="44" /></a></div> <div class="img"> <a target="_blank" href="newWindow1.html"><img src="digg-button.jpg" alt="Digg" width="44" height="44" /></a></div> <div class="img"> <a target="_blank" href="newWindow2.html"><img src="delicious1.jpg" alt="Delicious" width="44" height="44" /></a></div> <div class="img"> <a target="_blank" href="newWindows3.html"><img src="face1.jpg" alt="Facebook" width="44" height="44" /></a></div> <div class="img"> <a target="_blank" href="newWindows4.html"><img src="email-icon.jpg" alt="Email us!" width="43" height="44" /></a></div> </div> </body>
How would I go about positioning them, please?
Many thanks
Blue
First things first
Get your structure correct first. You have a list of linkss, so mark it up as such.
<ul id="social"> <li><a target="_blank" href="newWindow.html"> <img src="twitter.jpg" alt="Twitter" width="39" height="44" /></a></li> <li><a target="_blank" href="newWindow1.html"> <img src="digg-button.jpg" alt="Digg" width="44" height="44" /></a></li> <li><a target="_blank" href="newWindow2.html"> <img src="delicious1.jpg" alt="Delicious" width="44" height="44" /></a></li> <li><a target="_blank" href="newWindows3.html"> <img src="face1.jpg" alt="Facebook" width="44" height="44" /></a></li> <li><a target="_blank" href="newWindows4.html"> <img src="email-icon.jpg" alt="Email us!" width="43" height="44" /></a></li> </ul>
Then, make the list items inline-block and centered.
#social { margin: 0; padding: 0; text-align: center; } #social li { display: inline-block; } #social a { display: block; }
cheers,
gary
Hello Gary Many thanks for
Hello Gary
Many thanks for that.
Your script certainly looks a lot more professional, yet the images are left aligned presumably on account of this in my CSS style sheet:
img {float: left;margin: 0 0 0 20px;
If possible, I would prefer the images to be horizontally positioned on the page (rather than vertically) as present:
The script I have at the moment (incorporating your ideas) looks like this:
<html> <head> </head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <LINK REL=StyleSheet HREF="index2.css" TYPE="text/css" MEDIA=screen> <title></title> <body> <ul id="social"> <li><a target="_blank" href="newWindow.html"> <img src="twitter.jpg" alt="Twitter" width="39" height="44" /></a></li> <li><a target="_blank" href="newWindow1.html"> <img src="digg-button.jpg" alt="Digg" width="44" height="44" /></a></li> <li><a target="_blank" href="newWindow2.html"> <img src="delicious1.jpg" alt="Delicious" width="44" height="44" /></a></li> <li><a target="_blank" href="newWindows3.html"> <img src="face1.jpg" alt="Facebook" width="44" height="44" /></a></li> <li><a target="_blank" href="newWindows4.html"> <img src="email-icon.jpg" alt="Email us!" width="43" height="44" /></a></li> </ul> </body> </html>
and the CSS style sheet now looks like this:
p.show_date { font-size: small; text-align: right; } p.show_date sup { font-size: small; } body { color: #333; font: 100%/1.5 verdana, arial, sans-serif; /* 100% = font-size / 1.5 = line-height */ } #wrapper{margin: 0 auto;} a img {border: none} img {float: left;margin: 0 0 0 20px; } #social { margin: 0; padding: 0; text-align: center; } #social li { display: inline-block; } #social a { display: block; }
Would I need to use something like this:
background:#FFFFFF url(twitter.jpg) repeat-x fixed center bottom;
Thanks again
Blue
You've already figured it out
Delete this:
img { float: left; margin: 0 0 0 20px; }
Sorry I forgot to mention that.
cheers,
gary