Php und css?

Lehrling1991

Hallo Zusammen

Bin daran meine erste Page für einen Kunden zu programmieren
Hab die Seite erstellt, und ein Backend damit der Benutzer selber die Seite mit Inhalt füllen kann.

Jetzt hab ich ein Problem. Nämlich hab ich in meinem Code für die Bildergalerie die kleinen Vorschaubilder im CSS-Code definiert.

Ich möchte jetzt mit PHP die Daten aus der DB laden. Wie stell ich das mit dem CSS an? Bin verzweifelt..

Hier mal mein Code:

Code

<style>
#holder {position:relative; background:transparent url(vertical-slide/photographer.jpg) 90px 0 no-repeat; margin-bottom:10px; width:750px; height:400px;}
#scrollbox {padding:0; margin:0; width:110px; list-style:none; height:500px; overflow:auto; float:right;}
#scrollbox li {float:left;}




#scrollbox a {display:block; color:#3333cc; text-decoration:none; border:1px solid #fff; width:75px; height:56px; float:left; padding:5px; font-family:"trebuchet ms", sans-serif; font-size:14px; text-align:center;}


#scrollbox a.slidea {background:url(apollo11_1.jpg) no-repeat center center;}
#scrollbox a.slideb {background:url(apolloLaunch_1.jpg) no-repeat center center;}
#scrollbox a.slidec {background:url(bumper_1.jpg) no-repeat center center;}
#scrollbox a.slided {background:url(./bilderklein/Launch_1.jpg) no-repeat center center;}
#scrollbox a.slidee {background:url(./bilderklein/Liftoff_1.jpg) no-repeat center center;}
#scrollbox a.slidef {background:url(lightin_1.jpg) no-repeat center center;}
#scrollbox a.slideg {background:url(SR71_1.jpg) no-repeat center center;}
#scrollbox a.slideh {background:url(SR-71_1.jpg) no-repeat center center;}
#scrollbox a.slidei {background:url(STS-1_1.jpg) no-repeat center center;}
#scrollbox a.slidej {background:url(STS-121_1.jpg) no-repeat center center;}
#scrollbox a.slidek {background:url(dsc_0045_0.jpg) no-repeat center center;}




#scrollbox a span {display:block; position:absolute; left:-9999px; top:0;}
#scrollbox a span img {border:0;}


#scrollbox a:hover {border:1px solid #888;}
#scrollbox a:hover span {width:480px; height:500px; left:90px; background:#66cc00; z-index:100;}


#scrollbox a:active {border:1px solid #000;}
#scrollbox a:focus {border:1px solid #000; outline:0;}


* html #scrollbox a:active span {width:480px; height:400px; top:0; left:90px; color:#3333cc; background:#fff; z-index:-1;}
#scrollbox a:focus span {width:480px; height:500px; top:0; left:90px; color:#3333cc; background:#66cc00; z-index:10; outline:0;}
</style>

Alles anzeigen

HTML

<div id="holder">
                    <ul id="scrollbox">
                        <li><a class="slidea" href="#nogo"><span><img src="apollo11_2.jpg" alt="" /><br />Butterflies</span></a></li>
                        <li><a class="slideb" href="#nogo"><span><img src="apolloLaunch_2.jpg" alt="" /><br />Shy</span></a></li>
                        <li><a class="slidec" href="#nogo"><span><img src="bumper_2.jpg" alt="" /><br />Otter</span></a></li>
                        <li><a class="slided" href="#nogo"><span><img src="./bildergross/Launch_2.jpg" alt="" /><br />Monkey</span></a></li>
                        <li><a class="slidee" href="#nogo"><span><img src="./bildergross/Liftoff_2.jpg" alt="" /><br />Monkey2</span></a></li>
                        <li><a class="slidef" href="#nogo"><span><img src="lightin_2.jpg" alt="" /><br />Nuts</span></a></li>
                        <li><a class="slideg" href="#nogo"><span><img src="SR71_2.jpg" alt="" /><br />Pelicans</span></a></li>
                        <li><a class="slideh" href="#nogo"><span><img src="SR-71_2.jpg" alt="" /><br />Kiwi</span></a></li>
                        <li><a class="slidei" href="#nogo"><span><img src="STS-1_2.jpg" alt="" /><br />Lizard</span></a></li>
                        <li><a class="slidej" href="#nogo"><span><img src="STS-121_2.jpg" alt="" /><br />Paddling</span></a></li>
                        <li><a class="slidek" href="#nogo"><span><img src="dsc_0045.jpg" alt="" /><br />Trees</span></a></li>
                    </ul>
                </div>

Alles anzeigen

Hab ich das Problem verständlich erklärt? Kann mir jmd. helfen?

Danke euch im Vorraus!
Freundliche Grüsse
Luca TheLehrling

jojo87

Möglichkeit 1 ("Der Hack"): css-datei mit php einlesen und nach den urls suchen. Ziemlich sinnlos, und wenn du die Thumbnails eh statishc im css hast, kannst du die Galerie auch gleich komplett statisch machen anstatt die großen Bilder dann aus der DB zu holen. Möglichkeit 2: Erstelle die Thumbnails dynamisch aus den großen, dann kannst du sofort einen Bezug zum DB-eintrag herstellen

Lehrling1991

die zweite möglichkeit tönt gut.

wird das aber nicht sehr langsam bei einer grösseren anzahl fotos?

wie würde ich das realisieren?

Bandit

Was sagt dein Kunde dazu?

Die Thumbs sollten sobald ein neues Bild hinzukommt erstellt werden.

Lehrling1991

anderst aussehen tuts ja dann nicht.. er bekommt ja nix davon mit wie die bilder geladen/erzeugt werden.

die thumbs bleiben dann erstellt? oder wie stellst du dir das vor? verstehs grat nicht wirklich sorry

bin noch kein profi

Bandit

Zitat von Lehrling1991

die thumbs bleiben dann erstellt?

Ja klar.

Mit "Was sagt dein Kunde dazu?" meinte ich, was dein Kunde dazu sagt, dass du dir hier kostenlose Hilfe abholst, die er bezahlt. Und was sollen wir dazu sagen?

Pion

Zitat von bandit600

Ja klar.

Mit "Was sagt dein Kunde dazu?" meinte ich, was dein Kunde dazu sagt, dass du dir hier kostenlose Hilfe abholst, die er bezahlt.

Nur weil man einen Kunden hat muss es doch nicht heisen das man für relativ simplere Fragen auch etwas bezahlen muss

Bandit

Wenn man etwas nicht kann, kein Problem. Aber dann sollte man keinen Auftrag annehmen, den man nicht bewältigen kann und sich nicht kostenlose Hilfe holen. Das ist gegenüber Helfern unfair, die hier kostenlos ihre Freizeit einsetzen.

Lehrling1991

was bist du denn für eine pestbeule?

ich bin lehrling und kann vielleicht noch nicht alles, da kann man ja wohl eine frage stellen.

aber dankeschön. dann hilfst du halt nicht!!!
für was ja eigentlich ein forum wäre..abernaja

Bandit

Wenn du Lehrling bist, solltest du einen kompetenten Ansprechpartner in der Firma haben. Und danke für die "Pestbeule", mal was anderes.

Lehrling1991

mein chef ist leider nicht in allem sehr kompetent.

er würde vorschlagen einfach eine andere galerie zu nehmen.. er hat leider keine lösung für das problem, sonst wäre ich ja nicht um hilfe beten kommen.

bitteschön gerne..

kann mir jetzt vielleicht jmd helfen? bitte!

Bandit

Erstelle doch einfach die Thumbs und alles wird gut. Und sobald ein neues Bild in die Galerie soll, erstellst du wieder ein Thumbnail, wo ist dein Problem???

Lehrling1991

aber wie denn? eh sorry, aber ich bin wirklich noch nicht soo gut..

ich muss ja im css-code mit php die thumbs einbinden richtig? kannst du mir vielleicht ein code-beispiel nennen wie das gehen soll?

Bandit

Ähm, wie man Daten aus einer Datenbank ausliest und ausgibt und wie man Thumbs mit PHP erstellt, kann man in massenhaft Tutorial nachlesen. Konkretisiere deine Frage.

In groben Zügen (ungetestet):

PHP

<?php
    @mysql_connect("...", "...", "...")
       or die ("Connection failed");

    @mysql_select_db("...")
       or die ("Database not found");

    $query = "Select
                `filename`
               from
                `tabelle`
               limit 24";

    $result = mysql_query($query)
      or die ("Mysql-Error: " . mysql_error());

    $char = 'a';


    while ($row = mysql_fetch_assoc($result))
    {    
       echo "#scrollbox a.slide" . $char . " {background:url(" . $row['filename'] . ") no-repeat center center;}\n";
       $char++;
    }
?>

Alles anzeigen

Lehrling1991

<?php
include("./config.inc.php3");

//Verbindung aufbauen
$connection=mysql_connect($mysqlhost, $mysqluser, $mysqlpwd) or die("Verbindungsversuch fehlgeschlagen");

//Datenbank anwählen
mysql_select_db($mysqldb, $connection) or die("Konnte die Datenbank nicht waehlen.");

$query = "Select
*
from
Fotogalerie
limit 24";

$result = mysql_query($query)
or die ("Mysql-Error: " . mysql_error());

$char = 'a';

while ($row = mysql_fetch_assoc($result))
{
echo "#scrollbox a.slide" . $char . " {background:url(" . $row['filename'] . ") no-repeat center center;}\n";
$char++;
}
?>

