...

View Full Version : set images position in a container



kamkam
05-23-2007, 11:28 AM
Hello;
i'd like to ask you how to set the smiles of the images to the center of a container? please.


my code as following;


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>welcome to my page</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">

#container
{
padding: 1px;
border: 1px;
width: 150px;
background-color: lightblue;
margin: auto;
}

#container p
{
padding: 0;
margin: 0;
text-align: center;
}

#smile ul
{
margin-left: 0;
padding: 0;
text-align: center;
}

#container li
{
display: inline;
list-style: none;
text-align: center;
margin:0;
padding: 0;
}

#container img
{
margin: 0;
padding: 0;
}

</style>
</head>
<body>

<div id= "container">
<p> smile </p>
<ul id="sul">
<li> <img alt="h" src="honorhim.jpg" >
<li> <img alt="c" src="cool.gif" >
<li> <img alt="t" src="tongue.gif">
<li> <img alt="s" src="smile.jpg">
<li> <img alt="z" src="zall_coho.gif">
<li> <img alt="b" src="biggrin.gif">
<li> <img alt="con" src="cool.gif">
<li> <img alt="r" src="razz.gif">
</ul>
</div>
</body>
</html>

coothead
05-23-2007, 12:17 PM
Hi there kamkam,

it would be helpful, if we could know the image dimensions. ;)

coothead

kamkam
05-23-2007, 08:02 PM
for example, the height is 20px, width is 20px.

coothead
05-23-2007, 08:41 PM
Hi there kamkam,

Eight images with width and height dimensions of 20px will not fit in a container of width 150px. ;)
So try it like this...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>welcome to my page</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">
#container {
padding:2px;
border:1px;
width:176px;
background-color:#add8e6;
margin:auto;
}
#container:after {
content:'';
display:block;
clear:both;
}
#container p {
padding:0;
margin:0;
text-align:center;
}
#container ul {
margin-left:0;
padding:0;
}
#container li {
display:inline;
list-style:none;
margin:0;
padding:0;
}
#container img {
float:left;
width:20px;
height:20px;
margin:0 1px;;
padding:0;
}
</style>

</head>
<body>

<div id="container">
<p>smile</p>
<ul id="sul">
<li><img alt="h" src="honorhim.jpg"/></li>
<li><img alt="c" src="cool.gif"/></li>
<li><img alt="t" src="tongue.gif"/></li>
<li><img alt="s" src="smile.jpg"/></li>
<li><img alt="z" src="zall_coho.gif"/></li>
<li><img alt="b" src="biggrin.gif"/></li>
<li><img alt="con" src="cool.gif"/></li>
<li><img alt="r" src="razz.gif"/></li>
</ul>
</div>

</body>
</html>
coothead

kamkam
05-24-2007, 10:46 AM
Thanks for your help, it is very helpfull.

coothead
05-24-2007, 11:06 AM
No problem, you're welcome. ;)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum