5 Replies - 892 Views - Last Post: 17 March 2013 - 09:12 AM

#1 istore221  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 136
  • Joined: 11-December 11

Display App Details as a Grid

Posted 16 March 2013 - 08:22 AM

This is what i archive so far

click to view

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


    <head>
    
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>Welcome to Sri Lanka Largest IOS App Store</title>
            
            <style type="text/css">
			
                body
                {
                    margin: 0;
                    padding: 0;
                    background-image:url('images/background_stripes.gif');
                   
                    background-repeat:repeat;
                    
                }
				
				  #wrapper
                {
                    width: 960px;
                    height: 100%;
					height: auto !important;
                    margin: 0px auto;
                    background: #FFFFFF;
                }
                
                #wrapper #Top_line
                {
                    background: #444444;
                    width: 940px;
                    height: 7px;
                    margin-bottom:4px;
                }
				
				 #wrapper #Header
                {
                    width: 960px;
                    height: 330px;
  
                    background:rgb(68,68,68);
                }
				
				  #wrapper #Products
                {
                     /* Every Applications Container */
                     
                     width: 960px;
                    height: 500px;

                    overflow:auto;
                   
                  	box-shadow: 0px 3px 20px #888;
					
					
				}
                  
			
				#grid
				{
					border-bottom:1px solid;
					border-bottom-color:rgb(238,238,238);
					
					border-right:1px solid;
					border-right-color:transparent;
					
					border-left:1px solid;
					border-left-color:transparent;
					
					border-top:1px solid;
					border-top-color:transparent;
					
					border-collapse:collapse;
					
					
					
					
				}

				#grid td
				{
					font-family:Arial, Helvetica, sans-serif;
					font-size:18px;
					color:rgb(85,85,85);
					padding:10px;
					
				}
				
				#grid tr
				{
					
					
					
				}
				
				
			</style>
            
            
            <script type="text/javascript">
			
				function Display(oObject)
				{
					
   					 var id = oObject.id;
    				alert("This object's ID attribute is set to \"" + id + "\"."); 
					
				}
				
			</script>

    
    </head>
    
    

        <body>
        

				<div id="wrapper">
                
                		 <center><div id="Top_line"></div></center>  
                         
                         <div id="Header">
                         
                         
                         
                         </div>
                         
                         <span id="Iphone_Topic" style="font-family:Arial;font-size:large;color:Gray;margin-left:8px;">Latest iphone apps</span>
                         
                         
                         
                         
                         
                         
                         	<div id="Apps">
                         
                         		<?php
								
								
									$con = mysql_connect("localhost","root","diyathkalana@1") or die ("db connection is Unsuccsessful --> ".mysql_error());
			
									$db_seelct = mysql_select_db("store",$con) or die ("Can not connect to the database --->".mysql_error());
									
									$result = mysql_query("SELECT  * FROM applications_tbl ",$con) or die ("Query Error Occured --->".mysql_error());
								
									
									
								
											
									echo "<table  border=1px id=grid>";
									
																
									while($row = mysql_fetch_assoc($result)) 
									{
										
										echo "<tr>";
										
											echo "<td><img src='".htmlspecialchars($row["imgURL"])."'/></td>";
											
											echo "<td><label title='".$row["Application_Name"]."'>".OmitLongName($row["Application_Name"])."</label></td>";
										
										
										echo "</tr>";
											
											
									}
									
									
										
									echo "</table>";
										
										
										
										
			
          
								
								?>
                                
                         
                         	</div>	
                         
                         
                         
                		
                        	
                        
                		
                
                </div>
         
        </body>

</html>


<?php


	function OmitLongName($var)
	{
		$FixedName = $var;
		
		if(strlen($FixedName) > 20)
		{
			$FixedName = substr($FixedName,0,20);
			$FixedName .= "...";
		}
		
		
		return $FixedName;
	}

?>






my problem is i want to get my Apps looks like Play store (Horizonal View)

like this

click to view


how do i make it.. thanks

Is This A Good Question/Topic? 0
  • +

Replies To: Display App Details as a Grid

#2 FerretHolmes  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 41
  • View blog
  • Posts: 167
  • Joined: 12-November 12

