Beispiel

Wie schaffe ich es, dass ich genau unter die Thumbnails auch noch Bildunterschriften habe? Wenn ich div-container nehme, stehen die Unterschriften untereinander. Bei float:left steht eine an der linken Seite. Ich steh echt auf'm Schlauch - ich brauch einen Denkanstoß...

Ansonsten habe ich die Seite jetzt komplett ohne Tabellen *grins*, und den Scroller sieht man auch wieder

Claudia

Ich würde ´mal vorschlagen, dass für jedes Bild ein separater div-Container notwendig ist, dann klappt es auch mit den Unterschriften.

Beispiel:


Wenn die div.bildcontainer nun etwas länger sind, als die Bilder, z.B. width 100, height 120, dann sollte der Text direkt unter dem Bild erscheinen. Weitere Formatierungen (zentrirt etc) sind möglich. Wichtig ist nur, dass die div.bildcontainer die Werte float:left zugeordnet bekommen.
im übrigen würde ich die Breiten- und Höhenangaben der Bilder in der CSS-Datei definieren, dann wird der html-code schlanker und besser lesbar. Ich habe das oben gleich einmal gemacht.
Die zugehörige CSS-Schnippel lauten:



Zuletzt noch ein Tip. Nimm um aller User-Willen die Leerzeichen aus den Dateinamen! Ich fürchte, dass sonst bei den meisten Providern Schluss mit lustig ist. Außerdem aufgepasst mit der Groß- und Kleinschreibung bei Dateinamen. Bei manchem Provider wird das alles "klein" gemacht, mit der Folge, dass die Dateien nicht mehr aufrufbar sind.

Nee, klappt nicht. Ich hab mal einen Screenshot angehängt, wie es jetzt aussieht. Anscheinend greift die class der gallery nur noch beim ersten Bild. Außerdem will ich alle drei nebeneinander zentriert haben und nicht einen ganz links. Deswegen denke ich mal, dass float:left nicht geeignet ist.



Claudia

Tja, eigentlich schon Alles gesagt.
Aber das mit der Groß-/Kleinschreibung kann ich nur bestätigen, die Leerzeichen ebenso.
Auf dem heimischen PC läuft Alles prima, manchmal dann auch im Netz. Aber anscheinend passiert beim Routing ab und zu, dass eben die Kleinschreibung zwingend erforderlich ist.
Bei meiner Page ist es mal passiert, dass ich sie mehrfach aufgerufen habe, ohne Probleme, plötzlich fehlten Dateien.
Da ist Phase5 leider zu sehr Windows orientiert, wäre mal 'ne Überlegung, ihn mehr an Unix anzubinden.
Und für alle, die HTML programmieren:
die Unix (und auch Linux) Konventionen, die man wissen sollte:

keine Leerzeichen
nur Kleinschreibung

macht die Sache eigentlich einfach.

Gruß von Jomal



Und wie wäre es mit der verpöten Tabelle?
Scheint mir am einfachsten zu sein.

Gruß, jomal

Ohne besserwisserisch wirken zu wollen, die Lösung funktioniert zwar, aber 2 Anmerkungen:


Die mehrfache Verwendung der gleichen id ist nicht HTML/CSS-konform, auch wenn die meisten Browser das akzeptieren. Der richtige Weg ist hier die Definition von Klassen und die Einbindung mit "class"

Nicht gut, da XHTML, nicht HTML, dann muss auch eine entsprechende Definition im Header erfolgen

Dieses nur, da ich neben dem Kampf den Tabellen auch den Kampf für "HTML strict" aufgenommen habe.




Na sorry, versuche es einmal mit der richtigen Schreibweise. Ich hatte in CSS "heigth" geschrieben! Es muss aber "height" heissen.

Gegebenenfalls muss die Definition der class .gallery angepasst werden bzw. die Eigenschaften von "span" neu definiert werden, falls sie zuvor andere Eigenschaften zugewiesen bekommen hat.

Sorry, als Ketzer kann ich mich hier nur am Rande um Konformisten kümmern. Mach Dir Kopien von lnk1 und img1 und ändere die Zeilen. Dann noch validieren und das entsprechende Logo einbinden. Ganz wichtig! Wenn's dann immer noch funktioniert, tja, dann funktioniert es halt.

Hallo


So, jetzt will ich auch mal Korinthen kacken.

- HTML programmiert man nicht
- Dateinamen mit Leerzeichen (und auch Umlauten) werden von UNIX/Linux akzeptiert, sind aber im HTTP-Kontext schwierig, da sie maskiert werden müssen. Leider wissen und tun das viele nicht (so es der Browser nicht von allein tut), das ist das Problem.
- Die Kleinschreibung ist eine Empfehlung (aber eine sehr gute), kein Muss.


