PHP im iframe - Anfänger sucht Hilfe beim Webdesign

keinWebMaster

Hallo.

Ich habe eine kleine Internetseite mit einem Homepagebaukasten erstellt.
Soweit war das jetzt mal ok für den Anfang. Nun hat der Anbieter aber gedacht, das man zusätzlich bezahlen sollte, wenn man mehr als 5 Seiten erstellt.
Nun bin ich praktisch gezwungen, selber eine Seite zu erstellen.

Das Layout habe ich mit Gimp erstellt und nun per CSS (hoffentlich einigermaßen richtig) zusammen gebaut.
Die CSS ist recht groß, weil ich das fast alles dort eingebaut habe...kann man bestimmt anders machen.

Nun hatte der Webspace Anbieter früher auch mal eine Bildergalerie, die gar nicht schlecht war.
Leider gibt es diese auch nicht mehr, weshalb ich nun auch hier etwas anderes benutzen muss.
Das beste was ich bis jetzt gesehen habe war, ein PHP (script?) das ein Verzeichnis ausließt und dann die Bilder dort anzeigt.
Es funktioniert zwar, aber so richtig schön ist das nicht.
Ich möchte mich aber jetzt nicht Wochenlang damit beschäftigen, auch werden nur gelegentlich neue Bilder dazu kommen, deshalb wollte ich das erst mal so lassen.

http://nagel-und-design.de/bilder.html

Das ist die Seite über die es geht.
Klicke ich nun auf ein Bild, erscheint dies in groß, nun möchte ich aber einen Link einfügen, der mich wieder zurück bringt.
Im Browser auf "zurück" klicken ist ja doof.
Der "Zurück" Link sollte eigentlich erscheinen wenn das Bild in groß angezeigt wird, aber wenn ich den irgend wo anders rein packe, geht meist gar nichts mehr.

Mal generell gefragt: Ist das (für den Anfang) mal so ok was ich da gemacht habe ?
Kennt jemand eine Möglichkeit für den "Zurück" Button/Link oder eine bessere Möglichkeit eine Galerie zu erstellen ?

Hier mal die Dateien :

bilder.html

HTML

<!DOCTYPE html >
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"/>
<title>Nagel-und-Design.de</title>


<link rel="stylesheet" type="text/css" href="style.css"/>
</head>


<body>
<table align="center">
    <tr>
     <td>
<div id="root">


    <div id="header">
        <div id="bg"></div>
        <div id="logo1"></div>
        <div id="logo2"></div>
        <div id="header_logo"></div>
        <div id="header_re"></div>
    </div>


    <div id="menue_bg">


       <div class="menue_home">
            <a href="bilder.html"></a>
       </div>


       <div class="menue_bilder">
            <a href="bilder.html"></a>
       </div>


       <div class="menue_service">
            <a href="bilder.html"></a>
       </div>


       <div class="menue_kontakt">
            <a href="bilder.html"></a>
       </div>


       <div class="menue_design">
            <a href="bilder.html"></a>
       </div>


    </div>


    <div id="main_bg">
        <div class="content_left">
        <table class="content_left_table" >
            <tr>
                <td>




    <iframe style="border: 0; width: 850px; height: 600px" src="test.php/"></iframe>


                </td>
            </tr>
        </table>
        </div>


    </div>


    <div id="foot1_bg">
        <div class="foot1_pics">
            <div class="foot1_pics_1"></div>
            <div class="foot1_pics_2"></div>
            <div class="foot1_pics_3"></div>
        </div>
    </div>


    <div id="foot2_bg">
         <div class="foot2_copy">
           <img src="images/copy.png" />
         </div>


        <div class="foot2_pic_impress">
            <a href="index.html">
            <!-- <span>&nbsp;</span> -->
            </a>
        </div>


        <div class="foot2_pic_daten">
            <a href="index.html">
            <!-- <span>&nbsp;</span> -->
            </a>
        </div>


    </div>


</div>


    </td>
  </tr>
</table>
</body>
</html>

Alles anzeigen

style.css

Code

body {
background: url(images/bg.png);
margin:0px auto;
min-width:1000px;
}


a {
  outline: none;
}


a:link {
    color: #FFF;
}


a:visited {
    color: #FFF;
}


a:hover {
    color: #FFF;
}


a:active {
    color: #FFF;
}


#root {
    width:1000px;
    position:relative;
}


#header {
    width:1000px;
    height:190px;
    background:url(images/header_bg.png) no-repeat;
    margin:0px auto;
    float:left;
}


#header #bg {
    width:36px;
    height:190px;
    background:url(images/header_bg.png) repeat-x;
    margin:0px auto;
    float:left;


}


#header #logo1 {
    width:383px;
    height:190px;
    background:url(images/logo1.png) no-repeat;
    margin:0px auto;
    float:left;


}


#header #logo2 {
    width:229px;
    height:190px;
    background:url(images/logo2.png) no-repeat;
    margin:0px auto;
    float:left;


}


#header #header_logo {
    width:251px;
    height:190px;
    background:url(images/header_logo.png) no-repeat;
    margin:0px auto;
    float:left;


}


#header #header_re {
    width:101px;
    height:190px;
    background:url(images/header_bg_re.png) repeat-x;
    margin:0px auto;
    float:left;


}


#menue_bg {
    width:1000px;
    height:50px;
    background:url(images/menue_bg.png) repeat-x;
    margin:0px auto;
    float:left;
}
    .menue_home {
         float: left;
         margin-left: 25px;
         width: 82px;
         height: 50px;
         background: url(images/home_both.png) no-repeat;
         background-position: 0px 0px;
    }
    .menue_home:hover {
        background-position: 0px -50px;


    }
    .menue_home a {
         width: 100%;
         height: 100%;
         display: block;
         text-decoration: none;
    }


  /* Bilder ---------------------------------------------*/


    .menue_bilder {
         float: left;
         margin-left: 30px;
         width: 104px;
         height: 50px;
         background: url(images/bilder_both.png) no-repeat;
         background-position: 0px 0px;
    }
    .menue_bilder:hover {
        background-position: 0px -50px;


    }
    .menue_bilder a {
         width: 100%;
         height: 100%;
         display: block;
         text-decoration: none;
    }


  /* Service ----------------------------------------------*/
    .menue_service {
         float: left;
         margin-left: 30px;
         width: 125px;
         height: 50px;
         background: url(images/service_both.png) no-repeat;
         background-position: 0px 0px;
    }
    .menue_service:hover {
        background-position: 0px -50px;


    }
    .menue_service a {
         width: 100%;
         height: 100%;
         display: block;
         text-decoration: none;
    }


  /* Kontakt*/
    .menue_kontakt {
         float: left;
         margin-left: 30px;
         width: 143px;
         height: 50px;
         background: url(images/kontakt_both.png) no-repeat;
         background-position: 0px 0px;
    }
    .menue_kontakt:hover {
        background-position: 0px -50px;


    }
    .menue_kontakt a {
         width: 100%;
         height: 100%;
         display: block;
         text-decoration: none;
    }


   /* Design */
    .menue_design {
         float: left;
         margin-left: 270px;
         width: 105px;
         height: 50px;
         background: url(images/design_both.png) no-repeat;
         background-position: 0px 0px;
    }
    .menue_design:hover {
        background-position: 0px -50px;


    }
    .menue_design a {
         width: 100%;
         height: 100%;
         display: block;
         text-decoration: none;
    }








#main_bg {
    width:1000px;
    height:937px;
    background:url(images/main_bg.png) repeat-x;
    margin:0px auto;
    float:left;
}
    .content_left {


        padding: 50px 25px 10px 35px;


    }
    .content_left_table {
        width:600px;
        height:850px;
        font-family:  Times;
        font-size: 20px;
        font-weight: ;
        color: #FFF;
        background-color: #805890 ;
        padding: 0 25px 10px 35px;
        border-radius:10px;
    }


#foot1_bg {
    clear: both;
    width:1000px;
    height:200px;
    background:url(images/foot1_bg.png) repeat-x;
    float: left;
}


    .foot1_pics {
        padding: 0 0 0 30px ;
    }


    .foot1_pics_1 {
        float: left;
        width: 311px;
        height: 200px;
        background: url(images/foot1_nail_1.png) no-repeat;
    }


    .foot1_pics_2 {
        float: left;
        margin-left: 5px;
        width: 311px;
        height: 200px;
        background: url(images/foot1_nail_2.png) no-repeat;
    }


    .foot1_pics_3 {
        float: left;
        margin-left: 5px;
        width: 311px;
        height: 200px;
        background: url(images/foot1_nail_3.png) no-repeat;
    }


#foot2_bg {
    clear: both;
    width:1000px;
    height:123px;
    background:url(images/foot2_bg.png) repeat-x;
       float:left;
}
     .foot2_copy {
         float:left;
         padding: 27px 0px 0px 28px;
    }




    .foot2_pic_impress {
         margin-top: 27px;
         margin-right: 10px;
         float: right;
         width: 150px;
         height: 50px;
         background: url(images/impress_both.png) no-repeat;
         background-position: 0px 0px;


    }
     .foot2_pic_impress:hover {
         background-position: 0px -50px;
    }


    .foot2_pic_impress a {
         width: 100%;
         height: 100%;
         display: block;
         text-decoration: none;
    }






     .foot2_pic_daten {
         margin-top: 27px;
         float: right;
         width: 330px;
         height: 50px;
         background: url(images/daten_both.png) no-repeat;
         background-position: 150px 0px;


    }
     .foot2_pic_daten:hover {
         background-position: 150px -50px;


    }
    .foot2_pic_daten a {
        width: 100%;
         height: 100%;
         display: block;
         text-decoration: none;
    }

Alles anzeigen

Die Galerie (im Internet gefunden)

HTML

<!DOCTYPE HTML >
<html>
<head>
<title>Bildergalerie</title>
<style type="text/css">
.foto{  border:4px inset; text-decoration: none;  /* Rahmenbreite */
            border-color: #B0B0B0;  /* Rahmenfarbe  */
              margin: 3px;
}
a{
  text-decoration: none;  color: #C4C4C4;   float: left;  /* Textfarbe, evtl. Textgroese  */
}


li{
  /*float: left; */
  color: #A2A2A2;
  list-style-type: none;
  text-align: left;
}
</style>
 </head>


<body style="background-color: #805890">
 <!-- <h1 style="color: #FF9900">Bildergalerie</h1> -->
<?PHP
//verzeichnis lesen
$meinverzeichnis = "bilder/vorschaubilder/";  //getcwd()."/bilder/vorschaubilder/";
$verzeichnis = dir($meinverzeichnis);


while($einlesen=$verzeichnis -> read() ){
        if($einlesen != "." && $einlesen != ".."){
        $dateinamen[] = $einlesen;
    }
    }
$verzeichnis->close();
echo "<ul>";
//Ausgabe
sort($dateinamen);
while(list($bildnummer, $bildname) = each($dateinamen)) {
    if(substr($bildname, -4) == ".jpg")
    {
    $ohnejpg = preg_replace("/.jpg/","",$bildname);
    echo "<li><a href=\"/bilder/".$bildname." \" target=\"_self\">
    <img class='foto' alt=".$ohnejpg." src=\"/bilder/vorschaubilder/".$bildname ."\">
     </a>
    </li>";
    }
    }
echo "</ul>";
echo "<br>";
echo "<a href=\"/bilder.html\">...Zur&uuml;ck</a>" ;
?>
</body>
</html>

Alles anzeigen

Würde mich sehr freuen, wenn mir jemand ein zwei Tipps geben kann.
Es ist eine Seite für das Nagelgewerbe meiner Frau. Die Internetseite ist eher dafür da um zu zeigen, das eine Seite da ist.
Deshalb soll das ganze auch von den Kosten her möglichst klein gehalten werden. Ein professioneller Webdesigner käme deshalb nicht in frage.

Arne Drews

Hallo,

Mach das ohne iframe.

Wenn Du zur Anzeige des Bildes den Bildnamen ( btw. Du sollest Leer- und Sonderzeichen im Bilddateinamen besser weglassen ) per Parameter überträgst, kann das PHP-Script erweitert werden, so dass es entweder ein Bild anzeigt oder eben die Galerie.
Und da Du Dich dann nicht in einem iframe befindest, kannst Du auch einen ganz normalen Link zur Galerie als "Zurück"-Button einbauen.

Gruß Arne

Bandit

Wie wäre es denn z.B. mit http://www.w3schools.com/howto/howto_js_lightbox.asp

keinWebMaster

Zitat von Arne Drews

Hallo,

Mach das ohne iframe.

Ja mit dem iframe finde ich auch nicht so gut. Das ist doch noch ein überbleibsel von frontpage ?
Das habe ich auch nur eingefügt, weil das der Anbieter selber so in der Hilfe hat...mit seiner neuen Galerie, die aber total "nicht schön" ist.

Die Leerzeichen in den Dateinamen sind nur weil ich eben noch einfach etwas kopiert habe um mal schnell etwas anzeigen zu lassen. Leerzeichen fliegen dann natürlich raus, aber danke für den Hinweis.

Ich habe nur einige Grundkenntnisse in HTML und CSS, mit PHP kenne ich mich noch weniger aus.
Das hier genutzte habe ich wie gesagt im Internet gefunden.
Wie baue ich das denn ohne iframe ein ?
Ich hab auch schon danach gesucht, aber ich glaube ich suche nach den falschen begriffen...oder es kommen Beiträge von 2005 eben mit iframe

Was mir an dem PHP Beispiel gefallen hat, war die Sache das man nur die Bilder hochladen und am HTML Code nichts mehr machen muss.
Kannst du mir kurz zeigen wie man das mit der Parameterübergabe macht ? Geht das dann auch noch so automatisch wie jetzt ?

Bedanke mich schon mal für deine Antwort !

- - - Aktualisiert - - -

Zitat von Bandit

Wie wäre es denn z.B. mit http://www.w3schools.com/howto/howto_js_lightbox.asp

Das LightBox hatte ich schon mal gesehen. Hatte den Sinn da nicht ganz verstanden (das war aber bevor ich das PHP Beispiel gefunden hatte) da man hier sehr viel von Hand machen musste.
Ich wollte zuerst so was wie JoJoThumb also ein externes Programm das dann HTML ausgibt, aber ich glaube das brauche ich gar nicht.
Da kommen jetzt mal Bilder rein und dann bleibt das so.

Schau ich mir direkt mal an, das hier sieht nach einer guten Anleitung aus !

keinWebMaster

Hallo !
So, habe das mit dem LightBox mal versucht, ist ganz ok würde ich sagen.
Die Anpassung mit der Breite war etwas schwierig, ich probiere da immer die ganzen widht: xxx Werte durch bis ich das richtige gefunden habe

Danke schon mal für eure Hilfe !

Tags