Author Topic: Absätze wysiwyg -editor und p-tag  (Read 5361 times)

hansa

  • Guest
Absätze wysiwyg -editor und p-tag
« on: March 18, 2010, 11:27:21 AM »
Hallo Leute,

ich habe folgendes Layout auf einer Seite.

Da ich transparente Hintergründe für den Kontent verwende, habe ich diese in drei Teile aufgeteilt, so wächst der mittlere Teil immer mit dem Inhalt. Kennen bestimmt viele hier.

div-top
div-middle
div-bottom

Im div-middle steht dann "page_content(1);" um den Inhalt auszugeben.

Leider ist es nun so, dass wenn jemand im wysiwyg-editor etwas schreibt, und eine neue Zeile beginnt, der Text in ein neues <p>-tag gelegt wird.

Das reisst mein Layout auseinander.
Kann man diesen Automatismus deaktivieren. Also den ganzen Text nur in ein p-tag?

Oder kann man das auf eine andere Art lösen

Grüße
hansa

Offline Luisehahne

  • WebsiteBaker Org e.V.
  • **
  • Posts: 4332
  • Gender: Male
    • Webdesign und Entwicklung WebsiteBaker
Re: Absätze wysiwyg -editor und p-tag
« Reply #1 on: March 18, 2010, 11:51:40 AM »
Wenn ich einen p Tag nicht gebrauchen kann, markiere ich den Text und setze über das Format von Normal auf Normal (div), das passt immer

Dietmar
Immer nur von der Zukunft reden, die Gegenwart vergessen und auf die Vergangenheit schimpfen
Neues Unwort: Schnappatmung

hansa

  • Guest
Re: Absätze wysiwyg -editor und p-tag
« Reply #2 on: March 18, 2010, 12:05:06 PM »
@Luisehahne

Hallo und danke für den Hinweis.
Leider entwickelt sich dann eine Divsuppe, die gegen das spricht, was ich über html gelernt habe.
Kann man die Format-Optionen des  Editors verändern/erweitern?

Grüße
hansa

wollinche

  • Guest
Re: Absätze wysiwyg -editor und p-tag
« Reply #3 on: March 18, 2010, 02:16:05 PM »
Leider ist es nun so, dass wenn jemand im wysiwyg-editor etwas schreibt, und eine neue Zeile beginnt, der Text in ein neues <p>-tag gelegt wird.
Diese Aussage ist falsch.
Eine neue Zeile beginnt mit <br> und nicht mit <p>

//Klugscheisser Modus on
Dieser Zusammenhang ist nicht bekannt und wird meistens falsch verwendet.
Das nun folgende gilt für Wort-Editoren (OpenOffice, MS Word, ... und für HTML-(Editoren)

<p> ist ein Absatz-Zeichen.
Damit werden Abssätze gekennzeichnet (und auch die für diesen Ansatz gültige Formatierung)
Erzeugt wird das Zeichen mit der Return-Taste

<br> ist ein Zeilenumbruch, damit beginnt eine neue Zeile (ohne den größeren Abstand zwischen 2 Absätzen)
Erzeugt wird dieses Zeichen mit Shift +Return (Shift=Umschalttatste)

Nun noch etwas spezielles bei HTML:
Es gibt dort Tags die nur für die Formatierung zuständig sind, dazu zählen z.B. <div>
Nach einem <div> darf kein Text (oder sonstige Ausgabe) stehen.
Das was ausgegeben werden soll muß z.B. in einem "Ausgabe"-Tag stehen, z.B. ein <p> oder ein <td> einer Tabelle.
Eine Textausgabe ohne <p> in einem <div> ist unzuläsig und nicht valide.

/Klugscheisser Modus OFF


« Last Edit: March 18, 2010, 02:18:00 PM by wollinche »

Online dbs

  • Betatester
  • **
  • Posts: 7853
  • Gender: Male
  • tioz4ever
    • WebsiteBaker - jQuery-Plugins - Module - Droplets - Tests
Re: Absätze wysiwyg -editor und p-tag
« Reply #4 on: March 18, 2010, 02:30:05 PM »
wozu dieser wenig hilfreiche scheisser modus?

default-einstellung des fck-editors ist, dass ein enter ein <p> zur folge hat.
shift-enter erzeugt <br>.

dies kann man in der wb_fckconfig.js nachschauen/ändern/tauschen.

wollinche

  • Guest
Re: Absätze wysiwyg -editor und p-tag
« Reply #5 on: March 18, 2010, 02:35:42 PM »
wozu dieser wenig hilfreiche scheisser modus?
Weil ich meinte das man mit Erlärung zum Zusammenhang besser die Zusammenhänge versteht.
Aber o.k., ich werde mich zukünftig aufs Fragen hier beschränken und ansonsten die Finger ruhig halten.

Online dbs

  • Betatester
  • **
  • Posts: 7853
  • Gender: Male
  • tioz4ever
    • WebsiteBaker - jQuery-Plugins - Module - Droplets - Tests
Re: Absätze wysiwyg -editor und p-tag
« Reply #6 on: March 18, 2010, 02:42:43 PM »
deine erläuterung war gut gemeint, nur diesmal an der falschen stelle da der fck anders tickt und deine antwort dem fragesteller nicht weiterhelfen konnte.

lass die finger ruhig weiterschreiben, helfer sind immer gern gesehen. ;-)

dbs

Offline Hans>NULL

  • Posts: 1386
  • Gender: Male
Re: Absätze wysiwyg -editor und p-tag
« Reply #7 on: March 18, 2010, 02:49:55 PM »
Quote
Fragen hier beschränken
Bitte nicht, denn auch Word-Schreiber kennen u.U. nicht die Fakten.
Kann da "ein Lied von singen", in meiner Umgebung.. Man will es kaum glauben, daß 'ne Menge professionelle Schreiber (Autoren) derartiges nicht wissen, meist weil diese von der Schreibmaschine direkt zum "Schreibprogramm" wechselten. Solange Buchstaben rauskommen ist es einfach gut. Die Leite sind ja nicht doof, die Prioritäten liegen nur anders.
Gruß, Hans>NUL
« Last Edit: March 18, 2010, 02:51:36 PM by Hans>NULL »
/dev/null Ort ohne Wiederkehr

Offline bennie

  • Posts: 117
Re: Absätze wysiwyg -editor und p-tag
« Reply #8 on: March 18, 2010, 03:11:34 PM »
Ehrlich gesagt verstehe ich noch nicht ganz, dass das Layout durch den p-tag auseinandergerissen wird. Wenn ich das richtig verstanden habe soll doch der mittlere Teil mitwachsen. Ob jetzt mit oder ohne p dürfte doch egal sein. Wäre es möglich bzw. für deinen Zweck sinnvoll dem div-middle  ein p zuzuordnen welcher dann margin-top:0px; hat dafür aber z.B. margin-bottom:10px oder so...

Sollte ich das falsch verstanden haben , dann vergiss es einfach aber vielleicht kann man es mal sehen in einem Bsp.

Liebe Grüße
Bennie

hansa

  • Guest
Re: Absätze wysiwyg -editor und p-tag
« Reply #9 on: March 18, 2010, 11:11:28 PM »
Hmmm!

Ihr habt ja alle irgendwie recht. Müsst euch ja jetzt wegen mir nicht streiten. :-D

- Das man den Editor dort ändern kann, finde ich schonmal super.  Danke für den Hinweis

- Das Problem ist leider so, dass ich eine Seite für bekannte baue und denen kann man Shift+Return nicht beibringen. Ist leider so.

- Warum das <p> mein design zerreisst, ist mir eben als ich den css-code hier posten wollte aufgefallen.

hatte beim "div-mid" background no-repeat anstatt repeat-y.

Tja. Jetzt sieht es gut aus. Ich werde wohl trotzdem den Editor anpassen.
Ich sehe es halt so, dass sonst unter umständen zu viel HTML-Code entstehen könnte.( jede menge p oder div)

