...

View Full Version : I have been trying to vertically align some images using CSS.



effpeetee
07-28-2007, 05:07 PM
I have been trying to vertically align some images using CSS.
I have had very limited success using a div, but I cannot get vertical spacing
other than using <br>'s

I am still struggling with CSS and would appreciate some advice as to where I am wrong.:confused:

URL and code below.

Frank


http://www.exitfegs.co.uk/atry.html


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>If at first you don't succeed.........</title>
<style type="text/css">

#wrap
{
position:absolute;
left:220px;
}
</style>
</head>
<body>
<div id="wrap">
<img class="top" border="0"
src="1.jpg" width="95" height="84" /><br ><br >
<img class="bottom" border="0"
src="2.jpg" width="95" height="84" /><br ><br >
<img class="top" border="0"
src="1.jpg" width="95" height="84" /><br ><br >
<img class="bottom" border="0"
src="2.jpg" width="95" height="84" /><br ><br >
<img class="top" border="0"
src="1.jpg" width="95" height="84" /><br ><br >
<img class="bottom" border="0"
src="2.jpg" width="95" height="84" /><br ><br >
<img class="top" border="0"
src="1.jpg" width="95" height="84" /><br ><br >
<img class="bottom" border="0"
src="2.jpg" width="95" height="84" /><br ><br >
</div>
</body>
</html>

Jutlander
07-28-2007, 05:15 PM
How about this http://www.w3.org/Style/Examples/007/center.html#vertical

mranster
07-28-2007, 05:18 PM
Can you give the image class a margin?

margin-bottom: 2em;

effpeetee
07-28-2007, 05:48 PM
How about this http://www.w3.org/Style/Examples/007/center.html#vertical
Hello Jutlander,
The URL is about text in a frame. Using it gives me a horizontal row of images.

Frank

effpeetee
07-28-2007, 05:56 PM
Can you give the image class a margin?

margin-bottom: 2em;
mranster

I have solved it by giving the container "wrap" width:90px;
So obvious after one thinks of it.

Must remember to engage brain once in a while.

Frank

http://www.exitfegs.co.uk/atry.html

Mr J
07-28-2007, 08:59 PM
Applying display:block to the images would work as well


#wrap img{
display:block;
}

effpeetee
07-28-2007, 10:03 PM
Applying display:block to the images would work as well


#wrap img{
display:block;
}
Thank you.

#wrap img{
display:block;
margin:10px;
}

works fine.

But how do I move the column to the right.
I am just beginning to come to terms with CSS.
A long way still to go, but the longest journey starts with the first single step.

Many thanks to all you coders.

Frank

http://www.exitfegs.co.uk/atry.html

bazz
07-28-2007, 10:26 PM
do you want to thnumbnails to be on the right side of the screen (The right hand side that is:) )

if so use the float attribute like this

#divName {
float : right;
}

then to move it away from the edge of the screen you could use padding so, you could end up with this

#divName {
float : right;
padding : 0 10px 0 0;
}
That way of setting out padding puts a value relative to the edge of the element in a clockwise order from top so padding: 10px 20px 30px 40px means padding top(10px) right(20px) bottom (30px) left(40px). top rght bottom and left are the edges of the element (div) not the edge of the screen.

I would recommend that you put your thumbs into an unordered list ie


<ul>
<li><img src="" /></li>
<li><img src="" /></li>
</ul>

if you use <br /> not only is it incorrect but as one might increase font size (by holding down CTRL and scrolling the mousewheel), the <br /> will also get bigger breaking your page. Shouldn't happen when using the list.

It's also a good idea to label your divs as per thier contents rather than where they are on the page or what the div is thought of doing. As you change your layout, the term 'div id="left"' will become confusing as well as irrelevant. better to call it div id="thumbnails", for example. div id="wrap" might also be confusing since all content is wrapped within a div.

bazz

jlhaslip
07-28-2007, 10:29 PM
#wrap img{
display:block;
margin:10px 10px 10px 100px; // top/right/bottom/left
}

Try that and adjust the last number to move it left (smaller) or right (larger)

effpeetee
07-28-2007, 11:08 PM
Bazz and jlhaslip and all others.,

Thank you for your help.

This is in the nature of an exercise.
I am trying to learn CSS and how to position things with it. It is not intended as yet to be used for a project. I just need to understand CSS and how to use it.

Your input is useful and gratefully received. Any helpful comments will (hopefully) hasten the day when I can really get to grips with semantic coding.

All comments and suggestions are gratefully received.

Frank - alias effpeetee.

jlhaslip
07-28-2007, 11:21 PM
Speaking, I presume, for most of us here who assist others... We have all been there and received assistance from others. It is your turn now and later it will be someone else's turn to request assistance from you.

Glad to help and glad you are learning from our advise.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum