Problem mit Positionierung

[Andreas]

Hallo Forum,
ich versuche gerade herauszubekommen warum meine CSS-Angaben zu zwei unterschiedlichen Ergebnissen führen.

So sieht es ungefähr aus
Auf der HTML Seite:
<div id="inhalt">
<span class="title1">Überschrift1</span>
<span class="title2">Überschrift2</span>
<table width="100%".......
</table>
</div>

Der CSS-Code

.title1 {font-family: Arial, Helvetica, sans-serif;
 font-size: 18px;
 font-style: normal;
 font-weight: bold;
 text-align: center;
 vertical-align: middle;
 line-height: 20px;
 position: relative;
 height: 20px;
 margin:0;
 top: 0px;
 left: 0px;
 width: 100%;}

.title2 {font-family: Arial, Helvetica, sans-serif;
 font-size: 14px;
 font-style: normal;
 font-weight: bolder;
 text-align: center;
 vertical-align: middle;
 line-height: 20px;
 position: relative;
 margin: 0;
 height: 20px;
 top: 0px;
 width: 100%;
 left: 0;}

Nun zu meinem Problem. Im Internetexplorer werden mir die Überschriften, wie gewünscht, schön untereinander dargestellt.
Firefox macht aber hinter der ersten Überschrift keinen Zeilen- umbruch und zeigt die Überschriften in einer Zeile an.

Wer macht denn jetzt etwas falsch? IE, Firefox oder etwa ich selbst :-)

Viele Grüße
Andreas

[wahsaga]

hi,

Auf der HTML Seite:
<div id="inhalt">
<span class="title1">Überschrift1</span>
<span class="title2">Überschrift2</span>

Koche bitte nicht so eine aussagelose Tag-Suppe.
Wenn du Überschriften auszeichnen willst, nutze dafür h1 bis h6.

Nun zu meinem Problem. Im Internetexplorer werden mir die Überschriften, wie gewünscht, schön untereinander dargestellt.

Wie gewünscht vielleicht, aber nicht wie "korrekt".
Da span ein inline-Element ist, kannst du ihm keine width und height verpassen. Der IE interpretiert diese Angaben fälschlicherweise.

Firefox macht aber hinter der ersten Überschrift keinen Zeilen- umbruch und zeigt die Überschriften in einer Zeile an.

Wer macht denn jetzt etwas falsch? IE, Firefox oder etwa ich selbst :-)

Du selbst, und zwar wie oben gesagt schon gleich zu Beginn.
Hättest du ein hX für die Überschriften genommen, wäre das automatisch ein Block Element gewesen.

gruß,
wahsaga

[Ashura]

Hallo Andreas.

Auf der HTML Seite:

<div id="inhalt">

<span class="title1">Überschrift1</span>
<span class="title2">Überschrift2</span>
<table width="100%".......
</table>
</div>

  
Liegt es wirklich so fern, eine Überschrift als <http://de.selfhtml.org/html/text/ueberschriften.htm#definieren@title=Überschrift >auszuzeichnen?  
  

