3 replies [Last post]
Bluenose
Bluenose's picture
Offline
Enthusiast
Last seen: 1 year 4 weeks ago
Timezone: GMT+1
Joined: 2011-10-11
Posts: 96
Points: 136

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

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 4 hours 41 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9772
Points: 3854

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Bluenose
Bluenose's picture
Offline
Enthusiast
Last seen: 1 year 4 weeks ago
Timezone: GMT+1
Joined: 2011-10-11
Posts: 96
Points: 136

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

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 4 hours 41 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9772
Points: 3854

You've already figured it out

Delete this:

img {
    float: left;
    margin: 0 0 0 20px;
    }

Sorry I forgot to mention that.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.