SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Evangelist perpetual_dream's Avatar
    Join Date
    Nov 2005
    Location
    Jerusalem
    Posts
    542
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Align divs horizontally

    Hello,

    I am trying to align divs of images horizontally. I tried to use float yet this cause the images to be displayed outside the border of the parent class.

    Using display:inline; display:block without using float caused the onmouse over event to disappear!!!

    Using float with any of the above effects causes the images to be displayed outside the border of the parent class

    here is my css code:

    Code CSS:
    * html .threepxfix{
    margin-left: 3px;
    }
    body {
    	background-image: url(images/bg.png);
    	background-repeat: repeat-x;
    	text-align: center;
    	font-family: verdana;
    	font-size: 12px;
    }
    .placeholder {
    	margin: auto;
    	width: 800px;
    	text-align: left;
    }
    #logo {
    	background-image: url(images/logo.png);
    	background-repeat: no-repeat;
    	height: 87px;
    	width: 318px;
    	float: left;
    	position: absolute;
    }
    #emptyspace {
    	height: 90px;
    }
    .kader {
    	border: 1px solid #cd500d;
    	background-color: #fbf3ee;
    	padding: 6px;
    }
     
    .gallerycontainer{
    position: relative;
     
     
    /*Add a height attribute and set to largest image's height to prevent overlaying*/
    }
    .transOFF {width: 100%; background-color: silver; 
    border:1px solid black; 
    margin: 0 5px 5px 0;  
     display: inline; float:left;   }
    .transON  {width: 100%; background-color: silver;
     opacity:.50; filter: alpha(opacity=50);
     -moz-opacity: 0.5;border:1px solid black;
     margin: 0 5px 5px 0; display:inline;
     float:left;   }

    The HTML:

    Code HTML4Strict:
    <body>
    <div class="placeholder">
      <div id="logo"></div>
      <div id="emptyspace"></div>
      <div id="maincontent">
        <p>Here come the top wallpapers</p>
        <div class="kader">
        <div class="gallerycontainer">
    <?php
    $result=sql_select
    ("select * from downloads where download_type_id='1' order by download_count desc limit 3");
    while ($row=mysql_fetch_array($result))
    {
    $imgsrc=$row['file_path'];
    $fullimgsrc="Moderator/"."$imgsrc";
    $download_id=$row['download_id'];
    ?>
    <div class="transON" style="width:100px;
    height:119px;" onmouseover="this.className='transOFF'" 
     
    onmouseout="this.className='transON'" >
    <a href="<?php echo "downloaddetail.php?id=$download_id" ; ?>">
    <img src="<?php echo $fullimgsrc; ?>" width="100" height="119" style="border:1px solid black;"></a>
    </div>
     
    <?php
    } //end of while loop
     
        ?>
     
        </div>
        <p>&nbsp;</p>
      </div>
    </div>
    </body>

    Thanks
    Tanzeelnet - Best arabic downloadsite
    Linux Hosting |Free Downloads |

  2. #2
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    Clear the floats and check IE for haslayout
    .gallerycontainer{min-height:1&#37;;/* IE 7 */ overflow:hidden;/*FF*/

    * html .gallerycontainer{height:1%;/* IE <7 */

  3. #3
    SitePoint Evangelist perpetual_dream's Avatar
    Join Date
    Nov 2005
    Location
    Jerusalem
    Posts
    542
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks it worked out
    Tanzeelnet - Best arabic downloadsite
    Linux Hosting |Free Downloads |

  4. #4
    SitePoint Evangelist perpetual_dream's Avatar
    Join Date
    Nov 2005
    Location
    Jerusalem
    Posts
    542
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok... a nother question related to the same code.... how can i align text underneath each image?.
    Tanzeelnet - Best arabic downloadsite
    Linux Hosting |Free Downloads |


Bookmarks

Posting Permissions

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