> Der CSS-Code  
>   
> .title1 {font-family: Arial, Helvetica, sans-serif;  
>  font-size: 18px;  
>  font-style: normal;  
>  font-weight: bold;  
  
Die Maßeinheit px ist für Text denkbar ungeeignet, besser dagegen sind relative Maßeinheiten wie em und %. (Siehe auch [diesen aktuellen Thread](https://forum.selfhtml.org/?t=130368&m=842798).)  
  
Zudem kannst du diese Angaben in der Sammeleigenschaft <http://de.selfhtml.org/css/eigenschaften/schrift.htm#font@title=font> zusammenfassen.  
  

>  text-align: center;  
>  vertical-align: middle;  
>  line-height: 20px;  
>  position: relative;  
>  height: 20px;  
>  margin:0;  
>  top: 0px;  
>  left: 0px;  
>  width: 100%;}  
  
Die Eigenschaften height und width dürfen bei span-Elementen nicht wirken, sofern ihr (Ausgangs-)Wert für die display-Eigenschaft noch auf inline steht. So ist es ein Element, was sich dem Textfluss anpasst, wohingegen Elemente mit display:block sich ihrem Wert entsprechend verhalten und einen Block bilden, welcher auf Dimensionsangaben wie height und width reagiert.  
  

> Nun zu meinem Problem. Im Internetexplorer werden mir die Überschriften, wie gewünscht, schön untereinander dargestellt.  
  
Dann rufe den IE >= 6.0 einmal im <http://de.selfhtml.org/css/formate/box_modell.htm#doctype_switch@title=standardkonformen Modus> auf.  
  

> Wer macht denn jetzt etwas falsch? IE, Firefox oder etwa ich selbst :-)  
  
IE und du, infolge des IEs. Teste während der Entwicklungsphase vorrangig in Gecko-basierten Browsern wie Firefox und Opera und bessere im Nachhinein Fehler des IE aus.  
  
  
Einen schönen Dienstag noch.  
  
Gruß, Ashura  

-- 
sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|  
„It is required that HTML be a common language between all platforms. This implies no device-specific markup, or anything which requires control over fonts or colors, for example. This is in keeping with the SGML ideal.“  
[[HTML Design Constraints: Logical Markup](http://www.w3.org/History/19921103-hypertext/hypertext/WWW/MarkUp/HTMLConstraints.html)]

[wahsaga]

hi,

Teste während der Entwicklungsphase vorrangig in Gecko-basierten Browsern wie Firefox und Opera

Solltest du damit wirklich ausdrücken haben wollen, Opera sei gecko-basiert, möchte ich hiermit augenblicklich zu deiner symbolischen Steinigung ob dieser Häresie aufrufen.

gruß,
wahsaga

[Ashura]

Hallo wahsaga.

Teste während der Entwicklungsphase vorrangig in Gecko-basierten Browsern wie Firefox und Opera

Solltest du damit wirklich ausdrücken haben wollen, Opera sei gecko-basiert, möchte ich hiermit augenblicklich zu deiner symbolischen Steinigung ob dieser Häresie aufrufen.

Vor „und“ setzt man nun einmal kein Komma, kann ich auch nichts dafür.
(Ich werde meine Formulierung nächstes Mal deutlicher gestalten.)

Einen schönen Dienstag noch.

Gruß, Ashura

[Dennis]

Hi Ashura,

Vor „und“ setzt man nun einmal kein Komma, kann ich auch nichts dafür.

Nach meinem Wissen: Falsch, man _muss_ vor und kein Komma setzen, darf es aber um beispielsweise den Sinn zu verdeutlichen. Das hatten wir wenn ich mich recht erinnere schon damals in dem Mega-Thread zur Lernstandserhebung festgestellt.

MfG, Dennis.

[Ashura]

Hallo Dennis.

Vor „und“ setzt man nun einmal kein Komma, kann ich auch nichts dafür.

Nach meinem Wissen: Falsch, man _muss_ vor und kein Komma setzen, darf es aber um beispielsweise den Sinn zu verdeutlichen.

Hm, mutet mir zu seltsam an. Da formuliere ich meine Sätze lieber um.

Einen schönen Dienstag noch.

Gruß, Ashura

[Stonie]

Nahmt Ashura,

Hm, mutet mir zu seltsam an. Da formuliere ich meine Sätze lieber um.

Ja, das sehe ich auch so. Deswegen bietet unsere wunderschöne Muttersprache ja auch so entzückende Wörter an wie "sowie" und "beispielsweise", außerdem gibt's Klammern. Ich finde dieses Handwerkszeug einfach grandios! Damit könnte man folgendes tun:

Teste während der Entwicklungsphase vorrangig in Gecko-basierten Browsern (beispielsweise Firefox) sowie Opera.

Ist das nicht wunder-wunder-wunderschöööööhhhhhhnnnn? ;o)

File Griese,

Sto*SCNR*nie

[Ashura]

Hallo Stonie.

Teste während der Entwicklungsphase vorrangig in Gecko-basierten Browsern (beispielsweise Firefox) sowie Opera.

Ist das nicht wunder-wunder-wunderschöööööhhhhhhnnnn? ;o)

Vollkommen! Das hast du wunderbar gemacht.
Sooo gefällt mir das gleich viel besser.

Einen schönen Dienstag noch.

Gruß, Ashura

[Swen Wacker]

Moin,

Teste während der Entwicklungsphase vorrangig in Gecko-basierten Browsern (beispielsweise Firefox) sowie Opera.

Da halte ich mit :-) "Teste während der Entwicklungsphase vorrangig in Gecko-basierten Browsern wie Firefox und in Opera" wäre auch noch eine Möglichkeit. Durch das wiederholte "in" wird deutlich, dass hier die dem "in" folgenden Aussagen verknüpft werden sollen; wobei wir uns bei der Gelegenheit gleich trefflich und fast schon philosophisch streiten könnten, ob man nicht besser "mit" als "in" Browsern testet, da wir den Browser doch eher als Werkzeug zur Visualisierung denn als Ort der Darstellung nutzen :-)

Dabei fällt mit ein, dass einer meiner Stilkundelehrer (Setzer im ursprünglichen Beruf) Klammern in Texten zutiefst verabscheut hat. "Wie liest Du eigentlich eine Klammer vor?" war das Argument und "Dafür haben wir Bindestriche" war der Alternativorschlag. Für die wörtliche Rede in Texten leuchtet mir das sogar ein. Und wenn ich einen Smiley benutze, sind Klammer auch blöd, da das Ende des Klammerzusatzes (gell :-)) nicht so schnell ersichtlich ist :-)

Und wo ich mich schon gerade erfolgreich vorm Protokollschreiben drücke und hier lieber Dünnsinn von mir gebe, fällt mit der Frage der Tochter ein, ob Smilies nicht besser wie Satzzeichen zu werten sein sollten, damit man sich den Punkt hinter dem Smiley ersparen könne, der (der Punkt) ja nun deutlich blöde aussehe und das Satzbild verschandele, und die Antwort des Vaters, dass Satzzeichen aber ohne Abstand zum Vorwort gesetzt werden:-) und das sähe ja nun auch blöd aus.

;-)

Swen Wacker

[Orlando]

Hallo wahsaga,

Teste während der Entwicklungsphase vorrangig in Gecko-basierten Browsern wie Firefox

und Opera

Solltest du damit wirklich ausdrücken haben wollen, Opera sei gecko-basiert,

… hätte Ashura vermutlich Klammern gesetzt.

Grüße
 Roland

[Auge]

Hallo

ich versuche gerade herauszubekommen warum meine CSS-Angaben zu zwei unterschiedlichen Ergebnissen führen.

So sieht es ungefähr aus
Auf der HTML Seite:

<div id="inhalt">

<span class="title1">Überschrift1</span>
<span class="title2">Überschrift2</span>
<table width="100%".......
</table>
</div>

  
Ähhhm, du weißt, warum es für [Überschriften](http://de.selfhtml.org/html/text/ueberschriften.htm) eigene Elemente gibt? Benutze diese, und sie werden automatisch untereinander dargestellt.  
  

> ~~~css

.title1 {  

>  ...  
>  position: relative;  
>  height: 20px;  
>  margin:0;  
>  top: 0px;  
>  left: 0px;  
>  width: 100%;}  
>   
> .title2 {  
>  ...  
>  position: relative;  
>  margin: 0;  
>  height: 20px;  
>  top: 0px;  
>  width: 100%;  
>  left: 0;}

Firefox macht aber hinter der ersten Überschrift keinen Zeilen- umbruch und zeigt die Überschriften in einer Zeile an.

Wenn ich nicht irre, positioniert der FF dein <span class="title2">...</span> relativ zum eigentlichen Anzeigeort, der bei einem Inlineelement nunmal in der gleichen Zeile ist. Die frage, die ich jetzt nicht auf Anhieb beantworten kann, ist, ob eine Auszeichnung mit position: relative; nicht automatisch aus einem Inline- ein Blockelement macht (der MSIE scheint das so zu sehen).

Wer macht denn jetzt etwas falsch? IE, Firefox oder etwa ich selbst :-)

Zuvörderst du. Eine Überschrift ist eine Überschrift, bleibt eine Überschrift. Also zeichne sie auch so aus, das/die entsprechende(n) Element(e) gibt es im HTML-Sprachschatz nicht umsonst.

Tschö, Auge

[Andreas]

Hi Leute,
vielen Dank für Eure Hinweise. Meiner Meinung nach machen die Überschriften-Tags aber nur Sinn wenn man mit den Standardeinseinstellungen arbeitet. Denn sobald ich z.B. eine andere Schriftart benutzen möchte, muß ich eh mehr Code schreiben. Und dann kann ich auch alles in <p> </p> setzen. Obder habe ich hierbei doch noch etwas übersehen?

In Zukunft die Seiten mit Firefox, Opera zu erstellen und dann an den IE anpassen ist eine gute Idee. Das werde ich mal ausprobieren.
Viele Grüße
Andreas

[Ingo Turski]

Hi,

Meiner Meinung nach machen die Überschriften-Tags aber nur Sinn wenn man mit den Standardeinseinstellungen arbeitet. Denn sobald ich z.B. eine andere Schriftart benutzen möchte, muß ich eh mehr Code schreiben. Und dann kann ich auch alles in <p> </p> setzen.

wozu überhaupt <p>? Es gibt doch die beiden universell einsetzbaren Tags <div> und <span>. Warum also die ganze Palette, die HTML zur logischen Textauszeichnung zur Verfügung stellt, überhaupt verwenden? Man erspart sich doch wunderbar das Nachdenken, welche Tags den Inhalt angemessen auszeichnen, oder?
Aber betrachte eine Seite mal ohne Style-Informationen und Du wirst die dann deutlichen Unterschiede bemerken.

freundliche Grüße
Ingo

[Gunnar Bittersmann]

Hello out there!

Meiner Meinung nach machen die Überschriften-Tags aber nur Sinn wenn man mit den Standardeinseinstellungen arbeitet. […] Obder habe ich hierbei doch noch etwas übersehen?

Ja. Zum einen, dass HTML nicht dafür gemacht ist, das _Aussehen_ einer Webseite zu beschreiben*, sondern die Struktur des Inhaltes.

Zum anderen, dass es Clients gibt, die gar keine Stylesheets interpretieren, die gar keine Darstellung kennen, sondern sich allein für die Struktur des Inhaltes interessieren und eine Überschrift (die in HTML als solche ausgezeichnet ist) für bedeutsamer halten als einen Textabsatz. Das sind die, die Alt trinken, keinen Prosecco. [Dialog]

See ya up the road,
Gunnar

* von den Auswucherungen zwischen den Anfängen des Webs und dem Erscheinen von CSS abgesehen, siehe [Auge]