zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Bild weiter darstellen als Element in dem es sich befindet

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 27.08.2013, 13:29
Benutzerbild von thechrissss
Christian
neuer user
Thread-Ersteller
 
Registriert seit: 27.08.2013
Beiträge: 6
thechrissss befindet sich auf einem aufstrebenden Ast
Standard 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!
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 27.08.2013, 13:48
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

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.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 27.08.2013, 13:58
Benutzerbild von thechrissss
Christian
neuer user
Thread-Ersteller
 
Registriert seit: 27.08.2013
Beiträge: 6
thechrissss befindet sich auf einem aufstrebenden Ast
Standard

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?

Geändert von thechrissss (27.08.2013 um 14:09 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 27.08.2013, 14:01
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

In dem Blog sind doch Beispiele. Die musst du dir natürlich schon mal genau ansehen.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.
Mit Zitat antworten
  #5 (permalink)  
Alt 27.08.2013, 14:07
Benutzerbild von thechrissss
Christian
neuer user
Thread-Ersteller
 
Registriert seit: 27.08.2013
Beiträge: 6
thechrissss befindet sich auf einem aufstrebenden Ast
Standard

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;
}
Mit Zitat antworten
  #6 (permalink)  
Alt 27.08.2013, 15:17
Benutzerbild von lottikarotti
Ein ♥ für's Web
XHTMLforum-Mitglied
 
Registriert seit: 18.04.2012
Ort: Karlsruhe
Beiträge: 396
lottikarotti wird schon bald berühmt werden
Standard

Hallöchen,

auf die Schnelle ist mir folgendes eingefallen: hier klicken.

Viele Grüße,
lotti
__________________
Empfehlenswerte Links:
jsFiddle | JavaScript Patterns | RedBeanPHP | Mozilla Developer Network -/- W3C Validator | JSLint
Mit Zitat antworten
  #7 (permalink)  
Alt 27.08.2013, 21:24
Benutzerbild von thechrissss
Christian
neuer user
Thread-Ersteller
 
Registriert seit: 27.08.2013
Beiträge: 6
thechrissss befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #8 (permalink)  
Alt 27.08.2013, 23:34
Benutzerbild von Thielo
Web Ninja
XHTMLforum-Kenner
 
Registriert seit: 17.09.2009
Ort: Stuttgart oder so
Beiträge: 3.372
Thielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein Lichtblick
Standard

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)
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato...
All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege

www.richard-thiel.de | Müssen Websiten überall gleich ausschauen?
Mit Zitat antworten
  #9 (permalink)  
Alt 28.08.2013, 00:08
Benutzerbild von thechrissss
Christian
neuer user
Thread-Ersteller
 
Registriert seit: 27.08.2013
Beiträge: 6
thechrissss befindet sich auf einem aufstrebenden Ast
Standard

Gäbe es so nun auch die Möglichkeit ein </p> vor dem Bild und ein <p> nach dem Bild zu platzieren?
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 28.08.2013, 01:00
Benutzerbild von Thielo
Web Ninja
XHTMLforum-Kenner
 
Registriert seit: 17.09.2009
Ort: Stuttgart oder so
Beiträge: 3.372
Thielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein Lichtblick
Standard

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...
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato...
All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege

www.richard-thiel.de | Müssen Websiten überall gleich ausschauen?
Mit Zitat antworten
Sponsored Links
Antwort

Stichwörter
bild, container, div, img, padding, post, responsive, wordpress

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Schrifzug ändern, wenn mit dem Curser über ein Bild gegangen wird? MarkusStar CSS 10 05.09.2009 02:04
Liste im IE StarSt0rm CSS 3 22.08.2007 21:04
Validator Fehler und komm nicht drauf... letslounge (X)HTML 3 14.09.2006 22:07
Browserneurose SimonWpt CSS 39 15.07.2005 11:51
Scrollbares Textfeld mit purem CSS Dancer CSS 6 24.01.2005 16:58


Alle Zeitangaben in WEZ +2. Es ist jetzt 15:52 Uhr.