[PHP/MySQL] Bild in CSS, das aus der DB in einer Schleife gelesen werden muß

C

Catdreams

Well-known member
ID: 61507
L
20 April 2006
526
40
Hi!

Ich habe mein Problem jett schon etwas selber hinbekommen, aber noch habe ich ein böses Problem, das ich alleine nicht hinbekomme:

Ich habe eine CSS basierende Galerie, in der die Vorschaubilder per CSS ausgelesen werden. Dort steht jetzt speziell für die Bilder:
Code: 
A.slidea { BACKGROUND: url(images/galerie/<? echo "$bildklein" ?>) }
In der Galerie später ist das dann so (Schleife):

Code: 
echo"
<A class='gallery slidea' href='#nogo'>
     <EM><IMG title='$kategorie' alt='$kategorie' src='images/galerie/$bild'></EM> 
     <SPAN>$katzenname / $geschlecht / $sonstiges <BR>
     $vorname $name / $mail / $url
           </SPAN></A>";
Alles klappt, nur halt die Vorschaubilder nicht! Ich habe alles versucht, aber ich kann den Code ja nicht in eine Schleife mit reinbauen, denn dann wird ja immer das erste Bild nur ausgelesen, da dann ja das so dann steht:

BACKGROUND: url(images/galerie/bild1.jpg
BACKGROUND: url(images/galerie/bild2.jpg
BACKGROUND: url(images/galerie/bild3.jpg
usw ...

Wie kann ich das sonst hinbekommen! Ich bin eine Anfängerin, was PHP betrifft! Eigendlich habe ich garkeine Ahnung von, ich schaffe es halt nur, schon mal bestehende Codes zu verstehen und dann in anderer Weise wieder anzuwenden!
Daher bei Hilfestellungen mir nicht nur kleine "Schnippsel" hinwerfen, sondern etwas genauer erklären bitte!

Ich haue hier mal den ganzen Code rein, das man auch genau sieht, was ich gemacht habe! Ist ziemlich viel, weil meiste halt das CSS Zeugs ist!
Code: 
<head>
<STYLE type=text/css>
A {
    COLOR: #080 }
A:visited {
    COLOR: #080 }
A.gallery {
    BORDER-RIGHT: #000 1px solid; BORDER-TOP: #000 1px solid; DISPLAY: inline-block; Z-INDEX: 50; FLOAT: left; MARGIN: 4px; BORDER-LEFT: #000 1px solid; WIDTH: 75px; COLOR: #000; BORDER-BOTTOM: #000 1px solid; HEIGHT: 47px; TEXT-DECORATION: none }
A.gallery:visited {
    BORDER-RIGHT: #000 1px solid; BORDER-TOP: #000 1px solid; DISPLAY: inline-block; Z-INDEX: 50; FLOAT: left; MARGIN: 4px; BORDER-LEFT: #000 1px solid; WIDTH: 75px; COLOR: #000; BORDER-BOTTOM: #000 1px solid; HEIGHT: 47px; TEXT-DECORATION: none }
A.slidea { BACKGROUND: url(images/galerie/<? echo "$bildklein" ?>) }

A.gallery EM { DISPLAY: none }
A.gallery SPAN { DISPLAY: none }
A.gallery:hover {
    BORDER-RIGHT: #fff 1px solid; BORDER-TOP: #fff 1px solid; BORDER-LEFT: #fff 1px solid; BORDER-BOTTOM: #fff 1px solid
}
#container_top {
    BORDER-RIGHT: #a49188 1px solid; BORDER-TOP: #a49188 1px solid; BACKGROUND: #C4E1A7; MARGIN: 1em auto; BORDER-LEFT: #a49188 1px solid; WIDTH: 425px; BORDER-BOTTOM: #a49188 1px solid; POSITION: relative; HEIGHT: 425px
}
#container_top IMG {
    BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px
}
#container_top #thumbs {
    LEFT: 0px; POSITION: absolute; TOP: 0px
}
#container_top A.gallery:hover SPAN {
    PADDING-RIGHT: 5px; DISPLAY: block; PADDING-LEFT: 5px; Z-INDEX: 100; LEFT: 5px; PADDING-BOTTOM: 5px; WIDTH: 402px; COLOR: #fff; PADDING-TOP: 5px; FONT-STYLE: italic; POSITION: absolute; TOP: 110px; HEIGHT: 50px
}
#container_top A.gallery:hover SPAN:first-line {
    FONT-WEIGHT: bold; FONT-SIZE: 1.1em; COLOR: #000; FONT-STYLE: normal
}
#container_top A.gallery:active {
    BORDER-RIGHT: #000 1px solid; BORDER-TOP: #000 1px solid; BORDER-LEFT: #000 1px solid; BORDER-BOTTOM: #000 1px solid
}
#container_top A.gallery:unknown {
    BORDER-RIGHT: #000 1px solid; BORDER-TOP: #000 1px solid; BORDER-LEFT: #000 1px solid; BORDER-BOTTOM: #000 1px solid
}
#container_top A.gallery:active EM {
    BORDER-RIGHT: #3d330f 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #3d330f 1px solid; DISPLAY: block; PADDING-LEFT: 5px; Z-INDEX: 50; LEFT: 5px; PADDING-BOTTOM: 5px; BORDER-LEFT: #3d330f 1px solid; WIDTH: 402px; COLOR: #000; PADDING-TOP: 5px; BORDER-BOTTOM: #3d330f 1px solid; POSITION: absolute; TOP: 160px; HEIGHT: 250px
}
#container_top A.gallery:unknown EM {
    BORDER-RIGHT: #3d330f 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #3d330f 1px solid; DISPLAY: block; PADDING-LEFT: 5px; Z-INDEX: 50; LEFT: 5px; PADDING-BOTTOM: 5px; BORDER-LEFT: #3d330f 1px solid; WIDTH: 402px; COLOR: #000; PADDING-TOP: 5px; BORDER-BOTTOM: #3d330f 1px solid; POSITION: absolute; TOP: 160px; HEIGHT: 250px

}
#container_top H1 {
    CLEAR: both; FONT-WEIGHT: normal; FONT-SIZE: 3em; MARGIN: 0px; COLOR: #fff; PADDING-TOP: 200px; FONT-FAMILY: georgia, "times new roman", serif; TEXT-ALIGN: center
}
#container_top H1 EM {
    FONT-SIZE: 0.6em; COLOR: #000
}
#container_bottom {
    BORDER-RIGHT: #a49188 1px solid; BORDER-TOP: #a49188 1px solid; BACKGROUND: #C4E1A7; MARGIN: 1em auto; BORDER-LEFT: #a49188 1px solid; WIDTH: 425px; BORDER-BOTTOM: #a49188 1px solid; POSITION: relative; HEIGHT: 425px
}
#container_bottom IMG {
    BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px
}
#container_bottom #thumbs {
    LEFT: 0px; BOTTOM: 0px; POSITION: absolute
}
#container_bottom A.gallery:hover SPAN {
    PADDING-RIGHT: 5px; DISPLAY: block; PADDING-LEFT: 5px; Z-INDEX: 100; LEFT: 5px; PADDING-BOTTOM: 5px; WIDTH: 402px; COLOR: #fff; PADDING-TOP: 5px; FONT-STYLE: italic; POSITION: absolute; TOP: -45px; HEIGHT: 50px
}
#container_bottom A.gallery:hover SPAN:first-line {
    FONT-WEIGHT: bold; FONT-SIZE: 1.1em; COLOR: #000; FONT-STYLE: normal
}
#container_bottom A.gallery:active {
    BORDER-RIGHT: #000 1px solid; BORDER-TOP: #000 1px solid; BORDER-LEFT: #000 1px solid; BORDER-BOTTOM: #000 1px solid
}
#container_bottom A.gallery:unknown {
    BORDER-RIGHT: #000 1px solid; BORDER-TOP: #000 1px solid; BORDER-LEFT: #000 1px solid; BORDER-BOTTOM: #000 1px solid
}
#container_bottom A.gallery:active EM {
    BORDER-RIGHT: #3d330f 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #3d330f 1px solid; DISPLAY: block; PADDING-LEFT: 5px; Z-INDEX: 50; LEFT: 5px; PADDING-BOTTOM: 5px; BORDER-LEFT: #3d330f 1px solid; WIDTH: 402px; COLOR: #000; PADDING-TOP: 5px; BORDER-BOTTOM: #3d330f 1px solid; POSITION: absolute; TOP: -305px; HEIGHT: 250px
}
#container_bottom A.gallery:unknown EM {
    BORDER-RIGHT: #3d330f 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #3d330f 1px solid; DISPLAY: block; PADDING-LEFT: 5px; Z-INDEX: 50; LEFT: 5px; PADDING-BOTTOM: 5px; BORDER-LEFT: #3d330f 1px solid; WIDTH: 402px; COLOR: #000; PADDING-TOP: 5px; BORDER-BOTTOM: #3d330f 1px solid; POSITION: absolute; TOP: -305px; HEIGHT: 250px
}
#container_bottom H1 {
    CLEAR: both; FONT-WEIGHT: normal; FONT-SIZE: 3em; MARGIN: 0px; COLOR: #fff; PADDING-TOP: 80px; FONT-FAMILY: georgia, "times new roman", serif; TEXT-ALIGN: center
}
#container_bottom H1 EM {
    FONT-SIZE: 0.6em; COLOR: #000
}
#container_left {
    BORDER-RIGHT: #a49188 1px solid; BORDER-TOP: #a49188 1px solid; BACKGROUND: #C4E1A7; MARGIN: 1em auto; BORDER-LEFT: #a49188 1px solid; WIDTH: 600px; BORDER-BOTTOM: #a49188 1px solid; POSITION: relative; HEIGHT: 305px
}
#container_left IMG {
    BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px
}
#container_left #thumbs {
    LEFT: 0px; WIDTH: 170px; POSITION: absolute; TOP: 0px
}

