Wordpress Theming: Bilder

[knacky]

Hallo liebe Apfeltalker!

Mein Wordpress Theme nimmt langsam aber sicher Form an! Nur eine Sache bereitet mir Kopfzerbrechen: Das Einfügen von Bilder bei Benützung des visuellen Editors!

Die Bilder überragen nämlich die Border meines gesetzten DIVs für den Inhalt (bei den Artikeln #newscontent).

Hier mal ein Ausschnitt meiner Index.php

<div id="news">
            <h2 class="news"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
            <p class="date"><?php the_time('j. F Y'); ?></p>
            <div id="newscontent"
            <p class="news"><?php the_content('<p style="font-style:italic;text-align:right;">mehr...</p>'); ?></p>
            </div>
        </div>

Ich dachte, ich schaue mir das ganze bei Kubrick ab. Gesagt getan. Ich habe mir sogar den CSS-Code in meine CSS kopiert. Leider funktioniert das ganze immer noch nicht...

Hier mal den CSS Code:

p img {
    padding: 0;
    max-width: 100%;
}

img.centered {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

img.alignright {
    padding: 4px;
    margin: 0 0 2px 7px;
    display: inline;
}

img.alignleft {
    padding: 4px;
    margin: 0 7px 2px 0;
    display: inline;
}

.alignright {
    float: right;
}

.alignleft {
    float: left;
}

Ich hoffe, ich habe mein Problem klar formuliert und bedanke mich im Voraus für eure Antworten!

Freundliche Grüsse

 

[C64]

Naja, eigentlich musst du nur folgendes einfügen:

#newscontent img {
max-width: Breite deines newscontent;
}

Edit: mir fällt gerade auf... du solltest hier nicht id sondern class verwenden. Schließlich wirst du vermutlich mehrere newscontainer haben, richtig? Wenn etwas mehrmals auf einer Seite erscheint musst du den div durch class definieren.

<div id="news">
<h2 class="news"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
<p class="date"><?php the_time('j. F Y'); ?></p>
<div class="newscontent"
<p class="news"><?php the_content('<p style="font-style:italic;text-align:right;">mehr...</p>'); ?></p>
</div>
</div>

und dann

.newscontent img {
max-width: Breite deines newscontent;
}

 

[knacky]

Hallo C64

Vielen Dank für deine Antwort! Das Problem ist nicht die Breite mehr die Höhe Sorry, dass hät ich schreiben müssen. Das Image Nutzt also die Höhe die es braucht, ohne auf die #newscontent höhe Rücksicht zunehmen.

Freundliche Grüsse

 

[C64]

Dann muss es heißen max-height
Bei gefloateten Bilder muss du evtl ein clear einsetzen. Sonst ragt das Bild drüber raus... Ist aber nur wichtig, wenn du die Höhe des newscontent variabel gestaltest, so dass die Höhe sich an den Inhalt anpasst (was durchaus sinnvoll ist ).

 

[knacky]

Gehorcht mir leider immer noch nicht. Die Imagehöhe soll ja auch den DIV Container in der Höhe anpassen.

Der DIV Container soll mitwachsen. Das tut er in meinem Theme leider nicht. Im Kubrick Theme funktioniert das wunderbar.

Edit: Ich war wohl schneller als du Ich muss mal das mit dem Class ausprobieren. Ich melde mich, obs klappt oder nicht!

 

[C64]

Also noch mal genau:
Du möchtest, dass der div mit der Klasse class="newscontent" wächst, wenn ein Bild drin ist, so dass das Bild im Container liegt, richtig?
Und diese Bilder sind bei dir links oder rechts gefloatet, richtig? Wenn du das Bild ohne float (also, zb ohne alignright) einfügst, dann klappt es, richtig?
Du musst also einfach ein clear setzen:

.alignright {
float: right;
clear: right;
}

.alignleft {
float: left;
clear: left;
}

(bin mir grad net sicher, welches left und welches right bereinigt werden muss... Kannst du ja aber ausprobieren...)
Ansonsten kannst du auch ne Klasse "clearer" definieren und den container einfach unter content setzen (je nachdem, wie du das Ganze dann umgesetzt hast.

.clearer {
clear: both;
}

<div id="news">
<h2 class="news"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
<p class="date"><?php the_time('j. F Y'); ?></p>
<div class="newscontent"
<p class="news"><?php the_content('<p style="font-style:italic;text-align:right;">mehr...</p>'); ?></p>
<div class="clearer"></div>
</div>
</div>

 

[knacky]

Die zweite Lösung passt! Vielen, vielen Dank!

 

[C64]

Perfekt. Das wäre auch meine präferierte Lösung gewesen. Denn den clearer kann man immer wieder einsetzen