Bilder mit Untertext

[Uups]

Hi ihr,
wie ich das mit Tabellen hinbekomme weiß ich, aber ich hätte gerne mehrere Bilder in einer horizontalen Reihe mit Untertext versehen - und das in CSS. Leider kann ich dazu nix finden.
Danke!

[Felix Riesterer]

Liebe(r) Uups,

ich habe das so gelöst: eine Bilderseite

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Uups]

ich habe das so gelöst: eine Bilderseite

Hmmm...sieht ja sehr nach XHTML aus. Leider kenn ich nicht den Quelltext in der class="Bildergallerie". Hast du mit Boxen gearbeitet?

Vielleicht mach ichs tatsächlich mit ner Tabelle. Eigentlich sollte es mal ne Seite komplett ohne table werden...
Danke!

[Felix Riesterer]

Liebe(r) Uups,

Hmmm...sieht ja sehr nach XHTML aus.

Was hat XHTML damit zu tun? Der verwendete HTML-Dialekt (respektive DOCTYPE) hat primär ja nun nichts mit seiner Darstellung zu tun...

Leider kenn ich nicht den Quelltext in der class="Bildergallerie". Hast du mit Boxen gearbeitet?

Ich weiß, dass man Galerie nicht mit zwei "l" schreibt, aber nun hat sich diese dämliche Schreibweise so sehr in meine Seiten gefressen, dass ich das nicht mehr ändern werde.

.bildergallerie p {  
 float: left;  
 width: 12em;  
 height: 8em;  
 margin: 2px;  
 padding: 2px;  
 border: 1px dotted #dfdfdf;  
 text-align: center;  
}  
  
.bildergallerie p img {  
 margin: 0;  
 padding: 0;  
}

Vielleicht mach ichs tatsächlich mit ner Tabelle.

Bitte nicht!

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Uups]

Was hat XHTML damit zu tun? Der verwendete HTML-Dialekt (respektive DOCTYPE) hat primär ja nun nichts mit seiner Darstellung zu tun...

Stimmt schon...

Ich weiß, dass man Galerie nicht mit zwei "l" schreibt, aber nun hat sich diese dämliche Schreibweise so sehr in meine Seiten gefressen, dass ich das nicht mehr ändern werde.

Damit hab ich doch kein Problem.

.bildergallerie p {

float: left;
width: 12em;
height: 8em;
margin: 2px;
padding: 2px;
border: 1px dotted #dfdfdf;
text-align: center;
}

.bildergallerie p img {
margin: 0;
padding: 0;
}

  
So richtig erschließt sich mir das nicht. Deine Galerie sieht so nach js aus. Muss ich also mal ausprobieren.  
  

> Bitte nicht!  
  
Schon passiert...!

[Felix Riesterer]

Lieber Uups,

So richtig erschließt sich mir das nicht. Deine Galerie sieht so nach js aus. Muss ich also mal ausprobieren.

JS??? Der Effekt mit dem Aufpoppen der Vollansicht ist mit JavaScript gemacht, ja. Aber das Layout hat rein garnichts mit CSS zu tun!

Bitte nicht!

Schon passiert...!

Naja, die Seite orientiert sich ja nicht gerade an modernen Browsern, wenn das erste HTML-Element im Body ein <center> ist... Wie kann man nur!?

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Uups]

Naja, die Seite orientiert sich ja nicht gerade an modernen Browsern, wenn das erste HTML-Element im Body ein <center> ist... Wie kann man nur!?

Richtig - ist aber tatsächlich der hoffentlich einzige Schnitzer, den ich mir auf der Seite erlaube. Weiter hast du nicht geschaut ?
Für einen reinen HTML-Freak, wie ich es bin, hab ich nu mittlerweile einiges an CSS eingearbeitet. Nur - das mit dem JS bringt mich keinen Schritt weiter. Die Frage war ja - wie bekomme ich mit Hilfe von CSS und NUR CSS die Untertitel unter meine Bilder, wenn sie in einer horizontalen Reihe stehen. Dein Quelltext hat mir da keine Lösung gezeigt.

[Felix Riesterer]

Lieber Uups,

Richtig - ist aber tatsächlich der hoffentlich einzige Schnitzer, den ich mir auf der Seite erlaube. Weiter hast du nicht geschaut ?

...doch! Und da fand ich das hier: <div id="tabunten"><br><br><br>. Das ist ja brrrrrrr, nicht gerade schön...

Für einen reinen HTML-Freak, wie ich es bin, hab ich nu mittlerweile einiges an CSS eingearbeitet.

Ja, Dein Code ist sehr semantisch, das stimmt. Daher ist es Dir auch möglich, mit CSS Deine Seite so weit nach rechts zu verschieben, dass ich in einem Browserfenster von 1024px Breite nur Hintergrundgrafik zu sehen bekomme. :-/

Nur - das mit dem JS bringt mich keinen Schritt weiter. Die Frage war ja - wie bekomme ich mit Hilfe von CSS und NUR CSS die Untertitel unter meine Bilder, wenn sie in einer horizontalen Reihe stehen. Dein Quelltext hat mir da keine Lösung gezeigt.

Dann hast Du nicht im CSS danach gesucht! Das JS sagte ich bereits, hat nüscht mit der aktuellen Darstellung zu tun!

Ich erklär's Dir aber gerne hier:

<div class="bildergalerie">  
    <p><img src="..." alt="..." /><br />  
    Bildunterschrift</p>  
    <p><img src="..." alt="..." /><br />  
    Bildunterschrift</p>  
    <p><img src="..." alt="..." /><br />  
    Bildunterschrift</p>  
</div>

Die Textabsätze im div werden in ihrer Breite festgelegt (width:xyz), bekommen einen Rahmen (border:...) und werden linksbündig (float:left) nebeneinander ausgerichtet. Anschließend muss das float von einem nachfolgenden Element ge-clear-t werden, sonst hängt eventuell etwas anderes schief. Jedenfalls ist der relevante CSS-Code sehr kurz:

.bildergallerie p {  
    float: left;  
    width: 12em;  
    height: 8em;  
    margin: 2px;  
    padding: 2px;  
    border: 1px dotted #dfdfdf;  
    text-align: center;  
}  
  
.bildergallerie p img {  
    margin: 0;  
    padding: 0;  
}

Um diese <br />s nicht mehr zu gebrauchen, könnte man das Bild per display:block als Blockelement darstellen, sodass der Text automatisch in eine neue Zeile rutscht und die <br />s hinfällig werden. Ich werde mir das mal zu Gemüte führen...

Gernot hat völlig Recht, wenn er das mit den <br />s ganz brrrrr findet, denn man könnte das sehr gut mit einer Definitionsliste auzeichnen, was semantischer ist, und was dann völlig ohne CSS auch noch fast wie beabsichtigt ausschaut. Daher kommt gleich das "korrigierte" Beispiel:

<dl class="bildergalerie">  
    <dt><img src="...." alt="..." /></dt>  
    <dd>Bildunterschrift</dd>  
    <dt><img src="...." alt="..." /></dt>  
    <dd>Bildunterschrift</dd>  
    <dt><img src="...." alt="..." /></dt>  
    <dd>Bildunterschrift</dd>  
</dl>

Wenn man nur ein einziges Bild so auszeichnen möchte, dann mag das ja noch angehen, aber wenn man denselben Effekt erreichen möchte, den ich mit meinen <br />s erreiche, dann fällt das CSS wesentlich komplexer dafür aus, denn das Bild und die Unterschrift sitzen nun in benachbarten Elementen, anstatt innerhalb eines einzigen Elternelements zu sitzen. Daher kann man nun z.B. nicht einfach einen Rahmen darum generieren. Ich habe jetzt aber keine Lust (und Zeit!) mehr, ein dafür passendes CSS zu erstellen.

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Uups]

...doch! Und da fand ich das hier: <div id="tabunten"><br><br><br>. Das ist ja brrrrrrr, nicht gerade schön...

Aber ein wirklicher Fehler wohl auch nicht. Und denke bitte daran, dass bestimmte Editoren den Quelltext komplett umbasteln. Das ist mir in der Vergangenheit schon öfter aufgefallen.

Ja, Dein Code ist sehr semantisch, das stimmt. Daher ist es Dir auch möglich, mit CSS Deine Seite so weit nach rechts zu verschieben, dass ich in einem Browserfenster von 1024px Breite nur Hintergrundgrafik zu sehen bekomme. :-/

Ja cool. In einem anderen Beitrag habe ich eine Diskussion um einen anderen Punkt. Um zu zeigen, dass die vorgeschlagene Lösung NICHT funktioniert habe ich meine CSS nach Lösungsschema umgebaut. Das, was du da siehst ist das Ergebnis. Nicht meine originale Seite. So ist das mit mehreren Beiträgen. Es ist auch eine Unterdatei zum Probieren.

Ich bekomme leider nicht bei jedem Beitrag ne mail. Da scheint mir ne Antwort durch die Lappen gegangen zu sein.

<dl class="bildergalerie">

