CSS Coding Problem - HELP!! [Archive]

sknighton

07-19-2007, 09:25 PM

I thought I new CSS well, but I'm in a real mess now. I am creating a new photo album for my website and the css isn't working correctly. I'm using the float command. However, when I have multiple images on a page and only want three to a line it causes some lines to only have one. This probably doesn't make much sense. Could someone PLEASE take a look at this example of my problem and toss me some ideas!!!

http://www.frankhistory.com/album/test.php?g2_itemId=42

timgolding

07-20-2007, 09:29 AM

invalid URL. maybe post some code. In the mean time google for clear.

effpeetee

07-20-2007, 02:50 PM

invalid URL. maybe post some code. In the mean time google for clear.

http://www.frankhistory.com/album

Have a look at this. It may give you some ideas. It's not my work but was done for me and I adapted it.

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

Frank

effpeetee

07-20-2007, 03:04 PM

Sorry, I forgat the code.:eek:

Frank

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title>Picture Menu 1</title>
<style type="text/css">
* { margin: 0; padding: 0; }

html, body {
margin: 0px;
padding: 0px;
display: inline-block;
background-color: #bbb;
color:white;

}
.wrapper {
text-align: center;
background-color: #bbb;
color:white;
margin-top:0px;

}
.wrapper p {
display: inline;
font-size:70%
}
.wrapper span {
margin: 1em;
vertical-align: top;
width: 140px;
height: 150px;

display: inline-block;
}
.wrapper p span {
vertical-align: bottom;
}
.wrapper p img {
margin-bottom: 0px;
border: none;
margin-top: 0px;

}
.wrapper a {
text-decoration: none;
color: #000;

}

</style>
</head>

<body>

<a href="index.html"><img alt="Home page." src="home.jpg" width="85" height="42" /></a>
<div class="wrapper">

<a href="Mum.html"><img src="nan.jpg" alt="3" width="120" height="150"> Grandma, Madge Taylor.</a>
<a href="Steve3.html"><img src="steve-01.jpg" alt="4" width="120" height="150"> Young Steven.</a>
<a href="Grandad.html"><img src="Grandad.jpg" alt="1" width="150" height="150"> Granddad, Sidney Taylor.</a>

<a href="FSIn.html"><img src="EdPortrait2.jpg" alt="5" width="120" height="150"> Sister - Edna.</a>
<a href="web19large.html"><img src="web19.jpg" alt="6" width="120" height="150"> Frank - 45 years ago.</a>

<a href="Steven2.html"><img src="steve-02.jpg" alt="0" width="150" height="120"> Steven when a young lad.</a>

<a href="HonW.html"><img src="clocktower.jpg" alt="1" width="150" height="120"> Hay-on-Wye.</a>
<a href="Glider.html"><img src="Glider.jpg" alt="2" width="150" height="120"> Frank, in a glider.</a>

<a href="bsgroup.html"><img src="Bettyandstevetr.jpg" alt="7" width="150" height="120"> Betty and young Steven.</a>

<a href="103c.html"><img src="Webpiano.jpg" alt="5" width="150" height="120"> Frank's 'Clavinova' electronic keyboard.</a>
<a href="SteveandPhil.html"><img src="SteveandPhil.jpg" alt="6" width="150" height="120"> Steven and Philip.</a>
<a href="famgroup.html"><img src="SteveBetFrank.jpg" alt="7" width="150" height="120"> Steven, Betty abd Frank.</a>

</div>
</body>
</html>

timgolding

07-24-2007, 01:14 PM

I think the problem is using the inline boxes. If you wanted to force 3 items per row you could try using tables?