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

figcation mit GRID

KurtWz

Neues Mitglied
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
 
Werbung:
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
 
Werbung:
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!
 
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.
 
Werbung:
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?
 
Werbung:
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.
 
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!!
 
:)... 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:
Zurück
Oben