Re: Display App Details as a Grid

Posted 16 March 2013 - 10:17 AM

You could create a wrapper div and a separate class that each app can use. The idea is to calculate the space inside the wrapper and then evenly distribute it to how ever many elements you want per row. So if the wrapper is 400px and I want 3 elements per row with spacing, that would amount to about 100px width and 15px padding. I have not tested this code due to time constaints but play around with it if need be to get it working. Maybe Andrewsw can fact check me and help you out more.
#wrapper {
    width: 400px;
    margin: 0 auto;
    overflow: hidden;
}

.app-details {
    width: 100px;
    height: 50px;
    margin: 15px;
    float: left;
    display: inline;
}


<div id="wrapper">
   <div class="app-details">
        details
   </div>
   <div class="app-details">
        details
   </div>
   <div class="app-details">
        details
   </div>
</div>


Was This Post Helpful? 1
  • +
  • -

#3 andrewsw  Icon User is online

  • It's just been revoked!
  • member icon

Reputation: 3595
  • View blog
  • Posts: 12,366
  • Joined: 12-December 12

Re: Display App Details as a Grid

Posted 16 March 2013 - 11:20 AM

View PostFerretHolmes, on 16 March 2013 - 10:17 AM, said:

Maybe Andrewsw can fact check me and help you out more.
#wrapper {
    width: 400px;
    margin: 0 auto;
    overflow: hidden;
}

.app-details {
    width: 100px;
    height: 50px;
    margin: 15px;
    float: left;
    display: inline;
}


<div id="wrapper">
   <div class="app-details">
        details
   </div>
   <div class="app-details">
        details
   </div>
   <div class="app-details">
        details
   </div>
</div>


I'm not sure whether there is a hint of sarcasm attached to your statement :) but, if you are floating the DIVs and giving them a specific width, then the use of display: inline; is unnecessary. Otherwise, looks good :smartass:
Was This Post Helpful? 1
  • +
  • -

#4 FerretHolmes  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 41
  • View blog
  • Posts: 167
  • Joined: 12-November 12

Re: Display App Details as a Grid

Posted 16 March 2013 - 02:42 PM

No, no sarcasm :online2long:/> I think it's just something I may have overlooked. Although to be perfectly honest I'm pretty sure I use inline and float cooperatively all the time and just never really thought about it. It's kind of like knowing what a word means, but not it's exact definition. :bigsmile:/>

This post has been edited by Dormilich: 16 March 2013 - 05:52 PM

Was This Post Helpful? 1
  • +
  • -

#5 andrewsw  Icon User is online

  • It's just been revoked!
  • member icon

Reputation: 3595
  • View blog
  • Posts: 12,366
  • Joined: 12-December 12

Re: Display App Details as a Grid

Posted 16 March 2013 - 02:54 PM

@FerretHolmes float and display are quite different properties, so removing display: inline; is not significant. I suppose my general approach is that: if I use float I ignore display.
Was This Post Helpful? 1
  • +
  • -

#6 istore221  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 136
  • Joined: 11-December 11

Re: Display App Details as a Grid

Posted 17 March 2013 - 09:12 AM

View PostFerretHolmes, on 16 March 2013 - 10:17 AM, said:

You could create a wrapper div and a separate class that each app can use. The idea is to calculate the space inside the wrapper and then evenly distribute it to how ever many elements you want per row. So if the wrapper is 400px and I want 3 elements per row with spacing, that would amount to about 100px width and 15px padding. I have not tested this code due to time constaints but play around with it if need be to get it working. Maybe Andrewsw can fact check me and help you out more.
#wrapper {
    width: 400px;
    margin: 0 auto;
    overflow: hidden;
}

.app-details {
    width: 100px;
    height: 50px;
    margin: 15px;
    float: left;
    display: inline;
}


<div id="wrapper">
   <div class="app-details">
        details
   </div>
   <div class="app-details">
        details
   </div>
   <div class="app-details">
        details
   </div>
</div>



it was very helpful sir . i actually appreciate your concern about my problem.a cording to your suggest i did this
click to view Thank You all of you
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1