figcation mit GRID

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Werbung

Jetzt auf elektrisches Fahren umstellen, Umwelt schonen und 1.500km kostenlosen Strom von Tesla bekommen. https://ts.la/carsten15473.

KurtWz

Neues Mitglied
2 Oktober 2019
9
0
1
86
Hallo!
Ich bin der Neue!
Ich habe eine begonnen eine Website mit Grid zu gestalten.
Innerhalb eines Textes (evtl. auch am Rand/float) will ich eine Bild mit Unterschrift einfügen. <figure><img src="Kirche.jpg" alt="Kirche" width"417" height=267><figcation> Kirche<figcation></figure>
CSS
img {
max-width:100%;
height:auto;
padding-right: .5em;
}
figure {
margin: 10px;
padding: 10px;
border: 10px solid gainsboro;
width:inherit;
background: white;
}
figcaption {
padding: 5px;
text-align:center;
}
Diese img-Formatierung wegen Bildern in <Aside>
Figure wird aber immer über die ganze Seite gedehnt, also immer grösser al das Bild. Die Unterschrift stahet daneben. s. http://www.wentzell.eu/Land/Orte-Beschreibung/Gennin/Gennin.html
Kann mir jemand mich aus der Sachgasse führen, ich habe viele Möglichkeiten versucht.
Gruss
KurtWz
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.468
294
83
66
Der HTML-Inspektor sagt mir, dass für das article-Element standardmäßig display: block; gesetzt ist, daher nimmt dieses eine ganze Zeile ein. Abhilfe indem Du display: inline-block; setzt.
Und die Beschriftung kannst Du unter dem Bild anordnen, wenn Du, jetzt anders herum, dem figcaption-Element ein display: block; gibst.
5241
Letzteres bitte nicht inline notieren, sondern in deiner CSS-Datei.
 

Sailor

Aktives Mitglied
14 Juli 2017
414
50
28
Und achte bitte auf die richtige Schreibweise....<figcaption> und nicht figcation>
 

KurtWz

Neues Mitglied
2 Oktober 2019
9
0
1
86
Vielen Dank! Ich habe die CSS-Anweisungen wie folgt geändert:
figure {
margin: 1px;
padding-right: -.5em; /* wegen :header, nav, main, article, section, aside, footer {padding: .5em;} */
border: 1px solid gainsboro;
background: #ffede0; /Die Farbe von article/
display:inline-block;
}
figcaption {
padding: 1px;
text-align:center;
display:block;
}
Und hatte damit vollen Erfolg -. nochmals danke!
Ich habe (musste) das float:right im Quelkltext unterbringen (mit style...) da ich innerhalb von figure alles ohne Erfolg versucht habe. Ich möchte aber die Bilder mal recht mal links floaten lassen - besser noch innerhalb des Textes von diesem umfliessen lassen. mich stört auch das nach und vor figure eine Leerzeile entsteht. Habt Ihr mit einem betagten Neuling noch einmal Geduld?
Gruss
Kurt
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.468
294
83
66
Wie ich sehe, bist Du schon ein Stück weiter und hast das Bild mit der Kirche jetzt auch gefloatet. Dies ist mal ein Fall, wo man float sinnvoll anwenden kann. Ich wusste noch gar nicht, dass man gefloatete Bilder auch mitten im Text anordnen kann, nicht nur links und rechts oben.
Ist das jetzt, was Du erreichen wolltest oder gibt es noch Aktionsbedarf?
 

KurtWz

Neues Mitglied
2 Oktober 2019
9
0
1
86
Etwas ist ich noch nicht vollständig. Ich möchte das Bild wahlweise links oder rechts floaten lassen. - Dass es in der Mitte ist liegt wohl daran, dass es im Anschluss an ein andere Bild geschrieben wurde, welches mit float:left notiert war - Ich habe nocht nicht herausgefunden, wie ich "Float" innerhalb von "Figure" notieren muss. Z.Zt. habe ich float:right im Quelltext im head stehen, aber dann gilt es ja immer - und das soll nicht sein. Ich weiss, es ist verpöhnt, CSS-Anweisungen inline zu schreiben, aber wiess nichts Besseres, aber bestimmt Du!
 

KurtWz