Was soll der polemische Quatsch? Eine ID muss dokumentweit eindeutig sein, Punktum. Auch wenn das in Bezug auf CSS und die Fehlertoleranz der Browser funktionieren sollte, wenn die ID zusätzlich per JavaScript angesprochen werden oder als Sprungziel dienen soll, ist Schluss.

Dann doch bitte gleich richtig, damit es nicht hinterher zu unnötigen Nachfragen kommt.

Tschö, Auge

Ich erlaube mir gelegentlich Scherze. Wenn Du die schon nicht verstehst, sei doch wenigstens dankbar für die Vorlage zu Deiner allabendlichen Selbstbalsamierung. Punktum und Basta!

Hallo,

jaaaaaa, endlich mal wieder was los hier!





Die Ritter der Web-(Tafel-)Runde rüsten zum ultimativen Kampf. Das Säbelrasseln ist deutlich zu hören, die Pferde scharren nervös den Boden auf, das buntgeschmückte Volk wartet in Ehrfurcht auf das Aufeinandertreffen der hochgerüsteten Giganten. Und daaa, die Lanzen brechen, aber die Helden sitzen noch im Sattel. Wer wird wohl als erstes zu Boden gehen? Wer wird endlich die Gunst der angebeteten Jungfrau Hypera Markup gewinnen, um der zukünftige Nachfolger auf dem Weberia-Thron zu sein? ....

Demnächst in diesem Forum. Die neue Serie vom amerikanischen Starregisseur Cascading Stylesheet. An der Kamera Divless Construct.

Schauen Sie wieder rein, verpassen Sie nichts!

HTML sei keine Programmiersprache, wurde hier treffenderweise schon oft belehrend angeführt. Wer HTML-Neulingen mal eben nebenbei CSS empfiehlt, sollte dies bedenken, denn Cascading Style Sheets ist eine Programmiersprache, welche wie alle anderen Sprachen erlernt werden muss. Phonetisches Nachbrabbeln führt zwar im Einzellfall zum gewünschten Resultat, gewonnen ist damit aber nichts. Das gilt natürlich auch für HTML. Guckst du hier, guckst du da und guckst du weita, sind so lehrreich wie Verweise auf die Pinyin-Umschrift für einen nicht chinesisch Sprechenden.

Wer, aus welchen Gründen auch immer, CSS hier propagieren möchte, soll dies tun. Dann aber bitte richtig. Es gibt im Netz hervorragende Einführungen in CSS, die einem Bücherkauf zunächst, allein schon wegen der Preise, vorzuziehen sind.

Zuerst

http://de.wikipedia.org/wiki/Cascading_Style_Sheets

besuchen, damit man ahnt um was es geht. Hilft auch Absurditäten wie "keine Tabellen" etc. zu verstehen.

http://www.thestyleworks.de/index.shtml
http://www.brings-online.com/webhilfe/index.php
http://www.css4you.de/
http://www.stichpunkt.de/css/bereiche.html
http://www.webmaster-resource.de/tutorials/css.php
http://jigsaw.w3.org/css-validator/validator-uri.html

Ich hab das schon richtig geschrieben, und nicht einfach nur per copy und paste eingefügt.

Ich wollte und will hier aber keine Grundsatzdiskussionen vom Zaun brechen - auch wenn Ihr Euch freut *lol*. Ich bin für mich zu einer Lösung gekommen, und die heißt Tabelle. Ist am einfachsten und sieht (hoffentlich) überall gleich aus. Ist aber noch nicht hochgeladen, weil ich noch im Büro sitze.

Claudia

Glückwunsch! :-) Zunächst mal mit einer Tabelle, zwei Zeilen mit je drei Spalten, keine Schnörkel wie Border etc.. Später vielleicht mit CSS "aufhübschen", denn, wer hätte das gedacht? CSS ist auch für Tabellen gemacht.

Moin Dieter,


Einspruch euer Ehren!
Imho ist gerade das: ''Guckst du hier, guckst du da und guckst du weita'' eminent wichtig um den learning by doing Prozess voran zu treiben, ständiges nachsehen in der Quellcode von Webseiten an den man gefallen hat und den Versuch alsdann zu verstehen ''wie die das gemacht haben'', bring einem ungeheuer voran.
So ist zumindest meine Erfahrung und das nicht nur in Sachen HTML, sondern auch im beruflichen Leben.

Sicherlich sollte am Ende auch das theoretische Gerüst irgendwann mal stehen, schließlich sollte man wissen was man da tut ( B) ), da sind die von Dir angegebenen Links ungeheuer wichtig, hilf- und lehrreich.

cu
Conny

Klar, Conny, lesen bildet, leider muss man dazu erst einmal lesen können. Verweise auf weitere Texte haben noch keinem Anfänger geholfen es zu erlernen. Weiter oben hatte ich ja ein Beispiel angefügt. Kann jeder „lesen", jedoch nicht jeder verstehen. Mal abgesehen von den Experten, die natürlich lauthals intervenierten. Spätestens ab dem Punkt müssen die noch nicht ganz CSS-Lesefesten die Segel streichen. Warum Du gerade mir, der ich doch auch hier immer für Hilfe zur Selbsthilfe eintrete und meine Beispiele dementsprechend gestalte, Learning bei Doing erklären möchtest, ist mir nicht ganz einsichtig.

Sicher, man kann auch bei CSS Trial and Error praktizieren, die Kontrolle an den Browser abgeben - und dann versuchen die CSS-Logik zu verstehen. Ein mühsamer, wenig erfolgversprechender Weg! Natürlich sehe auch ich mir CSS-Files auf fremden Webseiten an. Man will ja wissen wie wer was gemacht hat und liest halt.

Hallo Dieter,

Mir auch nicht... denn das ist/war auch nicht meine Intension.
Schließlich bist Du ein alter Hase, von dem die Meisten noch was lernen können (mich eingeschlossen).

Ich dachte es war klar, habe ich doch nur das für mich wesentlich zitiert; im Kern und sinngemäß: Guckst Du hier sei nicht Lehrreich und DAS ist imho nicht richtig.
Damit möchte ich nicht unbedingt was erklären, vielmehr ein gestatteter Hinweis zumal auch aus der eigenen Erfahrung entsprungen.

cu
Conny

Guckst du hier!

Damit man einen erfolgreichen Einstieg in CSS finden kann, hier noch eine Linkempfehlung. Bei fractatulum-CSS von Jan Heinicke finden sich leicht verständliche, didaktisch geschickte, einführende und erklärende Texte sowie praktische Beispiele als Vorlage für eigene Versuche.

[quote name='Auge' date='14.09.2006 - 21:02' post='23294']
Hallo Auge,

das mit dem 'Programmieren' von HTML war nur eine Mißdeutung. Allerdings, wenn ich Code in HTML schreibe oder in C++ oder Visual Basic, wo ist der Unterschied?
Naja, macht nichts, ich sehe das nicht so eng.
Gruß von jomal

Dieses nur, da ich neben dem Kampf den Tabellen auch den Kampf für "HTML strict" aufgenommen habe.

Hallo, stwie,

wieso eigentlich Kampf gegen die Tabellen?
Ich komme damit gut zurecht. Naja, was man einmal richtig kann, das schmeißt man kaum über Bord.
Aber eine Überlegung ist es schon Wert. Ich habe früher auch kein CSS benutzt und es nun schätzen gelernt.
Vielleicht bin ich da ein wenig träge.
Allerdings sehe ich es so, dass eine Seite gut aussehen soll, und wie ich das erreiche, das spielt für mich kaum eine Rolle. Ich weiß, dass ich nicht immer den besten Stil beim programmieren habe (Hochsprache allerdings), aber wichtig ist doch, dass der User etwas Brauchbares findet, egal, ob da manchmal Spagetti-Code hintersteckt. Obwohl, meine alten Programme habe ich dann doch immer optimiert, aber der User merkt davon eigentlich nichts, lediglich die Wartung ist leichter.
Apropos Wartung: viel wichtiger ist für mich das gute Kommentieren, zu dumm, dass das bei HTML-Code auch immer mit längeren Ladezeiten verbunden ist. Naja, bei meinem DSL2000 macht das nichts, aber es gibt ja auch noch Leute, die mit Modem arbeiten.
Da in Phase5 keine Möglichkeut besteht, auch eine Version ohne Kommentare zu speichern, werde ich demnächst ein Programm schreiben, welches das für mich erledigt.
Angeregt wurde ich von einem uralten Basic-Programm namens REMLINE. Ja, in Zeiten der alten DOS-Rechner war das nicht verkehrt, das Laden von Diskette wurde so schneller.
Nun ja, ich werde erstmal bei den Tabellen bleiben, aber wenn Du ein vernünftiges Argument hast, überdenke ich diese Entscheidung natürlich.

Gruß
jomal