CSS Trouble: margin-bottom funktioniert nicht

gab · Post by **gab** » Fri 19. Aug 2005, 01:41

Hi

Eine verzeweifelte Frage zu folgendem CSS Trouble (phpwcms v1.2.5-DEV):

Ich möchte, dass "articleText" jeweils links und unten einen Leerraum von 100px aufweist, also:

.articleText {
margin-left: 100px;
margin-bottom: 100px;
text-align: justify;
}

...und ich formatiere einen Textbereich als "articleText" (mit WYSIWIG-HTML):

<p><span class="articleText">Dies ist der 1. Textblock. Dies ist der 1. Textblock. Dies ist der 1. Textblock. Dies ist der 1. Textblock. </span></p>
<p>Dies ist der 2. Textblock. Dies ist der 2. Textblock. Dies ist der 2. Textblock. Dies ist der 2. Textblock.</p>

Nun, "margin-left: 100px" funktioniert perfekt, auf der linken Seite gibts ne wunderbare Lücke. Trotz "margin-bottom: 100px" passiert unten jedoch gar nix. Wo muss ich hier nach dem Problem suchen?

Danke für die Hilfe!
gab

Meine frontend.css:
____________

body {
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 11px;
}

td, th, p, div, span {
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 11px
}

.listEntry {
margin-bottom: 10px;
}

a, a:link, a:visited, a:active, a:focus {
color: #FF3300;
text-decoration: none
}
a:hover {
color: #FF3300;
text-decoration: underline;
}

.articleText {
margin-left: 100px;
margin-bottom: 100px;
text-align: justify;
}

____________

Apollo2000 · Post by **Apollo2000** » Fri 19. Aug 2005, 07:04

Ich hatte ein ähnliches Problem:
http://www.phpwcms.de/forum/viewtopic.php?t=8123

Die Einstellungen bzw. Änderungen zu margin-bottom wurden wurden erst in neuen Artikel sichtbar, nicht in bereits erstellten.
Vielleicht ist das ja in deinem Fall auch so.

Post by **flip-flop** » Fri 19. Aug 2005, 09:48

Hi,

Du solltest grundsätzlich die Reihenfolge der Befehle einhalten.
1. top
2. right
3. bottom
4. left
Also rechtsdrehend immer beginnend mit top.

Browsercache löschen!!! Die CSS-Datei wird häufig gehalten.

Außerdem wirst Du wohl noch den <p>-tag iniziert haben.

form, div, p, h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
}

Gruß Knut

gab · Post by **gab** » Fri 19. Aug 2005, 10:31

- Reichenfolge ändern nützt nix
- Cache überall löschen hilft nicht
- Neuen Artikel erstellen bringt auch nichts
- meine CSS-Datei umfasst nichts dergleichen:
form, div, p, h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
}

Nun aber: interessant ist, wenn ich den von PHPWCMS vorgegebenen Tag <span>

<p><span class="articleText">Dies ist der 1. Textblock. Dies ist der 1. Textblock. Dies ist der 1. Textblock. Dies ist der 1. Textblock. </span></p>

manuell in <div>

<p><div class="articleText">Dies ist der 1. Textblock. Dies ist der 1. Textblock. Dies ist der 1. Textblock. Dies ist der 1. Textblock. </div></p>

verändere, dann wir "margin_bottom" einwandfrei dargestellt.

ich blick immer noch nicht durch....

Post by **flip-flop** » Fri 19. Aug 2005, 12:21

Hi,

<div> ist ein Blockelement und <span> ein Inline-Element

Hoffe es hilft.

Knut

gab · Post by **gab** » Fri 19. Aug 2005, 13:06

...danke, ich habs aber immer noch nicht verstanden. Warum wird "margin-bottom: 100px" im <div></div> korrekt angezeigt und im <span></span> nicht

Was muss ich tun, damit der FCKeditor CSS-Formatierungen in ein <div></div> anstelle in ein <span></span> schreibt?

Danke und Gruss
gab

Post by **flip-flop** » Fri 19. Aug 2005, 13:42

Hi,

wie machst Du das überhaupt CSS im FCK einbinden? Über den CSS-Editor?
Welchen Browser verwendest Du zum editieren?

Gruß Knut

pepe · Post by **pepe** » Fri 19. Aug 2005, 13:46

Einfach im Editor den Sourcecode-Modus verwenden

Post by **flip-flop** » Fri 19. Aug 2005, 14:26

Ja, ne, klar,

das bringt doch aber kein User hin.

