Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 6 of 6
  1. #1
    Senior Member Holokai's Avatar
    Join Date
    Sep 2004
    Location
    Honolulu, HI
    Posts
    127
    Member #
    7707
    Hey folks, working on developing a PHP gallery(again).

    I've done this several times before, but have always used the dreaded tables. what I'm trying to figure out right now is the easiest way to arrange 3 images side by side with equal spacing between them. Must I figure out the exact pixel count and hard code this, or can I leave it in a more liquid layout type thing?

    Any suggestions will be much appreciated.

    - Chris
    -----------------------------------------------
    I know just enough to be dangerous to myself and others around me... I'm more of a CSS kamikaze than a CSS ninja...

  2.  

  3. #2
    Senior Member Fallout's Avatar
    Join Date
    Aug 2003
    Location
    Richmond, Virginia
    Posts
    543
    Member #
    2748
    Float them (left or right, whatever works) and then use a % on the margins (such as .class { margin: 0 10% 0 10% } ) which puts 10% on each side. But thats probably not what you want because you then end up with 20% in the middle.

    Edit: you can float the img's themselves, no div's required.

  4. #3
    Senior Member Holokai's Avatar
    Join Date
    Sep 2004
    Location
    Honolulu, HI
    Posts
    127
    Member #
    7707
    D'oh! you can use % in margin, eh. Had no Idea. Thanks, I'll give that a whirl.
    -----------------------------------------------
    I know just enough to be dangerous to myself and others around me... I'm more of a CSS kamikaze than a CSS ninja...

  5. #4
    Senior Member Holokai's Avatar
    Join Date
    Sep 2004
    Location
    Honolulu, HI
    Posts
    127
    Member #
    7707
    Wait, that doesn't quite work. What I'm looking for is more of an image floating left, one centered, and one floating right. I just tried this, and it didn't quite do it for me...
    Code:
    .thumbs{
    	float: both;
    	border: 1px <? echo $dk_brdr; ?> solid;
    	}
    .placer{
    	padding:5px;
    	float: left;
    	background-color: <? echo $lt_brdr; ?> ;
    	border: 1px <? echo $dk_brdr; ?> solid;
    	}
    .left{
    	float:left;
    	}
    .right{
    	float:right;
    	}
    .center{
    	margin: auto auto;
    	}
    with the HTML

    HTML Code:
    	<div class="placer left">
    		<div class="thumbs"><img src="image.php">
    		</div>
    	</div>
    	<div class="placer center">
    		<div class="thumbs"><img src="image.php">
    		</div>
    	</div>
    	<div class="placer right">
    		<div class="thumbs"><img src="image.php">
    		</div>
    	</div>
    -----------------------------------------------
    I know just enough to be dangerous to myself and others around me... I'm more of a CSS kamikaze than a CSS ninja...

  6. #5
    Senior Member Holokai's Avatar
    Join Date
    Sep 2004
    Location
    Honolulu, HI
    Posts
    127
    Member #
    7707
    Ok, I think I just figured it out. I apologize for posting so rapidly and whatnot.

    Code:
    *{
    	font-family: verdana;
    	padding: 0px;
    	background-color:#FFFFFF;
    	}
    #content{
    	width:600px;
    	margin:auto auto auto auto;
    	background-color:blue;
    	}
    .thumbs{
    	border: 1px #000000 solid;
    	}
    .placer{
    	padding:5px;
    	width: 152px;
    	margin: auto auto;
    	background-color: #DDFFEE ;
    	border: 1px #000000 solid;
    	}
    .block{
    	float: left;
    	width:33%;
    	}
    But the problem with this is that the HTML looks like this... Not so clean. is there a "nicer looking" way to accomplish this?

    HTML Code:
    	<div class="block">
    		<div class="placer">
    			<div class="thumbs"><img src="image.php">
    			</div>
    		</div>
    	</div>
    	<div class="block">
    		<div class="placer">
    			<div class="thumbs"><img src="image.php">
    			</div>
    		</div>
    	</div>
    	<div class="block">
    		<div class="placer">
    			<div class="thumbs"><img src="image.php">
    			</div>
    		</div>
    	</div>
    Thanks again.

    - Chris
    -----------------------------------------------
    I know just enough to be dangerous to myself and others around me... I'm more of a CSS kamikaze than a CSS ninja...

  7. #6
    Senior Member karinne's Avatar
    Join Date
    Dec 2003
    Location
    Aylmer QC Canada
    Posts
    1,607
    Member #
    4335
    Liked
    8 times
    hmmm it should work with just the block class with a text-align: center; in there...

    HTML Code:
    <!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" xml:lang="en" lang="en">
    
    <head>
    
     <title>bla</title>
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    
     <style type="text/css">
      * {
        font-family: verdana;
        padding: 0;
        background-color:#FFF;
      }
      #content {
        width: 600px;
        margin: auto;
        background-color: blue;
      }
      .block {
        float: left;
        width: 33%;
        text-align: center;
      }
      .block img {
        border: 1px #000 solid;
      }
      </style>
    
    </head>
    
    <body>
    
    <div class="content">
      <div class="block"><img src="image.gif"></div>
      <div class="block"><img src="image.gif"></div>
      <div class="block"><img src="image.gif"></div>
    </div>
    
    </body>
    </html>
    hth
    [a web design portfolio - Currently NOT AVAILABLE for work | web design | Re-coding | PSD-to-HTML]
    I'm also on: virb - facebook - twitter - flickr - del.icio.us


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 10:09 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com