#container_left A.gallery:hover SPAN {
    PADDING-RIGHT: 5px; DISPLAY: block; PADDING-LEFT: 5px; Z-INDEX: 100; LEFT: 175px; PADDING-BOTTOM: 5px; WIDTH: 402px; COLOR: #fff; PADDING-TOP: 5px; FONT-STYLE: italic; POSITION: absolute; TOP: 265px; HEIGHT: 50px
}
#container_left A.gallery:hover SPAN:first-line {
    FONT-WEIGHT: bold; FONT-SIZE: 1.1em; COLOR: #000; FONT-STYLE: normal
}
#container_left A.gallery:active {
    BORDER-RIGHT: #000 1px solid; BORDER-TOP: #000 1px solid; BORDER-LEFT: #000 1px solid; BORDER-BOTTOM: #000 1px solid
}
#container_left A.gallery:unknown {
    BORDER-RIGHT: #000 1px solid; BORDER-TOP: #000 1px solid; BORDER-LEFT: #000 1px solid; BORDER-BOTTOM: #000 1px solid
}
#container_left A.gallery:active EM {
    BORDER-RIGHT: #3d330f 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #3d330f 1px solid; DISPLAY: block; PADDING-LEFT: 5px; Z-INDEX: 50; LEFT: 180px; PADDING-BOTTOM: 5px; BORDER-LEFT: #3d330f 1px solid; WIDTH: 402px; COLOR: #000; PADDING-TOP: 5px; BORDER-BOTTOM: #3d330f 1px solid; POSITION: absolute; TOP: 5px; HEIGHT: 250px
}
#container_left A.gallery:unknown EM {
    BORDER-RIGHT: #3d330f 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #3d330f 1px solid; DISPLAY: block; PADDING-LEFT: 5px; Z-INDEX: 50; LEFT: 180px; PADDING-BOTTOM: 5px; BORDER-LEFT: #3d330f 1px solid; WIDTH: 402px; COLOR: #000; PADDING-TOP: 5px; BORDER-BOTTOM: #3d330f 1px solid; POSITION: absolute; TOP: 5px; HEIGHT: 250px
}
#container_left H1 {
    CLEAR: both; PADDING-LEFT: 250px; FONT-WEIGHT: normal; FONT-SIZE: 3em; MARGIN: 0px; WIDTH: 300px; COLOR: #fff; PADDING-TOP: 80px; FONT-FAMILY: georgia, "times new roman", serif; TEXT-ALIGN: center
}
#container_left H1 EM {
    FONT-SIZE: 0.6em; COLOR: #000
}
#container_right {
    BORDER-RIGHT: #a49188 1px solid; BORDER-TOP: #a49188 1px solid; BACKGROUND: #C4E1A7; MARGIN: 1em auto; BORDER-LEFT: #a49188 1px solid; WIDTH: 600px; BORDER-BOTTOM: #a49188 1px solid; POSITION: relative; HEIGHT: 305px
}
#container_right IMG {
    BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px
}
#container_right #thumbs {
    RIGHT: 0px; WIDTH: 170px; POSITION: absolute; TOP: 0px
}
#container_right A.gallery:hover SPAN {
    PADDING-RIGHT: 5px; DISPLAY: block; PADDING-LEFT: 5px; Z-INDEX: 100; LEFT: -430px; PADDING-BOTTOM: 5px; WIDTH: 402px; COLOR: #fff; PADDING-TOP: 5px; FONT-STYLE: italic; POSITION: absolute; TOP: 265px; HEIGHT: 50px
}
#container_right A.gallery:hover SPAN:first-line {
    FONT-WEIGHT: bold; FONT-SIZE: 1.1em; COLOR: #000; FONT-STYLE: normal
}
#container_right A.gallery:active {
    BORDER-RIGHT: #000 1px solid; BORDER-TOP: #000 1px solid; BORDER-LEFT: #000 1px solid; BORDER-BOTTOM: #000 1px solid
}
#container_right A.gallery:unknown {
    BORDER-RIGHT: #000 1px solid; BORDER-TOP: #000 1px solid; BORDER-LEFT: #000 1px solid; BORDER-BOTTOM: #000 1px solid
}
#container_right A.gallery:active EM {
    BORDER-RIGHT: #3d330f 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #3d330f 1px solid; DISPLAY: block; PADDING-LEFT: 5px; Z-INDEX: 50; LEFT: -425px; PADDING-BOTTOM: 5px; BORDER-LEFT: #3d330f 1px solid; WIDTH: 402px; COLOR: #000; PADDING-TOP: 5px; BORDER-BOTTOM: #3d330f 1px solid; POSITION: absolute; TOP: 5px; HEIGHT: 250px
}

