Frage Magazin Layout - Bilder sollen bis an den Rand gehen

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

galbur

Neues Mitglied
29 Juli 2020
6
0
1
57
Hallo miteinander

Da ist folgendes Problem. Ich möchte in einem vorgegebenen Div-Container Inhalte so platzieren, dass die Bilder ohne linkes und rechtes Padding bis an den Rand hinauslaufen und Überschriften und Fliesstext, je ein linkes und ein rechtes Padding von 30px aufweisen.

An sich eine leichte Aufgabe. Padding im Container auf 0 setzen und für <h3> und <p> jeweils ein entsprechendes margin/padding setzen.

Nun ist es aber so, dass der Editor des CMS um jedes eingefügte Bild automatisch einen <p>-Tag wrappt. Klar könnte ich den jeweils in der Code-Ansicht wieder entfernen. Da System soll aber für den User so einfach wie möglich sein. D.H. wenn der User ein (genügend grosses Bild) einfügt wird das Bild automatisch bis an den jeweiligen Rand "gezogen". Alles was geschrieben wird, hat automatisch den Abstand.

Gibt es Code-mässig eine Möglichkeit zu sagen bei <p>-Tags welche einen <img>-Tag enthalten gilt automatisch 0 px Padding, bei einem "normalen" <p>-Tag aber die 30px?
Oder gibt es andere Möglichkeiten?

Danke für Eure Hilfe.

Viele Grüsse
Christoph
 

Anhänge

galbur

Neues Mitglied
29 Juli 2020
6
0
1
57
Hallo

Danke für die Antwort. Das CMS ist in diesem Fall Joomla und das Teil ist noch lokal auf meinem Server, dehalb hab ich leider noch keinen Link.
Auf das Problem stosse ich aber immer wieder, unaghängig vom CMS.

Viele Grüsse
Christoph
 

galbur

Neues Mitglied
29 Juli 2020
6
0
1
57
Hallo

Danke fürs mitdenken.
Mit Javascript kenn ich mich leider nicht so aus.
Ich versuch mal die Seite zugänglich zu machen. Das kann aber noch eine Weile dauern.

Viele Grüsse
Christoph
 

basti1012

Senior HTML'ler
26 November 2017
1.348
136
63
39
Minden
sebastian1012.bplaced.net
Mit CSS alleine würde es nur gehen, wenn deine p’s immer an der gleichen stelle ein img haben.
Wenn das aber immer anders ist dann fällt mir nur JS ein.
Kopiere das mal irgendwo an das Ende der Seite und gucke mal, ob alle p’s mit ein img einen roten Border haben
Code:
<script>
v=document.querySelectorAll('body p');
v.forEach(function(x){
    if(x.querySelector('img')){
         x.style.border='2px solid red';
    }
})
</script>
 
  • Like
Reaktionen: galbur
Werbung:

Neueste Beiträge