php with css..

**techker** · 12-14-2008, 08:10 PM

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

**Snookerman** · 12-14-2008, 08:20 PM

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

HTML Code:

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


<?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** · 12-14-2008, 08:29 PM

ok here it is modified

http://softcoredesign.com/main4.php

PHP Code:


<?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** · 12-14-2008, 08:35 PM

Change the php to this:

PHP Code:


<? 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** · 12-14-2008, 08:50 PM

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** · 12-14-2008, 09:01 PM

Change this:

Code:

#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** · 12-14-2008, 09:06 PM

Nice job!!

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

**Snookerman** · 12-14-2008, 09:33 PM

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

HTML Code:

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

This is what the css does:

Code:

* {
	padding:0;
	margin:0;
}

Targets all elements (* means everything) and removes any margins or padding that the browsers have by default.

Code:

body {
	background-color:#CCCCCC;
}

Gives the body the Grey background color.

Code:

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

Code:

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

Code:

#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** · 12-14-2008, 09:44 PM

hey a huge thx!!

**Snookerman** · 12-14-2008, 10:01 PM

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!

Thread: php with css..

Thread Tools

Search Thread

The Following User Says Thank You to Snookerman For This Useful Post:

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions