Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation CSS Coding Problem - HELP!!

    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

  • #2
    Senior Coder timgolding's Avatar
    Join Date
    Aug 2006
    Location
    Southampton
    Posts
    1,517
    Thanks
    114
    Thanked 110 Times in 109 Posts
    invalid URL. maybe post some code. In the mean time google for clear.
    You can not say you know how to do something, until you can teach it to someone else.

  • #3
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Quote Originally Posted by timgolding View Post
    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
    Last edited by effpeetee; 07-20-2007 at 02:53 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #4
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts

    Exclamation

    Sorry, I forgat the code.

    Frank

    Code:
    <!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>
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #5
    Senior Coder timgolding's Avatar
    Join Date
    Aug 2006
    Location
    Southampton
    Posts
    1,517
    Thanks
    114
    Thanked 110 Times in 109 Posts
    I think the problem is using the inline boxes. If you wanted to force 3 items per row you could try using tables?
    You can not say you know how to do something, until you can teach it to someone else.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •