Position images

3 replies [Last post]

Sat, 2012-03-17 16:37

Bluenose

Offline

Enthusiast

Last seen: 3 years 19 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

Tags:

Styling CMS and Social Sites

Sat, 2012-03-17 19:16

gary.turner

Offline

Moderator

Dallas

Last seen: 1 year 48 weeks ago

Dallas

Timezone: GMT-6

Joined: 2004-06-25

Posts: 9776

Points: 3858

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.

Sat, 2012-03-17 22:21

Bluenose

Offline

Enthusiast

Last seen: 3 years 19 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

Sun, 2012-03-18 00:43

gary.turner

Offline

Moderator

Dallas

Last seen: 1 year 48 weeks ago

Dallas

Timezone: GMT-6

Joined: 2004-06-25

Posts: 9776

Points: 3858

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.

First things first

Hello Gary Many thanks for

You've already figured it out

User login

Navigation