Neues Mitglied
2 Oktober 2019
9
0
1
86
OK, das klappt prima. Ich habe auch gleich ein padding hinzugefügt.
.birs {float:right;
padding-left:0.1em;
}
.bils {float:left;
padding-right:0.1em
}
Mich stört aber immer noch, das oberhalb des einen Bildes ein breiter Rand stehen bleibt obwohl die HTML-Notierungen doch gleich sind.
<figure class="birs"><img src="Postkarte.jpg" alt="Karte" width="417" height="267"><figcaption style="display:block;">Alte Postkarte</figcaption></figure>
<figure class="bils"><img src="Kirche.jpg" alt="Kirche" width"417" height="267"><figcaption style="display:block;"> Kirche</figcaption></figure>
Komischer weise ist die Höhe für beide Bilder gleich - aber die Anzeige ist korrekt unterschiedlich - und der Indkator zeigt für beide Bilder auto.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.468
294
83
66
Der breite Rand kommt wahrscheinlich dadurch zu Stande, dass die Texte in verschiedenen Absätzen stehen, diese haben ja ein margin oben und unten. Wenn Du willst, dass der Text durchgehend ist, dann schreibe ihn auch durchgehend in ein p-Tag und die figure-Tags dort hinein.

Edit: Wenn ich das margin-bottom lösche, ist der Text auch zusammen hängend:
5255
 

KurtWz

Neues Mitglied
2 Oktober 2019
9
0
1
86
Ich habe mit dem vlidator (fast) alle Fehler beseitigt - danke. Aber ein <p> zu dem </p> in Zeile 48 ist <p> in Zeile 45 vorhanden. Steht das im Zusammenhang mit den <figure> inerhalb des Textes?
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.468
294
83
66
Die kannst Du auch in deinem CSS nicht finden, weil es eine Standardeinstellung des Browsers ist. Wird im HTML-Inspektor unter "user agent stylesheet" angezeigt.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.468
294
83
66
Du kannst diese jedoch mit einer eigenen Definition überschreiben, so wie ich es im HTML-Inspektor gemacht habe, siehe Screenshot.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.468
294
83
66
Du musst links das Element anklicken, das Du untersuchen möchtest, in diesem Fall das betr. p-Element, dann siehst Du rechts u. a. das CSS.
 

Sailor

Aktives Mitglied
14 Juli 2017
414
50
28
Steht das im Zusammenhang mit den <figure> innerhalb des Textes?
Ja.... genau so ist es. Das liegt daran, dass du ein Blockelement (<figure>) innerhalb eines Blockelementes (<p>) einfügst. Das ist nach der reinen Lehre nicht korrekt - obwohl, so ganz falsch ist das auch nicht, denn auch nach der reinen Lehre, wird das geöffnete <p> automatisch geschlossen, wenn der Start-Tag eines anderen Blockelementes gefunden wird. Du schreibst also in deinen Code....
HTML:
<p>
    irgendwas...
    <figure><img...><figurecaption>text</figurecaption></figure>
    noch was anders.
</p>
Dann sieht das für den Browser so aus...
HTML:
<p>
    irgendwas...
</p>
    <figure><img...><figurecaption>text</figurecaption></figure>
    noch was anders.
</p>
Der Teil deines Textes hinter dem <figure>, von dem du denkst, er wäre im <p>...</p> eingeschlossen, ist also gar nicht zugeordnet... und du hast am Ende ein schließendes </p>, zu dem der Browser (und der Validator) kein zugehöriges öffnendes <p> findet.
Schau dir mal die DOM Ansicht des Inspektors (linke Spalte), da kannst du erkennen, was beim Browser ankommt.
Leider kann ich die Zeile mit margin-bottom nicht finden!!
Du nutzt anscheinend die Webentwickler Tools im FireFox. Meines Wissens zeigt der die 'User Agent Stylesheets' nicht an... um das zu sehen, müsstest du die Tools im Chrome nutzen, da findest du diese Default Einstellungen.
 

KurtWz

Neues Mitglied
2 Oktober 2019
9
0
1
86
Ich gebe es auf und meine User müssen mit dem etwas gösseren Abstand leben. Ich habe die Stelle in Chrome gefunden - nicht in Firefox - kann sie aber nicht ändern.
Vielen Dank für die Mühe!!
 

Sailor

Aktives Mitglied
14 Juli 2017
414
50
28
:)... bloß nicht aufgeben. Alles was du machen musst. ist einfach die folgende(n) Zeile(n) in dein CSS zu schreiben..
Code:
p {
  margin-bottom: 0;
}
Das löst zwar nicht die die Problematik, die ich in #17 beschrieben habe, aber es macht die Anzeige durchgehend, weil dem zusätzlichen, vom Browser eingesetzten </p> jetzt kein 'margin-bottom' mehr zugeordnet wird.
Die vorhandene Formatierung für den <p> Tag wird damit überschrieben und es gilt die 'Neue'.
 
Werbung: