Biogemuese läßt mal wieder Grüßen! CSS Frage

kernig2

Hallo zusammen!

Dank Eurer Hilfe läuft ja die http://www.biogemuese-sachsen.de/
einwandfrei. Ich bastel hin und wieder dran rum um sie einigermaßen aktuell zu halten. Mit Schrecken stelle ich jedes Mal wieder fest, dass ich mein eigenes html schon nach wenigen Wochen kaum mehr verstehe und wieder bei Null anfange - aber gut, ich will ja was lernen...

Jetzt kommt Größeres auf mich zu, als Vorübung für einen Internetshop erst mal eine Presserubrik mit Texten und vor allem Fotos zum Runterladen.
Hm, soweit so gut.

Ich habe also eine img-Class "thumbs" in meinem Stylesheet eingeführt,
die werden auch erstmal ganz hübsch angezeigt.
Ist das überhaupt (Ladezeittechnisch) schlau, die Thumbnails über "width" im CSS zu erzeugen? Oder erzeugt man die besser gleich eine kleinere Extra-Datei und lädt die große erst auf Anforderung?

Wie verlinke ich denn jetzt die Dinger mit der großen Datei? Das große Bild soll sich in einem neuen Fenster öffnen und dann mit Rechtsclick und "Bild speichern unter" runtergeladen werden.

Code

<img class="thumb" src="presse/abokiste.jpg"alt="Abokiste"/img

Ich hab schon rumgesucht, aber immer nur Mords-komplizierte Konstrukte mit Vorschaubildern gefunden, das will ich ja gar nicht. Auch kein Java oder so was. So einfach wie irgendwie möglich.

Ich hoffe, das ist Euch nicht zu profan und freue mich schon auf kleine Hilfestellungen.

Danke und Grüße
(nicht aus Sachsen, wie die Internetseite vermuten läßt, sondern aus Bayern)
kernig

57_homer

Wäre Dein Problem nicht bei http://xhtmlforum.de/ besser aufgehoben?

Amsterdammer

oder auch bei uns unter Plugins und Websites (wird vielleicht dahin verschoben)

.Ulli

Hallo kernig,

lang nicht gesehen.

Die Daumenabdrücke, aka Thumbnails, verringern die Ladezeiten und sind für die Benutzer, auch dem Server, angenehmer. Wozu soll man z.B. 10 * 1MiB herunterladen wenn man vielleicht die Originalgröße überhaupt nicht sehen möchte ?

Auch wird das System mit der Skalierung unnötig belastet, wobei Du nicht einmal davon ausgehen kannst, dass alle Browser von der Qualität her optimal skalieren - es ist ja Dein Produkt was optimal herüberkommen soll.

Die Einbindung unterscheidet sich prinzipiell nicht vom normalen Text-Link. In der Kurzform ergibt sich das zu

Code

<a href="pfad/bild.png" target="_blank">
<img src="pfad/bild_tn.png"/>
</a>

Du greifst also zu Deinem Grafikprogramm, erzeugst die Thumbnails (_tn) aus den Originalen und legst sie auf dem Server in einer für Dich und Aushilfen/Nachfolger nachvollziehbaren Struktur ab.

kernig2

Guten Morgen!

Zitat

lang nicht gesehen.

Ich hab zwischendurch ganz analog ein Haus renoviert :shock:

Und es ist doch immer wieder ein gutes Zeichen, finde ich, no news are erstmal good news. Der Firefox flutscht (bis auf Abstürze hin und wieder in Verbindung mit pdfs, aber das gehört jetzt wirklich nicht hierher :wink: ).

Danke für die Erklärung. Ich mache also meine Thumbnails selbst (mit IrfanView oder fireworks) und überlasse das nicht dem Browser. Und verlinke sie ganz normal.

Meine Frage zielte darauf ab, ob man quasi ein CSS-formatiertes Bild verlinken könnte?

Code

<a href="presse/kiste.jpg" target="_blank">
<img class="thumb" src="presse/th_kiste.jpg" alt="Abokiste"/img

Hat sich aber mit Extra-Thumbnail-Dateien eh erledigt, die kriegen eben alle die gleiche Größe und fertig. Obwohl, für Rahmen und Position wäre eine CSS-Formatierung schon nett. Ich werds einfach ausprobieren.

Säärwus erstmal

kernig

.Ulli

Das mit dem css habe ich nicht richtig gelesen. Z.B.

Code

.thumbs {
	display: block;
	float: left;
	width: 640px;
	height: 140px;
	background: url(./../images/thumbs.png) no-repeat;
}


.thumbs img {
	width:	90px;
	height:	120px;
	padding: 10px 0 0 11px;
}

Alles anzeigen

Code

<span class="thumbs">
<a href="#"><img src="images/Final_1_tn.jpg" alt="" /></a>
<a href="#"><img src="images/Final_2_tn.jpg" alt="" /></a>

thumbs.png ist der Hintergrund auf dem dann die Thumbnails geschaufelt werden.

kernig2

...das dauert jetzt erstmal, bis ich da ganz durchsteige.

Das mit dem Hintergrund ist gut, da verringern sich doch gleich die ersten Probleme mit der Positionierung und den Abständen.

Ich hab inzwischen eine (superumständliche) Version gebastelt, die einigermaßen funktionert, werde das mal abgleichen.

Jetzt kämpfe ich noch mit schwarzen Rahmen um die Thumbnails. Wenn ich dann noch Nerv habe kommen noch Bildunterschriften...

Vielen tausend Dank erstmal

kernig

.Ulli

Wenn es nur der Rahmen ist

Code

.thumbs img {
	margin: 10px 0 0 11px;


	width:	90px;
	height:	120px;


	border:  2px solid #000000;
	padding: 2px 2px 2px 2px;
}

Alles anzeigen

kernig2

Hi nochmal,

ne, ich hab nen Rahmen, obwohl ich keinen wollte, hab ich nicht richtig beschrieben.

Ich probier jetzt schon mit allen möglichen Varianten, aber irgendwie krieg ichs nicht hin.

Ich wollte gern keinen Rahmen und als :hover einen grünen.

Jetzt hab ich einen schwarzen Rahmen und als :hover keinen :? Also genau umgekehrt...
Im IE7 hab ichs grad probiert: Da ist der Rahmen inaktiv blau, als :hover immerhin grün, wie ich ihn wollte.

Das ist hier meine Variante, ohne Hintergrund:

Code

.thumb { width: 150px;  margin: 11px}

.thumb:link {border: none}
.thumb:hover {border:medium #019934}

Was macht das eigentlich für einen Unterschied, ob ich ".thumb" oder "img.thumb" definiere?
Ich hatte den Rahmen schon weg, mit

Code

img.thumb {border:none}

Aber dann bekomm ich gar keinen Rahmen hin. Hab ich da grundsätzlich was nicht verstanden?

*kopfkratz*
kernig

Morbilein

tipp am rande:

es schaut immer ganz gut aus wenn die seite immer gleich aussieht... also die einzellnen html's nicht mal länger mal kürzer werden beim surfen...

das geht auch ganz einfach indem du neben der festen breite eine feste höhe angibst... wenn die seiten dann mal zu viel inhalt haben kannst du das einfach wieder anpassen... (als anhaltspunkt immer die längste seite)

...du solltest nämlich scrollbars also scrollleisten vermeiden weil diese selbst mit styls angepasst immernoch doof aussehen bzw. als unangenehm empfunden werden

da du ja eh stylesheets(<- so richtig geschrieben???) benutzt kannst du dir ja ne klasse für die tabelle oder layoutzelle (dif-tag <dif></div>) definieren.

mfg morbi

kernig2

Hi nochmal,
habs mal hochgeladen, das ist die aktuelle Seite an der ich hänge:
http://www.biogemuese-sachsen.de/presse.html

die schwarzen Rahmen im Firefox (blau im IE) krieg ich nicht weg. Die grünen hover nicht hin.

Mit der Positionierung erst recht nicht.

Ich dachte, ich baue einen div-Container, der etwas kleiner ist als das hellgrüne Feld und da pack ich die Thumbnails rein - Fehlanzeige. Aber noch gebe ich nicht auf.

Grüsse
kernig

Delgado

Kleiner Hinweis zum Impressum:

das ist nicht die USt-Id Nr., sondern die Steuernummer :wink:
Nicht dass da so ein Abmahnungsheini noch auf dumme Gedanken kommt.

BTW: unter Opera sehe ich keine schwarze oder blaue Rahmen.

.Ulli

Zitat von kernig2

die schwarzen Rahmen im Firefox (blau im IE) krieg ich nicht weg.

Code

div#content
background-color:#CBCC66; <== diese Farbe kopieren
}

Code

div#content a
color:#CBCC66; <== kopierte Farbe hier einsetzen
}

und weg ist er.

Zitat von kernig2

Mit der Positionierung erst recht nicht.

Benutzt du Firebug ? Damit kannst Du die Formatierung ändern und sofort die Auswirkung betrachten.

Zu hover noch keine Ahnung.

kernig2

...verstanden habe ich es nicht wirklich, nur so ungefähr.

Ich hab die web-Developer-Toolbar, da kann man in einem Andockfenster die CSS-Datei bearbeiten und die Auswirkungen gleich ansehen.

Danke
kernig

.Ulli

Jedem sein Werkzeug, habe mich an den Firebug gewöhnt.
Probier mal

Code

*
margin:6px;
padding:10px;
}

dann schaut es so aus. (noch mit den Rändern).
Die Angaben stimmen, müssen aber im css der Grafiken eingebaut werden, weil es sonst das gesamte Layout verhunzt.
[Blockierte Grafik: http://img3.imagebanana.com/img/zvuumhv/thumb/BildschirmfotoAuenhofFirefoxinternet.png]
Unten ist Firebug geöffnet. Im linken Feld sehe ich das Element und im rechten Feld das css incl. Quellen und Vererbung. Hier war die Ausrichtung der 6 Bildchen eine Fingerübung.

Zur Formatierung ist die Angabe pt nicht geeignet, sie kommt aus der Welt der Schriften. Für die Bildschirmpositionierung sind Pixel px besser.

kernig2

Hallo zusammen!

Und den Firebug hab ich mir auch geholt, ist echt klasse zum üben... schade, dass man die Änderungen nicht direkt speichern kann - oder doch?
Also Copy&Paste

Lade die CSS grad noch hoch, dann überarbeite ich die anderen Seiten noch (muss mal aufräumen dort, glaub ich) und bin stolz auf mich und meine Helfer. Wie man sieht habe ich nicht alle Tipps 1 zu 1 umgesetzt, sondern häufig als Anregung benutzt.

Außerdem hab ich ein paar ziemlich blöde Syntaxfehler gefunden (Doppelpunkte, wo keine hingehören), daran lag es im Endeffekt, dass ich nicht weitergekommen bin :oops:

Geht nicht - gibt's nicht. *sing und freu*

Grüsse
kernig