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

Frage Magazin Layout - Bilder sollen bis an den Rand gehen

galbur

Neues Mitglied
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

  • CSSProblem_01.jpg
    CSSProblem_01.jpg
    233,6 KB · Aufrufe: 9
Werbung:
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
 
Werbung:
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
 
Werbung:
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>
 
Hallo Basti

Super! Und Danke. Dein JS-Code funktioniert perfekt.

Viele Grüsse
Christoph
 
Zuletzt bearbeitet:
Werbung:
Hallo miteinander

Ok. Javascript funktioniert. Aber leider erst nach einem Refresh. D.h. ich gehe auf die Seite, das Padding beim Bild ist nicht wirksam, ich mache einen Refresh und nun greift das JS.
Was tun?

Viele Grüsse
Christoph
 
Aber leider erst nach einem Refresh.
Dann teste es so
Code:
document.addEventListener('DOMContentLoaded' function(){
v=document.querySelectorAll('body p');
v.forEach(function(x){
    if(x.querySelector('img')){
         x.style.border='2px solid red';
    }
})
})
Falls das immer noch nicht klappt wäre ein Link zur Seite sinnvoll.
 
Werbung:
Kannst du mal dein Cache löschen?
Habe gerade deine Seite aufgerufen und alle Bilder gehen bis zum Rand.
Konnte in der Konsole auch sehen das überall padding 0 gesetzt ist (ohne reload).
Falls die anderen da auch mal testen können, wäre gut, dann könnte man Cache Probleme ausschließen oder einschließen, weil ich kann bis jetzt keine Fehler finden.
 
Werbung:
Zurück
Oben