so habs mal bisschen abgeändert, so dass es in mein script passen würde.
hab noch 2 fragen: für was machst du bei der SQL-Abfrage limit 24 zuunterst?(macht sicher sinn, kenn aber den befehl noch nicht)

poste nochmal schnell den code für die galerie.

Code

<style>
#holder {position:relative; background:transparent url(vertical-slide/photographer.jpg) 90px 0 no-repeat; margin-bottom:10px; width:750px; height:400px;}
#scrollbox {padding:0; margin:0; width:110px; list-style:none; height:500px; overflow:auto; float:right;}
#scrollbox li {float:left;}




#scrollbox a {display:block; color:#3333cc; text-decoration:none; border:1px solid #fff; width:75px; height:56px; float:left; padding:5px; font-family:"trebuchet ms", sans-serif; font-size:14px; text-align:center;}


#scrollbox a.slidea {background:url(apollo11_1.jpg) no-repeat center center;}
#scrollbox a.slideb {background:url(apolloLaunch_1.jpg) no-repeat center center;}
#scrollbox a.slidec {background:url(bumper_1.jpg) no-repeat center center;}
#scrollbox a.slided {background:url(./bilderklein/Launch_1.jpg) no-repeat center center;}
#scrollbox a.slidee {background:url(./bilderklein/Liftoff_1.jpg) no-repeat center center;}
#scrollbox a.slidef {background:url(lightin_1.jpg) no-repeat center center;}
#scrollbox a.slideg {background:url(SR71_1.jpg) no-repeat center center;}
#scrollbox a.slideh {background:url(SR-71_1.jpg) no-repeat center center;}
#scrollbox a.slidei {background:url(STS-1_1.jpg) no-repeat center center;}
#scrollbox a.slidej {background:url(STS-121_1.jpg) no-repeat center center;}
#scrollbox a.slidek {background:url(dsc_0045_0.jpg) no-repeat center center;}




#scrollbox a span {display:block; position:absolute; left:-9999px; top:0;}
#scrollbox a span img {border:0;}


#scrollbox a:hover {border:1px solid #888;}
#scrollbox a:hover span {width:480px; height:500px; left:90px; background:#66cc00; z-index:100;}


#scrollbox a:active {border:1px solid #000;}
#scrollbox a:focus {border:1px solid #000; outline:0;}


* html #scrollbox a:active span {width:480px; height:400px; top:0; left:90px; color:#3333cc; background:#fff; z-index:-1;}
#scrollbox a:focus span {width:480px; height:500px; top:0; left:90px; color:#3333cc; background:#66cc00; z-index:10; outline:0;}
</style>

                <div id="holder">
                    <ul id="scrollbox">
                        <li><a class="slidea" href="#nogo"><span><img src="apollo11_2.jpg" alt="" /><br />Butterflies</span></a></li>
                        <li><a class="slideb" href="#nogo"><span><img src="apolloLaunch_2.jpg" alt="" /><br />Shy</span></a></li>
                        <li><a class="slidec" href="#nogo"><span><img src="bumper_2.jpg" alt="" /><br />Otter</span></a></li>
                        <li><a class="slided" href="#nogo"><span><img src="./bildergross/Launch_2.jpg" alt="" /><br />Monkey</span></a></li>
                        <li><a class="slidee" href="#nogo"><span><img src="./bildergross/Liftoff_2.jpg" alt="" /><br />Monkey2</span></a></li>
                        <li><a class="slidef" href="#nogo"><span><img src="lightin_2.jpg" alt="" /><br />Nuts</span></a></li>
                        <li><a class="slideg" href="#nogo"><span><img src="SR71_2.jpg" alt="" /><br />Pelicans</span></a></li>
                        <li><a class="slideh" href="#nogo"><span><img src="SR-71_2.jpg" alt="" /><br />Kiwi</span></a></li>
                        <li><a class="slidei" href="#nogo"><span><img src="STS-1_2.jpg" alt="" /><br />Lizard</span></a></li>
                        <li><a class="slidej" href="#nogo"><span><img src="STS-121_2.jpg" alt="" /><br />Paddling</span></a></li>
                        <li><a class="slidek" href="#nogo"><span><img src="dsc_0045.jpg" alt="" /><br />Trees</span></a></li>
                    </ul>
                </div>

Alles anzeigen

wie du siehst werden die bilder im css über class="slideX" angesprochen, X steht für den jeweiligen buchstaben. könnte ich das mit zahlen lösen die dann inkrementiert werden? Das a das du in eine variable packst ist ja nur der name des tags.

Bandit

Benutze bitte die richtigen bbCodes für den PHP-Quellcode

