Zeilenvorschub zusammen mit "clear: both"

[Silli]

Hi,
ich habe notiert

  
footer {clear: both; margin-top: 2em;}  

  
<footer>  
  bla bla bla  
</footer>

in der Hoffnung, die unter footer stehenden Texte würden um 2em nach unten gerückt.
Dem ist leider nicht so. Erst wenn ich in dem Text z.B. <br><br> angebe, rückt der Text nach unten.
Ich vermute, dass das clear noch nicht durchgeführt ist, wenn das margin-top interpretiert wird?
Wie kann ich die Angabe des Zeilenvorschubs im Text vermeiden und ihn doch in CSS angeben?
G. Silli

[Matthias Apsel]

Om nah hoo pez nyeetz, Silli!

footer {clear: both; margin-top: 2em;}

> in der Hoffnung, die unter footer stehenden Texte würden um 2em nach unten gerückt.  
  
Der Unterschied zwischen „top“ und „bottom“ auch bei CSS von essentieller Bedeutung.  
  
Matthias

-- 
Der Unterschied zwischen Java und JavaScript ist größer als der zwischen [Rat und Rattenplage](http://selfhtml.apsel-mv.de/java-javascript/index.php?buchstabe=R#rat).  
![](http://www.billiger-im-urlaub.de/kreis_sw.gif)  

[Tom]

Hello Ihr Beiden,

ich muss mal wieder den Blödmann machen und ein paar Fragen stellen:

footer {clear: both; margin-top: 2em;}

> > in der Hoffnung, die unter footer stehenden Texte würden um 2em nach unten gerückt.  
>   
> Der Unterschied zwischen „top“ und „bottom“ auch bei CSS von essentieller Bedeutung.  
  
Hier war jetzt nicht angegeben, um welche HTML-Version es sich handelt.  
Als Dummie vermute ich daher HTML5  
Es steht auch nicht dabei, welche CSS-Version ...  
Und es steht nicht dabei, in welchem Browser das Ganze getestet wurde.  
  
Und nun wüsste ich gerne noch die Logik dahinter, falls man bei HTML überhaupt davon sprechen darf :-P  
  
Ich lese auch wieder aus dem Kontext, dass mit "unter footer" gemeint war, "unter <footer></footer>", also unter dem Element <footer> und nicht inter dem Starttag <footer> (also ab dem Starttag).  
  
Und gilt das auch für HTML5, dass leere Elemente keinen Platz beanspruchen und im Ablauf daher nicht berücksichtigt werden?  
  
  
\---  
  
Und warum stelle ich diese blöden Fragen?  
  
Weil mit beim Lesen von alten Threads aufgefallen sit, dass es manchmal schwer ist, die Zusammenhänge noch nachzuvollziehen, wenn keine Versionsnummern und Kontxtbedingungen (welcher Browser, welches Os, ...) bekannt gegeben wurden.  
  
  
  
  
  
  
  
  
  
  
Liebe Grüße aus dem schönen Oberharz  
  
  
Tom vom Berg  
![](http://selfhtml.bitworks.de/Virencheck.gif)  
  

-- 
 ☻\_  
/▌  
/ \ Nur selber lernen macht schlau  
<http://bikers-lodge.com>

[Matthias Apsel]

Om nah hoo pez nyeetz, Tom!

ich muss mal wieder den Blödmann machen und ein paar Fragen stellen:

Dann mach ich mal den Klugscheißer ;-)

Und gilt das auch für HTML5, dass leere Elemente keinen Platz beanspruchen und im Ablauf daher nicht berücksichtigt werden?

img ist ein leeres Element :-p

Matthias

[MudGuard]

Hi,

footer {clear: both; margin-top: 2em;}

  

> Hier war jetzt nicht angegeben, um welche HTML-Version es sich handelt.  
> Als Dummie vermute ich daher HTML5  
  
Das war aber schwer rauszukriegen. HTML 4.01/XHTML 1.0 und früher kennen kein footer-Element ...  
  
cu,  
Andreas

-- 
[Warum nennt sich Andreas hier MudGuard?](http://MudGuard.de/)  
[O o ostern ...](http://ostereier.andreas-waechter.de/)  
  
Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.  

[Tom]

Hello,

footer {clear: both; margin-top: 2em;}

>   
> > Hier war jetzt nicht angegeben, um welche HTML-Version es sich handelt.  
> > Als Dummie vermute ich daher HTML5  
>   
> Das war aber schwer rauszukriegen. HTML 4.01/XHTML 1.0 und früher kennen kein footer-Element ...  
  
Na eben!  
Vielleicht funktionierte ja das Vorhaben von Silli deshalb nicht ? ;-D  
  
  
  
  
  
Liebe Grüße aus dem schönen Oberharz  
  
  
Tom vom Berg  
![](http://selfhtml.bitworks.de/Virencheck.gif)  
  

-- 
 ☻\_  
/▌  
/ \ Nur selber lernen macht schlau  
<http://bikers-lodge.com>

[Silli]

Hi,

Das war aber schwer rauszukriegen. HTML 4.01/XHTML 1.0 und früher kennen kein footer-Element ...

Na eben!
Vielleicht funktionierte ja das Vorhaben von Silli deshalb nicht ? ;-D

Mit dem Vorschlag von Gunther funktioniert es doch.
G.
Silli

[Tom]

Hello,

Das war aber schwer rauszukriegen. HTML 4.01/XHTML 1.0 und früher kennen kein footer-Element ...

Na eben!
Vielleicht funktionierte ja das Vorhaben von Silli deshalb nicht ? ;-D

Mit dem Vorschlag von Gunther funktioniert es doch.

Und GENAU DESHALB hatte ich gefragt!

Einfach im CSS für HTML 4.x ein Klasse "footer{}" einzurichten, wäre nicht vorgesehen gewesen.

Die Euros fallen manchmal centweise ;-)

Liebe Grüße aus dem schönen Oberharz

Tom vom Berg

[Auge]

Hallo

Mit dem Vorschlag von Gunther funktioniert es doch.

Und GENAU DESHALB hatte ich gefragt!

Einfach im CSS für HTML 4.x ein Klasse "footer{}" einzurichten, wäre nicht vorgesehen gewesen.

Will auch mal klugscheißen: In deiner Notation handelt es sich mitnichten um eine Klasse namens „footer“ sondern um ein Element selbigen Namens, das zugegebenermaßen vor HTML5 nicht existierte. Oder ist dein Text etwa nur eines Punktes verlustig gegangen?

Tschö, Auge

[Tom]

Hello,

Und GENAU DESHALB hatte ich gefragt!

Einfach im CSS für HTML 4.x ein Klasse "footer{}" einzurichten, wäre nicht vorgesehen gewesen.

Will auch mal klugscheißen: In deiner Notation handelt es sich mitnichten um eine Klasse namens „footer“ sondern um ein Element selbigen Namens, das zugegebenermaßen vor HTML5 nicht existierte. Oder ist dein Text etwa nur eines Punktes verlustig gegangen?

Nee, eben nicht.

Die Klasse hätte ".footer" heißen müssen. Es stand da aber "footer{}", also ohne führenden Punkt. Und das sind eben direkte Element-Formatierungen. Da es das Element "<footer></footer>" in HTML 4.x aber nicht gibt, habe ich auf HTML5 geschlossen. Und dort müsste dann ja auch die direkte Element-Formatierung erlaubt sein, oder?

Liebe Grüße aus dem schönen Oberharz

Tom vom Berg

[Auge]

Hallo

Die Klasse hätte ".footer" heißen müssen. Es stand da aber "footer{}", also ohne führenden Punkt. Und das sind eben direkte Element-Formatierungen. Da es das Element "<footer></footer>" in HTML 4.x aber nicht gibt, habe ich auf HTML5 geschlossen. Und dort müsste dann ja auch die direkte Element-Formatierung erlaubt sein, oder?

Ja natürlich, warum sollte es nicht?

Tschö, Auge

[Gunnar Bittersmann]

@@Auge:

nuqneH

Da es das Element "<footer></footer>" in HTML 4.x aber nicht gibt, habe ich auf HTML5 geschlossen. Und dort müsste dann ja auch die direkte Element-Formatierung erlaubt sein, oder?

Ja natürlich, warum sollte es nicht?

Eben. CSS schert sich nicht im Geringsten darum, was in HTML erlaubt ist.

Qapla'

[Gunnar Bittersmann]

@@Tom:

nuqneH

Hier war jetzt nicht angegeben, um welche HTML-Version es sich handelt.

Das ist ja auch irrelevant. Browser haben nur einen HTML-Parser. Ob ein Dokument als HTML5 oder HTML 4.01 oder 3.2 deklariert ist, interessiert nicht die Bohne; sie werden gleichermaßen verarbeitet.

Es steht auch nicht dabei, welche CSS-Version ...

Das ist ja auch irrelevant. Browser haben nur …

Und außerdem hat CSS gar keine Versionen, sondern Level. Wie Zwiebeln und Oger.

Qapla'

[Der Martin]

Hallo,

Und außerdem hat CSS gar keine Versionen, sondern Level. Wie Zwiebeln und Oger.

Shrek: "Onions have layers. Ogers have layers."

Layers. Not levels. :-)

Ciao,
 Martin

[Gunnar Bittersmann]

@@Der Martin:

nuqneH

Layers. Not levels. :-)

Ähm ja, das war das L-Wort.

Qapla'

[Gunnar Bittersmann]

@@Gunnar Bittersmann:

nuqneH

Ob ein Dokument als HTML5 oder HTML 4.01 oder 3.2 deklariert ist, interessiert nicht die Bohne; sie werden gleichermaßen verarbeitet.

Oder auch als XHTML 1.x, wenn es als text/html ausgeliefert wird.

Was anderes ist XHTML 1.x oder XHTML5, das mit einem XML-Medientypen ausgeliefert wird, das läuft nicht durch den HTML-Parser.

Qapla'

[Silli]

Hi,

Der Unterschied zwischen „top“ und „bottom“ auch bei CSS von essentieller Bedeutung.

Top ist allerdings korrekt.
G. Silly

[M.]

Mahlzeit,

Top ist allerdings korrekt.

Wieso kann das korrekt sein, wenn du die Texte unter Footer nach unten rücken willst?
Du rückst footer nach unten.

[Gunther]

Hi!

ich habe notiert

footer {clear: both; margin-top: 2em;}

  
Nicht gut ...,  
denn Footer-Elemente könnte es durchaus mehrere geben!  
  
In deinem Fall, wenn es sich um den Page-Footer handelt, darfst du ihm auch ruhig eine ID verpassen:  
~~~css
#footer {clear: both; margin-top: 2em;}  

Und im HTML dann:

<footer id="footer">  
  bla bla bla  
</footer>  

in der Hoffnung, die unter footer stehenden Texte würden um 2em nach unten gerückt.
Dem ist leider nicht so. Erst wenn ich in dem Text z.B. <br><br> angebe, rückt der Text nach unten.

Das ist zum einen sehr missverständlich formuliert und zum anderen bedarf es dann eines Paddings (-top) und keines Margins (-top).

Ich vermute, dass das clear noch nicht durchgeführt ist, wenn das margin-top interpretiert wird?

Da vermutest du falsch. ;-)

Wie kann ich die Angabe des Zeilenvorschubs im Text vermeiden und ihn doch in CSS angeben?

Siehe oben!

Zum anderen wäre es aber hilfreich, wenn du etwas mehr von deinem HTML und CSS Code posten würdest, denn der bisherige Schnippsel reicht für eine "Analyse des Problems" nicht aus.

Denn ich vermute mal, dass dem Elternelement deiner gefloateten Elemente ein "overflow:hidden" fehlt.

Siehe: http://stackoverflow.com/questions/4198269/in-css-margin-top-is-not-working-with-clear-both

Gruß Gunther

[Silli]

Hi,

denn Footer-Elemente könnte es durchaus mehrere geben!

In deinem Fall, wenn es sich um den Page-Footer handelt, darfst du ihm auch ruhig eine ID verpassen:

Ich habe nur einen footer, den page-footer

Das ist zum einen sehr missverständlich formuliert und zum anderen bedarf es dann eines Paddings (-top) und keines Margins (-top).

Warum dies? In dem Beispiel liefern beide Angaben das von mir gewünschte Ergebnis.

Denn ich vermute mal, dass dem Elternelement deiner gefloateten Elemente ein "overflow:hidden" fehlt.

Das fehlt tatsächlich!

Siehe: http://stackoverflow.com/questions/4198269/in-css-margin-top-is-not-working-with-clear-both

Warum dies aber angegeben werden muss, ist mir noch nicht ganz klar. Werde mir das zitierte Dokument noch einmal zu Gemüte führen.
Dieses Frage-/Antwortspiel in Englisch ist mir noch nicht klar.
G.
Silli

[Matthias Apsel]

Om nah hoo pez nyeetz, Silli!

Warum dies? In dem Beispiel liefern beide Angaben das von mir gewünschte Ergebnis.

Das ist aber nicht das, was du beschrieben hast. Und außerdem liefern deine Beispiele mitnichten das Ergebnis, denn du hast Fehler im CSS

.mt {margin-top: 15px;"}  
.pt {padding-top: 15px;"}

Der Abstand ist in beiden Fällen das margin-bottom der Überschrift.

Gib den Elementen einen Hintergrund, dann siehst du es besser. Und nach der Korrektur des CSS auch einen Unterschied zwischen beiden.

Informiere dich über margin und padding, beispielsweise in unserem Wiki.

Du schriebst

die unter footer stehenden Texte

<!-- vorangehende Elemente -->  
<footer>  
  Inhalt des footer-Elements  
</footer>  
<!-- nachfolgende Elemente -->

Das sind im sichtbaren HTML-Dokument die nachfolgenden Elemente, du möchtest aber den Inhalt des footer-Elements nach unten verschieben. (Tag - Element - Attribut)

Matthias