...

View Full Version : Columns with css and mysql query



Cyber_type
05-06-2009, 08:33 PM
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.


<!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.

Rowsdower!
05-06-2009, 08:48 PM
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:
$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
$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.

Rowsdower!
05-06-2009, 08:52 PM
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?

Cyber_type
05-07-2009, 06:37 AM
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.

Cyber_type
05-07-2009, 12:43 PM
find something
so around the php script put an "<id galerie>" "</div>"
and here's the css 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

Rowsdower!
05-07-2009, 01:25 PM
find something
so around the php script put an "<id galerie>" "</div>"
and here's the css 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:
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:
1 2
3 4
5 6
7 8Then 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 (http://www.codingforums.com/forumdisplay.php?f=6).

The people there should be much more savvy with this sort of thing than I am.

Cyber_type
05-07-2009, 02:26 PM
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


$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


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 :thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum