...

View Full Version : CSS Coding Problem - HELP!!



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">

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

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


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

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

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

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


</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?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum