php with css..

[techker]

hey guys im doing a picture gallery for my cuz and im using a databse to keep the name of the pics with description.

so i use



<?php echo '<a href="/members/Gymgraph/'.$row['type1'].'/'.$row['pic1'] .'" target="_blank" with="144">
<img src="/members/Gymgraph/'.$row['type1'].'/'.$row['pic1'].'" border="0" alt="" width=115/>
</a>
<br />'; ?>

so this shows the pics in the databse.now i need to put some look in to it..lol

cause it shows all the pics on one line..

pic pic pic pic pic pic
i would like to make it show like

pic pic pic pic

pic pic pic pic..

[bluewalrus]

are all the images the same size like 100 pixels by 100 pixels? or do you have a link?

[techker]

it is like tumbnails then when you click you see full size

[bluewalrus]

Ok try this


<div id="limitor">
<?php echo '<a href="/members/Gymgraph/'.$row['type1'].'/'.$row['pic1'] .'" target="_blank" with="144">
<img src="/members/Gymgraph/'.$row['type1'].'/'.$row['pic1'].'" border="0" alt="" width=115/>
</a>
<br />'; ?>

</div>


This goes in CSS doc


#limitor {
width: 200px; (total pixels of 4 images assuming each is 50 pixels with no border or padding)
}

[techker]

this is for the size?i need it for the placement..lol thx!



pic pic pic pic

pic pic pic pic

[bluewalrus]

That will limit the images add up to more then the pixels said it will drop it the left over amount down one line image1(50px) image2(100px) image3I(150px) image4(200px) image5(newline 50px) image6(100px) image7(150px) image8(200px).

[techker]

it doesnt work it still shows the images one under the other?

http://softcoredesign.com/maint.php

[Snookerman]

Try floating them left.

[techker]

i added float: left;

still the same

[Snookerman]

You floated the container:

#limitor {
float:left;
width:200px;
}

You should float the images themselves:

#limitor {
width:200px;
}
#limitor img {
float:left;
}

[techker]

so i changed the div name to limitor img and it still does the same thing?

from <div id="limitor">

[Snookerman]

No, don't change the id of the div container. What I wrote with css (#limitor img) targets all the images in the limitor container. All you need to do is add that part to your css.

[techker]

so

#limitor {
width:200px;
}
#limitor img {
float:left;
}

[Snookerman]

Yes, and the container show be <div id="limitor">.

[techker]

lol same thing...

what i dont get is this is being used
#limitor {
width:200px;
}
#limitor img { but this no?it should be in the div no?
float:left;
}

[Snookerman]

I just looked at your code and I see you totally misunderstood what we meant. You have each image inside a div container and each div container is inside a table cell. You also have a break after each image. I'm going to rewrite your code so you get rid of the table, get your problem fixed and get rid of all that unuseful code.

Replace the table you have now that has the images with this:

<div id="wrapper"><a href="http://softcoredesign.com/admin/art/pepe_bus.jpg" target="_blank"><img src="http://softcoredesign.com/admin/art/pepe_bus.jpg" alt="" /></a><a href="http://softcoredesign.com/admin/art/bighed_with_logo.jpg" target="_blank"><img src="http://softcoredesign.com/admin/art/bighed_with_logo.jpg" alt="" /></a><a href="http://softcoredesign.com/admin/art/book_cover666rgb_red.JPG" target="_blank"><img src="http://softcoredesign.com/admin/art/book_cover666rgb_red.JPG" alt="" /></a><a href="http://softcoredesign.com/admin/art/chicken_logo.jpg" target="_blank"><img src="http://softcoredesign.com/admin/art/chicken_logo.jpg" alt="" /></a><a href="http://softcoredesign.com/admin/art/pepe%20_pin.jpg" target="_blank"><img src="http://softcoredesign.com/admin/art/pepe%20_pin.jpg" alt="" /></a><a href="http://softcoredesign.com/admin/art/virgin_mary%20001.jpg" target="_blank"><img src="http://softcoredesign.com/admin/art/virgin_mary%20001.jpg" alt="" /></a><a href="http://softcoredesign.com/admin/art/pepe_tech_blue.jpg" target="_blank"><img src="http://softcoredesign.com/admin/art/pepe_tech_blue.jpg" alt="" /></a><a href="http://softcoredesign.com/admin/art/punk_chick_collage.jpg" target="_blank"><img src="http://softcoredesign.com/admin/art/punk_chick_collage.jpg" alt="" /></a><a href="http://softcoredesign.com/admin/art/pepe_tech_oner_text.jpg" target="_blank"><img src="http://softcoredesign.com/admin/art/pepe_tech_oner_text.jpg" alt="" /></a><a href="http://softcoredesign.com/admin/art/card_design_one.jpg" target="_blank"><img src="http://softcoredesign.com/admin/art/card_design_one.jpg" alt="" /></a><a href="http://softcoredesign.com/admin/art/space_the_final_frontier.jpg" target="_blank"><img src="http://softcoredesign.com/admin/art/space_the_final_frontier.jpg" alt="" /></a></div>

Then replace the css code you have now with this:

<style type="text/css">
body {
background-color:#CCCCCC;
}
#wrapper {
width:476px;
}
#wrapper img {
width:115px;
border:none;
margin:2px;
}
</style>
As you can see in the css, I made all the images 115px wide, I removed their borders and I gave them a 2px margin on each site so they wouldn't be to close to each other, but you can remove that if you want. I made the wrapper 476px wide because that is the width of 4 images plus the padding they each have on the left and the right side.

[techker]

sorry i feel lost..lol i cant get the div to work it deforms my page?



<?php
// database connect script.

mysql_connect("localhost", "techker_techker", "techker") or die(mysql_error()) ;
mysql_select_db("techker_softcore") or die(mysql_error()) ;

$fileSQL=" SELECT *
FROM featured
";
$fileLIST=mysql_query($fileSQL);

$fileSQL2=" SELECT *
FROM featured WHERE location=2
";
$fileLIST2=mysql_query($fileSQL2);

$fileSQL3=" SELECT *
FROM featured WHERE location=3
";
$fileLIST3=mysql_query($fileSQL3);

$fileSQL4=" SELECT *
FROM featured WHERE location=4";
$fileLIST4=mysql_query($fileSQL4);

$fileSQL5=" SELECT *
FROM featured WHERE location=5
";
$fileLIST5=mysql_query($fileSQL5);

$fileSQL6=" SELECT *
FROM featured WHERE location=6
";
$fileLIST6=mysql_query($fileSQL6);

$fileSQL7=" SELECT *
FROM featured WHERE location=7
";
$fileLIST7=mysql_query($fileSQL7);

$fileSQL8=" SELECT *
FROM featured WHERE location=8
";
$fileLIST8=mysql_query($fileSQL8);

$fileSQL9=" SELECT *
FROM featured WHERE location=9
";
$fileLIST9=mysql_query($fileSQL9);


?>



<html>
<head>
<title>index</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
background-color: #CCCCCC;
}
#wrapper {
width:476px;
}
#wrapper img {
width:115px;
border:none;
margin:2px;
}

-->
</style></head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (index.psd) -->
<table width="900" height="901" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
<tr>
<td colspan="5">
<img src="images/main_01.jpg" width="900" height="15" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="4">
<img src="images/main_02.jpg" width="591" height="376" alt=""></td>
<td colspan="2">
<img src="images/main_03.jpg" width="300" height="57" alt=""></td>
<td rowspan="6">
<img src="images/main_04.jpg" width="9" height="885" alt=""></td>
</tr>
<tr>
<td colspan="2">
<img src="images/main_05.jpg" width="300" height="49" alt=""></td>
</tr>
<tr>
<td colspan="2">
<img src="images/main_06.jpg" width="300" height="51" alt=""></td>
</tr>
<tr>
<td colspan="2">
<img src="images/main_07.jpg" width="300" height="219" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="images/main_08.jpg" width="378" height="509" alt=""></td>
<td colspan="2"><table width="502" height="415" border="0" cellpadding="0" cellspacing="0">
<tr><? while ($row = @mysql_fetch_assoc($fileLIST)) { ?>
<th width="501" height="415" valign="top" background="images/main_09.jpg" scope="row"><table width="500" height="415" border="0" cellpadding="0" cellspacing="0">
<tr>
</table></th>
</tr><? } ?>
</table></td>
<td rowspan="2">
<img src="images/main_10.jpg" width="11" height="509" alt=""></td>
</tr>
<tr>
<td colspan="2">
<img src="images/main_11.jpg" width="502" height="93" alt=""></td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="378" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="213" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="289" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="11" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="9" height="1" alt=""></td>
</tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>


i fixed the top.

[Snookerman]

I'm sorry to say but your page is very poorly written, you used tables for design and spacer gifs. That makes it very slow and also very, very difficult to change anything. I suggest you think about rewriting it all. You don't seem to have done so much yet so it shouldn't be a problem to rewrite it. Trust me, doing it now will save you a lot of time in the future. Read this article to see why:
http://www.hotdesign.com/seybold/everything.html (http://www.hotdesign.com/seybold/everything.html)

If you decide to rewrite it I'll be happy to help you out, but as it looks at the moment, I'm afraid there's not much I can do without spending my entire day on it.

After you've read the article, if you don't know how to start, post a link to the entire background picture you want to use and I'll show you how to get the same effect without having to go to any trouble at all.

[techker]

well thx for the help.i always use photoshop and dreamweaver .

anyways i will figure it out..lol

[bluewalrus]

post the whole php your using for that image script. The first one you posted only looked like a part of it because it looks like to me atleast that there is a for or while loop thats writing each image and if so the div limitor should be placed outside of that

[techker]

that is the hole code.i have a while loop on every image cause they all have there respected area.

i did it cause i have no clue how to do the css part of it cause im using php to extract the image name from my database.i was using



<?php
// database connect script.

mysql_connect("localhost", "techker_techker", "techker") or die(mysql_error()) ;
mysql_select_db("techker_softcore") or die(mysql_error()) ;

$fileSQL=" SELECT *
FROM featured WHERE location=1
";
$fileLIST=mysql_query($fileSQL);

$fileSQL2=" SELECT *
FROM featured WHERE location=2
";
$fileLIST2=mysql_query($fileSQL2);

$fileSQL3=" SELECT *
FROM featured WHERE location=3
";
$fileLIST3=mysql_query($fileSQL3);

$fileSQL4=" SELECT *
FROM featured WHERE location=4";
$fileLIST4=mysql_query($fileSQL4);

$fileSQL5=" SELECT *
FROM featured WHERE location=5
";
$fileLIST5=mysql_query($fileSQL5);

$fileSQL6=" SELECT *
FROM featured WHERE location=6
";
$fileLIST6=mysql_query($fileSQL6);

$fileSQL7=" SELECT *
FROM featured WHERE location=7
";
$fileLIST7=mysql_query($fileSQL7);

$fileSQL8=" SELECT *
FROM featured WHERE location=8
";
$fileLIST8=mysql_query($fileSQL8);

$fileSQL9=" SELECT *
FROM featured WHERE location=9
";
$fileLIST9=mysql_query($fileSQL9);


?>



<html>
<head>
<title>index</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
background-color: #CCCCCC;
}
-->
</style></head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (index.psd) -->
<table width="900" height="901" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
<tr>
<td colspan="5">
<img src="images/main_01.jpg" width="900" height="15" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="4">
<img src="images/main_02.jpg" width="591" height="376" alt=""></td>
<td colspan="2">
<img src="images/main_03.jpg" width="300" height="57" alt=""></td>
<td rowspan="6">
<img src="images/main_04.jpg" width="9" height="885" alt=""></td>
</tr>
<tr>
<td colspan="2">
<img src="images/main_05.jpg" width="300" height="49" alt=""></td>
</tr>
<tr>
<td colspan="2">
<img src="images/main_06.jpg" width="300" height="51" alt=""></td>
</tr>
<tr>
<td colspan="2">
<img src="images/main_07.jpg" width="300" height="219" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="images/main_08.jpg" width="378" height="509" alt=""></td>
<td colspan="2"><table width="502" height="416" border="0" cellpadding="0" cellspacing="0">
<tr>
<th width="501" height="416" valign="top" background="images/main_09.jpg" scope="row"><table width="502" height="415" border="0" cellpadding="0" cellspacing="0">
<tr><? while ($row = @mysql_fetch_assoc($fileLIST)) { ?>
<th width="166" valign="top" scope="row"><?php echo '<a href="/admin/art/'.$row['pic'] .'" target="_blank" >
<img src="/admin/art/'.$row['pic'].'" border="0" alt="" width=65/>
</a>
<br />'; ?></th><? while ($row2 = @mysql_fetch_assoc($fileLIST2)) { ?>
<th width="183" valign="top" scope="row"><?php echo '<a href="/admin/art/'.$row2['pic'] .'" target="_blank" >
<img src="/admin/art/'.$row2['pic'].'" border="0" alt="" width=65/>
</a>
<br />'; ?></th><? while ($row3 = @mysql_fetch_assoc($fileLIST3)) { ?>
<th width="153" valign="top" scope="row"><?php echo '<a href="/admin/art/'.$row3['pic'] .'" target="_blank" >
<img src="/admin/art/'.$row3['pic'].'" border="0" alt="" width=65/>
</a>
<br />'; ?></th>
</tr>
<tr><? while ($row4 = @mysql_fetch_assoc($fileLIST4)) { ?>
<th valign="top" scope="row"><?php echo '<a href="/admin/art/'.$row4['pic'] .'" target="_blank" >
<img src="/admin/art/'.$row4['pic'].'" border="0" alt="" width=65/>
</a>
<br />'; ?></th><? while ($row5 = @mysql_fetch_assoc($fileLIST5)) { ?>
<th valign="top" scope="row"><?php echo '<a href="/admin/art/'.$row5['pic'] .'" target="_blank" >
<img src="/admin/art/'.$row5['pic'].'" border="0" alt="" width=65/>
</a>
<br />'; ?></th><? while ($row6 = @mysql_fetch_assoc($fileLIST6)) { ?>
<th valign="top" scope="row"><?php echo '<a href="/admin/art/'.$row6['pic'] .'" target="_blank" >
<img src="/admin/art/'.$row6['pic'].'" border="0" alt="" width=65/>
</a>
<br />'; ?></th>
</tr>
<tr><? while ($row7 = @mysql_fetch_assoc($fileLIST7)) { ?>
<th valign="top" scope="row"><?php echo '<a href="/admin/art/'.$row7['pic'] .'" target="_blank" >
<img src="/admin/art/'.$row7['pic'].'" border="0" alt="" width=65/>
</a>
<br />'; ?></th><? while ($row8 = @mysql_fetch_assoc($fileLIST8)) { ?>
<th valign="top" scope="row"><?php echo '<a href="/admin/art/'.$row8['pic'] .'" target="_blank" >
<img src="/admin/art/'.$row8['pic'].'" border="0" alt="" width=65/>
</a>
<br />'; ?></th><? while ($row9 = @mysql_fetch_assoc($fileLIST9)) { ?>
<th valign="top" scope="row"><?php echo '<a href="/admin/art/'.$row9['pic'] .'" target="_blank">
<img src="/admin/art/'.$row9['pic'].'" border="0" alt="" width=65/>
</a>
<br />'; ?></th>
</tr>
<? } } } } } } } } } ?>
</table></th>
</tr>
</table></td>
<td rowspan="2">
<img src="images/main_10.jpg" width="11" height="509" alt=""></td>
</tr>
<tr>
<td colspan="2">
<img src="images/main_11.jpg" width="502" height="93" alt=""></td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="378" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="213" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="289" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="11" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="9" height="1" alt=""></td>
</tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>



the echo '<a href="/admin/art/'.$row9['pic'] .'" target="_blank">
<img src="/admin/art/'.$row9['pic'].'" border="0" alt="" width=65/>
</a>
<br />';

just gets the pics name in that table

if i new how to do it so the pics can show like i want

i would just do one query that gets all the names and echos it.but that gives me all the pics on one line or vertical not

pic pic pic

pic pic pic

[bluewalrus]

<div id="limitor"> <th width="166" valign="top" scope="row"><?php echo '<a href="/admin/art/'.$row['pic'] .'" target="_blank" >
<img src="/admin/art/'.$row['pic'].'" border="0" alt="" width=65/>
</a>
'; ?></th><? while ($row2 = @mysql_fetch_assoc($fileLIST2)) { ?>
<th width="183" valign="top" scope="row"><?php echo '<a href="/admin/art/'.$row2['pic'] .'" target="_blank" >
<img src="/admin/art/'.$row2['pic'].'" border="0" alt="" width=65/>
</a>
'; ?></th><? while ($row3 = @mysql_fetch_assoc($fileLIST3)) { ?>
<th width="153" valign="top" scope="row"><?php echo '<a href="/admin/art/'.$row3['pic'] .'" target="_blank" >
<img src="/admin/art/'.$row3['pic'].'" border="0" alt="" width=65/>
</a>'; ?></th>
</tr>
<tr><? while ($row4 = @mysql_fetch_assoc($fileLIST4)) { ?>
<th valign="top" scope="row"><?php echo '<a href="/admin/art/'.$row4['pic'] .'" target="_blank" >
<img src="/admin/art/'.$row4['pic'].'" border="0" alt="" width=65/>
</a>
'; ?></th><? while ($row5 = @mysql_fetch_assoc($fileLIST5)) { ?>
<th valign="top" scope="row"><?php echo '<a href="/admin/art/'.$row5['pic'] .'" target="_blank" >
<img src="/admin/art/'.$row5['pic'].'" border="0" alt="" width=65/>
</a>
'; ?></th><? while ($row6 = @mysql_fetch_assoc($fileLIST6)) { ?>
<th valign="top" scope="row"><?php echo '<a href="/admin/art/'.$row6['pic'] .'" target="_blank" >
<img src="/admin/art/'.$row6['pic'].'" border="0" alt="" width=65/>
</a>
'; ?></th>
</tr>
<tr><? while ($row7 = @mysql_fetch_assoc($fileLIST7)) { ?>
<th valign="top" scope="row"><?php echo '<a href="/admin/art/'.$row7['pic'] .'" target="_blank" >
<img src="/admin/art/'.$row7['pic'].'" border="0" alt="" width=65/>
</a>
'; ?></th><? while ($row8 = @mysql_fetch_assoc($fileLIST8)) { ?>
<th valign="top" scope="row"><?php echo '<a href="/admin/art/'.$row8['pic'] .'" target="_blank" >
<img src="/admin/art/'.$row8['pic'].'" border="0" alt="" width=65/>
</a>
'; ?></th><? while ($row9 = @mysql_fetch_assoc($fileLIST9)) { ?>
<th valign="top" scope="row"><?php echo '<a href="/admin/art/'.$row9['pic'] .'" target="_blank">
<img src="/admin/art/'.$row9['pic'].'" border="0" alt="" width=65/>
</a>
'; ?></th>
</tr>
<? } } } } } } } } } ?>
</table></th></div>

No line breaks and the limitor placed in the correct place

[techker]

it still mess up the hole page...

[Snookerman]

I've started for you so you would see what I mean, download the page and the image:

2321 This is the background image, I made it from your pieces
2322 This is the page, remove the .txt suffix and try it out

Save both files and take a look at them. This is much easier to edit, and is read quicker by the browser.

[bluewalrus]

You didn't do what I said. I said put the limitor in once, not at every image. But that is still a test and would probably need some work so go with snookerman's.

[techker]

i get what you did.the only thing is the code im using is php.you have all the images .

i need to include my while and the code.as soon as i replace the html for php it screws up the page?

by the whay thx alot for the help!!really appreaciated,.

[techker]

You didn't do what I said. I said put the limitor in once, not at every image. But that is still a test and would probably need some work so go with snookerman's.
it is put once.look at the top and i close the div at the end

[Snookerman]

I see that DD chopped a few pixels off the pic I attached. It would be good if you could find the original background picture, without the black border and put it on your server and post the link so I can refer to it in the code.

About the php, do you really need it?

[techker]

for now the bgw isnot important to me it is the pics im worried about.

for the php i do need it cause he will upload his one pics in the admin panel.i don't want to edit his pages every time he gets a new pic.

[Snookerman]

If the number of images is constant, you could just name them 1.jpg, 2.jpg, 3.jpg, etc. So when you want to change them you just upload the new ones and rewrite the old ones. But if you really need php, you could just rewrite your code so it would output what I wrote in the html code.

[techker]

ya i want to stick to phpcause he will keep the images

[Snookerman]

Alright, well I don't know much php but you want to get this:

<a href="http://softcoredesign.com/admin/art/pepe_bus.jpg" target="_blank"><img src="http://softcoredesign.com/admin/art/pepe_bus.jpg" alt="" /></a>

So maybe this will do:

<?php echo '<a href="/members/Gymgraph/'.$row['type1'].'/'.$row['pic1'] .'" target="_blank"><img src="/members/Gymgraph/'.$row['type1'].'/'.$row['pic1'].'" alt="" /></a>'; ?>

Put that in the content div in the page I sent you instead of the images coded with html.

[techker]

ok here it is modified

http://softcoredesign.com/main4.php



<?php
// database connect script.

mysql_connect("localhost", "techker_techker", "techker") or die(mysql_error()) ;
mysql_select_db("techker_softcore") or die(mysql_error()) ;

$fileSQL=" SELECT *
FROM featured WHERE location=1
";
$fileLIST=mysql_query($fileSQL);

$fileSQL2=" SELECT *
FROM featured WHERE location=2
";
$fileLIST2=mysql_query($fileSQL2);

$fileSQL3=" SELECT *
FROM featured WHERE location=3
";
$fileLIST3=mysql_query($fileSQL3);

$fileSQL4=" SELECT *
FROM featured WHERE location=4";
$fileLIST4=mysql_query($fileSQL4);

$fileSQL5=" SELECT *
FROM featured WHERE location=5
";
$fileLIST5=mysql_query($fileSQL5);

$fileSQL6=" SELECT *
FROM featured WHERE location=6
";
$fileLIST6=mysql_query($fileSQL6);

$fileSQL7=" SELECT *
FROM featured WHERE location=7
";
$fileLIST7=mysql_query($fileSQL7);

$fileSQL8=" SELECT *
FROM featured WHERE location=8
";
$fileLIST8=mysql_query($fileSQL8);

$fileSQL9=" SELECT *
FROM featured WHERE location=9
";
$fileLIST9=mysql_query($fileSQL9);

?>

<!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>Untitled Document</title>
<style type="text/css">
* {
padding:0;
margin:0;
}
body {
background-color:#CCCCCC;
}
#wrapper {
background-image:url(main.jpg);
background-repeat:no-repeat;
height:881px;
width:886px;
position:relative;
margin:auto;
border-left:7px solid black;
border-right:7px solid black;
border-top:10px solid black;
border-bottom:9px solid black;
}
#content {
width:472px;
position:absolute;
right:11px;
bottom:51px;
height: 521px;
}
#content img {
width:115px;
border:none;
margin:2px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="content"><? while ($row = @mysql_fetch_assoc($fileLIST)) { ?>
<?php echo '<a href="/admin/art/'.$row['pic'] .'" target="_blank" >
<img src="/admin/art/'.$row['pic'].'" border="0" alt="" width=65/>
</a>
<br />'; ?><? while ($row2 = @mysql_fetch_assoc($fileLIST2)) { ?>
<?php echo '<a href="/admin/art/'.$row2['pic'] .'" target="_blank" >
<img src="/admin/art/'.$row2['pic'].'" border="0" alt="" width=65/>
</a>
<br />'; ?><? while ($row3 = @mysql_fetch_assoc($fileLIST3)) { ?>
<?php echo '<a href="/admin/art/'.$row3['pic'] .'" target="_blank" >
<img src="/admin/art/'.$row3['pic'].'" border="0" alt="" width=65/>
</a>
<br />'; ?><? while ($row4 = @mysql_fetch_assoc($fileLIST4)) { ?>
<?php echo '<a href="/admin/art/'.$row4['pic'] .'" target="_blank" >
<img src="/admin/art/'.$row4['pic'].'" border="0" alt="" width=65/>
</a>
<br />'; ?><? while ($row5 = @mysql_fetch_assoc($fileLIST5)) { ?>
<?php echo '<a href="/admin/art/'.$row5['pic'] .'" target="_blank" >
<img src="/admin/art/'.$row5['pic'].'" border="0" alt="" width=65/>
</a>
<br />'; ?><? while ($row6 = @mysql_fetch_assoc($fileLIST6)) { ?>
<?php echo '<a href="/admin/art/'.$row6['pic'] .'" target="_blank" >
<img src="/admin/art/'.$row6['pic'].'" border="0" alt="" width=65/>
</a>
<br />'; ?><? while ($row7 = @mysql_fetch_assoc($fileLIST7)) { ?>
<?php echo '<a href="/admin/art/'.$row7['pic'] .'" target="_blank" >
<img src="/admin/art/'.$row7['pic'].'" border="0" alt="" width=65/>
</a>
<br />'; ?><? while ($row8 = @mysql_fetch_assoc($fileLIST8)) { ?>
<?php echo '<a href="/admin/art/'.$row8['pic'] .'" target="_blank" >
<img src="/admin/art/'.$row8['pic'].'" border="0" alt="" width=65/>
</a>
<br />'; ?></div>
</div><? }}}}}}}} ?>
</body>
</html>

[Snookerman]

Change the php to this:

<? while ($row = @mysql_fetch_assoc($fileLIST)) { ?>
<?php echo '<a href="/admin/art/'.$row['pic'] .'" target="_blank" ><img src="/admin/art/'.$row['pic'].'" alt="" /></a>'; ?>
<? while ($row2 = @mysql_fetch_assoc($fileLIST2)) { ?>
<?php echo '<a href="/admin/art/'.$row2['pic'] .'" target="_blank" ><img src="/admin/art/'.$row2['pic'].'" alt="" ></a>'; ?>
<? while ($row3 = @mysql_fetch_assoc($fileLIST3)) { ?>
<?php echo '<a href="/admin/art/'.$row3['pic'] .'" target="_blank" ><img src="/admin/art/'.$row3['pic'].'" alt="" ></a>'; ?>
<? while ($row4 = @mysql_fetch_assoc($fileLIST4)) { ?>
<?php echo '<a href="/admin/art/'.$row4['pic'] .'" target="_blank" ><img src="/admin/art/'.$row4['pic'].'" alt="" ></a>'; ?>
<? while ($row5 = @mysql_fetch_assoc($fileLIST5)) { ?>
<?php echo '<a href="/admin/art/'.$row5['pic'] .'" target="_blank" ><img src="/admin/art/'.$row5['pic'].'" alt="" ></a>'; ?>
<? while ($row6 = @mysql_fetch_assoc($fileLIST6)) { ?>
<?php echo '<a href="/admin/art/'.$row6['pic'] .'" target="_blank" ><img src="/admin/art/'.$row6['pic'].'" alt="" ></a>'; ?>
<? while ($row7 = @mysql_fetch_assoc($fileLIST7)) { ?>
<?php echo '<a href="/admin/art/'.$row7['pic'] .'" target="_blank" ><img src="/admin/art/'.$row7['pic'].'" alt="" ></a>'; ?>
<? while ($row8 = @mysql_fetch_assoc($fileLIST8)) { ?>
<?php echo '<a href="/admin/art/'.$row8['pic'] .'" target="_blank" ><img src="/admin/art/'.$row8['pic'].'" alt="" ></a>'; ?>

[techker]

wow lol that was a bbbip..

its good but when i reseize the images to fit the div

it look like this

http://softcoredesign.com/main4.php

[Snookerman]

Change this:

#content {
width:276px;
position:absolute;
right:11px;
bottom:51px;
height: 521px;
}

To find out what width to have on the content you need to multiply the number of images you want on one row with the width of the image and its margins. So now you would have 69px (65px plus 2px margin on both left and right side) times 4 (number of images you said before you want on one row) which gives you 276px.

[techker]

Nice job!!

now the hard part can you explain what we did?so i will now for next script?lol

[Snookerman]

Well, to simplify, this is the code you have in the body:

<div id="wrapper">
<div id="content">Images in here</div>
</div>

This is what the css does:


* {
padding:0;
margin:0;
}
Targets all elements (* means everything) and removes any margins or padding that the browsers have by default.


body {
background-color:#CCCCCC;
}

Gives the body the Grey background color.


#wrapper {
background-image:url(main.jpg);
background-repeat:no-repeat;
height:881px;
width:886px;
position:relative;
margin:auto;
border-left:7px solid black;
border-right:7px solid black;
border-top:10px solid black;
border-bottom:9px solid black;
}

The wrapper div is the container that has the black frame and the big image with the brushes and the pencil.

background-image:url(main.jpg); gives it the background image main.jpg (which I suggest you make yourself because the quality is low since I uploaded it to the forum).

background-repeat:no-repeat; prevents the background from repeating. This line is not really necessary if the background image is the same size as the wrapper div.

height:881px; and width:886px; make the wrapper div the large enough so the entire background image will show (the image I attached was actually 886x881 pixel, but like I said, It was chopped off a bit). When you make your own background image, make sure to change these line to have the same height and width as your image.

position:relative; and margin:auto; are used to center the wrapper div on the page.

And the borders speak for themselves I guess. I made them the same width as you had in your original page.


#content {
width:400px;
position:absolute;
right:57px;
bottom:57px;
height: 346px;
}

The content div is the container that has all the images.

The width I explained before (it should actually be 356px if you follow my "formula" in my other post).

position:absolute; is used to position the content div in the wrapper div.

right:57px; and bottom:57px; specify the space between the right and bottom sides and the outer div (wrapper). You can use these, as you probably found out, to move the content div.

height: 346px; specifies the height of the content div. You added this yourself so I guess you know how it works. If you don't have it the height of the div would automatically adjust to the images inside.


#content img {
width:85px;
border:none;
margin:2px;
}
This targets all the images (the thumbnails) inside the content div container. As I'm sure you've understood, you can change the width of the thumbnail here and the margin around them. Without the 2px margin, they will be stuck to each other. The border:none; removes the border that is set by default by some browsers to images with links.

I hope this is clear enough. If you have any more questions, don't hesitate to ask. Good luck!

[techker]

hey a huge thx!!

[Snookerman]

You're welcome! If you feel the problem has been solved you can go to your first post in this thread, edit, go advanced and add the Resolved prefix to the title of the thread. Good luck!