#container_right A.gallery:unknown EM {
    BORDER-RIGHT: #3d330f 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #3d330f 1px solid; DISPLAY: block; PADDING-LEFT: 5px; Z-INDEX: 50; LEFT: -425px; PADDING-BOTTOM: 5px; BORDER-LEFT: #3d330f 1px solid; WIDTH: 402px; COLOR: #000; PADDING-TOP: 5px; BORDER-BOTTOM: #3d330f 1px solid; POSITION: absolute; TOP: 5px; HEIGHT: 250px
}
#container_right H1 {
    CLEAR: both; PADDING-LEFT: 50px; FONT-WEIGHT: normal; FONT-SIZE: 3em; MARGIN: 0px; WIDTH: 300px; COLOR: #fff; PADDING-TOP: 80px; FONT-FAMILY: georgia, "times new roman", serif; TEXT-ALIGN: center
}
#container_right H1 EM {
    FONT-SIZE: 0.6em; COLOR: #000
}
</STYLE>
</head>
<?
 $def = 10;
 if(!$x)
$x=0;
if(!$y)
$y=$def;

 $kategorie=mysql_real_escape_string($_GET['kategorie']); 
 $res=$db_handler->sql_query("SELECT * FROM galerie WHERE kategorie='$kategorie' order by id LIMIT $x,$def"); 
 $num=mysql_affected_rows();
 
 $resXX=$db_handler->sql_query("select * FROM galerie WHERE kategorie='$kategorie' order by id");
