Galerie Einstellungen

[FeierFee]

Könnte mir vielleicht sagen wie ich am besten eine Galerie erstelle mit Phase5?
Ich hätte es gerne wenn alle bilder ordentlich aufgestellt sind wie in eine Tabelle

[stwie]

Könnte mir vielleicht sagen wie ich am besten eine Galerie erstelle mit Phase5?
Ich hätte es gerne wenn alle bilder ordentlich aufgestellt sind wie in eine Tabelle

Na ich will es einmal versuchen.

Ich habe gerade eine Arbeitsversion, die in IE6, FF und Opera für Windows funktioniert.
Man kann die Sache verkürzen, indem man den Teil zwischen den "span" Teilen weglässt. Dann kann man auch den ganzen Codeteil mit :hover, :link und z-index weglassen, mir ging es aber darum, beim Überfahren der Thumbs mit der Maus das Bild in Groß angezeigt zu bekommen.

Verbesserungsvorschläge sind jederzeit möglich und willkommen.

Wichtig ist es zu wissen, dass ich das Ganze auf die Schnelle aus einem größeren Projekt herauskopiert habe. ich hoffe es funktioniert.

Zuerst der html-Code (Ausschnitt), das Einbinden des nachfolgenden css-codes über style oder als Datei nicht vergessen

QUELLTEXT

<div id="main">
<div id="galerie">
     <div class="bildcontainer z9">
          <div class="bild l">
                <a href="#"><img src="blume-1.jpg" alt="Blume1">
                      <span><img src="blume-1.jpg" alt="Blume1"></span>
                </a>
          </div>
     <div class="text">Text zu blume1</div>
     </div>
     <div class="bildcontainer z8">
     <div class="text">Text zu blume2</div>
          <div class="bild r">
                <a href="#"><img src="blume-2.jpg" alt="Blume2">
                      <span><img src="blume-2.jpg" alt="Blume2"></span>
                </a>
          </div>
     </div>
     <div class="bildcontainer z7">
          <div class="bild l">
                <a href="#"><img src="blume-3.jpg" alt="Blume3">
                      <span><img src="blume-3.jpg" alt="Blume3"></span>
                </a>
          </div>
          <div class="text">text zu Blume3</div>
     </div>
     <div class="bildcontainer z6">
          <div class="text">Text zu Blume4</div>
          <div class="bild r">
                <a href="#"><img src="blume-4.jpg" alt="Blume4">
                      <span>
                               <img src="blume-4.jpg" alt="Blume4">
                               <div><p>Das ist nur ein weiterer Text, der ganz lang sein kann</div>
                      </span>
                </a>
          </div>
     </div>
</div>
</div>

Dann der css-code

QUELLTEXT

div#main
{
       position:relative;
       float:left;
       padding:0px 10px 10px 10px;
       width:610px;
       border-left:solid 2px #ccccff;
       border-right:solid 2px #000000;
       border-bottom:solid 2px #000000;
       border-top:solid 2px #ccccff;
       color:#000000;
       background-color:#ffffff;
       text-align:left;
       vertical-align:top;
       font-family:verdana,arial,sans-serif;
       font-size:10pt;
       z-index:0;
       overflow:visible;
}

div#galerie
{
       position:relative;
       clear:both;
       margin:0;
       border:0;
}

div#galerie div.bildcontainer
{
       position:relative;
       display:block;
       float:left;
       height:140px;
       margin:5px 0 0 6px;
       border:0px solid #66ccff;
       width:290px;
}


div#galerie div.text
{
       display:block;
       position:relative;
       float:left;
       font-size:9px;
       width:95px;
       margin:10px 0px 10px 0px;
       border:0;
       z-index:0;
}


div#galerie div.bild
{
       float:left;
       width:156px;
       height:108px;
       margin:10px 15px 10px 10px;
       display:block;
       border:0;
       z-index:1;
}

div#galerie div.bild a img, div#galerie div.bild a:link img, div#galerie div.bild a:visited img, div#galerie div.bild a:hover img
{
       display:block;
       height:108px;
       position:relative;
       background:#ffffff;
       border:0px solid #999999;
       position:absolute;
       padding:3px;
       margin:0;
       z-index:3;
}

div#galerie div.bild a span, div#galerie div.bild a span div
{
       display:none;
       text-decoration:none;
}

div#galerie div.bild a:hover span
{
       display:block;
       position:absolute;
       width:589px;
       height:440px;
       background:#ffffff;
       z-index:1000;
       border:1px solid #999999;
}

div#galerie div.l a:hover span
{
       top:125px;
       left:-1px;
}

div#galerie div.r a:hover span
{
       top:125px;
       left:-299px;
}

div#galerie div.r a:hover span img, div#galerie div.l a:hover span img
{
       display:block;
       position:relative;
       float:left;
       height:280px;
       margin:15px;
       background:#ffffff;
       border:1px solid #999999;
       padding:3px;
}

div#galerie div.r a:hover span div, div#galerie div.l a:hover span div
{
       display:block;
       position:relative;
       top:0;
       right:0;
       margin:0;
       background:#ffffff;
       padding:5px;
       overflow:visible;
}


/* Nachfolgend: Hack für den IE 5 und IE 6, da sie sonst die Bildveränderung bei :hover
    nicht mitbekommen
    Eigentlich unsinniger Befehl, aber absolut notwendig: :hover ohne folgenden Part
    (img, div etc.) und dann die gleiche Farb-Deklaration anders dargestellt wie oben */

div#galerie div.l a:hover, div#galerie div.r a:hover
{
       border:0px;
       background:white;
}

/* Definition des z-index, um Überlappungen im Fotoalbum korrekt zu bekommen*/

.z1

{
       z-index:1;
}
.z2

{
       z-index:2;
}
.z3

{
       z-index:3;
}
.z4

{
       z-index:4;
}
.z5

{
       z-index:5;
}
.z6

{
       z-index:6;
}
.z7

{
       z-index:7;
}
.z8

{
       z-index:8;
}
.z9

{
       z-index:9;
}
.z10

{
       z-index:10;
}

[FeierFee]

Also ich habe alles jetzt kopiert und es sieht ganz gut aus. Ich werde mal meine sachen einfügen und sehen wie es dann aussieht. Danke, du hast mich gerettet.

[stwie]

Ich kann in diesem Zusammenhang auch das Buch "Webdesign mit CSS" von Jens Meiert im O´Reilly-Verlag empfehlen. Insbesondere Kapitel 1 und 12 dürften interessant sein.

Jens Meiert hat auf seiner Homepage die Designs mit code vorgestellt. Die Beispielseiten sind mit css- und html-code als zip-Datei abrufbar.
Zur Verwendung verweise ich ausdrücklich auf das Impressum von Jens Meiert.

http://meiert.com/de/publications/

[FeierFee]

Bei mir ist das so das ich gerade eine 1€ Maßnahme mache und wir ein auftrag gekriegt haben eine Webseite zu gestalten. Leider habe ich noch kein rechner zuhause, was sich aber bald wieder ändern wird. Ich mache hier sowas zum ersten mal.

könntest du mir vielleicht sagen wie ich die bilder neben einander stellten kann? Ich bräuchte nur eine kleine aufklärung.


-------------------------------------

Als anfänger fühlt man sich manchmal voll zum oder als ob man , aber es ist jedes mal ein Gefühl wenn man sieht was man erreichen kann.

Der Beitrag wurde von FeierFee bearbeitet: 11.09.2006 - 12:46

[Conny]

könntest du mir vielleicht sagen wie ich die bilder neben einander stellten kann?

Hallo,
Du schreibst einfach die <img src=""> Tags neben einander und nicht unter einander, wenn die Bilder insgesammt nicht zu breit (für den Bildschirm) sind, werden sie auch nebeneinander erscheinen.

cu
Conny

[FeierFee]

Hab's gerade geklärt aber trotzdem danke

[Google Bot]