Abstände umgehen

Phil2010

Hallo Zusammen,

ich hoffe ihr könnt mir helfen. Bin langsam am verzweifeln :-P

Ich möchte auf einer WP Seite mehrere Grafiken zentriert untereinander darstellen, ohne dass zwischen diesen Abstände enstehen.
Da WP das von Haus aus nicht kann, habe ich RAW HTML installiert um eigene HTML und CSS Codes anwenden zu können.

Nun habe ich einen Code erstellt:

Code

<head><style type="text/css">
.auto-style1 {
	text-align: center;
}




div { margin: 0; padding: 0; }




</style>
</head>




<div class="auto-style1">












<div>
	<img class="size-medium wp-image-884 alignnone" src="xxxxxxx/wp-content/uploads/2014/03/hiphoprap-300x85.png" alt="hiphoprap" width="300" height="85" /><br>
<img class="size-medium wp-image-878 alignnone" src="xxxxxxx/wp-content/uploads/2014/03/einfachnurjay-300x40.png" alt="einfachnurjay" width="300" height="40" /><br>
<img class="size-medium wp-image-886 alignnone" src="xxxxxxx/wp-content/uploads/2014/03/mariogrande-300x40.png" alt="mariogrande" width="300" height="40" /><br><img class="size-medium wp-image-888 alignnone" src="xxxxxxx/wp-content/uploads/2014/03/smooveattack-300x40.png" alt="smooveattack" width="300" height="40" /><br>
<img class="size-medium wp-image-880 alignnone" src="xxxxxxx/wp-content/uploads/2014/03/franic-300x40.png" alt="franic" width="300" height="40" /><br>
<img class="size-medium wp-image-876 alignnone" src="xxxxxxx/wp-content/uploads/2014/03/chipmunkbeatz-300x40.png" alt="chipmunkbeatz" width="300" height="40" /><br>
<img class="size-medium wp-image-881 alignnone" src="xxxxxxx/wp-content/uploads/2014/03/frankfunk-300x40.png" alt="frankfunk" width="300" height="40" /><br>
	<br>




<img class="size-medium wp-image-879 alignnone" src="xxxxxxx/wp-content/uploads/2014/03/electronic-300x85.png" alt="electronic" width="300" height="85" /><br>
<img class="size-medium wp-image-875 alignnone" src="xxxxxxx/wp-content/uploads/2014/03/boeseundfcken-300x40.png" alt="boeseundfcken" width="300" height="40" /><br>
<img class="size-medium wp-image-882 alignnone" src="xxxxxxx/wp-content/uploads/2014/03/funkdapolice-300x40.png" alt="funkdapolice" width="300" height="40" /><br>
	<br>
<img class="size-medium wp-image-887 alignnone" src="xxxxxxx/wp-content/uploads/2014/03/other-300x85.png" alt="other" width="300" height="85" /><br>
<img class="size-medium wp-image-877 alignnone" src="xxxxxxx/wp-content/uploads/2014/03/chollo-300x40.png" alt="chollo" width="300" height="40" /><br><img class="size-medium wp-image-885 alignnone" src="xxxxxxx/wp-content/uploads/2014/03/ilean-300x40.png" alt="ilean" width="300" height="40" /></div>

Alles anzeigen

Allerdings werden die Abstände trotzdem angezeigt.
Kann mir das vllt. jemand weiterhelfen?

Danke schonmal im vorraus!

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

Monika

Das ist Sache des verwendeten Themes,
daher kann es "WP" von sich aus gar nicht machen,weil es nicht in seinem Zuständigkeitsbereich liegt ;-)

hast du einen Link für uns wo das alles stattfindet?

helix

Verwende ein Webentwickler-Werkzeug und untersuche mit diesem, ob deine Bilder noch irgendwo (oben oder unten) ein margin oder padding haben.
Wenn ja: beseitigen.

Wenn nein (was ich vermute): Ähm ja, das ist raw HTML, also HTML, wie es ist, out of the box, ohne Styling …
<img> ist ein Inline-Element und hat deswegen – wie Schrift – eine Unterlänge.
Diese beseitigst du nicht mit margin oder padding, sondern indem du die CSS-Eigenschaft „display“ auf „block“ setzst.

Gruß
helix

Tubedesigner

Zitat von Phil2010

(...)
Ich möchte auf einer WP Seite mehrere Grafiken zentriert untereinander darstellen, ohne dass zwischen diesen Abstände enstehen.
Da WP das von Haus aus nicht kann, habe ich RAW HTML installiert um eigene HTML und CSS Codes anwenden zu können.
(...)

Das kann man auch viel einfacher und sauberer (insb. in Hinblick auf die Kompatibilität zum Gesamtdesign des Themes) bewerkstelligen, Du legst folgende neue Bild-Klasse (man könnte die CSS-Anweisungen auch direkt in die Image-Tags schreiben) für Deinen Zeck an

[COLOR=#006400].nixmitte {
display: block ;
margin: 0 auto;
margin-bottom:-25px;
}[/COLOR]

Die sorgt dann dafür, dass die Bilder zentriert werden und dass unter jedem Bild kein Abstand mehr vorhanden ist, der Wert [COLOR=#006400]-25[/COLOR] muss ggf. durch Probieren noch angepasst werden.

Diese Klasse legst Du entweder direkt in der [COLOR=#0000cd]style.css[/COLOR] an (Achtung, sie ist dann aber beim Update weg, wenn kein Child-Theme angelegt wurde) oder in den Custom-CSS-Bereich Deines Themes (bleibt dann bei Updates erhalten) und falls Dein Theme keinen hat, füge Dir mit einem Custom-CSS-Plugin wie z.B. diesem

https://wordpress.org/plugins/simple-custom-css/

einen hinzu (der Inhalt bleibt dann ebenfalls bei Updates erhalten).

Die betreffenden Bilder werden dann z.B. so
[COLOR=#006400]
<img class="nixmitte" src="http://www/ /wp-content/uploads/2016/06/bild1.jpg" alt="Bild1" width="720" height="480" />
<img class="nixmitte" src="http://www/ /wp-content/uploads/2016/06/bild2.jpg" alt="Bild2" width="720" height="480" />
<img class="nixmitte" src="http://www/ /wp-content/uploads/2016/06/bild3.jpg" alt="Bild3" width="720" height="480" />[/COLOR]

in Seiten oder Beiträgen in der Textansicht des Editors eingebaut (bleiben auch beim Wechsel in die Visuelle Ansicht so erhalten) bzw. in der visuellen Ansicht eingefügt und in der Textansicht entsprechend nachbearbeitet.

Namen, Pfade und Größenangaben sind natürlich anzupassen – fertig.

Phil2010

Danke für eure Hilfe! :-)

Monika

bitte zukünftig vor dem Posten URls anonymisieren oder //und einen URL Shortener nutzen

das erspart viel Moderationsarbeit danke!

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Abstände umgehen

Jetzt mitmachen!