<dt><img src="...." alt="..." /></dt>
    <dd>Bildunterschrift</dd>
    <dt><img src="...." alt="..." /></dt>
    <dd>Bildunterschrift</dd>
    <dt><img src="...." alt="..." /></dt>
    <dd>Bildunterschrift</dd>
</dl>

  
Was ist eigentlich <dd>,<dl> und <dt>? Ich kenne dieses Attribut nicht.

[Felix Riesterer]

Liebe(r) Uups,

Was ist eigentlich <dd>,<dl> und <dt>? Ich kenne dieses Attribut nicht.

<http://de.selfhtml.org/html/text/listen.htm#definition@title=SELFHTML bildet...> *g*

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Uups]

<http://de.selfhtml.org/html/text/listen.htm#definition@title=SELFHTML bildet...> *g*

Danke. Brauchte ich bisher nicht - deshalb die Unkenntnis. Meine Literatur, die dafür sehr verständlich geschrieben ist, hat einige Dinge ausgespart.

[Uups]

So - heute bin ich wieder bissel frischer. Gesten war ich doch etwas verwirrt und gefrustet. Habs verstanden - und - Danke!

[Gernot Back]

Hallo Felix,

Gernot hat völlig Recht, wenn er das mit den <br />s ganz brrrrr findet, denn man könnte das sehr gut mit einer Definitionsliste auzeichnen, was semantischer ist, und was dann völlig ohne CSS auch noch fast wie beabsichtigt ausschaut. Daher kommt gleich das "korrigierte" Beispiel:

<dl class="bildergalerie">

<dt><img src="...." alt="..." /></dt>
    <dd>Bildunterschrift</dd>
    <dt><img src="...." alt="..." /></dt>
    <dd>Bildunterschrift</dd>
    <dt><img src="...." alt="..." /></dt>
    <dd>Bildunterschrift</dd>
</dl>

  
<klugscheißermodus>Wobei es in diesem Beispiel gar nicht so klar ist, ob das Bild oder dessen Untertext [definiens](http://www.phillex.de/defiens.htm) (DD) oder [definiendum](http://www.phillex.de/defdum.htm) (DT) sein sollte.</klugscheißermodus> ;-)  
  
Gruß Gernot

[Gernot Back]

Hallo Uups,

wie ich das mit Tabellen hinbekomme weiß ich, aber ich hätte gerne mehrere Bilder in einer horizontalen Reihe mit Untertext versehen - und das in CSS. Leider kann ich dazu nix finden.

Da wäre zu überlegen, ob das nicht vielleicht sogar auch inhaltlich und  tatsächlich eine Tabelle ist, und dann natürlich am besten auch so ausgezeichnet wäre. In Felix' Bespiel sehe ich strukturell zumindest eine Definitionsliste.

Mit einer DIV-Suppe ist ja keinem gedient.

Gruß Gernot

[INTCASE]

Hi ihr,

Hi,

also ich find die JS Galerie von Lightbox sehr schön, ich hab´s zwar nicht wie du es meinst, mit untertiteln, aber das lässt sich sicherlich auch ganz einfach ergänzen. So siehts bei mir aus

Danke!

Büdde,

Grüß,
Intcase
 GYRO

[Uups]

also ich find die JS Galerie von Lightbox sehr schön, ich hab´s zwar nicht wie du es meinst, mit untertiteln, aber das lässt sich sicherlich auch ganz einfach ergänzen. So siehts bei mir aus

Cool...nur, wenn ich ne Galerie haben will, dann such ich mir , wie du schon sagst, ein gefälliges JS. Aber eine lumpige Aneinanderreihung von Bildern ohne Schnickschnack und Untertexten muss doch in CSS möglich sein? Das war jedenfalls meine Frage....
Danke erst einmal.

[Uups]

also ich find die JS Galerie von Lightbox sehr schön, ich hab´s zwar nicht wie du es meinst, mit untertiteln, aber das lässt sich sicherlich auch ganz einfach ergänzen. So siehts bei mir aus
Grüß,
Intcase
GYRO

@Intcase:
War zwar nicht direkt die Antwort auf mein Problem, aber danke für diesen Tip! Ist eine sehr effektvolle Galerie, die ich gerade auf einer anderen Unterseite einbaue. Mal schauen, ob ichs korrekt hinbekomme. Sieht schon ganz gut aus...
Gruß, Steffen

[INTCASE]

Hi Steffen,

@Intcase:
War zwar nicht direkt die Antwort auf mein Problem, aber danke für diesen Tip! Ist eine sehr effektvolle Galerie, die ich gerade auf einer anderen Unterseite einbaue. Mal schauen, ob ichs korrekt hinbekomme. Sieht schon ganz gut aus...
Gruß, Steffen

sieht doch schon ganz gut aus:) sind die border um die bilder beabsichtigt?

Grüße,
Intcase
 GYRO

[Uups]

sieht doch schon ganz gut aus:) sind die border um die bilder beabsichtigt?

Das war ein Vorschlag von Felix, den ich gleich übernommen habe.(...wenn du die Lehrlinge meinst) Ich verstehe nur nicht, warum der Abstand zum Text so groß ist.
Die Diashow braucht nun nur noch vor-zurück-Funktionen. Da bin ich noch nicht ganz hintergestiegen.

[INTCASE]

Hi,

Das war ein Vorschlag von Felix, den ich gleich übernommen habe.(...wenn du die Lehrlinge meinst)

nein, ich meinte die blauen border hier
, der Abstand bei den Lehrlingen kommt vielleicht von einem padding, den du im CSS festgelegt hast.

Die Diashow braucht nun nur noch vor-zurück-Funktionen. Da bin ich noch nicht ganz hintergestiegen.

wie bist du bei der einbindung der Galerie vorgegangen? normalerweise bräuchtest du nur die ordner, die du bei Lightbox zum Download kriegst, in den ordner, wo du die HTML Dateien deiner Seite hast, einzufügen, und mit diesen befehlen:
<link rel="shortcut icon" type="image/ico" href="/images/favicon.gif" />
 <link rel="stylesheet" href="css/screen.css" type="text/css" media="screen" />
 <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

<script src="js/prototype.js" type="text/javascript"></script>
 <script src="js/scriptaculous.js?load=effects" type="text/javascript"></script>
 <script src="js/lightbox.js" type="text/javascript"></script>

das ganze aufzurufen. Ich bin auch kein Fachmann, aber so hats bei mir auf anhieb geklappt.

Grüße,
Intcase
 GYRO

[Uups]

nein, ich meinte die blauen border hier

Da hab ich garnix dran gedreht. Hab auch schon gesehen. Die haben in dem IE ein fieses Blau. Im Firefox in grau kaum zu sehen.

, der Abstand bei den Lehrlingen kommt vielleicht von einem padding, den du im CSS festgelegt hast.

Hab nur ein padding-left: festgelegt. Darum wunderts mich.

wie bist du bei der einbindung der Galerie vorgegangen?
<link rel="stylesheet" href="css/screen.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

Oh ... die screen-css habe ich nicht. Die gibt es in dem Ordner gar nicht. Vielleicht hast du eine andere Version? Irgendwie muss es aber gehen, denn die Grafiken sind ja im image-Ordner. Viel schlimmer ist, das die verschiedenen IE verrückt spielen. Der Firefox stellt alles komplett korrekt dar. Mein alter IE zeigt die Untermenüs von "Bauelemente" immer an und die Diashow ist nur noch ein Lacher, aber immerhin zeigt er es wenigstens. Der neue IE meiner Frau zeigt den wichtigsten - eben "Bauelemente" gar nicht, so dass ich die Diashow gar nicht testen konnte. Das nervt. Vielleicht frage ich mal im Browser-Thread.

[Uups]

nein, ich meinte die blauen border hier

Lassen sich scheinbar nicht einstellen. In der css hab ich jedenfalls nix gefunden und ans js geh ich nicht ran.

Ich hatte vergessen, die Bilder zu gruppieren. Deshalb hatte ich keine Vor-Zurück-Funktion. Bisel nervig ist der dotted-Rahmen, der im Bild entsteht. Verdirbt das Bild bissel...

[Felix Riesterer]

Lieber Uups,

nein, ich meinte die blauen border hier

Lassen sich scheinbar nicht einstellen.

doch: a img { border: none; }

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Uups]

doch: a img { border: none; }

Ach klar - die sind ja voreingestellt.. Im FF isses mir nicht aufgefallen, aber die blauen IE-Kästen hätten es mir sagen sollen, dass es die Standardeinstellung ist. Wie blöd...
Danke!

[Uups]

Diese  Anordnung der Bilder mit Untertext habe ich ja nun dank deiner Hilfe per CSS hinbekommen. Jetzt habe ich aber das Problem, dass nach dieser abgeschlossenen div kein größerer Abstand hinzubekommen ist.
Folgende Zeile habe ich nach der Bildergalerie gesetzt:

<h4 style="padding-left:90px; padding-top:90px;">Standard - Treppentraillien</h4>

Der Abstand zur div ist minimal und ich bekomme ihn weder mit padding, noch mit einem <br> größer. Gewiss fehlt mir da wieder einmal ein Stück CSS-Wissen...

[Auge]

Hallo

Diese  Anordnung der Bilder mit Untertext habe ich ja nun dank deiner Hilfe per CSS hinbekommen. Jetzt habe ich aber das Problem, dass nach dieser abgeschlossenen div kein größerer Abstand hinzubekommen ist.
Folgende Zeile habe ich nach der Bildergalerie gesetzt:

<h4 style="padding-left:90px; padding-top:90px;">Standard - Treppentraillien</h4>

Der Abstand zur div ist minimal und ich bekomme ihn weder mit padding, noch mit einem <br> größer. Gewiss fehlt mir da wieder einmal ein Stück CSS-Wissen...

Der Fakt ist, dass ein mit float ausgezeichnetes Element aus dem normalen Dokumentfluss genommen ist. margin und padding anderer Elemente beziehen sich nicht auf die Ausmaße des gefloateten Elements.

Deine Überschrift folgt dem genannten Element der Klasse "bildergallerie2", welche gefloatete <p>s enthält. Übrigens darf ein <p> keine anderen Blockelemente, auch nicht <p>, enthalten. Benutze zur Gruppierung ein <div>, dass dann die Daten der Galerie enthält.

Die Überschrift ist die Stelle, die du mit clear:left; auszeichnest. Damit stellst du den Dokumentfluss wieder her und margin und padding werden dann für dieses Element funktionieren.

Tschö, Auge

[Auge]

Hallo

... Übrigens darf ein <p> keine anderen Blockelemente, auch nicht <p>, enthalten. Benutze zur Gruppierung ein <div>, dass dann die Daten der Galerie enthält.

Vergiss das, ich habe mich verguckt. Steht ja, genau wie von mir gefordert, schon da.

Tschö, Auge

[Uups]

Hi du,
hab das, was du geschrieben hast, d.h. dem nächsten Element nach der div ein float einzusetzen schon probiert. Egal ob left oder clear ist dann meine weiße Seite zu Ende und ich schreibe auf dem Hintergrund. Geht also nicht wirklich - es sei denn, ich definiere ne neue div ür den Seitenanschluß. Da ich aber mit id arbeite mußß ich dann noch ne dritte id für den Seitenanschluß definieren.... Gibts da keine einfachere Lösung?

[Felix Riesterer]

Liebe(r) Uups,

bitte vergiss inline-styles! Benutze Deine zentrale CSS-Datei, um dort Formate zu definieren, anstatt mit style="..." etwas lokal auf jeder Seite erneut zu gestalten. Das ist Wahnsinn, wenn man einmal das "Design" einer Seite umstellen möchte! Insbesondere verstehe ich nicht, warum Du folgendes im HTML schreibst:
<h1 style="....." align="center">....</h1>

Also: Schmeiß alle align-Attribute raus! Die haben in einem CSS-Layout nichts zu suchen!

Oder auch sehr fragwürdig:
<div id="tabunten"><br><br><br>

Also: Schmeiß alle <br>s raus! Die sind völlig brrrrrrr! Abstände werden per CSS mit margin realisiert!

Nutze die Möglichkeiten, Formate zentral zu definieren, indem Du Dein HTML sinnvoll einsetzt, und indem Du zusammenhängende HTML-Elemente sinnvoll gruppierst! Was spricht denn z.B. dagegen, Deine Bau-Elemente-Seite so auszuzeichnen?

<div id="bauelemente">  
    <h2>Bauelemente</h2> <!-- (ja, das ist keine <h3>, sondern eine <h2>!!) -->  
    <p>....</p>  
  
    <h3>Standard - Treppenpfosten</h3>  
    <p>...</p>  
  
    <h3>Standard - Treppentraillien</h3>  
    <p>...</p>  
</div>

Im CSS kannst Du dann für die auf dieser Seite verwendete Überschriften und Textabsätze die vom generellen Layout Deiner Seite abweichenden margins und paddings eintagen, indem Du über den Nachfahrenselektor auf sie zugreifst:

/* generelle Formate */  
p {  
    margin: 0;  
    padding: 0 0 5px 0;  
}  
  
h2 {  
    color: #8080ff; /* Himmelblassblau */  
}  
  
h3 {  
    border: 5px dashed #00ff00; /* Ekelgrün */  
}  
  
  
/* spezielle Formatierungen für Bauelemente-Seite */  
#bauelemente p {  
    padding: 0 90px;  
}  
  
#bauelemente h2 {  
    color: #ff0000; /* Wichtigtuerrot*/  
}  
  
#bauelemente h3 {  
    border: none;  
    background: #a0ffa0; /* Froschgrüner Hintergrund */  
}

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Uups]

