HTML, CSS, Grid

Liebe ExpertInnen,

ich rätsele, woher die Grid-Zeile kommt, in der das Bild steckt, oder genauer, wer wie die Höhe der Zeile bestimmt. Mein Wunsch wäre, den leeren Raum zwischen Bild und Unterkante des Grids (gestrichelte Linie) verschwinden zu lassen. Wer weiß was?

Die Site ist gerade kaputt, ich habe sie nur im localhost, deshalb kein Link.

Blockquote

Dank & Gruß
Ralf
.

Na ja, aber ein bisschen Quelltext, HTML und (!) CSS, wäre schon nett …

2 Like

Moin, Christa,

so wird das Bild in einem Paragrafen aufgerufen (alles ohne spitze Klammern):

img src="images/IMG_8373a.jpg" alt="" width="519" height="346" border="0" /
           1. Vorstand               Schützenmeister

und hier die Anweisungen, die „grid“ enthalten.

  div class="site-grid"
  div class="grid-child container-sidebar-left"
  div class="grid-child container-component"

Unerwünscht: Zwischen Bild und Textzeile ist eine Daumenbreite Abstand.

Nun wäre es zwar schön zu wissen, wie der Abstand zum Verschwinden gebracht werden könnte, da das Bild aber am Ende der Seite steht, habe ich mich entschlossen, den Text über dem Bild einzufügen. Und siehe da - es passt, das lassen wir jetzt einfach so. Danke fürs Draufschauen!

Gruß
Ralf

Vermutlich besagt irgendein CSS, dass da ein Abstand ist. Du hast Klassen gesetzt, also schau im CSS auf die Definition dieser Klassen. Ohne Quelltexteinsicht weiß meine Glaskugel nicht mehr.

Das sind alles Ausschnitte aus HTML, ich fragte nicht umsonst auch nach CSS, denn mit Sicherheit werden dort die Abstände gesetzt.

Wer nicht will, der hat schon! :stuck_out_tongue:

Die img-Anweisung steht innerhalb von Paragraf-Brackets, die sind wegen der spitzen Klammern ebenfalls entfallen. Ich sehe erstmal nicht, dass ein CSS am p geschraubt hätte; dass es an dem tatsächlich nicht liegen kann, zeigt der Text, der inzwischen vor dem img kommt - mit dem bei p üblichen Zwischenraum:

grafik

erzeugt mit


So, und nu kommt’s: Alle anderen Bilder auf der Site stecken jeweils in einem solchen Grid und füllen das auch aus, ob groß, ob klein, ganz egal. Das lässt mich inzwischen vermuten, dass die Ursache das Bild selbst ist.

Und siehe da, so spricht der Inspector (nie drauf geachtet oder schlicht übersehen, gestern wusste ich noch nicht, wie mann css schreibt):

grafik

Tut mir leid, wollte niemanden in die Irre führen :-((

Gruß
Ralf

<p> </p>

hat da rein gar nichts zu suchen, das erzeugt dir nur einen leeren Absatz (und implizit Abstand, logischerweise)!

Der Absatz um img herum sorgt auch für etwas Abstand nach oben und unten.

Aber wie gesagt, es muss eine CSS-Datei geben, denn die Klassen in HTML deuten darauf hin. Sonst braucht HTML keine Klassen.

Ist das mit Wordpress oder irgendeinem CMS erstellt? Die Klassennamen lassen mich vermuten, dass sie nicht per Hand angelegt wurden.

Schau dir das mit den Entwicklertools deines Browsers an. Bei Firefox oder Chrome wird genau angezeigt, welche Attribute auf ein HTML-Element angewendet werden und, vor allem, wo sie gesetzt werden, d.h. in welcher CCS-Datei.

Hab ich geschenkt gekriegt, kann ich doch nicht zurückweisen!

scnr

Dahinter steckt Joomla, img wird davon aber nicht berührt, das sähe ich im Inspector. @Axurit: Den hatte ich oben schon erwähnt.

Gruß
Ralf
.

Sorry, das habe ich übersehen.