Ich dachte es gäbe irgendeinen Trick den ich nicht kenne.

Das baut mir mein FCK 2.0 mit dem Fuchs aus

Code: Select all

<p><div class="articleText">Dies ist der 1. Textblock. Dies ist der 1. Textblock. Dies ist der 1. Textblock. Dies ist der 1. Textblock. </div></p>

zusammen:

Code: Select all

<p>&nbsp;</p>
<div class="articleText">Dies ist der 1. Textblock. Dies ist der 1. Textblock. Dies ist der 1. Textblock. Dies ist der 1. Textblock. </div>
<p>&nbsp;</p>

Im Quelltext steht nachher genau der zweite Teil. Ist doch OK.

Sonst musst Du an der fckconfig.js drehen. Einige Funktionen scheinen da noch nicht unterstützt zu werden. Ist wohl noch hardcodet.

Knut

pepe · Post by **pepe** » Fri 19. Aug 2005, 15:02

Aber du kannst doch den FCKeditor2 so modifizieren, daß du per Mausklick, ausgewählten Elementen oder "Bereichen" des Editorfeldes spezielle Klassen zuweisen kannst.

Einfach die STYLE-Funktion aktivieren... und dein Editor ohne Erfahrung kann das durch Mausklick... so als wolle er die Schrift auf FETT umschalten.

Und alle Editoren die selbst das nicht können ......... (ZENSIERT

)

( Und mit der Technik kannst du auch DIVs einfügen oder die vorhandene Formatierung komplett auf den "Kopf" stellen! )
Einfach mal ein wenig "spielen"...

Post by **flip-flop** » Fri 19. Aug 2005, 15:40

Und das Schönste ist, du hast es schon sehr ausführlich beschrieben.

http://peperkorn-online.de/fckeditor.phtml

Gute Arbeit.

Gruß Knut

gab · Post by **gab** » Fri 19. Aug 2005, 17:43

Danke, ich hab vielleicht nicht alles erklären können:

Also ich arbeite mit dem FCKeditor genau so wie pepe das wunderbar auf seiner Site erklärt http://peperkorn-online.de/fckeditor.phtml. Das klappt mit allen CSS Klassen gut. Im IE wie im Feuerfuchs.

Ich markiere also den Text, wähle den Style im FCKeditor und die CSS-class wird bei mir automatisch ein Inline-Element gebaut und sieht im Quelltext so aus:

Code: Select all

<p><span class="articleText">Dies ist der 1. Textblock. Dies ist der 1. Textblock. Dies ist der 1. Textblock. Dies ist der 1. Textblock. </span></p>

und jetzt würds mich interessieren, warums bei anderen so aussieht:

Code: Select all

<p><div class="articleText">Dies ist der 1. Textblock. Dies ist der 1. Textblock. Dies ist der 1. Textblock. Dies ist der 1. Textblock. </div></p>

Eingebaut in das Blockelement <div> würd "margin-bottom: 100px;" im Gegensatz zum Inline-Element <span> nämlich funktionieren, das hab ich getestet.

Wo kann ich das bewirken, dass die class automatisch in ein <div> Element gebaut wird? Ich kanns ja nicht in die frontend.css schreiben, oder?

Danke,
gab

Arbeite übrigens mit phpwcms v1.2.5-DEV

Post by **flip-flop** » Fri 19. Aug 2005, 18:42

Hi,

bitte lese dir die Anleitung von pepe noch einmal genau durch. Ich denke da wird sich ein Fehler bei der Umsetzung eingeschlichen haben.
http://www.peperkorn-online.de/fckeditor.phtml

Textauszug:

element:
Format-Element, auf welches sich der Style beziehen soll
(class - div - span - img - hr - etc.)

und als Bsp.:

<Style name="Inhalts-Untertitel" element="span">
<Attribute name="class" value="contentSubHead" />
</Style>

Die entsprechenden span-tags sollten bei dir div heißen.
Habe ich nicht getestet aber das wird es sein.

Gruß Knut

gab · Post by **gab** » Fri 19. Aug 2005, 18:46

Danke! Das klinkt gut, werds später testen!
gab

pepe · Post by **pepe** » Fri 19. Aug 2005, 23:30

Ich habe das auf spans bezogen, weil ich dann auch innerhalb einer Zeile wechseln kann!...

Bei DIVs gehts ja( ohne float ) nur blockweise (glaube ich)!

Ändere das einfach und probier, ob das bei deiner Art, Inhalte einzugeben, dann so funktioniert, wie gewünscht....