<h1 style="....." align="center">....</h1>

Also: Schmeiß alle align-Attribute raus! Die haben in einem CSS-Layout nichts zu suchen!

Möglich, dass ich beim Umbau alte Elemente mit übernommen habe. Die neue Seite ist nicht nur ne neue Seite, sondern auch ne Übungsseite. Da ich bisher wenig mit CSS gearbeitet habe und immer nur Phasenweise Zeit habe, mich um meine oder andere HP´s zu kümmern, mach ich die Seiten im Quelltext für MICH übersichtlich, d.h. manche Attribute eben zentral, andere inline. Ich tu ja niemandem nen Gefallen, sondern muss auch nach nem halben Jahr noch durchblicken, wenn ich die Hälfte wieder vergessen habe. Nur - funktionieren muss es natürlich. Der Umbau ist für mich schon ein Gewaltakt. Es gibt ja auch leider nicht auf jede Frage ne Antwort...

Oder auch sehr fragwürdig:
<div id="tabunten"><br><br><br>

Ich werds mal durchschauen und sehen, was ich wegbekomme.

Nutze die Möglichkeiten, Formate zentral zu definieren, indem Du Dein HTML sinnvoll einsetzt, und indem Du zusammenhängende HTML-Elemente sinnvoll gruppierst! Was spricht denn z.B. dagegen, Deine Bau-Elemente-Seite so auszuzeichnen?

Da spricht prinzipiell gar nichts dagegen. Die Überschriften sind ja auch schon zentral definiert - drum hab ich h4 kleiner als h3. Kann ich mir besser merken - warum auch immer...  *g*
Interessiert hätte mich aber trotzdem, warum das vorher geschilderte Problem mit dem Abstand nicht gelöst werden kann. Einfach fürs Allgemeinverständnis - sonst bleibt CSS einfach für mich unverständlich. Genau so das Verhalten der IE´s. Hier sagt jeder, der sich damit beschäftigt, dass der IE kein Problem macht. Beim bauen stelle ich fest, dass das ein großes Problem ist. Selbst CSS-Teile aus dem SelfHtml, die für den IE ausgelegt sind, spielen letztlich verrückt.. Das ist echt deprimierend.

[Uups]

Oder auch sehr fragwürdig:
<div id="tabunten"><br><br><br>

Wieder einmal - leider:
Wenn ich die <br>´s wegnehme und im <h4>-Element den Abstand nach oben mit padding festlege ist der Seitenuntergrund zuende und ich bekomme unschöne Effekte. Solange ich die Ursache für dieses Problem nicht weiß, müssen die unschönen <br>´s bleiben.

[Felix Riesterer]

Liebe(r) Uups,

Da spricht prinzipiell gar nichts dagegen. Die Überschriften sind ja auch schon zentral definiert - drum hab ich h4 kleiner als h3. Kann ich mir besser merken - warum auch immer...  *g*

wenn im Dokument aber vor der <h3> keine <h2> gestanden hat, dann ist die inhaltliche Struktur nicht in Ordnung. Eine <h3> ist eine Unter-Unterüberschrift und steht in der Hierarchie unter einer <h2>. Wenn eine solche aber fehlt, dann ist da was sehr komisch...

Daher müssten Deiner inhaltlichen Logik folgend Deine Überschriften so aussehen:
<h1>Bauelemente</h1>
<h2>Standard - Treppenpfosten</h2>
<h2>Standard - Treppentraillien</h2>

Interessiert hätte mich aber trotzdem, warum das vorher geschilderte Problem mit dem Abstand nicht gelöst werden kann.

Es kann. Du müsstest lediglich Deinen Überschriften ein clear verpassen, damit das floaten der Textabsätze mit den Bildern wieder beendet wird. Nocheinmal zum Verständnis:

Wenn Du ein Element floatest, dann wird es aus dem normalen Fluss herausgenommen und "schwimmt" (engl: float) auf dem Rest daher. Dadurch rutscht das Nachfolgende, das nicht-gefloatete an seinen Platz vor, denn gefloatete Elemente "verbrauchen" keine Höhe. Das merkst Du daran, dass ein Rahmen um das Elternelement (in Deinem Falle könnte man um die Überschrift smat folgenden Textabsätzen ein extra <div> ziehen, um das sichtbar zu machen), in welchem sich Dein gefloatetes Element (in Deinem Falle die <p>s) befindet, nicht nach Deinen Erwartungen ausfällt. Aber daran siehst Du, was die floats bewirken.

Wenn nun ein nachfolgendes Element (in Deinem Falle die <h4>, die eigentlich eine weitere <h3> sein sollte!) ein clear:left oder ein clear:both bekommt (das left im clear bezieht sich auf das left im float), dann wird der Fluss der Elemente wieder hergestellt. Daher solltest Du in Deinem Stylesheet folgendes eintragen:

.bildergallerie2 h2,  
.bildergallerie2 h3,  
.bildergallerie h4 {  
    clear: left;  
}

Genau so das Verhalten der IE´s. Hier sagt jeder, der sich damit beschäftigt, dass der IE kein Problem macht.

Dann hast Du mit den falschen Leuten gesprochen!!! Der IE ist so ziemlich das mieseste, was es an CSS-Unterstützung gibt. Selbst der IE7 kann (obwohl er ja brandneu ist!) noch immer nicht alles das, was standardkonforme Browser schon seit Jahren beherrschen! Dieses Forum ist voll von Threads, in denen die eklatanten CSS-Schwächen der IEs thematisiert werden. Schau nach!

Beim bauen stelle ich fest, dass das ein großes Problem ist. Selbst CSS-Teile aus dem SelfHtml, die für den IE ausgelegt sind, spielen letztlich verrückt.. Das ist echt deprimierend.

Der IE ist tatsächlich deprimierend. Daher verwende ich für den IE ein extra Stylesheet, indem ich seine Spinnereien auszugleichen versuche. Das wirst Du wahrscheinlich am Ende Deines "Gewaltaktes" auch noch tun... :-)

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Uups]

Daher müssten Deiner inhaltlichen Logik folgend Deine Überschriften so aussehen:
<h1>Bauelemente</h1>
<h2>Standard - Treppenpfosten</h2>
<h2>Standard - Treppentraillien</h2>

OK. muss ich noch einmal komplett überdenken und -arbeiten.

Es kann. Du müsstest lediglich Deinen Überschriften ein clear verpassen, damit das floaten der Textabsätze mit den Bildern wieder beendet wird.

Inline habe ich das schon alles versucht und habe keinerlei Effekt gehabt. Versuch ich es also zentral.

Dann hast Du mit den falschen Leuten gesprochen!!! Der IE ist so ziemlich das mieseste, was es an CSS-Unterstützung gibt. Selbst der IE7 kann (obwohl er ja brandneu ist!) noch immer nicht alles das, was standardkonforme Browser schon seit Jahren beherrschen! Dieses Forum ist voll von Threads, in denen die eklatanten CSS-Schwächen der IEs thematisiert werden. Schau nach!

Hatte ich bereits entdeckt und gespürt. Auf einige Fragen hin, wo ich das Thema angesprochen habe, gab es dann kräftig Kontra - es gibt kein Problem, das nicht lösbar ist und so. Das mag auch stimmen, aber dazu muss man die Browser und ihr Verhalten schon so gut kennen, dass es für jemanden wie mich, der das zwar aus Spaß, aber zwischen Tür und Angel macht, fast nicht lösbar ohne dieses Forum.

Kann ich nur hoffen, dass es immer freundliche Könner gibt, die helfend einspringen und nicht nur auf SelfHtml verweisen, das nicht immer ausreicht. Nicht, dass es nicht drin steht, aber man muss auch das, was man gerade sucht finden. Das ist aber eine Wissenschaft für sich.

[Uups]

Interessiert hätte mich aber trotzdem, warum das vorher geschilderte Problem mit dem Abstand nicht gelöst werden kann.

Sowas Blödes - es war ein Schreibfehler, den ich nicht entdeckt habe. Hab es aber trotzdem inline gemacht. Da muss ich nicht immer in die css  und schauen, was ich gerade wieder verzapft habe...
Danke!

[Felix Riesterer]

Liebe(r) Uups,

Hab es aber trotzdem inline gemacht.

... manche lernen es auf die harte Tour, und wieder andere lernen es nie... ;-)

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Uups]

Ist ein inline gesetztes Script ein Fehler oder eine individuelle Ansicht...!?

[Felix Riesterer]

Liebe(r) Uups,

Ist ein inline gesetztes Script ein Fehler oder eine individuelle Ansicht...!?

es ist weder noch, denn es ist eine Notlösung.

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Uups]

es ist weder noch, denn es ist eine Notlösung.

Warum werden Notlösungen in einschlägiger Literatur publiziert?

[Felix Riesterer]

Ni Hao!

es ist weder noch, denn es ist eine Notlösung.

Warum werden Notlösungen in einschlägiger Literatur publiziert?

...der Vollständigkeit halber? Es kann auch sein, dass rein zu Demo-Zwecken eine Notation in inline-Styles einfach kürzer ist. Für eine Seite innerhalb eines Webangebots ist dieser Weg jedoch mit erheblichen Einbußen bei der Pflege und Flexibilität verbunden, daher nenne ich es eine Notlösung.

Aber jedem Tierchen sein Plaisierchen! ;-)

Liebe Grüße aus Shanghai,

Felix Riesterer.

[INTCASE]

Hi,

Ich hatte vergessen, die Bilder zu gruppieren. Deshalb hatte ich keine Vor-Zurück-Funktion. Bisel nervig ist der dotted-Rahmen, der im Bild entsteht. Verdirbt das Bild bissel...

man könnte auch einen hinweis darauf machen, das sich mit den tasten n-vor und p-zurück navigieren lässt, dann könnte man auf die zusätzlichen vor und zurück grafiken verzichten, wenn die besucher mit der Tastatur navigieren hat sich das dann auch erledigt.

Grüße,
Intcase
 GYRO

[Uups]

man könnte auch einen hinweis darauf machen, das sich mit den tasten n-vor und p-zurück navigieren lässt, dann könnte man auf die zusätzlichen vor und zurück grafiken verzichten, wenn die besucher mit der Tastatur navigieren hat sich das dann auch erledigt.

Ja - das werde ich zusätzlich anbieten. Ich werde mal schauen, ob man die Tastaturbelegung ändern kann...vielleicht auf die Pfeiltasten. Aber ich denk mal, dass ich da im js nicht durchsteige.

[INTCASE]

Hi,

Ja - das werde ich zusätzlich anbieten. Ich werde mal schauen, ob man die Tastaturbelegung ändern kann...vielleicht auf die Pfeiltasten. Aber ich denk mal, dass ich da im js nicht durchsteige.

wenn ich mal wüsste, welches programm ich brauch um JS Dateien zu öffnen würd ich das mal angehen, aber wenn ich die Dateien mit dem Editor auf mache sehe ich nur ein einziges chaos:) Das passiert mir aber des öfteren auch mit CSS Dateien von anderen Servern!?! Kopierschutz? Ich weiss es nicht.

Grüße,
Intcase
 GYRO

[Uups]

wenn ich mal wüsste, welches programm ich brauch um JS Dateien zu öffnen würd ich das mal angehen, aber wenn ich die Dateien mit dem Editor auf mache sehe ich nur ein einziges chaos:) Das passiert mir aber des öfteren auch mit CSS Dateien von anderen Servern!?! Kopierschutz? Ich weiss es nicht.

Ich habe es mit nem normalen proton31 geöffnet. Im lightbox.js
kannst du im unteren Drittel im folgenden Abschnitt die Tastaturbelegung ändern.

~~~javascript key = String.fromCharCode(keycode).toLowerCase();

if((key == 'x') || (key == 'o') || (key == 'c')){ // close lightbox
   myLightbox.end();
  } else if(key == 'p'){ // display previous image
   if(activeImage != 0){
    myLightbox.disableKeyboardNav();
    myLightbox.changeImage(activeImage - 1);
   }
  } else if(key == 'n'){ // display next image
   if(activeImage != (imageArray.length - 1)){
    myLightbox.disableKeyboardNav();
    myLightbox.changeImage(activeImage + 1);
   }
  }

  
Bin jetzt noch auf der Suche nach dem chr-Code für die Pfeiltasten...

[Uups]

Glücklicherweise gibt es hier ausgesprochen hilfsbereite Leute:

~~~javascript if((key == 'x') || (key == 'o') || (key == 'c')){ // close lightbox
   myLightbox.end();
  } else if(keycode == 37){ // display previous image
   if(activeImage != 0){
    myLightbox.disableKeyboardNav();
    myLightbox.changeImage(activeImage - 1);
   }
  } else if(keycode == 39){ // display next image
   if(activeImage != (imageArray.length - 1)){
    myLightbox.disableKeyboardNav();
    myLightbox.changeImage(activeImage + 1);
   }
  }

  
Das sind die Pfeiltasten rechts/links  (37/39)

[INTCASE]

Hi,

Glücklicherweise gibt es hier ausgesprochen hilfsbereite Leute:

da stimm ich dir zu:)

Das sind die Pfeiltasten rechts/links  (37/39)

also das geht, was ich nicht versteh ist, obwohl ich die img Next und Prev gelöscht habe, sind sie noch da. ich probiers grad über Localhost und die Pfeiltasten gehen, nur die img sind auch noch da.

Grüße,
Intcase
 GYRO

[Uups]

...vielleicht ein cache-Problem...?! Hab ich auch manchmal.