Verfügbare Informationen zu "CSS Photogalerie"
Qualität des Beitrags: Beteiligte Poster: Jowra - Sandy1969 - Jule - Rule Forenurl: Klick Forenbeschreibung: >> Bilder-Galerie aus dem Unterforum: Sammelsurium Webdesign Antworten: 57 Forum gestartet am: Freitag 17.12.2004 Sprache: deutsch Link zum Originaltopic: CSS Photogalerie Letzte Antwort: vor 18 Jahren, 8 Monaten, 28 Tagen, 8 Stunden, 45 Minuten
Alle Beiträge und Antworten zu "CSS Photogalerie"
Re: CSS Photogalerie
Jowra - 26.07.2005, 22:41CSS Photogalerie
Ich mach mal einen neuen Thread auf, dann findet man es später auch schneller wieder. ;)
Sandy wie gut bist Du denn in HTML und CSS? Nicht, daß ich nachher irgendwo ganz vorne anfange und irgendwann schreibst Du "Das weiß ich doch alles." :D
Also grundsätzlich brauchst Du erst mal eine (X)HTML-Datei (z.B. galerie.html) und für die Formatierung eine CSS-Datei. Bei dieser Art von Galerie werden die kleinen Vorschaubilder über eine sogenannte Liste (in HTML ist das <li></li>) dargestellt, die dann mit CSS formatiert wird.
(Geht gleich weiter...)
Re: CSS Photogalerie
Jowra - 26.07.2005, 23:09
Also für das Beispiel nehme ich jetzt mal diese Galerie mit nur 6 Bildern, um es erst mal etwas übersichtlicher zu halten. Das Grundgerüst für die HTML-Datei sieht dann so aus:
Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<title>Sandys Galerie</title>
</head>
<body>
<div id="container">
<ul>
<li><a class="vorschau1" href="#"><span><img src="bild1.jpg" alt="Bild1" /></span></a></li>
<li><a class="vorschau2" href="#"><span><img src="bild2.jpg" alt="Bild2" /></span></a></li>
<li><a class="vorschau3" href="#"><span><img src="bild3.jpg" alt="Bild3" /></span></a></li>
<li><a class="vorschau4" href="#"><span><img src="bild4.jpg" alt="Bild4" /></span></a></li>
<li><a class="vorschau5" href="#"><span><img src="bild5.jpg" alt="Bild5" /></span></a></li>
</ul>
</div>
</body>
</html>
Re: CSS Photogalerie
Sandy1969 - 26.07.2005, 23:25
Tja, wie soll ich sagen :shock: ? Ich habe mir vor einigen Jahren zwei HP's gebastelt. Habe damals nur mit einem normalen Editor einfach mal angefangen. Zuerst einige Templates aus dem Netz geholt, aber da war einfach nichts wirklich passendes dabei. Dann also versucht, die Vorlagen meinen Wünschen entsprechend zu ändern. Das war mir dann bald zu blöd, also habe ich angefangen, alles komplett selber zu machen. Damals hatte ich HTML einigermaßen gut drauf 8) , aber leider hatte ich dann fast drei Jahre überhaupt kein Interesse mehr daran. Vor einigen Tagen habe ich von meiner Freundin Dreamweaver bekommen und das hat mich auf die Idee gebracht, meine HP's zu überarbeiten. Ganz besonders, weil sich mein Geschmack seit damals sehr geändert hat und ich das Design von der einen Hp mittlerweile ziemlich schrecklich finde :rolleyes: . Naja, und deshalb muß ich nun wieder fast von vorne anfangen. In HTML kann ich mich wohl ziemlich schnell wieder einarbeiten, aber mit CSS habe ich noch nie gearbeitet, außer die letzten Tage. Die Startseite meiner überarbeiteten (komplett neu gestalten) Hp ist soweit fertig, nun fehlt eben noch die Photogalerie. Und da ich nun auf den Geschmack gekommen bin mit CSS, habe ich mich in die Idee verrant, die Galerie ebenfalls mit CSS zu erstellen.
Boah, soviel schreibe ich normalerweise nicht. Bin eigentlich der etwas kurzangebundene Typ :rolleyes: .
LG
Sandy
Re: CSS Photogalerie
Jowra - 26.07.2005, 23:36
Lol.
Gut, also kopiere mal den obigen HTML-Code in den Dreamweaver oder auch in einen normalen Editor (Ich tippsel das am liebsten in einem recht einfach Texteditor.) und dann speichere es mal als HTML-Datei. In den gleichen Ordner kommen auch die Bilder, die Du anzeigen lassen willst (Bild1.jpg, Bild2.jpg usw.).
Wenn Du jetzt die Datei aufrufst, müßte das so aussehen:
http://www.jowra.de/panne/css_galerie/galerie_1.html
Weit entfernt von dem was es mal werden soll, aber der CSS-Teil fehlt ja auch noch völlig. ;)
Re: CSS Photogalerie
Jowra - 26.07.2005, 23:48
Eigentlich sind bei der ganzen Sache noch ein paar Vorüberlegungen wichtig.
Zum einen, wieviele Bilder Du ingesamt auf Deiner Homepage unterbringen willst (wenn es 100 oder mehr werden sollen, ist diese Galerie vielleicht nicht ganz so geeignet, würde theoretisch aber auch gehen) und Du solltest Dir vorher schon ungefähr das Format überlegen der Bilder überlegen.
Bei Jules Galerie: http://www.pixelpanne.de/galerie_jule.html sind das z.B. 500 x 375 Pixel. Viel größer sollte man das nicht machen, weil alle Bilder auf der Seite vorab geladen werden und wenn Du zu viele Bilder auf der Seite hast bzw. die Bilder zu groß sind, dann dauert das irgendwann ewig mit dem Laden und ein Besucher Deiner Seiten, geht vielleicht schon wieder bevor das letzte Bild geladen ist. ;)
Re: CSS Photogalerie
Jowra - 27.07.2005, 00:16
Nun tasten wir uns aber mal langsam an den CSS-Part ran. 8)
Zunächst einmal wurde CSS ja "erfunden", um eine klare Trennung von Inhalt und Layout zu schaffen, was sehr praktisch ist. (X)HTML ist eine sogenannte Auszeichnungssprache und sollte nur die logische Struktur des Dokumentes beinhalten, also Überschriften, Sub-Überschriften, Absätze, Listen, Bilder usw. Die eigentliche Formatierung, also wie z.B. ein Absatz aussieht (Schriftart, Schriftfarbe, Rahmen usw.), erfolgt dann durch CSS.
Es gibt grundsätzlich 3 Möglichkeiten, CSS in HTML einzubinden.
1. Inline-CSS
Hierbei wird CSS durch das style-Attribut direkt im HTML-Tag angegeben. Die Formulierung:
Code: <h1 style="color: red;">Hallo, Hallo</h1>
erzeugt also eine Überschrift in roter Farbe.
2. Verwendung des STYLE-Tags
Hier wird im HEAD-Bereich des Dokumentes (<head></head>) die CSS-Formatierung zusammengefaßt. Das geht schon mehr in Richtung: Trennung von Inhalt und Aussehen. Um wieder eine rote Überschrift zu erreichen, würden wir also im BODY-Bereich nur schreiben:
Code: <h1>Hallo, Hallo</h1>
und würden dann folgenden Abschnitt in den HEAD-Bereich einfügen:
Code:
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<title>Sandys Galerie</title>
<style type="text/css">
h1 { color: red; }
</style>
</head>
Damit wären automatisch alle H1-Überschriften rot. Schon sehr praktisch, aber die letzte Variante ist die beste (imho).
3. Externe CSS-Datei
Das Auslagern des gesamten CSS-Teils hat diverse Vorteile. Zum einen ist es so sehr leicht, mehreren Seiten das gleich Aussehen zu geben. Man muß nur die eine CSS-Datei ändern und alle Seiten ändern ihr Aussehen auf einmal (sonst müßte man jede HTML-Datei einzeln bearbeiten :gähn: ). Man kann außerdem den Inhalt schon mal in HTMl fertig machen und kümmert sich später ausschließlich noch um die Präsentation des Inhaltes. Das ist also die komfotabelste Variante HTML und CSS zu kombinieren.
Um eine externe CSS-Datei in das HTML-Dokument einzubinden, verwendet man den LINK-Tag welcher in den HEAD-Bereich kommt.
Code: <head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<title>Sandys Galerie</title>
<link href="galerie.css" type="text/css" rel="stylesheet" />
</head>
Um jetzt also wieder unsere H1-Überschriften rot zu färben, legst Du Dir eine neue Textdatei an und nennst sie z.B. galerie.css. In diese galerie.css schreibst Du nun wieder:
Code: h1 { color: red; }
Speichern und das wars schon. Jetzt lädt die HTML-Datei beim Aufruf die CSS-Datei und interpretiert alle Angaben die in dieser Datei stehen. ich würde Dir auf jeden Fall empfehlen, diese Variantezu verwenden. Ist anfangs vielleicht ungewohnt, aber sie spart später wirklich viel Arbeit.
---------------------------
*hust* Ich hoffe mal, das Ganze ist im Moment nicht zu trocken. :)
Re: CSS Photogalerie
Sandy1969 - 27.07.2005, 01:39
WOW, das geht aber sehr fix bei dir :) . Vielen Dank für deine Hilfe so spät noch. Soweit habe ich das mal gemacht. Ach ja, es sind knapp 100 Bilder, die ich auch meiner HP habe, nach oben offen :D . Ich habe mir auch schon überlegt, wie ich das dann arrangieren soll, alle wird man nicht gleichzeitig auf eine Seite bekommen. Möglicherweise muß ich eben mehrere Seiten mit jeweils ca. 20 Bildern machen. Die Größe der Bilder ist nicht ganz so wichtig, da es keine Detailfotos sind, sondern nur Portraits oder Totalaufnahmen. Jetzt ist es mir zu spät, morgen werde ich dann weiter überlegen und wieder bei euch reinschauen. Finde ich echt klasse, dass ich hier so schnell und problemlos Hilfe bekomme.
Danke nochmal und Grüße (werde heute Nacht bestimmt von geschweiften Klammern träumen ;) )
Sandy
Re: CSS Photogalerie
Jule - 27.07.2005, 09:47
ich würde in dem Fall die Bilder thematisch unterteilen und dann verschiedene Seiten machen, sonst dauert das echt ewig mit dem Laden...
du machst Portraits? Ich suche nämlich gerade ein paar schöne für eine Homepage...
Re: CSS Photogalerie
Jowra - 27.07.2005, 11:20
Sandy, ich würde auch sagen, daß Du die Bilder vielleicht nach Themen ordnest und so ca. 10-20 auf eine Seite nimmst (geh eher in Richtung 10 ;) ). Hast Du denn eine Vorstellung, wie die Galerie dann aussehen soll? Also eher wie bei den Pixelpanne-Galerien oder wie im Tutorial mit den Hunden? Die kleinen Bilder, links, rechts, oben, unten?
Danach würde sich dann nämlich die CSS-Formatierung richten.
Re: CSS Photogalerie
Sandy1969 - 27.07.2005, 12:27
@ Jule: Neine, ich mache keine Portraits, ich stelle nur welche auf meiner Site aus. Leider bin ich so gar nicht talentiert und naja, das will ich dann auch keinem antun *g*.
Thematisch ordnen ist wohl nicht möglich, da es ja einfach nur Menschen sind, die ich zeige. Aber eine Möglichkeit wäre, sie alphabetisch zu ordnen. Das wird wohl das Beste sein. Immer so 10 bis 20 auf eine Seite und eine vorwärts - rückwärts Möglichkeit.
Re: CSS Photogalerie
Jowra - 27.07.2005, 13:18
OKay, also erst mal hab ich oben in der HTML-Datei noch was vergessen. :oops: Hier ist die richtige Variante:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<title>Sandys Galerie</title>
</head>
<body>
<div id="container">
<ul>
<li><a class="galerie vorschau1" href="#"><span><img src="bild1.jpg" alt="Bild1" /></span></a></li>
<li><a class="galerie vorschau2" href="#"><span><img src="bild2.jpg" alt="Bild2" /></span></a></li>
<li><a class="galerie vorschau3" href="#"><span><img src="bild3.jpg" alt="Bild3" /></span></a></li>
<li><a class="galerie vorschau4" href="#"><span><img src="bild4.jpg" alt="Bild4" /></span></a></li>
<li><a class="galerie vorschau5" href="#"><span><img src="bild5.jpg" alt="Bild5" /></span></a></li>
</ul>
</div>
</body>
</html>
Bei class="..." mußte noch das "galerie" mit rein.
Re: CSS Photogalerie
Jowra - 27.07.2005, 13:36
Nun fügen wir erst mal im HEAD-Bereich einen Link zur CSS-Datei ein.
Code: <head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<title>Sandys Galerie</title>
<link href="galerie.css" type="text/css" rel="stylesheet" />
</head>
Jetzt legst Du Dir eine neue Datei (einfach mit Texteditor o.ä.) an und speicherst Sie als galerie.css auch ins gleiche Verzeichnis wie die HTML_Datei und die Bilder.
Als erstes formatieren wir mal den BODY-Tag. Du kannst in CSS für jeden HTML-Tag eine Formatierung schreiben, also z.B. für BODY, P, IMG usw.
in der CSS-Datei sieht das dann so aus:
Code: body {
...
}
Von den geschweiften Klammern hast Du ja schon geträumt. ;) In unserem Fall schreibst Du mal folgendes in die galerie.css:
Code: body {
text-align: center;
font-family: Trebuchet MS, Verdana, Tahoma, Arial, sans-serif;
font-size: 13px;
}
Das text-align: center; ist nur für den Internet Explorer, der würde sonst nicht verstehen, daß unsere Galerie auf der Webseite zentriert werden soll. Mit font-family legst Du die generelle Schriftart der Homepage fest. Falls auf einem PC mal eine Schriftart nicht vorhanden sein sollte, dann versucht der Browser die nächste Schriftart zu finden, deswegen ist es immer ganz praktisch, mehrere Schriftarten aufzuzählen. Die Schriftgröße (font-size) ist Geschmackssache, ich hab hier mal 13 Pixel genommen, aber Du kannst das natürlich beliebig ändern. (Ist sowieso nur für den Fall, das Du in Deiner Galerie überhaupt Texte verwenden willst.
Re: CSS Photogalerie
Jowra - 27.07.2005, 14:08
Als nächstes kommt gleich mal das hier ins CSS:
Code: #container {
position:relative;
width:750px;
height:400px;
margin: 50px auto 0 auto;
border:1px solid #999999;
}
Wie Du siehst, haben wir die ID "container" bereits in der HTML-Datei festgelegt. Hierbei handelt es sich um ein DIV-Element, das ist erst mal nichts weiter als eine Box oder ein Rahmen um den Inhalt. Damit wir unser DIV in der CSS-Datei "ansprechen" können, mußten wir ihm einen Namen geben. Das machst Du eben mit id="container". Somit heißt unsere Box jetzt container und diese IDs werden im CSS-File dann mit einem #-Symbol vor dem Namen referenziert (Du kannst also auch einen anderen Namen verwenden, z.B. id="kasten" oder so. ;) ).
Wir legen nun zunächst mit position: relative; die Positionierungsart des Kastens fest. Später vielleicht mehr dazu, jetzt laß es mal einfach so. Dann bestimmen wir die Breite der Box, width: 750px; was ein ganz guter Wert ist, denn dann können auch User mit einer Bildschirmauflösung von 800x600 Pixeln, Deine Galerie noch vollständig sehen. Direkt danach bekommt der Kasten auch noch eine Höhe nämlich 400 Pixel (height: 400px;).
Mit margin kannst Du einen äußeren Abstand für den Container festlegen. Das Format dafür ist:
margin: abstand_oben abstand_rechts abstand_unten abstand_links;
Hier legst Du also einen Abstand (gemeint ist der Abstand zum Browserfensterrand) von 50px oben und 0 Pixeln unten fest. Die Werte für links und rechts stehen auf "Auto", dadurch wird unserer Container automatisch im Browserfenster zentriert. Und schließlich zeichnen wir noch einen Rahmen um den Kasten, mit:
border: breite linienart farbe
Unser Rahmen hat also eine Breite von einem Pixel, es wird eine durchgezogene Linie gezeichnet (solid, du kannst aber z.b. auch mal dotted probieren.) Die Farbe wird in hexadezimaler Schreibweise angegeben (1-F), was nicht jedermanns Sache ist. Wenn Du lieber mit "normalen" Farbwerten von 1-255 arbeitest, dann schreibst Du:
border: 1px solid rgb(128, 128, 128)
In beiden Fällen also #999999 oder rgb(128, 128, 128), handelt es sich um ein neutrales, mittleres Grau.
Und so sieht jetzt die Galerie aus:
http://www.jowra.de/panne/css_galerie/galerie_2.html
Die Bilder sind immer noch zu groß, die schwarzen Aufzählungszeichen sind immer noch davor und der blaue Rahmen um die Bilder ist auch noch da. Aber: wir haben jetzt schon unsere Box, in der die Galerie dann Ihren Platz findet. :)
---------------
Wenn das zu umständlich geschrieben ist, zu langweilig usw. dann setze mal bitte jemand einen Hilferuf ab. ;)
Re: CSS Photogalerie
Sandy1969 - 27.07.2005, 15:14
Ich bin echt begeistert, wie gut und verständlich du das erklären kannst. Nun verstehe sogar ich, um was es geht *g*. Ich freu mich schon, auf die nächste Lektion :D .
Re: CSS Photogalerie
Jowra - 27.07.2005, 16:13
:D
Das ist wie mit den Photoshop-Tutorials, es ist gar nicht so einfach, an all die Kleinigkeiten zu denken, bei denen vielleicht Nachfragen auftauchen könnten u.ä. Aber es macht Spaß. :)
Jetzt erst mal keine Lektion, sondern Du mußt noch was vorbereiten. Du mußt zu jedem Bild noch ein sog. Thumbnail erzeugen, das dann als Vorschaubild fungiert. Je nach dem wie groß Deine anzuzeigenden Bilder sind, scheint eine Verkleinerung auf 25% ganz praktisch zu sein:
Ich hab jetzt also z.B. zum bild4.jpg noch das Vorschaubild bild4t.jpg in den Ordner gespeichert.
Re: CSS Photogalerie
Jowra - 27.07.2005, 17:00
Jetzt müssen wir erst mal die großen Bilder verschwinden lassen, denn die sollen ja nur angezeigt werden, wenn man mit der Maus über eines der kleinen Vorschaubilder fährt. Folgendes kommt also wieder in die CSS-Datei:
Code: #container a.galerie span {
position:absolute;
top:5px;
left:5px;
width:1px;
height:1px;
overflow:hidden;
}
Das ist jetzt etwas knifflig. Die Formulierung #container a.galerie span bedeutet folgendes: Alle SPAN-Tags die sich innerhalb von Links mit der Klasse "galerie", welche sich wiederum innerhalb der Box "container" befinden, werden von dieser Formatierung beeinflußt. Ich nehme mal noch mal einen teil der HTML-Datei zur Hand:
Code: <div id="container">
<ul>
<li>
<a class="galerie vorschau1" href="#">
<span>
<img src="bild1.jpg" alt="Bild1" />
</span>
</a>
</li>
Hier siehst Du den Link mit der Klasse "galerie" (Zu den Klassen vielleicht später noch ein Wort.) Innerhalb des Links findest Du das Bild bild1.jpg welches noch mal von einem SPAN-Tag umschlossen ist. SPAN-Tags funktionieren ähnlich wie DIVs, nur das sie nicht den Boxencharakter haben, sondern einzelne, kleinere Elemente einschließen (Wörter oder ein Bild z.B.). Will man z.B. gezielt ein Wort in roter Farbe schreiben, dann kann man dies so machen:
Code: ... Freitag sollen es <span style="color: red;">35°C</span> werden. Aber warum nur? Das ist doch nicht normal!...
Und auf diesen SPAN-Tag greifen wir also zu, um unsere Bilder auszublenden. (Es ist schwierig zu erklären...).
Grundsätzlich geht es darum, die großen Bilder alle 1x1 Pixel groß (klein) zu machen, damit man sie zunächst nicht mehr sieht (fast nicht mehr sieht). Mit der Positionierung position: absolute; und left: 5px; sowie top: 5px; definieren wir zunächst die linke obere Ecke der Bilder (am Beispiel kannst Du das vielleicht gleich besser nachvollziehen). Mit den schon bekannten Attributen width und height setzen wir die Bildgröße auf 1x1 Pixel. overflow: hidden; schließlich muß rein, aber --> :schaem: ich weiß jetzt selbst nicht genau was es bewirkt. Einer der wenigen CSS-Befehle mit denen ich mich noch nicht weiter beschäftigt habe. Jedenfalls funktioniert es nicht ohne diesen.
Der neuest Zwischenstand sieht nun so aus:
http://jowra.de/panne/css_galerie/galerie_3.html
Du kannst links oben innerhalb des Conatiners das eine Pixel trotzdem erkennen, aber es stört nicht wirklich, oder? Der dickere Punkt in der Mitte ist noch ein Aufzählungszeichen der UL-Liste, der verschwindet aber noch.
Die CSS-Datei "galerie.css" sieht mittlerweile so aus:
Code: body {
text-align: center;
font-family: Trebuchet MS, Verdana, Tahoma, Arial, sans-serif;
font-size: 13px;
}
#container {
position:relative;
width:700px;
height:400px;
margin: 50px auto;
border:1px solid #999999;
}
#container a.galerie span {
position:absolute;
width:1px;
height:1px;
top:5px;
left:5px;
overflow: hidden;
}
Re: CSS Photogalerie
Sandy1969 - 27.07.2005, 18:20
Ok, soweit so gut. Die Bilder habe ich verkleinert, mal sehen, was als nächstes kommt.
Re: CSS Photogalerie
Jowra - 27.07.2005, 19:11
Jetzt wirds langsam interessant. In die CSS-Datei kommt nun folgendes:
Code: #container a.galerie, #container a.galerie:visited {
display: block;
color: #000;
text-decoration: none;
border: 1px solid #000;
margin: 1px 2px 1px 2px;
text-align: left;
cursor: default;
}
Damit werden nun die Links des Containers definiert (die normalen: #container a.galerie und die bereits besuchten: #container a.galerie:visited), also unsere Vorschaubilder. Das display: block; bedeutet, das die Links als Ganzes rechteckig (als Block eben) dargestellt werden, sonst würde es nicht funktionieren. color: #000; setzt die Textfarbe auf schwarz, was natürlich nur eine Rolle spielt, wenn Du auch Text verwendest. ;) text-decoration: none; läßt den standardmäßigen Unterstrich bei Links verschwinden, der in unserem Fall natürlich sehr unschön aussehen würde. Das Border-Attribut kennst Du ja schon, die Vorschaubilder erhalten also hier einen 1px-breiten schwarzen Rahmen. Durch margin wiederum wird ein kleiner Abstand zwischen den Bildern geschaffen (Das sind alles Punkte, an denen Du später eingreifen und die Galerie nach Deinen Wünschen anpassen kannst.). text-align: left; legt fest, daß Text (so vorhanden) linksbündig dargestellt wird und cursor:default; verhindert, daß beim Überfahren der Vorschaubilder diese Hand mit Finger erscheint, es wird als wie immer der einfach Mauspfeil als Cursor angezeigt.
Wenn Du übrigens bei bestimmten CSS-Befehlen wissen möchtest, was da alles für Werte verwendet werden können, dann schau mal hier: http://de.selfhtml.org/css/eigenschaften/index.htm Wenn Du allerdings z.B. den NVU-Editor verwendest oder auch Dreamweaver, dann kannst Du das meist komfortabel aus einer Liste auswählen. :)
So und nun werden noch unsere Vorschaubilder festgelegt:
Code: #container a.vorschau1 { background:url(bild1t.jpg); height:67px; width:100px; }
#container a.vorschau2 { background:url(bild2t.jpg); height:67px; width:100px; }
#container a.vorschau3 { background:url(bild3t.jpg); height:67px; width:100px; }
#container a.vorschau4 { background:url(bild4t.jpg); height:67px; width:100px; }
#container a.vorschau5 { background:url(bild5t.jpg); height:67px; width:100px; }
Mit background: url(bild1t.jpg); gibst Du an, wo Deine Thumbnails liegen (das muß natürlich dann mit den großen Bildern in der HTML-Datei übereinstimmen) und bei height und width trägst Du Breite und Höhe der Thumbnails ein. Die in meinem Beispiel sind 100 Pixel breit und 67 Pixel hoch. Nimmst Du mehrere Bilder, geht es natürlich entsprechend weiter (vorschau6 -> bild6t.jpg usw.). Das CSS-File sieht also mittlerweile so aus:
Code:
body {
text-align: center;
font-family: Trebuchet MS, Verdana, Tahoma, Arial, sans-serif;
font-size: 13px;
}
#container {
position:relative;
width:700px;
height:400px;
margin: 50px auto;
border:1px solid #999999;
}
#container a.galerie span {
position:absolute;
width:1px;
height:1px;
top:5px;
left:5px;
overflow: hidden;
}
#container a.galerie, #container a.galerie:visited {
display: block;
color: #000;
text-decoration: none;
border: 1px solid #000;
margin: 1px 2px 1px 2px;
text-align: left;
cursor: default;
}
#container a.vorschau1 { background:url(bild1t.jpg); height:67px; width:100px; }
#container a.vorschau2 { background:url(bild2t.jpg); height:67px; width:100px; }
#container a.vorschau3 { background:url(bild3t.jpg); height:67px; width:100px; }
#container a.vorschau4 { background:url(bild4t.jpg); height:67px; width:100px; }
#container a.vorschau5 { background:url(bild5t.jpg); height:67px; width:100px; }
Na also, das "Menü" ist schon mal da. Jetzt müssen nur noch diese blöden schwarzen Punkte weg und wenn man über die Bilder fährt sollten ja auch noch die großen Bilder angezeigt werden.
http://jowra.de/panne/css_galerie/galerie_4.html
Re: CSS Photogalerie
Sandy1969 - 27.07.2005, 20:28
Jetzt sieht es schon richtig gut aus und man merkt schon, was es mal werden soll *freu*. Ich weiß gar nicht, wie ich dir für deine Hilfe danken soll.
Re: CSS Photogalerie
Rule - 27.07.2005, 20:51
Sandy1969 hat folgendes geschrieben: Jetzt sieht es schon richtig gut aus und man merkt schon, was es mal werden soll *freu*. Ich weiß gar nicht, wie ich dir für deine Hilfe danken soll.
Einfach 3 mal :anbet: (er verdient es) und viele schöne bilder mitpixeln :D
Re: CSS Photogalerie
Jowra - 27.07.2005, 20:58
Hört doch mal auf Ihr Quatsch-Nasen! :clown:
Nein im Ernst, ich mach das gerne. Zum einen habe ich jetzt erst durch das Beschäftigen damit, die Galerie von Nicholls richtig verstanden und zum anderen dachte ich jetzt zwar ein paar Mal, ich mach das etwas langatmig. Aber ich denke, da Sandy gerade mit CSS anfängt (und CSS ist wirklich toll), ist es vielleicht nicht schlecht etwas weiter "unten" anzusetzen und einige Dinge etwas ausführlicher zu erklären. Und außerdem ist das ja hier ein öffentliches Forum, da schaut vielleicht mal jemand mit dem gleichen Problem vorbei und findet das dann auch hilfreich. :)
Re: CSS Photogalerie
Jowra - 27.07.2005, 22:32
So, vom Groben her, kommt jetzt der vorletzte Schritt: Die Formatierung der Liste (also des Menüs mit den Vorschaubildern).
Dazu fügen wir Folgendes hinzu:
Code: #container ul {
width: 214px;
height: 400px;
padding:0;
margin: 0;
list-style-type:none;
float: right;
}
Code: #container li {
float:left;
}
Zunächst wird der UL-Tag (unnummerierte Liste) des Containers formatiert. Die Höhe (height) sollte im Wesentlichen der Höhe des Containers entsprechen, das kann man aber am Ende "feinarbeiten". ;) Bei der Breite (width) hat man die Wahl, wie man die Thumbnails anordnen will. Möchte man 2 Spalten nehmen, dann doppelt so breit wie die Thumbnails, möchte man nur eine Spalte haben, dann nimmt man nur einmal die Breite der Vorschaubilder. Im Beispiel nehme ich jetzt maldas 2-spaltige Layout. margin (Außenabstand) und padding (Innenabstand) sollten auf 0 gesetzt werden, da die verschiedenen Browser die Liste sonst sehr unterschiedlich darstellen. Ganz wichtig dann: list-style-type:none; Damit lassen wir nämlich die ollen schwarzen Aufzählungpunkte verschwinden. 8) Schließlich legen wir noch fest, wo unsere Vorschaubilder im Container erscheinen sollen. Mit float: right; (float ist grundsätzlich ein Textumfluß) setzten wir sie an den rechten Rand.
Die zweite Definition betrifft dann die Listenpunkte (also die Bilder) selbst. Diese sollen im Rahmen des UL-Tags immer "Nachrutschen", also je nach dem wie breit man den UL-Tag definiert hat (siehe Erläuterung zu width); Das mit dem float ist am Anfang etwas schwierig zu verstehen, da hilft meist einfach ein bißchen zu experimentieren (Ich kann aber zu diesem speziellen Punkt auch noch mal ein Extra-Tutorial schreiben).
Und so sieht es jetzt aus:
http://jowra.de/panne/css_galerie/galerie_6.html
One last step to go...
(Mal abgesehen von den Schönheitsoperationen, die später noch folgen. ;) ).
Re: CSS Photogalerie
Sandy1969 - 28.07.2005, 11:14
Oh, jetzt wird's ernst :) . Ich bin schon total gespannt darauf, wie die Galerie dann aussieht, wenn sie fertig ist. Hoffentlich wunderst dich nicht, dass ich keine Fragen habe, aber die komen dann erst, wenn die Galerie steht. Denn dann geht es ans Eingemachte, wenn ich die Galerie dann noch etwas anpassen möchte :D . Bis jetzt tu ich einfach nur, was du mir sagst, aber das wird sich bald ändern ;) .
Re: CSS Photogalerie
Jowra - 28.07.2005, 20:07
(Sorry für die Verspätung mit dem letzten Teil, ist nicht mein Tag heute.)
Nun noch zum letzten und entscheidenden Schritt: dem Hover-Effekt. Hover, das ist der Status wenn man mit der Maus über einen Link fährt und für diesen Hover-Status kann man bestimmte Aktionen auslösen. Im Fall der Galerie heißt das, wir blenden das große Bild ein. Das nutzen wir noch die folgenden CSS-Formatierungen:
Code: #container a.galerie:hover {
border: 1px solid #111;
}
#container a.galerie:hover img {
border: 1px solid #000;
}
#container a.galerie:hover span {
position:absolute;
width: 402px;
height: 268px;
top: 25px;
left: 25px;
}
für a.galerie:hover legen wir einen Rahmen fest, das muß man machen, weil es sonst mal wieder nicht im Internet Explorer funktioniert. :rolleyes: Allerdings kann man sich diesen Effekt auch zu Nutze machen. Du könntest nämlich z.B. einen roten Rahmen festlegen (border: 1px solid red;), dann sieht man immer, über welchem Vorschaubild man sich gerade befindet.
Der zweite Rahmen (a.galerie:hover img) den wir festlegen, gilt für das große Bild, muß man nicht machen, aber wenn man gar keinen Rahmen drum macht, sieht es in den Browsern wieder unterschiedlich aus und das ist nie schön.
Im dritten Teil (a.galerie:hover span) positionieren wir schließlich das große Bild innerhalb des Containers (mit dieser Angabe und der Positionierung der UL-Liste kannst Du also die Galerie auch ganz anders aussehen lassen - z.B. Menü rechts, großes Bild links usw.). Es wird jeweils 25 Pixel von der linken, oberen Ecke entfernt platziert und erhält die Breite und Höhe unseres großen Bildes.
http://jowra.de/panne/css_galerie/galerie_7.html
So, damit steht dann erst mal das Grundprinzip der Galerie, die Du sicherlich noch ganz anders gestalten willst. Eigentlich ist das insgesamt schon ziemlich schwieriger CSS-Stoff und Fragen ergeben sich bestimmt wenn Du selbst anfängst zu basteln. Aber ich hoffe, Du hast ein bißchen den grundlegenden Aufbau der Galerie verstanden (?) und wenn Du jetzt selbst Hand anlegst... Hilfe findest Du hier bestimmt. Und ich hoffe Du hast jetzt ob der Textwüste hier nicht die Freude auf CSS verloren, sondern Lust bekommen mit den Einstellungen rumzuprobieren. :)
Hier noch mal die vollständige CSS-Datei (die HTML-Datei blieb ja immer unverändert):
Code: body {
text-align: center;
font-family: Trebuchet MS, Verdana, Tahoma, Arial, sans-serif;
font-size: 13px;
}
#container {
position:relative;
width:700px;
height:400px;
margin: 50px auto;
border:1px solid #999999;
}
#container a.galerie span {
position:absolute;
width:1px;
height:1px;
top:5px;
left:5px;
overflow: hidden;
}
#container a.galerie, #container a.galerie:visited {
display: block;
color: #000;
text-decoration: none;
border: 1px solid #000;
margin: 1px 2px 1px 2px;
text-align: left;
cursor: default;
}
#container a.vorschau1 { background:url(bild1t.jpg); height:67px; width:100px; }
#container a.vorschau2 { background:url(bild2t.jpg); height:67px; width:100px; }
#container a.vorschau3 { background:url(bild3t.jpg); height:67px; width:100px; }
#container a.vorschau4 { background:url(bild4t.jpg); height:67px; width:100px; }
#container a.vorschau5 { background:url(bild5t.jpg); height:67px; width:100px; }
#container ul {
width: 214px;
height: 400px;
padding:0;
margin: 0;
list-style-type:none;
float: right;
}
#container li {
float:left;
}
#container a.galerie:hover {
border: 1px solid #111;
}
#container a.galerie:hover img {
border: 1px solid #000;
}
#container a.galerie:hover span {
position:absolute;
width: 402px;
height: 268px;
top: 25px;
left: 25px;
}
Re: CSS Photogalerie
Sandy1969 - 28.07.2005, 21:55
WOW, die Galerie ist fertig *freu*. Ich kann dir gar nicht sagen, wie sehr ich mich freue. Mir war schon etwas bange deswegen und wer weiß, ob ich nicht lieber das Projekt abgeblasen hätte :rolleyes: . Es ist zwar nur eine private Homepage, und eigentlich mache ich die mehr, weil das machen mir soviel Spaß macht, aber trotzdem.....!
Re: CSS Photogalerie
Jowra - 28.07.2005, 22:05
Sandy1969 hat folgendes geschrieben: ...weil das machen mir soviel Spaß macht...!
Das ist der beste Grund! :-)
Ich hab mal eine andere Variante zusammengebaut bzw. eigentlich sind es ja nur einige Änderungen in der CSS-Datei:
http://jowra.de/panne/css_galerie/galerie_8.html
Den Text muß man allerdings in die HTML-Datei schreiben.
Re: CSS Photogalerie
Sandy1969 - 29.07.2005, 11:10
Das gefällt mir, glaube ich, noch besser als in der Box :) . Und woher weißt du, welche Hintergrundfarbe meine HP hat ;) ? Genau die Farbe, die du für dein Beispiel genommen hast, habe ich für meine HP gewählt. Die Startseite ist ja schon fertig.
Was hast du denn an der Galerie geändert?
So, nun möchte ich mich schon mal für deine Hilfe und die viele Arbeit, die ich dir gemacht habe bedanken. Das heißt natürlich nicht, dass es nun für dich vorbei ist
Re: CSS Photogalerie
Jowra - 29.07.2005, 11:46
*g* dachte ich mir, kein Problem! Das ich die Farbe richtig getroffen habe ist ja strange. :) *wieder die kugel befrag* ;)
Hier ist die geänderte CSS-Datei:
Code: body {
text-align: center;
font-family: Trebuchet MS, Verdana, Tahoma, Arial, sans-serif;
font-size: 13px;
background: #334455;
}
#container {
position:relative;
width:600px;
height:450px;
margin: 50px auto;
}
#container a.galerie span {
position:absolute;
width: 1px;
height: 1px;
top: 3px;
left: 3px;
overflow: hidden;
}
#container a.galerie, #container a.galerie:visited {
display: block;
color: #000;
text-decoration: none;
border: 1px solid #000;
margin: 3px 3px;
text-align: left;
cursor: default;
}
#container a.vorschau1 { background: url(bild1t.jpg) center center no-repeat #ccc; height:73px; width:106px; }
#container a.vorschau2 { background: url(bild2t.jpg) center center no-repeat #ccc; height:73px; width:106px; }
#container a.vorschau3 { background: url(bild3t.jpg) center center no-repeat #ccc; height:73px; width:106px; }
#container a.vorschau4 { background: url(bild4t.jpg) center center no-repeat #ccc; height:73px; width:106px; }
#container a.vorschau5 { background: url(bild5t.jpg) center center no-repeat #ccc; height:73px; width:106px; }
#container ul {
width: 150px;
height: 400px;
padding:0;
margin: 0;
list-style-type:none;
float: left;
}
#container li {
float:left;
}
#container a.galerie:hover {
border: 1px solid #111;
}
#container a.galerie:hover img {
border: 1px solid #000;
padding: 3px;
margin-bottom: 3px;
background: #ccc;
}
#container a.galerie:hover span {
position:absolute;
width: 408px;
height: 400px;
top: 4px;
left: 150px;
color: #ccc;
}
Du kannst es ja mal ein bißchen mit der letzten Version vergleichen. Ich habe z.B. den Hintergrund der ganzen Seite mit:
Code: body {
...
background: #334455;
}
geändert. Dann habe ich den Rahmen beim "container" entfernt (also einfach das border: ... rausgenommen). Der Container ist also immer noch da, aber durch den fehlenden Rahmen siehst Du in nicht mehr. ;-)
Die Liste der Vorschaubilder (#container ul) habe ich von float: right; in float: left; geändert, deshalb steht sie jetzt links und die Liste selbst habe ich schmaler gemacht, so daß nun nur noch eine Spalte mit Thumbnails existiert.
Dem großen Bild und den Thumbnails habe ich jeweils einen grauen Hintergrund verpaßt:
Code: background: #ccc;
Die Bilder haben dann auch noch einen Innenabstand erhalten (also der Abstand zwischen Bild und Rahmen):
Code: padding: 3px;
Viel mehr war es gar nicht. Und wenn Du Text unter die Bilder setzen möchtest, dann fügst Du ihn in der HTML-Datei ein (direkt hinter dem Bild/IMG):
Code: <li>
<a class="galerie vorschau1" href="#">
<span>
<img src="bild1.jpg" alt="Bild1" />
<br />Hallo, ich bin ein plüschige Ente und vielleicht sogar ein Alphatier. :-)
</span></a>
</li>
Re: CSS Photogalerie
Sandy1969 - 29.07.2005, 12:12
Tja, also bei dir hört sich das alles ziemlich einfach und logisch an :shock: . Und wenn du es mir erklärst, verstehe ich es auch, aber so ganz alleine fühle ich mich dem CSS-Dschungel wohl noch nicht gewachsen *g*. Heute werde ich wohl nicht so zum arbeiten kommen, also genieße deine Freizeit ;) . Vielleicht schaffe ich es doch nocht heute abend mal etwas zu machen. Dann werde ich mal beide Variationen nebeneinander betrachten, um zu sehen, welche mir besser gefällt. Falls du noch andere Möglichkeiten zum ändern weißt, dann nur immer her damit.
Re: CSS Photogalerie
Jowra - 29.07.2005, 12:19
Ich überleg mir mal was. Ansonsten kannst Du auch mal schreiben, was Dir rein visuell so vorschwebt, so ungefähr läßt sich das bestimmt umsetzen. :) Du wolltest ja z.B. 10-20 Bilder pro Seite aufnehmen, da könnte man z.B. auch versuchen, 10 links und 10 rechts zu platzieren. Oder oben und unten usw.
Re: CSS Photogalerie
Sandy1969 - 29.07.2005, 12:37
Ja, das hört sich gut an. Oder vielleicht rundherum die Thumbs, also oben, rechts, unten und links jeweils 5? Oder nimmt das zuviel Platz weg? Ach, wenn ich nur wüßte, was ich eigentlich will :rolleyes: . Bei mir ist es immer so, dass ich mir erst mal gar nichts vorstelle (hab leider sehr wenig bis gar keine Phantasie bzw. Kreativität) und einfach mal anfange. Dann mit der Zeit kommen dann auch die Ideen, aber erst, wenn ich sehe, was ich mache.
Re: CSS Photogalerie
Sandy1969 - 29.07.2005, 12:50
Ach, da fällt mir gerade was ein. Meinst du, es wäre möglich, dass man vielleicht irgendwie eine Liste machen kann, wo die Namen der Bilder als Links stehen, damit man gezielt einzelne Bilder anklicken und auswählen kann? Falls man eben ein besonderes sucht und sich nicht durch alle duchklicken muß.
Re: CSS Photogalerie
Jowra - 29.07.2005, 12:55
Einfach mal anfangen ist doch ein guter Weg. Ich hab auch nicht immer was bestimmtes imKopf, probiere dann hier und ändere da und irgendwann weiß ich dann in welche Richtung ich will. Oder auch nicht. ;)
Sandy1969 hat folgendes geschrieben: Ach, da fällt mir gerade was ein. Meinst du, es wäre möglich, dass man vielleicht irgendwie eine Liste machen kann, wo die Namen der Bilder als Links stehen, damit man gezielt einzelne Bilder anklicken und auswählen kann? Falls man eben ein besonderes sucht und sich nicht durch alle duchklicken muß.
Meinst Du alle Bilder (also sagen wir mal 100) auf einer Extra-Seite oder auf der jeweiligen Galerie-Seite, die Links der Bilder die auch dort zu sehen sind (also 10-20)? Geht aber natürlich beides. 8)
Re: CSS Photogalerie
Sandy1969 - 29.07.2005, 13:12
So genau habe ich mir das noch gar nicht überlegt
Re: CSS Photogalerie
Jowra - 29.07.2005, 13:28
:)
Okay, ich bastel einfach mal was zusammen und dann sagst Du, ob es Dir gefällt oder nicht, ja?
Re: CSS Photogalerie
Sandy1969 - 29.07.2005, 13:55
Jowra, du bist echt ein Schatz
Re: CSS Photogalerie
Sandy1969 - 05.08.2005, 09:37
So, Jowra nun geht's ans Eingemachte :D . Ich habe mir nun überlegt, wie ich es haben will. Und zwar möchte ich die Galerie *Jowra-Style* , also die ohne Rahmen, mit jeweils 20 Fotos auf einer Seite. Die Links dieser 20 Fotos sollen entweder oben oder unten (wird dann entschieden, wenn ich sehe, wie es aussieht) auf der gleichen Seite zu finden sein. Was ich nun gerne hätte, wäre, dass die Thumbs einen Rahmen um das große Bild bilden, also jeweils 5 oben, rechts, unten und links. Meinst du, das ist machbar?
Re: CSS Photogalerie
Jule - 05.08.2005, 09:44
hört sich nett an - da bin ich mal gespannt!
Re: CSS Photogalerie
Jowra - 05.08.2005, 10:43
:)
Na klar geht das, aber es gibt immer noch mehrere Möglichkeiten. Ich hatte mir in den letzten Tagen auch schon verschiedene Lösungen überlegt. Wichtig wäre noch, wie "groß" das "große" Bild sein soll. Danach richtet sich die Aufteilung der Galerie. Ich würde es wie gesagt nicht zu groß machen, weil es sonst wirklich zu lange dauert mit dem Laden und außerdem die Galerie nicht mehr voll in Browserfenster passen würde.
Ich hab mal 4 verschiedene Varianten skizziert (es gäbe natürlich noch mehr 8) ) und mich auf eine Größe des Hauptbildes von 500x375 bezogen. Das scheint mir ein ganz guter Wert zu sein.
Was generell bei dieser Art Galerie wegfällt, sind Hochformat-Bilder, das paßt einfach nicht, obwohl es theoretisch machbar wäre.Mir persönlich gefallen die Varianten 3 und 4 besser, weil es sonst sehr eng wird auf dem Bildschirm, zumindest bei Auflösungen von 800x600. Außerdem hättest Du den Vorteil, das es doch nur 15 Bilder wären (Variante 3) und die Seite dadurch schneller laden würde (Du merkst, 20 Bilder pro Seite halte ich persönlich für zu viel ;) ).
So, was nimmst Du Sandy? Die 1.000 EUR in bar, Tor 3 oder den Zonk? :D
Re: CSS Photogalerie
Sandy1969 - 05.08.2005, 12:41
Wow, du bist aber schnell :) .
Nun habe ich das nächste Problem. Ich muß die Fotos alle noch zuschneiden, weil ich teilweise nur Teile aus den Bildern brauche (Köpfe). Obwohl ich manchmal auch gerne eine Totalaufnahme nehmen würde. Das heißt nun allerdings, dass die Totalaufnahmen wahrscheinlich Hochkantbilder sind und die Portraits eher quadratisch. Es könnte aber auch sein, dass einige Bilder rechteckig sein sollten, also genau gesagt, bräuchte ich wohl jede Form. Ob man das irgendwie verwirklichen kann? Ich finde rein optisch die Variante 3 am schönsten. Vielleicht kann man es so machen, dass man alle hochkantigen unter das große Bild setzt und die anderen jeweils nach proportionen sortiert an die restlichen Seiten verteilt.
Oje, ich hoffe, du verstehst mein Wirrwarr :rolleyes: .
Re: CSS Photogalerie
Jowra - 05.08.2005, 14:41
Sandy1969 hat folgendes geschrieben: Es könnte aber auch sein, dass einige Bilder rechteckig sein sollten, also genau gesagt, bräuchte ich wohl jede Form. Ob man das irgendwie verwirklichen kann?
Irgendwie geht immer, aber das ist natürlich etwas, was den Rahmen dieser Art von Galerie fast schon sprengt, weil sie mit einer festen Containergröße arbeitet.
Sandy1969 hat folgendes geschrieben: Vielleicht kann man es so machen, dass man alle hochkantigen unter das große Bild setzt und die anderen jeweils nach proportionen sortiert an die restlichen Seiten verteilt.
Oje, ich hoffe, du verstehst mein Wirrwarr :rolleyes: .
Das Wirrwarr verstehe ich ;), das Problem dabei ist, daß Du entweder die Thumbnails dann von Hand sortieren müßtest oder es ginge nur mit PHP und da weiß ich nicht, ob das auf Deinem Webspace funktioniert und vielleicht würde das auch zu weit führen?
Also für die Thumbnails würde ich Dir in dem Fall erst mal eine quadratische Form vorschlagen (in Photoshop per Menü: Bild -> Arbeitsfläche...), für eine Bildvorschau ist das immer noch gut geeignet und Du hättest ein einheitliches Layout.
Wegen der Verwendung von quadratischen und rechteckigen Quer- und Hochformatbildern überleg ich mal, aber das wird schwer.
Re: CSS Photogalerie
Jowra - 08.08.2005, 19:22
Also eine Möglichkeit, wo man die Thumbnail-Bilder "rundherum" platziert und dann Hoch- und Querformat-Bilder darstellen kann, will mir nicht recht einfallen.
Programmiert habe ich mal das hier, vielleicht bekommst Du dann auch eine bessere Vorstellung davon, was geht, was nicht geht und wie die Größenverhältnisse sind. In dieser Variante könntest Du nun natürlich auch quadratische und Hochkantbilder unterbringen:
http://jowra.de/panne/css_galerie/galerie_9.html
(Formatierungsdinge wie Farben, Schriften und ein paar Spezialspielereien sind natürlich immer möglich, ich lasse es erst mal beim Minimaldesign, weil es ja noch um Prinzip geht. ;) ).
Re: CSS Photogalerie
Jule - 08.08.2005, 19:49
boah schön!
Ich glaube, ich mache dich zum Stylingberater meiner neuen Homepage :D
Re: CSS Photogalerie
Sandy1969 - 08.08.2005, 20:03
Das sieht echt super toll aus :) . Ich glaube, so werde ich es machen, vielleicht unten noch eine Reihe, damit es nicht sowenig Bilder sind. Sonst werden es 10 Seiten, ob die dann alle Besucher noch durchschauen wollen :rolleyes: . Wie hast du das gemacht, dass die Thumbs quadratisch sind und das Große Bild rechteckig und trotzdem ist auf den Kleinen alles drauf :shock: ? Wenn man das Große vielleicht auch qudratisch macht und dann bei den rechteckigen eben an den Rändern einen Rand?
Aber ich muß schon echt sagen, du bist echt ein Profi :D . Ich bin echt begeistert :huepf: .
Re: CSS Photogalerie
Jowra - 08.08.2005, 20:36
Jule hat folgendes geschrieben: Ich glaube, ich mache dich zum Stylingberater meiner neuen Homepage :D
*notier* :D
Was übrigens cool ist: Ich hatte noch gar keinen Check im IE gemacht und war jetzt ehrlich erstaunt, daß es dort genauso funktioniert. :shock:
Sandy1969 hat folgendes geschrieben: Ich glaube, so werde ich es machen, vielleicht unten noch eine Reihe, damit es nicht sowenig Bilder sind. Sonst werden es 10 Seiten, ob die dann alle Besucher noch durchschauen wollen :augenrollend:.
Na ja, Du könntest natürlich vor die einzelnen Seiten eine Übersichtsseite Deiner Galerien schalten, wie das z.B. IRoybot gemacht hat (Roybi, ich hoffe ich darf? ;)): http://www.contact-sheet.de/index.php Das käme natürlich nur in Frage, wenn Du die Bilder in Kategorien ordnen kannst und willst. Bei einer Thumbnailleiste unten, wird es eben zum Platzproblem, dann paßt wahrscheinlich nicht mehr alles ins Browserfenster, so daß man scrollen muß. Aber ich bastel das mal hin. :)
Das mit den Thumbnails ist übrigens nicht schwer, in Photoshop machst Du das z.B. so:
1. Menü Bild -> Bildgröße...
2. Häkchen bei "Proportionen erhalten" entfernen
3. Unter Pixelmaße bei Breite und Höhe den gleich Wert eintragen (ich hatte hier 75x75 genommen).
4. OK
Was mich persönlich daran stört ist, daß die Bilder gestaucht werden. Schau Dir mal die Ente rechts oben an, die hat eine krasse Diät hinter sich. :D Das hatte ich jetzt nur mal auf die Schnelle gemacht, normalerweise würde ich oben/unten bzw. links/rechts den Rand abschneiden um es quadratisch zu machen. Es gehen zwar ein paar Informationen des Bildes verloren, aber das fällt meist nicht ins Gewicht und wenn man alles sehen will, kann man ja mit Maus drüberfahren und schwupp sieht man es voll. :-) Also in dem Fall finde ich Bild -> Arbeitsfläche besser. Aber das ist Geschmackssache.
Also ich versuch mal die dritte Thumbnailleiste unten einzubauen...
Re: CSS Photogalerie
Jowra - 09.08.2005, 22:59
So, neuester Stand:
http://jowra.de/panne/css_galerie/galerie_10.html
Ein kleines Problem gibt es noch mit der Thumbnailleiste unten. Wenn man quer über die Bilder fährt, wechseln sie nicht, man muß mit der Maus richtig weggehen und dann auf ein bestimmtes Bild zeigen, dann wechselt auch das große. Das müßte aber zu beheben sein.
Morgen schaue ich dann mal, daß ich die "Großbild-Anzeige" je nach Format (Quer, Hochkant, quadratisch) mit einem Rahmen versehe. Und oben rechts neben "Sandys Galerie" könnten dann noch die Textlinks hin...
Ich hoffe das geht in die richtige Richtung? :)
Re: CSS Photogalerie
Sandy1969 - 10.08.2005, 10:26
Ich hoffe, du bist jetzt nicht sauer, aber ich finde die Reihe unten nun doch nicht so gut. Ich fand die Sandys Galerie 9 noch immer am besten. Vielleicht sollte ich dann eben links und rechts die Thumbs jeweils 2 Reihen zu je 4 oder 5 nebeneinander setzen.
Tut mir leid, dass du die Arbeit mit der unteren Reihe nun umsonst gemacht hast :rolleyes: .
Umd mal wieder zwischendurch:
Re: CSS Photogalerie
Jowra - 10.08.2005, 11:47
Das ist doch kein Problem Sandy. Geht mir doch auch so, wenn ich was Neues auf die Beine stellen will, dann probiere ich erst mal verschiedene Varianten durch und irgendwann hab ich dann eine Lösung, die mir gefällt. Man hat zwar meist eine grobe Idee im Kopf, aber die finale Version entwickelt sich immer erst...
Ich versuch mal eine Variante mit zwei Spalten Thumbnails links und rechts. :-)
Re: CSS Photogalerie
Jowra - 11.08.2005, 23:40
Sandy, der neueste Entwurf kommt morgen, okay? :oops:
Re: CSS Photogalerie
Sandy1969 - 12.08.2005, 01:03
Ist doch kein Problem Jowra, das ist doch freiwillig und keine Zwangsarbeit *g*
Re: CSS Photogalerie
Jowra - 12.08.2005, 12:24
Also mal was Neues. ;)
http://www.jowra.de/panne/css_galerie/galerie_10.html
Leider würde das platzmäßig mit 2 Spalten auf beiden nicht gehen. Das ganze ist jetzt schon 840 Pixel breit, was zwar auf einem 1024er oder 1280er Bildschirm gut aussieht, aber auf einem 800er müßte man dann scrollen. Etwas einsparen könnte man noch, wenn man die Thumbnails kleiner macht (Müßte man mal mit 60x60 oder sogar 50x50 probieren).
Immerhin kriegst Du so jetzt 15 Bilder auf eine Seite (vielleicht würde bei den Thumbnails auch noch eine Zeile mehr gehen, dann wären es 18 ) und kannst auch Hochkant- und quadratische Bilder nehmen. :)
Das mit dem Hintergrundbild ist natürlich nur ein Beispiel (genauso wie die Überschrift), da denkst Du Dir einfach was aus. Und ruhig immer wieder mecker wenn Dir was nicht gefällt. ;)
Re: CSS Photogalerie
Sandy1969 - 12.08.2005, 18:11
Mir würde es einheitlich besser gefallen, also die gleiche Anzahl Bilder auf jeder Seite. Die Größe der Thums könnten aber gerne noch etwas kleiner werden, damit hätte ich kein Problem, soalnge man noch etwas erkennen kann. Wenn man das Bild richtig gut sehen will, dann muß man eben draufklicken bzw. mit der Maus drüberfahren. Wenn nötig, würde ich es auch noch in Betracht ziehen, das große Bild etwas zu verkleinern.
Ich kann das gar nicht so nachvollziehen, da ich einen 19 zoll Monitor habe :oops: .
Dir Idee mit dem Hintergrund finde ich super, wenn du weiterhin so kreativ bist, wird das wohl eine der schönsten Galerien im www :D .
Re: CSS Photogalerie
Jowra - 14.08.2005, 00:28
Sandy1969 hat folgendes geschrieben: Ich kann das gar nicht so nachvollziehen, da ich einen 19 zoll Monitor habe :oops: .
Ja und eine 1280er Auflösung. ;-) Bei mir sieht es ja do auch gut aus, aber beim Webdesign muß man eben immer auch an die denken, die kleinere Bildschirme haben oder z.B. die Lesezeichenleiste links an der Seite usw. Ich hab jetzt trotzdem mal links und rechts zwei Spalten reingebastelt und die Thumbnails auf 55x55 Pixel verkleinert. Dadurch ist die Gesamtbreite auch noch mal etwas schmaler geworden:
http://jowra.de/panne/css_galerie/galerie_11.html
Re: CSS Photogalerie
Sandy1969 - 14.08.2005, 02:04
Ja, soweit ist es sehr schön. Würdest du mir das gleiche bitte noch mit einem quadratischen "großen Bild" machen? Ich weiß noch nicht genau, welches ich nun möchte :rolleyes: .
Re: CSS Photogalerie
Jowra - 14.08.2005, 23:19
Sandy, normalerweise kannst Du auch einfach 500x500 Bilder verwenden oder sogar 500x700, das sollte eigentlich funktionieren. Nur die Breite von 500 sollte gleich bleiben. :-) Aber ich teste es auch noch mal.
Re: CSS Photogalerie
Jowra - 18.08.2005, 23:12
Guck mal Sandy, ich hab jetzt beim Bild ganz links oben mal ein quadratisches eingebaut (500x500), daß funktioniert praktisch genauso wie das rechteckige, auch ein Hochkantbild wäre möglich:
http://jowra.de/panne/css_galerie/galerie_12.html
Re: CSS Photogalerie
Sandy1969 - 18.08.2005, 23:41
So Jowra, nun ist die Galerie wirklich so, wie ich sie haben will und deshalb möchte ich mich nun nochmal ganz herzlich bei dir bedanken, dass du dir so viel Arbeit wegen mir aufgehalst hast.
Ich werde sie hoffentlich in den nächsten Tagen einbauen können und melde mich dann bei Bedarf wieder :D .
Mit folgendem Code, können Sie den Beitrag ganz bequem auf ihrer Homepage verlinken
Weitere Beiträge aus dem Forum Untitled
Email-Postfächer bei Pixelpanne - gepostet von Jule am Freitag 06.05.2005
Ähnliche Beiträge wie "CSS Photogalerie"
CSS Bender - Sören (Donnerstag 24.05.2007)
CSS GUI (graphical user interface) - famestyle (Donnerstag 31.05.2007)
CSS - Franky (Montag 21.05.2007)
Css Clan über Hamachi? - Hermes (Samstag 03.03.2007)
Counter-Strike 1.6 : CZ :CSS - PsYc0 (Donnerstag 17.05.2007)
CSS - Dessert (Dienstag 20.02.2007)
Train css - asterix (Freitag 23.06.2006)
Bewerbung Css - Anonymous (Sonntag 26.08.2007)
wir suchen noch ative css spieler - schule (Freitag 21.07.2006)
CSS oder HL² - ProMastaA (Samstag 05.08.2006)