zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden <p> und img mit align oder float

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 02.03.2015, 20:31
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 11.03.2011
Beiträge: 329
irmen befindet sich auf einem aufstrebenden Ast
Standard <p> und img mit align oder float

Hallo, ich möchte Texte im tinymce eingeben in einer WP Installation.

Nun habe ich vier Absätze in denen jeweils ein links ausgerichtetes Bild ist und Text.

Ist das Bild in der höhe länger als der Textblock, verschiebt es das nächste <p> um die Breite des Bildes.

wie kann ich das verhindern?

HTML-Code:
<p><img class=" size-full wp-image-55 alignleft" src="http://meineseite.de/wp-content/uploads/2015/02/i-herz.jpg" alt="i-herz" width="83" height="74" /> Schritt 1: dgkdlö dfgl döfglk ödlfgk örtkeöo o eröoo ögo örok dgkdlö dfgl döfglk ödlfgk örtkeöo o eröoo ögo örok dgkdlö dfgl döfglk ödlfgk örtkeöo o eröoo ögo örok .</p>
<p><img class=" size-medium wp-image-57 alignleft" src="http://meineseite.de/wp-content/uploads/2015/02/i-waage.jpg" alt="i-waage" width="83" height="74" />Schritt 2: dgkdlö dfgl döfglk ödlfgk örtkeöo o eröoo ögo örok dgkdlö dfgl döfglk ödlfgk örtkeöo o eröoo ögo örok dgkdlö dfgl döfglk ödlfgk örtkeöo o eröoo ögo örok dgkdlö dfgl döfglk ödlfgk örtkeöo o eröoo ögo örok dgkdlö dfgl döfglk ödlfgk örtkeöo o eröoo ögo örok dgkdlö dfgl döfglk ödlfgk örtkeöo o eröoo ögo örok .</p>
<p><img class=" size-medium wp-image-56 alignleft" src="http://meineseite.de/wp-content/uploads/2015/02/i-kal.jpg" alt="i-kal" width="83" height="74" />Schritt 3: dgkdlö dfgl döfglk ödlfgk örtkeöo o eröoo ögo örok dgkdlö dfgl döfglk ödlfgk örtkeöo o eröoo ögo örok dgkdlö dfgl döfglk ödlfgk örtkeöo o eröoo ögo örok .</p>
<p><img class=" size-medium wp-image-58 alignleft" src="http://meineseite.de/wp-content/uploads/2015/02/i-ziel.jpg" alt="i-ziel" width="83" height="74" />Schritt 4: dgkdlö dfgl döfglk ödlfgk örtkeöo o eröoo ögo örok dgkdlö dfgl döfglk ödlfgk örtkeöo o eröoo ögo örok dgkdlö dfgl döfglk ödl.</p>
<p><img class=" size-medium wp-image-56 alignleft" src="http://meineseite.de/wp-content/uploads/2015/02/i-kal.jpg" alt="i-kal" width="83" height="74" />Schritt 5: dgkdlö dfgl döfglk ödlfgk örtkeöo o eröoo ögo örok dgkdlö dfgl döfglk ödlfgk örtkeöo o eröoo ögo örok dgkdlö dfgl döfglk ödlfgk örtkeöo o eröoo ögo örok dgkdlö dfgl döfglk ödlfgk örtkeöo o eröoo ögo örok .</p>
so sieht es aus:
Angehängte Grafiken
Dateityp: jpg p-und-img.jpg (354,0 KB, 7x aufgerufen)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 03.03.2015, 02:41
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 24.06.2010
Beiträge: 528
K.Roland wird schon bald berühmt werden
Standard

Zitat:
Zitat von irmen Beitrag anzeigen
wie kann ich das verhindern?
Wer floatet sollte auch klären Sage ich mal.

Ich gehe mal davon aus der, Inhalt soll mit abstand zur Grafik stehen also zwei spalten innerhalb eines p-Tags.

So vielleicht?

Edit fiddle - JSFiddle


_____________________
MfG Roland
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 04.03.2015, 00:43
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 11.03.2011
Beiträge: 329
irmen befindet sich auf einem aufstrebenden Ast
Standard

Vielen herzlichen Dank!
Es istin meiner WP-Instllation nicht mit float demacht sondern mit align - ist das überhaupt noch korrekt? - deshalb bin ich nicht drauf gekommen, das zu clearen. (Ich dachte clear bezieht sich nur auf float.)
auch mit dem :after is mir noch ziemlich neu - aber das ist ja sehr schick.

Danke!
Irmen
Mit Zitat antworten
  #4 (permalink)  
Alt 04.03.2015, 07:06
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.977
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von irmen Beitrag anzeigen
Es istin meiner WP-Instllation nicht mit float demacht sondern mit align - ist das überhaupt noch korrekt?
Wie soll das denn gehen?
Mit Zitat antworten
  #5 (permalink)  
Alt 04.03.2015, 09:35
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 02.01.2012
Beiträge: 487
dazzle89 wird schon bald berühmt werden
Standard

Er meint wohl das HTML-Attribut "align", also z.B. <img src="bild.jpg" alight="left">

Ich will nicht sagen, dass es nicht korrekt ist, denn es funktioniert so ja. Allerdings sollte man, wenn möglich, Logik/Struktur (HTML) und Aussehen (CSS) voneinander trennen, also sollte man lieber per CSS floaten als HTML-Attribute zu verwenden.
Mit Zitat antworten
  #6 (permalink)  
Alt 04.03.2015, 10:05
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.977
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von dazzle89 Beitrag anzeigen
Er meint wohl das HTML-Attribut "align", also z.B. <img src="bild.jpg" alight="left">
(Er ist eine Sie)
Sowas habe ich schon lange nicht mehr gesehen. Das letzte Mal, das ich dieses Attribut verwendet habe, muss so um die Jahrtausendwende gewesen sein. Wobei die Klasse heißt ja so (was semantisch auch fragwürdig ist), aber mit CSS geht das gar nicht. Im HTML code ist dieses Attribut aber nicht vorhanden - Ich bin jetzt verwirrter als vorher.
Mit Zitat antworten
  #7 (permalink)  
Alt 04.03.2015, 10:39
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 11.03.2011
Beiträge: 329
irmen befindet sich auf einem aufstrebenden Ast
Standard

Ich muss mich entschuldigen!
Es wird natürlich kein align=left verwendet.
Zwar ein vertical-align:middle und weil die classe alignleft heißt, hat mich das durcheinandergebracht.
Eswird mit float gearbeitet.

Entschuldigung!
Und Danke für eure Hilfe!

Wenn ich die <p> ( so wie von K.Roland vorgeschlagen) wieder cleare, dann passt es.



Irmen

Geändert von irmen (04.03.2015 um 10:42 Uhr)
Mit Zitat antworten
  #8 (permalink)  
Alt 04.03.2015, 11:03
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.977
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von irmen Beitrag anzeigen
Eswird mit float gearbeitet.
Danke, dann passt es doch
Mit Zitat antworten
Antwort

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
Verschiebungen bei größerem Bildschirm seelefant CSS 4 28.07.2014 16:43
Navigation positionieren maybebabe CSS 4 08.04.2013 23:17
CSS von Plugin beisst! expand CSS 0 28.09.2012 18:44
Responsive webdesign: horizontales Menü mit angepasster Schriftgröße Spencer Javascript & Ajax 3 19.09.2012 00:16
joomla template wrock CSS 2 06.04.2012 20:24


Alle Zeitangaben in WEZ +2. Es ist jetzt 10:01 Uhr.