XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Bild weiter darstellen als Element in dem es sich befindet (http://xhtmlforum.de/showthread.php?t=69900)

thechrissss 27.08.2013 13:29

Bild weiter darstellen als Element in dem es sich befindet
 
Hallo, ich entwickle gerade ein responsive Worpdress Theme und habe das Problem, dass ich einen div Element für jeden Post habe, indem sich ein p Element für den Text befindet. Dieses p Element hat nun rechts und links vom div Container den den Abstand 30px. Nun möchte ich aber, dass ein Bild welches sich in dem Post befindet genau so groß ist wie der div Container und nicht rechts und links den Abstand 30px hat. Mit margin-left: -30px hat es auch schon funktioniert, nur gibt es dann beim verkleinern/vergrößern des Browser Fensters wieder Probleme. Ihr könnt es euch hier anschauen: http://kaih.me/blog/

Danke schon mal für alle Antworten!

explanator 27.08.2013 13:48

Das geht mit dem CSS3 Selector :not
Beispiel zur Anwendung in diesem Blog.
IE kann das aber erst ab Version 8, aber der ist ja auch bald begraben.

thechrissss 27.08.2013 13:58

Also mein HTML sieht so aus:

Code:

<div class="post">
    <h1>Titel</h1>
    <p>Inhalt des Posts mit einem Bild <img src="" /></p>
</div>

Mein CSS sieht so aus:

Code:

div.post {
  max-width: 680px;
  margin: auto;
}

  div.post p {
    padding-left: 30px;
    padding-right: 30px;
  }

  div.post p img {
    width: 100%;
  }

Wie soll das dort nun mit dem :not funktionieren?

explanator 27.08.2013 14:01

In dem Blog sind doch Beispiele. Die musst du dir natürlich schon mal genau ansehen.

thechrissss 27.08.2013 14:07

Das habe ich ja und ich habe das so auch schon ausprobiert, hat aber nicht geklappt:

Code:

div.post p {
  padding-left: 30px;
  padding-right: 30px;
}

p *not:(i) img {
  padding-left: 0px;
  padding-right: 0px;
}


lottikarotti 27.08.2013 15:17

Hallöchen,

auf die Schnelle ist mir folgendes eingefallen: hier klicken.

Viele Grüße,
lotti

thechrissss 27.08.2013 21:24

Danke für deine Antwort, jedoch ist es für den Benutzer nachher blöd jedes Mal ein <span> vor das Bild zu setzen. Vor allem beim mobilen Bloggen ist das halt keine gute UX.

Thielo 27.08.2013 23:34

Hmmm, wenn du schon UX redest ist die Frage ob du bereits nach Lösungen gesucht hast. Wichtig wäre, wonach du suchst ;)

PHP-Code:

function filter_ptags_on_images($content){
   return 
preg_replace('/<p>\s*(<a .*>)?\s*(<img .* \/>)\s*(<\/a>)?\s*<\/p>/iU''\1\2\3'$content);
}

add_filter('the_content''filter_ptags_on_images'); 

(vgl. Remove Paragraph Tags From Around Images | CSS-Tricks)

thechrissss 28.08.2013 00:08

Gäbe es so nun auch die Möglichkeit ein </p> vor dem Bild und ein <p> nach dem Bild zu platzieren?

Thielo 28.08.2013 01:00

Klar gibt es. Dazu musst du nur den obrigen Code abändern, so das die Werte richtig ersetzt werden. (vgl. PHP: preg_replace - Manual)
Nur, wenn man sich deinen Blog anschaut, würde das keinen Sinn ergeben, da die Grafiken selber jeweils in Absätzen sind...


Alle Zeitangaben in WEZ +2. Es ist jetzt 02:03 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023