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 7 of 7
  1. #1
    New Coder
    Join Date
    Jun 2007
    Posts
    38
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Columns with css and mysql query

    Dear friends
    after tried some tables to fix displayed queries, seems it is much more flexible with css.
    So here's my question.
    have a mysql query displyed on a child page. to resume this query displays multiples images from an item on a master table.
    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
              "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>

     <head>
         <meta http-equiv="content-type" content="text/html; charset=utf-8" />
         <title>Details</title>
         <style type="text/css">
         <!--
             * { margin: 0; padding: 0; }
             div#galerie { position: absolute; top: 10px left:10px; }
             #galerie img { float:left; margin: 2px; width: 100px; height: 80px; border: 1px solid; }
         -->
         </style>
     </head>
     <body>
    <div id="galerie">
    <?php
    require_once ('mysqli_connect.php');
     
    $q="SELECT artigos.art_nome, artigos.art_desc, artigos.art_price, categorias.cat_nome, imagens.* FROM 
         imagens INNER JOIN artigos ON imagens.art_nome = artigos.art_nome 
                         INNER JOIN categorias ON imagens.cat_nome = categorias.cat_nome"
    ;
     
    $result = @mysqli_query ($dbc$q)
     or die(
    "Error: ".mysqli_error($dbc));
    while (
    $row mysqli_fetch_array($result)){
    extract ($row);
      echo 
    "<a href='../images/{$row['imagem_nome']}'
                               border='0'>
                <img src='../images/{$row['imagem_nome']}' border='0'
                  width='100' height='80'></a>"
    ;
      echo 
    $row['art_desc'];            
    }
    ?> 
    </div>
    </div>
     </body>
    </html>
    my firts try with css, poorly coded think so but diplays my images in a colum.
    Is it possible to "limit" the column display for only 4 images, or maybe to limit the size (thinks for that). a query for an item have at the maximum till 8 images, so i will have 2 columns. Sorry for the explanation, little bit confused with php html and css.

  • #2
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    You could display all of your images styled with a left float, then insert a counter into your php and every 5th iteration of the code you could insert a clear:left; into the style of the image being fed into the page. That's the easiest thing I can think of.

    Code would be something like this:
    PHP Code:
    $counter 0//set this outside of your recursive loop

    //then add this inside of your recursive loop:
      
    if($counter==5){ 
        echo 
    "style=\"clear:left;\""
        
    $counter=0
      } 
    All together you're looking at something like this:
    PHP Code:
    <?php
    $counter 
    0;
    require_once (
    'mysqli_connect.php'); 
     
    $q="SELECT artigos.art_nome, artigos.art_desc, artigos.art_price, categorias.cat_nome, imagens.* FROM  
         imagens INNER JOIN artigos ON imagens.art_nome = artigos.art_nome  
                         INNER JOIN categorias ON imagens.cat_nome = categorias.cat_nome"

     
    $result = @mysqli_query ($dbc$q
     or die(
    "Error: ".mysqli_error($dbc)); 
    while (
    $row mysqli_fetch_array($result)){ 
    extract ($row);
      
    $counter=$counter+1;
      echo 
    "<a href='../images/{$row['imagem_nome']}' 
                               border='0'> 
                <img src='../images/{$row['imagem_nome']}' border='0' 
                  width='100' height='80' style='float:left;"
    ;
      if(
    $counter==5){
        echo 
    "clear:left;";
        
    $counter=0;
      }
      echo 
    "'></a>"
      echo 
    $row['art_desc'];             

    ?>
    I haven't tested this code so be sure to save a backup of your existing page before you test with this.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #3
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Wait, I think I answered a totally different question. That code displays your images all on the same page but makes them 4 images wide before going to the next row. Let me re-read your question and see if I can answer with what you really wanted...

    You only want the code to display 8 images on a page, and then you want to have a "next page" option to display the next 8, etc., etc.

    Is that what you want?
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #4
    New Coder
    Join Date
    Jun 2007
    Posts
    38
    Thanks
    1
    Thanked 0 Times in 0 Posts
    not exactly. this is the detail page where i have the display of the images from an item.
    category
    |
    ---article
    |
    ---images (max8)
    | |
    | |
    | |
    | |

    see what i mean? at begining was using tables with the query but it is crap when u want to align the queries result.
    Last edited by Cyber_type; 05-07-2009 at 07:39 AM.

  • #5
    New Coder
    Join Date
    Jun 2007
    Posts
    38
    Thanks
    1
    Thanked 0 Times in 0 Posts
    find something
    so around the php script put an "<id galerie>" "</div>"
    and here's the css code
    Code:
    div#galerie { position: absolute; top:30px; left:100px; }
    #galerie img { float:left; margin-left: 70px;margin-right:300px; width:100px; height: 80px;
    my images are displaying on a single column for the moment. can i limit the height of this block?
    and how can i make another block within the php code for displaying the other's results of the mysql query?
    tanks for ure advices

  • #6
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by Cyber_type View Post
    find something
    so around the php script put an "<id galerie>" "</div>"
    and here's the css code
    Code:
    div#galerie { position: absolute; top:30px; left:100px; }
    #galerie img { float:left; margin-left: 70px;margin-right:300px; width:100px; height: 80px;
    my images are displaying on a single column for the moment. can i limit the height of this block?
    and how can i make another block within the php code for displaying the other's results of the mysql query?
    tanks for ure advices
    When you ask about limiting the height, are you talking about pixels of height or number of items? If you mean pixels, then yes, you can limit the height in HTML/CSS. If you mean number of items, then you will have to use PHP and a similar method to what I described above (a switch that is triggered every "n" items that are posted). I think you really mean to ask for both though. We will talk about page layout first, since this is what I am more comfortable with. If you want the results displayed like this:
    Code:
    1  5
    2  6
    3  7
    4  8
    You would want to apply a left float with clear:left to items 1-4, and then apply a right float with clear:right to items 5-8.

    If you want results displayed like this:
    Code:
    1  2
    3  4
    5  6
    7  8
    Then you would apply a left float to all items and insert a clear:left on every 3rd result very much like the method in my first post.

    The above won't control the number of results returned from your database though. It will only control how results are presented once they are returned.

    Now, to make pages of results where page 1 is items 1-8, page 2 is items 9-16, page 3 is items 17-24, etc. you will need PHP and/or javascript. Unfortunately, I am not yet skilled enough to help you with that. I imagine it would be done with an array somehow but I don't really have any idea of how. I would recommend 3 things in this order:

    1) do a search of the forums here
    2) do a google search
    3) if you can't find anything from the above 2 suggestions ask a moderator to move your thread to the PHP forum.

    The people there should be much more savvy with this sort of thing than I am.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #7
    New Coder
    Join Date
    Jun 2007
    Posts
    38
    Thanks
    1
    Thanked 0 Times in 0 Posts
    thank u for the help.
    that was the page who displays the query and i would only the "format" (think im right) the query u know. For pagination of the recordset yes have this on another page.
    actually im trying to put <div> tags into this portion of code
    PHP Code:
     $result = @mysqli_query ($dbc$q)
     or die(
    "Error: ".mysqli_error($dbc));
    while (
    $row mysqli_fetch_array($result)){
    extract ($row);
      echo 
    "<a href='../images/{$row['imagem_nome']}'
                               border='0'>
                <img src='../images/{$row['imagem_nome']}' border='0'
                  width='100' height='80'></a>"
    ;
      echo 
    $row['art_desc']; 
    when u have the query results echo "<a href......>
    now i know that i must put the div tag like that wich actually doesn't run
    PHP Code:
    echo "<a class=\"thumbnail\"<href=\"../images/{$row['imagem_nome']}'
                               border='0'>
                <img src='../images/{$row['imagem_nome']}' border='0'
                  width='100' height='80'></span></a>"

    thank u


  •  

    Posting Permissions

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