PDA

View Full Version : Evenly space 3x images


blimp
07-06-2009, 04:10 AM
How do I evenly space the 3x images that are in the div id="videos" container?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<style type="text/css">
body {
background-color: #000;
}
#mainWrapper {
height: 875px;
width: 945px;
margin: 0px auto;
background-image: url(images/frank1.jpg);
}
#videos {
width: 400px;
position: relative;
top: 500px;
margin: 0px auto;
}
a {
float: left;
height: 150px;
width: 100px;
}
a img {
border: thick solid #333;
}
a:hover img {
border: thick solid #666;
}
</style>
</head>
<body>
<div id="mainWrapper">
<div id="videos"><a href="#"><img src="images/thumb1.png" alt="image1" width="100" height="150" class="a" /></a><a href="#"><img src="images/thumb2.png" alt="image2" width="100" height="150" class="a" /></a><a href="#"><img src="images/thumb3.png" width="100" height="150" class="a" /></a></div>
</div>
</body>
</html>

fattat
07-06-2009, 05:14 AM
[quote=blimp;162703]How do I evenly space the 3x images that are in the div id="videos" container?

img{
padding:0 10px;
float:left;
}

try adding this to set your img have a space on your left and right side.

blimp
07-06-2009, 05:27 AM
fattat,

No good.... I added the above code and got this

http://www.blimpmedia.com.au/dreamweaverclub/001/frank4.html

As you can see the stroke around the img link is now separated. Any other ideas?

So what I'm after is something that looks like this

http://img248.imageshack.us/img248/2558/picture1qcd.png

and when you hover over the img, the stroke or boarder turns to a lighter color.

Hope I'm clear....

fattat
07-06-2009, 05:59 AM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<style type="text/css">
body {
background-color: #000;
}
#mainWrapper {
height: 875px;
width: 945px;
margin: 0px auto;
background-image: url(images/frank1.jpg);
}
#videos {
width: 400px;
position: relative;
top: 500px;
margin: 0px auto;
}
img.light{
border: thick solid #333;
margin:0 10px;
float:left;
}
img.light a{
border: thick solid #fff;
}
img.light a:hover{
border: thick solid #fff;
}
</style>
</head>
<body>
<div id="mainWrapper">
<div id="videos">
<a href="#"><img src="images/thumb1.png" alt="image1" width="100" height="150" class="light" /></a>
<a href="#"><img src="images/thumb2.png" alt="image2" width="100" height="150" class="light" /></a>
<a href="#"><img src="images/thumb3.png" alt="image3" width="100" height="150" class="light" /></a>
</div>
</div>
</body>
</html>



sorry for writing wrong code for u
should not be use padding, is margin

and some of your code is wrong..
for example a img
should be img a

i dont know why when mouse hover the img the border still cant change the color ..need waiting someone to answer..

edbr
07-06-2009, 06:34 AM
try
<a class="light" href .....

fattat
07-06-2009, 07:11 AM
try
<a class="light" href .....

edbr are right
here is the complete code i just edit
the border color hover must write the code .light img:hover
not .light a:hover
now should be ok


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<style type="text/css">
body {
background-color: #000;
}
#mainWrapper {
height: 875px;
width: 945px;
margin: 0px auto;
background-image: url(images/frank1.jpg);
}
#videos {
width: 410px;
position: relative;
top: 500px;
margin: 0px auto;
}
.light img{
border: thick solid #333;
margin:0 10px;
float:left;
}
.light img:hover{
border: thick solid #fff;
}
</style>
</head>
<body>
<div id="mainWrapper">
<div id="videos">
<a class="light" href="#"><img src="images/thumb1.png" alt="image1" width="100" height="150" border="0" /></a>
<a class="light" href="#"><img src="images/thumb2.png" alt="image2" width="100" height="150" border="0" /></a>
<a class="light" href="#"><img src="images/thumb3.png" alt="image3" width="100" height="150" border="0" /></a>
</div>
</div>
</body>

blimp
07-06-2009, 07:39 AM
fattat,

There was nothing really wrong with the original css code, only thing I had to change was my padding of 50px to margins instead, and on the a tag I needed to add the outline to none.


<style type="text/css">
body {
background-color: #000;
}
#mainWrapper {
height: 875px;
width: 945px;
margin: 0px auto;
background-image: url(images/frank1.jpg);
}
#videos {
width: 500px;
position: relative;
top: 500px;
margin: 0px auto;
}
a {
height: 150px;
width: 100px;
outline:none;
}
a img {
border: thick solid #333;
margin-left: 40px;
}
a:hover img {
border: thick solid #666;
}
</style>


This seems to work perfect.

fattat
07-06-2009, 08:05 AM
This seems to work perfect.


that good...
but i think a good behavior is adding class..
because if not it will influent other page of img that you might be dont want the same effect of that image...


thank, i also learn much from you:mrgreen:

blimp
07-06-2009, 10:17 AM
That's a great point fattat, I'll keep that in mind.

Cheers...