Oder wie seht ihr das?

Vielen Dank an euch.

Grüße
hansa

Offline tiesy

  • Posts: 125
    • Wir in Wallenhorst
Re: Absätze wysiwyg -editor und p-tag
« Reply #10 on: March 22, 2010, 07:47:41 PM »
Wenn Du das p-Tag nicht nicht möchtest, dann ändere einfach im Verzeichnis die Datei wb_config.js im Modulverzeichnis des Fckeditors ab:

ab Zeile 60:

// specify HTML tag used for ENTER and SHIFT+ENTER key
   FCKConfig.EnterMode                         = 'p' ;                // allowed tags: p | div | br <--hier 'br' statt 'p'
   FCKConfig.ShiftEnte rMode         = 'br' ;        // allowed tags: p | div | br
   
und in fckconfig.js Zeile 74

FCKConfig.FillEmpty Blocks        = false ;   <--bei "false" wird am Ende eines leeren Blocks kein <p></p> eingefügt, was ja sicher so gewollt ist. Steht normalerweise auf "true".

Offline Luisehahne

  • WebsiteBaker Org e.V.
  • **
  • Posts: 4332
  • Gender: Male
    • Webdesign und Entwicklung WebsiteBaker
Re: Absätze wysiwyg -editor und p-tag
« Reply #11 on: March 22, 2010, 07:54:25 PM »
Quote
denen kann man Shift+Return nicht beibringen

Sag Ihnen das die Gross- und Bestätigungstaste. Oder wie erzeugen deine Bekannten Grossbuchstaben?

p Tags würde ich nicht ausschalten, wie willst du sonst schöne Absätze bekommen.

Dietmar
Immer nur von der Zukunft reden, die Gegenwart vergessen und auf die Vergangenheit schimpfen
Neues Unwort: Schnappatmung

Offline chnosli

  • Posts: 28
Re: Absätze wysiwyg -editor und p-tag
« Reply #12 on: April 30, 2010, 02:04:23 PM »
hallo

ist das wirklich so, dass wenn in einer tabelle, in einer zelle welche nach LINKS/OBEN ausgerichtet ist, der text nicht mehr LINKS/OBEN anfängt, sobald ich einen ENTER im text benutzt habe?  :?

gilt diese formatierung nur wenn ich einen SHIFT ENTER mache?

http://www.tierarzt-einsiedeln.ch/pages/fundtierevermittlung.php

danke fürs feedback!

Online dbs

  • Betatester
  • **
  • Posts: 7853
  • Gender: Male
  • tioz4ever
    • WebsiteBaker - jQuery-Plugins - Module - Droplets - Tests
Re: Absätze wysiwyg -editor und p-tag
« Reply #13 on: April 30, 2010, 02:48:54 PM »
was passiert, wenn erst alles geschrieben und dann nach link-oben ausgerichtet wird?

Offline chnosli

  • Posts: 28
Re: Absätze wysiwyg -editor und p-tag
« Reply #14 on: April 30, 2010, 02:56:50 PM »
was passiert, wenn erst alles geschrieben und dann nach link-oben ausgerichtet wird?

wenn ich auf zelle/eigenschaften gehe, steht zwar, dass es links oben ausgerichtet ist. sieht aber nicht so aus.
siehe nochmals hier: http://www.tierarzt-einsiedeln.ch/pages/fundtierevermittlung.php

Online dbs

  • Betatester
  • **
  • Posts: 7853
  • Gender: Male
  • tioz4ever
    • WebsiteBaker - jQuery-Plugins - Module - Droplets - Tests
Re: Absätze wysiwyg -editor und p-tag
« Reply #15 on: April 30, 2010, 03:21:47 PM »
es sieht eigentlich gut aus. links oben ausgerichtet.
weiter unten benutzt du auf einmal <p><span> statt nur <span> deshalb ist es etwas tiefer gesetzt.

Offline chnosli

  • Posts: 28
Re: Absätze wysiwyg -editor und p-tag
« Reply #16 on: May 03, 2010, 08:56:05 AM »
es sieht eigentlich gut aus. links oben ausgerichtet.
weiter unten benutzt du auf einmal <p><span> statt nur <span> deshalb ist es etwas tiefer gesetzt.

ja das machts automatisch. <p><span> ergibt sich indem ich enter drücke.
bei den anderen einträgen habe ich <p> manuell im code gelöscht (damits schön aussieht).

es kann doch nicht sein, dass ich "enter" nicht verwenden darf. das wäre ganz was neues. ??

Online dbs

  • Betatester
  • **
  • Posts: 7853
  • Gender: Male
  • tioz4ever
    • WebsiteBaker - jQuery-Plugins - Module - Droplets - Tests
Re: Absätze wysiwyg -editor und p-tag
« Reply #17 on: May 03, 2010, 12:15:34 PM »
der fck-editor ist von haus aus so eingestellt, dass ein enter ein <p> erzeugt.
ein shift+enter erzeugt ein <br />.

lies mal hier:
http://www.websitebaker2.org/forum/index.php/topic,16182.0.html

dbs

Offline chnosli

  • Posts: 28
Re: Absätze wysiwyg -editor und p-tag
« Reply #18 on: May 04, 2010, 03:40:00 PM »
habe die änderung im code vorgenommen und nun klappt alles wie ich das haben will! danke! :)

Offline Schnetty

  • Posts: 152
  • Gender: Male
Re: Absätze wysiwyg -editor und p-tag
« Reply #19 on: May 17, 2010, 01:13:45 PM »

Quote from: wollinche

Nach einem <div> darf kein Text (oder sonstige Ausgabe) stehen.
Das was ausgegeben werden soll muß z.B. in einem "Ausgabe"-Tag stehen, z.B. ein <p> oder ein <td> einer Tabelle.
Eine Textausgabe ohne <p> in einem <div> ist unzuläsig und nicht valide.

/Klugscheisser Modus OFF


Hallo,

Zu deiner o.g. Aussage hab mal folgendes probiert (Text in DIV ohne Ausgabe-Tag) aber trotzdem als valide gekennzeichnet bekommen:

Code: [Select]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Valide oder nicht valide - das ist hier die Frage :-) </title>
</head>

<body>
<div>
Laberlaber
</div>
</body>
</html>

Das beißt sich dann aber mit  deiner Aussage von wegen "nicht valide".


Aber zurück zum <p>-Tag Problem:

Ich hab im FCK-Editor mal probiert die <p>-Tags über den Quelltextmodus manuell zu entfernen. Beim Klick auf speichern sind die aber jedesmal wieder da. Als erstes Element im Content ist eine grafische Überschrift eingebaut und die landete dann ebenfalls in einem <p>. Was dann aber Abstände nach oben ergeben hat, die ich so nicht vorgesehen hatte.
Einzige schnelle Abhilfe schaffte folgendes "<p style="margin:0; padding:0;><img src="blaa" /></p>"

Eher unbefriedigend.

<p>-Tags finde ich generell ja auch OK nur wenn ich sie "manuell" löschen will und nach dem speichern die Änderungen wieder verworfen wurden, dann finde ich das lästig.

Kann man dies dem FCK-Editor auch abgewöhnen ohne generell die <p>-Tags abzuschalten?

(Ich hab ja ganz am Anfang der Seite nichtmal ein "Enter" benutzt sondern den Cursor reingesetzt und über "Bild einfügen" die Überschrift eingebaut. Das <p> wird dabei automatisch hinzugefügt)


Greets
Schnetty


wollinche

  • Guest
Re: Absätze wysiwyg -editor und p-tag
« Reply #20 on: May 17, 2010, 10:35:45 PM »
Das beißt sich dann aber mit  deiner Aussage von wegen "nicht valide".
Nein, eigentlich nicht.

Kann man dies dem FCK-Editor auch abgewöhnen ohne generell die <p>-Tags abzuschalten?
Sicher, man muß nur kreativ sein und ...

Lese das was @tiesy zur Änderung des Editors geschrieben hat ...
... und dann lese mal hier:
http://de.selfhtml.org/html/referenz/elemente.htm
insbesondere das was bei p und span steht.
Dann ersetze das was  @tiesy zu p geschreiben hat durch span

Und voilà - fertig ist dein Wunsch.

Offline Schnetty

  • Posts: 152
  • Gender: Male
Re: Absätze wysiwyg -editor und p-tag
« Reply #21 on: May 19, 2010, 02:26:24 PM »
Das beißt sich dann aber mit  deiner Aussage von wegen "nicht valide".
Nein, eigentlich nicht.

Hmm, wie erklärst du dir dann, das der W3C Validator meinen vorgenannten Quelltext als valide durchgewunken hat, wenn es - wie du sagst - "nicht" valide ist?

Deine Aussage ist mir nur aufgefallen, weil ich Text schon öfter ohne P-Tags deklariert hab und ich checke meine Seiten immer mit dem Validator um Fehler zu finden und zu beheben.


Zu der Änderung im FCKeditor:

Ich hab tiesy´s Workaround mal durchgeführt. Aber genau das, was ich nicht wollte, ist eingetreten.
Ich bekomme nun überhaupt keine <p>´s mehr. Das ist ja so auch nicht gewollt.
Nur das ich im Quelltextmodus <p>-Tags nicht löschen kann ist ärgerlich. Jedesmal wenn ich auf "speichern" klicke ist der <p> Mist wieder da - grmmpf.

Nun wird einfach statt des <p>´s ein <br /> gesetzt.
Nuja - wie gesagt - mit der "display: inline;"  oder "margin:0; padding:0;"- Methode bekomme ich die unerwünschten Abstände auch weg.


Greets
Schnetty
« Last Edit: May 19, 2010, 02:57:59 PM by Schnetty »

chio

  • Guest
Re: Absätze wysiwyg -editor und p-tag
« Reply #22 on: May 19, 2010, 03:02:21 PM »
Dass Text - direkt in einem <div> - nicht valide wäre, höre ich das erste Mal.

Es ist einfach so:
Der FCK will immer ein Blockformat um jeden Block haben. Sonst wäre es praktisch nicht möglich, eine <h?> Überschrift oder ein anderes Blockformat zu machen. Wie auch. Block = Block.

Das Standard-Blockformat für Text ist p. Und das ist auch sinnvoll so und macht in aller Regel keine Probleme.
<div> nimmt man, wenn es mit <p> Probleme gibt.

Offline Schnetty

  • Posts: 152
  • Gender: Male
Re: Absätze wysiwyg -editor und p-tag
« Reply #23 on: May 19, 2010, 04:20:32 PM »
Quote
Dass Text - direkt in einem <div> - nicht valide wäre, höre ich das erste Mal.

Seh ich auch so :-)

Offline ruebenwurzel

  • Betatester
  • **
  • Posts: 8383
  • Gender: Male
  • Keep on Rockin
    • Familie Gallas Online
Re: Absätze wysiwyg -editor und p-tag
« Reply #24 on: May 19, 2010, 04:37:49 PM »
Hallo,

Nur kurz zur Info. Was mich auch schon lange gestört hat waren die leeren <p></p> tags die FCK angelegt hat, wenn er kein blockelemet gefunden hat. Das haben wir ihm jetzt abgewöhnt.

http://project.websitebaker2.org/changeset/1352

Die Einstellung ist ab WB 2.8.2 der default Wert.

Ein anderes Thema ist wie mit normalem Text verfahren wird. Hab da auch alle Variationen (p,div,br) ausprobiert und bin letztendlich wieder zu <p> tags zurückgekommen. Es ist wie chio sagt das Standard-Blockformat und läßt sich ja ohne Probleme im css entsprechend stylen.

Matthias