Die 24 sollte eigentlich eine 26 sein, von a bis z Außerdem sollte das Script so einen Block

Code

#scrollbox a.slidea {background:url(apollo11_1.jpg) no-repeat center center;}
#scrollbox a.slideb {background:url(apolloLaunch_1.jpg) no-repeat center center;}
#scrollbox a.slidec {background:url(bumper_1.jpg) no-repeat center center;}
#scrollbox a.slided {background:url(./bilderklein/Launch_1.jpg) no-repeat center center;}
#scrollbox a.slidee {background:url(./bilderklein/Liftoff_1.jpg) no-repeat center center;}
#scrollbox a.slidef {background:url(lightin_1.jpg) no-repeat center center;}
#scrollbox a.slideg {background:url(SR71_1.jpg) no-repeat center center;}
#scrollbox a.slideh {background:url(SR-71_1.jpg) no-repeat center center;}
#scrollbox a.slidei {background:url(STS-1_1.jpg) no-repeat center center;}
#scrollbox a.slidej {background:url(STS-121_1.jpg) no-repeat center center;}
#scrollbox a.slidek {background:url(dsc_0045_0.jpg) no-repeat center center;}

Alles anzeigen

erzeugen und das ist ja das, was du brauchst.

Lehrling1991

das war leider nur ein beispiel, wies dann aussehen soll. eingefügt werden die sachen per php. der user hat nämlich ein backend mit welchem er die bilder raufladen kann. das script erzeugt 2 bilder, das thumbnail und das richtige bild.

da das thumbnail in css geschrieben ist, hab ich nun das problem, den mit dem php code etwas im css einzufügen.

hier nochmal der code, erweitert um die php-teile. das grosse bild ist kein problem. das thumbnail will mir einfach nicht gelingen.

PHP

<style>
#holder {position:relative; background:transparent url(vertical-slide/photographer.jpg) 90px 0 no-repeat; margin-bottom:10px; width:750px; height:400px;}
#scrollbox {padding:0; margin:0; width:110px; list-style:none; height:500px; overflow:auto; float:right;}
#scrollbox li {float:left;}




#scrollbox a {display:block; color:#3333cc; text-decoration:none; border:1px solid #fff; width:75px; height:56px; float:left; padding:5px; font-family:"trebuchet ms", sans-serif; font-size:14px; text-align:center;}



<?php
    include("./config.inc.php3");


    //Verbindung aufbauen
    $connection=mysql_connect($mysqlhost, $mysqluser, $mysqlpwd) or die("Verbindungsversuch fehlgeschlagen");

    //Datenbank anwählen
    mysql_select_db($mysqldb, $connection) or die("Konnte die Datenbank nicht waehlen.");


    $sql = "SELECT * FROM Fotogalerie ORDER BY Position";
    $sql_query = mysql_query($sql) or die("Keine erfolgreiche Abfrage");

    //aktuelle Daten auswählen und in Variablen speichern
    while ($data = mysql_fetch_array($sql_query))
    {
        $Pfad = $data['Bild'];
        echo "#scrollbox a.slide".$data['ID']." {background:url(".$Pfad.") no-repeat center center;}";
    }
?>






#scrollbox a span {display:block; position:absolute; left:-9999px; top:0;}
#scrollbox a span img {border:0;}


#scrollbox a:hover {border:1px solid #888;}
#scrollbox a:hover span {width:480px; height:500px; left:90px; background:#66cc00; z-index:100;}


#scrollbox a:active {border:1px solid #000;}
#scrollbox a:focus {border:1px solid #000; outline:0;}


* html #scrollbox a:active span {width:480px; height:400px; top:0; left:90px; color:#3333cc; background:#fff; z-index:-1;}
#scrollbox a:focus span {width:480px; height:500px; top:0; left:90px; color:#3333cc; background:#66cc00; z-index:10; outline:0;}
</style>


                <div id="holder">
                    <ul id="scrollbox">
                        <?php
                            $sql = "SELECT * FROM Fotogalerie ORDER BY Position";
                            $sql_query = mysql_query($sql) or die("Keine erfolgreiche Abfrage");

                            //aktuelle Daten auswählen und in Variablen speichern
                            while ($data = mysql_fetch_array($sql_query))
                            {
                                //echo "<li><a class='slide".$data['ID']."' href='#nogo'><span><img src='./fotogross/".$data['Bild']."' alt="" /><br />TEST</span></a></li>";
                                echo "<li><a class='slidea".$data['ID']."' href='#nogo'><span><img src='./fotogross/".$data['Bild']."' alt='' /><br />Butterflies</span></a></li>";
                            }
                        ?>
                    </ul>
                </div>

Alles anzeigen

hast du ne idee?

Bandit

Hast du dir dem HTML/CSS-Code, den der Browser bekommt, mal angesehen?

Tags