$anz=mysql_num_rows($resXX);
 ?>
<table border="0" cellspacing="0" cellpadding="0" class="tabelle">
  <tr> 
    <td class="tabelle1"></td>
  </tr>
  <tr> 
    <td class="tabelle2"> Katzengalerie --> <? echo "$kategorie" ?></td>
  </tr>
  <tr> 
    <td valign="top" class="tabelle3">
<center>
        <DIV id=container_top> 
          <DIV id=thumbs>

<? 
for ($a=0;$a<$num;$a++)
{
$id=mysql_result($res,$a,"id");
$bild=mysql_result($res,$a,"bild");
$bildklein=mysql_result($res,$a,"bildklein");
$kategorie=mysql_result($res,$a,"kategorie");
$name=mysql_result($res,$a,"name");
$vorname=mysql_result($res,$a,"vorname");
$mail=mysql_result($res,$a,"mail");
$url=mysql_result($res,$a,"url");
$katzenname=mysql_result($res,$a,"katzenname");
$geschlecht=mysql_result($res,$a,"geschlecht");
$farbe=mysql_result($res,$a,"farbe");
$sonstiges=mysql_result($res,$a,"sonstiges");
{

echo"
<A class='gallery slidea' href='#nogo'>
     <EM><IMG title='$kategorie' alt='$kategorie' src='images/galerie/$bild'></EM> 
     <SPAN>$katzenname / $geschlecht / $sonstiges <BR>
     $vorname $name / $mail / $url
           </SPAN></A>";
}
}

?>
            </DIV>
          <DIV id=text> 
            <H1 id=subject>Galerie<BR>
              <EM>of</EM><BR>
              Cats</H1>
          </DIV>
        </DIV>
</center>
</td>
  </tr>
  <tr> 
    <td colspan="3" class="tabelle4"></td>
  </tr>
</table>
<?
$pagebreak .= '<table align=center width="90%" height="40"><tr>';   
if($x!="0")
$pagebreak .= '<td align="left"><a href="'.$PHP_SELF.'?jump='.$jump.'&galerie=Besuchergalerie'.$galerie.'&kategorie='.$kategorie.'&x='.($x-$def).'&y='.($y-$def).'">letzten '.$def.'</a></td>';
if($anz>$y)
$pagebreak .= '<td align="right"><a href="'.$PHP_SELF.'?jump='.$jump.'&galerie=Besuchergalerie'.$galerie.'&kategorie='.$kategorie.'&x='.($def+$x).'&y='.($def+$y).'">nächsten '.$def.'</a></td>';
$pagebreak .= '</tr></table>';
echo $pagebreak;
?>
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben