PSD-Tutorials - Bildbearbeitung - Photoshop - Flash - Cinema4D - InDesign - Fotografie

Triggertrix · 17.08.2012, 13:53

Zitat:

Na dann finde mal raus, a) wo die Bilder festgelegt werden und b) ob der Pfad zu denen korrekt ist.

kay ;o)

Code:

a.ps_close{
	background:#000 url(../images/close.png) no-repeat center center;

EDIT: Hmpf…… ok wieder doof gewesen, das verhält sich nicht relativ zur Seite, sondern zum Server…… ;o)
Alles klar, hab´s danke……

Zitat:

Die Anordnung der Alben selbst ist eine Sache von CSS. Das habe ich länger nicht gemacht,

Heisst ich kann da ruhig mit DL dran rum schubsen, das hat keine Auswirkung auf die Funktionalität?

Zitat:

Möchtest du die Bildunterschriften unter den Pseudo-Thumbnails oder im Stack selbst?

Ersteres!
Mein Edit hat sich wohl mit Deiner Antwort überschnitten.
letzteres wäre zwar auch gut, muss aber gar nicht.

Also wenn ich es mal wieder umformulieren darf.
Ich habe hier eine "stinknormale" HTML Seite, die sich via CSS formatieren lässt. Einzig, es werden in allen angeführten Alben, alle Bilder bis auf das Erste versteckt, welches eine "Onclick" Funktion, als quasi Rattenschwanz hat, aber nichts mit dem Aussehen, Anordnung etc. der Seite zu tun hat.

Trifft es das?

Dank & Gruss

Duddle · 17.08.2012, 14:45

Zitat:

Heisst ich kann da ruhig mit DL dran rum schubsen, das hat keine Auswirkung auf die Funktionalität?

Nein.

Zitat:

Trifft es das?

Ja. Das ist das Prinzip "Progressive Enhancement".

Duddle

Triggertrix · 19.08.2012, 13:15

Also ich habe jetzt alle CSS-Macht, die mir zur Verfügung steht, aufgeboten.
Ich bekomme es nicht hin, ich schäme mich auch ein bisschen schon wieder hier zu schreiben, aber ich weiss (mal wieder) nicht weiter.

Ich versuche die ganze Zeit, die Bilder die als Thumbnails dargestellt werden, zusammen mit Text, als Platzhalter für Galerien bündig zusammen zu fassen, so dass ein 3x3 Raster entsteht.
Allerdings bekomme ich das egal was ich tue nicht hin.

Also Ziel soll sein, -sofern möglich- ein Thumnail mit einer Bildunterschrift (derzeit h1), nebenan einen kleinen Beschreibungstext. Alle drei Elemente (Bild, h1, text) sollen am Ende in einen grauen Kasten gesetzt werden, so das sie optisch als Einheit wirken.

Mach ich ein zusätzliches DIV drum, passiert nichts, steuere ich das "Album" an, ebenfalls nicht… ich habe bisher nur den Text via "Span" ein wenig steuern können. Jetzt habe ich aber fiese Umbrüche die ich aber nicht anders hin bekomme.

Kann mir da jemand etwas dazu sagen wie ich das gesteuert bekomme?

Dank & Gruss

P.S. Nein die Seite bleibt nicht so dilettantisch, ist nur um mir das optisch einfach zu machen, erst muss ich o.g. Problem lösen…

Duddle · 19.08.2012, 14:29

Wie vorher schon angedeutet sind das keine Fragen mehr bzgl. PHP und anderen Scriptsprachen. Diese Art von Problemen werden in http://www.psd-tutorials.de/forum/46_x-html-css/ zuverlässiger gelöst. Aber weil wir schon mal hier sind:

Das was du machen willst wird in sehr vielen Tutorials bzgl. HTML und CSS beschrieben. Du bist nicht der erste mit den Wünschen, ergo hat jemand das Problem gelöst und diese Lösung - falls sie besonders elegant ist - schon veröffentlicht.

http://css.maxdesign.com.au/floatutorial/
http://www.andreas-kalt.de/webdesign.../float-theorie
http://de.html.net/tutorials/css/lesson13.php

Das sind die ersten drei Ergebnisse bei der Suche nach "float tutorial". ~~Wenn du nicht wusstest, dass CSS "float" hat, hast du dir keine Einsteiger-Tutorials durchgelesen.~~ Edit: okay, du scheinst zu wissen, dass es float gibt. Dann lies dir die Tutorials durch um zu lernen wie man es korrekt einsetzt.

Ohne dass ich CSS länger gemacht habe würde mein Ansatz z.B. so aussehen:

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Page Title</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<style type="text/css" media="screen">
		    #alben {
			border: 1px solid red;
			width:66%;
			margin:auto;
		    }
		    .kasten {
			border: 1px solid blue;
			width:33%;
			float:left;
		    }
		    .unterschrift {
			font-size:1em;
			border:1px solid gray;
		    }
		    .album {
			float:left;
			border: 1px solid teal;
		    }
		</style>
	</head>

	<body>
	    <div id="alben">
		<div class="kasten">
		    <div class="album">
			<img src="http://placekitten.com/150/220" />
			<h1 class="unterschrift">Album 1</h1>
		    </div>
		    <p class="beschreibung">Lorem ipsum dolor sit amet</p>
		</div>
		<div class="kasten">
		    <div class="album">
			<img src="http://placekitten.com/150/320" />
			<h1 class="unterschrift">Album 2</h1>
		    </div>
		    <p class="beschreibung">Lorem ipsum dolor sit amet</p>
		</div>
		<div class="kasten">
		    <div class="album">
			<img src="http://placekitten.com/150/200" />
			<h1 class="unterschrift">Album 3</h1>
		    </div>
		    <p class="beschreibung">Lorem ipsum dolor sit amet</p>
		</div>
		<div style="clear:both;"></div>
		<div class="kasten">
		    <div class="album">
			<img src="http://placekitten.com/180/220" />
			<h1 class="unterschrift">Album 4</h1>
		    </div>
		    <p class="beschreibung">Lorem ipsum dolor sit amet</p>
		</div>
	    </div>
	</body>
</html>

Abgesehen von den Katzen solltest du mehrere Dinge bemerken: erstens ist der Aufbau des Quelltextes ziemlich logisch. Schaust du dir die Seite ohne Style an, haben die Elemente trotzdem noch eine sinnvolle Anordnung und Bedeutung (z.B. h1 statt span, weil es dort die Funktion einer Überschrift hat).

Zweitens werden Klassen den Elementen gegeben, die die gleiche Funktion erfüllen und ids treten nur einmalig auf. So sind die Dinger gedacht.

Drittens, und das stört mich bei deinem HTML sehr, ist der Code korrekt eingerückt. Das macht jeder gescheite HTML-Editor automatisch und erlaubt dir und anderen (*hust*) sehr viel schneller, Fehler zu erkennen und Bereiche auseinander zu halten.

Auch wirst du die bunten Rahmen bemerken. Mit denen siehst du fix wie die Elemente miteinander agieren und wer was wohin schiebt. Für solche Hilfs-Linien gibt es auch Tools, aber für diese klitzekleine Seite ist der Einsatz von border schneller.

Duddle

Triggertrix · 19.08.2012, 16:28

Dein Post hatte viel Gehalt.

Ich habe das jetzt mal Original (so hoffe ich zumindest) nach Deinem Modell umgesetzt und es passiert (Gott sei Dank, dann bin ich nicht ganz so doof…… so kam ich nämlich auf "span") genau das was mir auch passiert ist, die Bilder der einzelnen Alben purzeln umher, also die Funktion "hide die anderen" ;o) läuft dann nicht mehr.

EDIT II: Ich habe jetzt noch mal geschaut ob es einen Unterschied macht, die Bildgrösse via dem DIV anzusprechen oder sie direkt in das Image-Tag zu notieren, bleibt aber gleich.

Das war ja eines meiner Eingangsthemen, sobald ich um die "funktionalen" Div´s ein weiteres lege, schneide ich (offenbar) dem Javascript den Weg ab…… soweit ich das verstehe.…

Edit I:

Zitat:

Dann lies dir die Tutorials durch um zu lernen wie man es korrekt einsetzt.

Jep, mache ich, versprochen!
Den Wust den Du derzeit siehst, entstand allerdings durch viermal umschreiben… keine Entschuldigung, aber Erklärung.

Zitat:

Zweitens werden Klassen den Elementen gegeben, die die gleiche Funktion erfüllen und ids treten nur einmalig auf. So sind die Dinger gedacht.

Hatte ich bisher noch nicht verstanden, aber jetzt, danke

Zitat:

das stört mich bei deinem HTML sehr, ist der Code korrekt eingerückt. Das macht jeder gescheite HTML-Editor automatisch

Nachdem mir Dreamweaver die Arbeit eines kompletten Tages zerstört hat, bin ich auf Fraise ausgewichen. Der macht das leider nicht besonders toll, habe ich den Eindruck, finde aber auch keinen zu einem (für mich) annehmbaren Preis (für´n Mac), Eclipse, Aptana & Co scheinen eher was für App-Entwickler zu sein, sonst konnte ich nichts finden. Coda = 80€ ist mir dann doch zu heftig.

Duddle · 19.08.2012, 17:19

Zitat:

EDIT II: Ich habe jetzt noch mal geschaut ob es einen Unterschied macht, die Bildgrösse via dem DIV anzusprechen oder sie direkt in das Image-Tag zu notieren, bleibt aber gleich.

Das ist ... eine Funktion von placekitten.com und dient der Spezifizierung der Platzhalter-Größe. Natürlich geht das nicht mit deinen normalen Bildern.

Versuch zu verstehen, was der JS-Code macht und warum das mit der Struktur nicht funktioniert. Er muss etwas umgeschrieben werden, damit er das neue Zeug beachtet. Ich hatte vorher bestätigt, dass das Script problemlos mit geändertem CSS klar kommt. Jetzt wurde auch das HTML geändert.

Ja, das ist nervig. Aber in der Regel schreibt man erst das HTML. Dann bringt man es mit CSS in die gewünschte Richtung. Erst im dritten Schritt pappt man das JavaScript drauf, um ein paar Zusatzfunktionen anzubieten. Du hast von hinten begonnen und deshalb jetzt Probleme.

Duddle

Triggertrix · 19.08.2012, 17:23

kannst Du mir einen Tip geben? Welche Zeile oder in welcher Art ich was ändern muss?

Ha!!!

Nix da Tip geben…… SEHT MICH AN……… ICH HABE FEUER GEMACHT!!! ;o)

Duddle · 19.08.2012, 17:43

Dann such du dir jetzt nur noch einen besseren Text-Editor, z.B. http://de.wikipedia.org/wiki/Proton_Code_Editor oder http://de.wikipedia.org/wiki/Notepad2 oder http://de.wikipedia.org/wiki/Notepad%2B%2B bzw. eine ganz große Liste.

Ach und ich schlage vor, irgendwann den Vorschau-Bildern per CSS "background-image" eine Art angedeuteten Bilder-Stapel zu geben. Dann vermittelt das optisch den Eindruck von "hier ist noch mehr" statt es explizit in zwei Sprachen dazu schreiben zu müssen.

Duddle

Triggertrix · 19.08.2012, 17:52

Zitat:

Dann such du dir jetzt nur noch einen besseren Text-Editor, z.B.

Die sind alle für Windoof…
Wäre viellicht ein Thema für einen anderen Thread, die die ich gefunden habe taugen nix oder kosten zu viel. Der einzig noch sinnvolle (wie mir scheint) ist Fraise.
So etwas wie Phase5 hätte ich gerne, darüber habe ich viel gutes gehört…

Zitat:

ich schlage vor, irgendwann den Vorschau-Bildern per CSS "background-image" eine Art angedeuteten Bilder-Stapel zu geben.

Umbedingt, die Idee hatte ich noch gar nicht, ist aber eine schöne, schlichte Idee das klar zu machen und allemal besser als die Textzeile……

Und mal wieder einen dicken Dank an Dich!

Duddle · 19.08.2012, 18:09

http://en.wikipedia.org/wiki/Compari...itors#Mac-only bzw. http://en.wikipedia.org/wiki/Compari...ors#Java-based ?

Einige davon sind frei.

Duddle

19.08.2012, 13:15	#33
Triggertrix Filmwechsler Themenstarter Registriert seit: 19.05.2009 Ort: far far away Beiträge: 623	Also ich habe jetzt alle CSS-Macht, die mir zur Verfügung steht, aufgeboten. Ich bekomme es nicht hin, ich schäme mich auch ein bisschen schon wieder hier zu schreiben, aber ich weiss (mal wieder) nicht weiter. Ich versuche die ganze Zeit, die Bilder die als Thumbnails dargestellt werden, zusammen mit Text, als Platzhalter für Galerien bündig zusammen zu fassen, so dass ein 3x3 Raster entsteht. Allerdings bekomme ich das egal was ich tue nicht hin. Also Ziel soll sein, -sofern möglich- ein Thumnail mit einer Bildunterschrift (derzeit h1), nebenan einen kleinen Beschreibungstext. Alle drei Elemente (Bild, h1, text) sollen am Ende in einen grauen Kasten gesetzt werden, so das sie optisch als Einheit wirken. Mach ich ein zusätzliches DIV drum, passiert nichts, steuere ich das "Album" an, ebenfalls nicht… ich habe bisher nur den Text via "Span" ein wenig steuern können. Jetzt habe ich aber fiese Umbrüche die ich aber nicht anders hin bekomme. Kann mir da jemand etwas dazu sagen wie ich das gesteuert bekomme? Dank & Gruss P.S. Nein die Seite bleibt nicht so dilettantisch, ist nur um mir das optisch einfach zu machen, erst muss ich o.g. Problem lösen… __________________ Triggertrix Es ist nicht gesagt daß es besser wird, wenn es anders wird. Wenn es aber besser werden soll, dann muß es anders werden.

19.08.2012, 14:29	#34
Duddle Posting-Frequenz: 14µHz Registriert seit: 03.02.2006 Ort: Dresden Beiträge: 3.225	Wie vorher schon angedeutet sind das keine Fragen mehr bzgl. PHP und anderen Scriptsprachen. Diese Art von Problemen werden in http://www.psd-tutorials.de/forum/46_x-html-css/ zuverlässiger gelöst. Aber weil wir schon mal hier sind: Das was du machen willst wird in sehr vielen Tutorials bzgl. HTML und CSS beschrieben. Du bist nicht der erste mit den Wünschen, ergo hat jemand das Problem gelöst und diese Lösung - falls sie besonders elegant ist - schon veröffentlicht. http://css.maxdesign.com.au/floatutorial/ http://www.andreas-kalt.de/webdesign.../float-theorie http://de.html.net/tutorials/css/lesson13.php Das sind die ersten drei Ergebnisse bei der Suche nach "float tutorial". ~~Wenn du nicht wusstest, dass CSS "float" hat, hast du dir keine Einsteiger-Tutorials durchgelesen.~~ Edit: okay, du scheinst zu wissen, dass es float gibt. Dann lies dir die Tutorials durch um zu lernen wie man es korrekt einsetzt. Ohne dass ich CSS länger gemacht habe würde mein Ansatz z.B. so aussehen: HTML-Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Page Title</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css" media="screen"> #alben { border: 1px solid red; width:66%; margin:auto; } .kasten { border: 1px solid blue; width:33%; float:left; } .unterschrift { font-size:1em; border:1px solid gray; } .album { float:left; border: 1px solid teal; } </style> </head> <body> <div id="alben"> <div class="kasten"> <div class="album"> <img src="http://placekitten.com/150/220" /> <h1 class="unterschrift">Album 1</h1> </div> <p class="beschreibung">Lorem ipsum dolor sit amet</p> </div> <div class="kasten"> <div class="album"> <img src="http://placekitten.com/150/320" /> <h1 class="unterschrift">Album 2</h1> </div> <p class="beschreibung">Lorem ipsum dolor sit amet</p> </div> <div class="kasten"> <div class="album"> <img src="http://placekitten.com/150/200" /> <h1 class="unterschrift">Album 3</h1> </div> <p class="beschreibung">Lorem ipsum dolor sit amet</p> </div> <div style="clear:both;"></div> <div class="kasten"> <div class="album"> <img src="http://placekitten.com/180/220" /> <h1 class="unterschrift">Album 4</h1> </div> <p class="beschreibung">Lorem ipsum dolor sit amet</p> </div> </div> </body> </html> Abgesehen von den Katzen solltest du mehrere Dinge bemerken: erstens ist der Aufbau des Quelltextes ziemlich logisch. Schaust du dir die Seite ohne Style an, haben die Elemente trotzdem noch eine sinnvolle Anordnung und Bedeutung (z.B. h1 statt span, weil es dort die Funktion einer Überschrift hat). Zweitens werden Klassen den Elementen gegeben, die die gleiche Funktion erfüllen und ids treten nur einmalig auf. So sind die Dinger gedacht. Drittens, und das stört mich bei deinem HTML sehr, ist der Code korrekt eingerückt. Das macht jeder gescheite HTML-Editor automatisch und erlaubt dir und anderen (hust) sehr viel schneller, Fehler zu erkennen und Bereiche auseinander zu halten. Auch wirst du die bunten Rahmen bemerken. Mit denen siehst du fix wie die Elemente miteinander agieren und wer was wohin schiebt. Für solche Hilfs-Linien gibt es auch Tools, aber für diese klitzekleine Seite ist der Einsatz von border schneller. Duddle __________________ »To a cosmologist, a hundred thousand light-years rounds down to zero.« - RobotRollCall Geändert von Duddle (19.08.2012 um 14:32 Uhr).

19.08.2012, 17:23	#37
Triggertrix Filmwechsler Themenstarter Registriert seit: 19.05.2009 Ort: far far away Beiträge: 623	kannst Du mir einen Tip geben? Welche Zeile oder in welcher Art ich was ändern muss? Ha!!! Nix da Tip geben…… SEHT MICH AN……… ICH HABE FEUER GEMACHT!!! ;o) __________________ Triggertrix Es ist nicht gesagt daß es besser wird, wenn es anders wird. Wenn es aber besser werden soll, dann muß es anders werden. Geändert von Triggertrix (19.08.2012 um 17:27 Uhr).

19.08.2012, 17:43	#38
Duddle Posting-Frequenz: 14µHz Registriert seit: 03.02.2006 Ort: Dresden Beiträge: 3.225	Dann such du dir jetzt nur noch einen besseren Text-Editor, z.B. http://de.wikipedia.org/wiki/Proton_Code_Editor oder http://de.wikipedia.org/wiki/Notepad2 oder http://de.wikipedia.org/wiki/Notepad%2B%2B bzw. eine ganz große Liste. Ach und ich schlage vor, irgendwann den Vorschau-Bildern per CSS "background-image" eine Art angedeuteten Bilder-Stapel zu geben. Dann vermittelt das optisch den Eindruck von "hier ist noch mehr" statt es explizit in zwei Sprachen dazu schreiben zu müssen. Duddle __________________ »To a cosmologist, a hundred thousand light-years rounds down to zero.« - RobotRollCall

19.08.2012, 18:09	#40
Duddle Posting-Frequenz: 14µHz Registriert seit: 03.02.2006 Ort: Dresden Beiträge: 3.225	http://en.wikipedia.org/wiki/Compari...itors#Mac-only bzw. http://en.wikipedia.org/wiki/Compari...ors#Java-based ? Einige davon sind frei. Duddle __________________ »To a cosmologist, a hundred thousand light-years rounds down to zero.« - RobotRollCall

PSD-Tutorials - Bildbearbeitung - Photoshop - Flash - Cinema4D - InDesign - Fotografie

Reklame

Anzeige

Aktuelles Commag

Anzeige

Anzeige

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Themen-Optionen
Druckbare Version zeigen Diese Seite per E-Mail verschicken

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
BoW's Photogallerie	BoW	Showrooms	80	08.07.2011 08:32
leko´s photogallerie	leko82	(Digitale) Fotografie	15	25.09.2009 08:35
Photogallerie im Dreamweaver 8	conny1311	Allgemeines	9	24.01.2009 17:56
Photogallerie mit Photoshop erstellen ?!	mhatwig	Photoshop	4	23.05.2007 17:19
Photogallerie mit Popup	Tina79	Photoshop	2	16.11.2005 13:34

PSD-Tutorials - Bildbearbeitung - Photoshop - Flash - Cinema4D - InDesign - Fotografie

Reklame

Anzeige

Aktuelles Commag

Anzeige

Social Media

Anzeige