Gefrusteter: border oder nicht border ...

SELF-Forum

border oder nicht border ...

Gefrusteter
– Informationen zu den Bewertungsregeln

Wenn ich nachfolgendes HTML im Browser betrachte (Opera und Firefox sind sich in der Darstellung einig), beginnt die Seite oben mit einem weißen Rand (laut Firefly 21px), darunter beginnt das Bild - 256px hoch - wie bestellt, übermalt mit den Überschriften. Unter dem Bild dann »Text«. Entkommentiere ich die border-Angabe, rutscht das Bild und der Text die 21px hoch, heißt, das Bild beginnt ganz oben auf der Seite (so wie es auch sein soll), die Überschriften bleiben, wo sie sind (ok, sie werden 1px nach unten rechts verschoben - der Rahmen nimmt ja jetzt auch Platz weg - aber abgesehen davon bleiben sie, wo sie sind) - nur leider habe ich dann den Rahmen, den ich nicht will.

Kann mir hier einer erklären, warum?

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.1//EN' 'http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd'>  
<style>  
body { margin: 0px; }  
.top {  
	background-image:url("bild.png"); height: 256px;  
/*	border: 1px dashed silver; */  
}  
</style>  
<div class="top"><h1 style="text-size:100px">Haupt&uuml;berschrift</h1><p style="text-size=50px">Unter&uuml;berschrift</p></div>  
<div class="middle">Text</div>

PS: Mich interessieren keine Work Arounds, ich habe bereits herausgefunden, dass ein h1 { margin: 0px; padding: 21px 0px; } das Problem löst, aber ich raff's net. Warum?

PPS: Ja, ich weiß, dass das ein Tagsoup und kein HTML ist, das ist eine extrem runter gestrippte Version der Ursprungsdatei, die das Problem gerade eben noch reproduziert.

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. border oder nicht border ...

    Daniel.S
    – Informationen zu den Bewertungsregeln

    Hallo,

    Kann mir hier einer erklären, warum?

    Collapsing Margins.

    PPS: Ja, ich weiß, dass das ein Tagsoup und kein HTML ist, das ist eine extrem runter gestrippte Version der Ursprungsdatei, die das Problem gerade eben noch reproduziert.

    Dennoch: Vergib bessere Klassennamen, vermeide style-Attribute, vermeide &uuml; (nutze UTF-8), CSS kennt kein =-Zeichen in Deklarationen.

    Gruß.

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. border oder nicht border ...

      Matthias Apsel Homepage des Autors
      – Informationen zu den Bewertungsregeln

      Om nah hoo pez nyeetz, Daniel.S!

      CSS kennt kein =-Zeichen in Deklarationen.

      Wie kommst du denn darauf bzw. wWie meinst du das?

      Matthias

      --
      1/z ist kein Blatt Papier.

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. border oder nicht border ...

        Daniel.S
        – Informationen zu den Bewertungsregeln

        Grüße dich, Matthias,

        CSS kennt kein =-Zeichen in Deklarationen.

        Wie kommst du denn darauf bzw. wWie meinst du das?

        Unglücklich formuliert.

        Ich meinte, dass in CSS der Doppelpunkt verwendet wird, um einer Eigenschaft einen Wert zuzuweisen:

        <p style="text-size=50px">Unter&uuml;berschrift</p>

        Ist also falsch (nicht nur weil es keine text-size-Eigenschaft gibt).

        Gruß, Daniel

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

      2. border oder nicht border ...

        Kai345 Homepage des Autors
        – Informationen zu den Bewertungsregeln

        [latex]Mae  govannen![/latex]

        CSS kennt kein =-Zeichen in Deklarationen.

        Wie kommst du denn darauf bzw. wWie meinst du das?

        Aus dem OP:

        <p style="text-size=50px">

        Stur lächeln und winken, Männer!
        Kai

        --
        It all began when I went on a tour, hoping to find some furniture
         Followed a sign saying "Beautiful Chest", led to a lady who showed me her best)
        SelfHTML-Forum-Stylesheet
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

      3. border oder nicht border ...

        Gefrusteter
        – Informationen zu den Bewertungsregeln

        CSS kennt kein =-Zeichen in Deklarationen.
        Wie kommst du denn darauf bzw. wWie meinst du das?

        Ich habe mich in der einen Deklaration vertippt und »text-size=50px« statt »text-size:50px« geschrieben.

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. border oder nicht border ...

          Gunnar Bittersmann Homepage des Autors
          – Informationen zu den Bewertungsregeln

          @@Gefrusteter:

          nuqneH

          Ich habe mich in der einen Deklaration vertippt und »text-size=50px« statt »text-size:50px« geschrieben.

          Was auch nicht viel besser ist, wie Daniel.S schon sagte.

          Und gut kann es auch deshalb nicht werden, weil Darstellungsangaben nicht inline in @style-Attributen getätigt werden sollten, sondern ins Stylesheet gehören.

          Qapla'

          --
          Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
          (Mark Twain)
          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

    2. border oder nicht border ...

      Gefrusteter
      – Informationen zu den Bewertungsregeln

      Collapsing Margins.

      Danke für diesen Link. Immerhin verstehe ich es jetzt ...

      ... und bin versucht, doch wieder zu den Tabellen zurück zu kehren.

      Auf jeden Fall gibt die Wiki-Seite keine simple Lösung her, wie man verhindert, dass die Außenabstände zusammen fallen. Ausgangsvoraussetzung ist: Ich weiß nicht, welches Tag der erste Kind-Knoten ist und was da wiederum drin ist - es muss also mit allem fertig werden, was da kommen kann.

      Dennoch: Vergib bessere Klassennamen,

      Die linke Spalte ist links, die mittlere Spalte in der Mitte und die rechte Spalte rechts. Welche Bezeichnungen anstelle von "left", "middle" und "right" würdest Du da vorziehen?

      vermeide style-Attribute,

      Der Teil kommt aus einer Datenbank - da habe ich im Augenblick keine zufriedenstellende Alternative.

      vermeide &uuml; (nutze UTF-8),

      Du wirst es nicht glauben, aber ich habe speziell für dieses Beispiel erst die üs durch &uuml;s ersetzt, weil sich Opera konsequent geweigert hatte, <meta http-equiv="Content-Type" value="text/html; charset=utf-8" /> zu beachten, wenn ich es als html-Datei im htdocs liegen habe - da hatte das html/head/body-Gedöns noch drin gestanden. Das php-Skript gibt den korrekten Header aus, dort benutze ich simples UTF-8 und es funzt.

      CSS kennt kein =-Zeichen in Deklarationen.

      Jupp, und text-size wie erwähnt auch nicht. Ist korrigiert war aber nicht Teil des Problems. ;)

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. border oder nicht border ...

        Der Martin
        – Informationen zu den Bewertungsregeln

        Hallo,

        Collapsing Margins.
        Danke für diesen Link. Immerhin verstehe ich es jetzt ...

        ich habe auch lange gebraucht, um das Problem "Collapsing Margins" zumindest zu erkennen, wenn es mal wieder zuschlägt. Und dann suche ich nach Möglichkeiten, es zu umgehen. Ich habe bis heute noch keine Situation gehabt, in der mir dieses "Feature" willkommen gewesen wäre.

        ... und bin versucht, doch wieder zu den Tabellen zurück zu kehren.

        Och nööö ...

        Auf jeden Fall gibt die Wiki-Seite keine simple Lösung her, wie man verhindert, dass die Außenabstände zusammen fallen.

        Im einfachsten Fall: Gib dem inneren (oder folgenden) Element einen Rahmen, der optisch nicht auffällt. Ein border verhindert, dass Abstände zusammenfallen.

        Dennoch: Vergib bessere Klassennamen,
        Die linke Spalte ist links, die mittlere Spalte in der Mitte und die rechte Spalte rechts. Welche Bezeichnungen anstelle von "left", "middle" und "right" würdest Du da vorziehen?

        Bezeichnungen, die sich nicht an der gewünschten Darstellung orientieren, denn die kann sich mit dem Geschmack des Seiteninhabers ändern. Demnächst willst du die einst rechte Spalte vielleicht als Banner unter dem Hauptinhalt haben, und dann wäre der Klassenname "right" ziemlich ungünstig.
        Wähle daher Klassennamen lieber nach dem gemeinsamen Merkmal, den die betreffenden Elemente charakterisiert - etwa "navi" oder "ads".

        vermeide &uuml; (nutze UTF-8),
        Du wirst es nicht glauben, aber ich habe speziell für dieses Beispiel erst die üs durch &uuml;s ersetzt, weil sich Opera konsequent geweigert hatte, <meta http-equiv="Content-Type" value="text/html; charset=utf-8" /> zu beachten

        Da verhält er sich auch vollkommen korrekt, falls der Server bereits im HTTP-Header eine entsprechende Angabe macht. Dann ist das gleichnamige meta-Element nämlich irrelevant.
        Außerdem: Wenn du UTF-8 als Codierung angibst, musst du das Dokument auch in dieser Codierung liefern. Es nützt nichts, wenn du auf eine Orangenkiste "Steinpilze" draufschreibst.

        Ciao,
         Martin

        --
        Ist die Katze gesund,
        freut sich der Hund.
        Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

      2. border oder nicht border ...

        Daniel.S
        – Informationen zu den Bewertungsregeln

        Hallo,

        Danke für diesen Link. Immerhin verstehe ich es jetzt ...

        ... und bin versucht, doch wieder zu den Tabellen zurück zu kehren.

        Tabellen schützen dich nicht vor zusammenfallenden Außenabständen.

        Auf jeden Fall gibt die Wiki-Seite keine simple Lösung her, wie man verhindert, dass die Außenabstände zusammen fallen. Ausgangsvoraussetzung ist: Ich weiß nicht, welches Tag der erste Kind-Knoten ist und was da wiederum drin ist - es muss also mit allem fertig werden, was da kommen kann.

        Die Wiki-Seite bietet dir mehrere Lösungen an.
        Beim Elternelement kannst du oben einen Innenabstand oder einen Rahmen (der auch transparent sein kann) hinzufügen oder es in einen block formatting context umwandeln (z.B. mit overflow: auto;).

        Wenn du zumindest weisst, das das erste Kind nicht gefloatet oder absolut positioniert wird, kannst du auch mit :first-child arbeiten und dem Element padding oder border verpassen.

        Dennoch: Vergib bessere Klassennamen,

        Die linke Spalte ist links, die mittlere Spalte in der Mitte und die rechte Spalte rechts. Welche Bezeichnungen anstelle von "left", "middle" und "right" würdest Du da vorziehen?

        Was, wenn die linke Spalte demnächst rechts oder oben stehen soll? Als Bezeichnung eignet sich die Funktion besser als die momentan gewünschte Darstellung: z.B. Navigation, Inhaltsbereich

        vermeide &uuml; (nutze UTF-8),

        Du wirst es nicht glauben, aber ich habe speziell für dieses Beispiel erst die üs durch &uuml;s ersetzt, weil sich Opera konsequent geweigert hatte, <meta http-equiv="Content-Type" value="text/html; charset=utf-8" /> zu beachten, wenn ich es als html-Datei im htdocs liegen habe - da hatte das html/head/body-Gedöns noch drin gestanden. Das php-Skript gibt den korrekten Header aus, dort benutze ich simples UTF-8 und es funzt.

        Die mögliche Fehlerquelle dabei kann ich hier nicht ergründen. Das entsprechende Meta-Element sollte aber als erstes Kindelement des head-Elements vorkommen (title-Element und mögliche Kommentare könnte ja bereits Sonderzeichen enthalten).

        Gruß

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. border oder nicht border ...

          weniger Gefrusteter
          – Informationen zu den Bewertungsregeln

          Hallo Daniel.S.

          Vielen Dank für Deine Hilfe bis hier her (auch an Martin).

          Tabellen schützen dich nicht vor zusammenfallenden Außenabständen.

          Opera und Firefox sind da anderer Ansicht, nachdem aber ...

          oder es in einen block formatting context umwandeln (z.B. mit overflow: auto;).

          ... geklappt hat, bin ich jetzt wieder bei div-containern. Ich hatte es irgendwie mit Clearance versucht, aber das klappt wohl nur, wenn ein floating-Element da drüber ist.

          Gibt's irgendwelche Fallen in Bezug auf overflow :auto;, oder ist das jetzt ein Allrounder, der immer funktioniert?

          Wenn du zumindest weisst, das das erste Kind nicht gefloatet oder absolut positioniert wird

          Ich weiß gar nichts. Die Layout Datei weiß nicht, was in den einzelnen Containern angezeigt werden wird.

          Was, wenn die linke Spalte demnächst rechts oder oben stehen soll?

          Dann wird z.B.

            
<?  
$LAYOUT="headed3column";  
$TITLE="title-container";  
$CONTENT['HEAD']=array("head-container");  
$CONTENT['MIDDLE']=array("content-container");  
$CONTENT['LEFT']=array("login","news","calender");  
$CONTENT['RIGHT']=array("navigation","headlines");  
?>

          in

            
<?  
$LAYOUT="headed3column";  
$TITLE="title-container";  
$CONTENT['HEAD']=array("head-container");  
$CONTENT['MIDDLE']=array("content-container");  
$CONTENT['LEFT']=array("login","calender");  
$CONTENT['RIGHT']=array("navigation","news","headlines");  
?>

          geändert.

          Als Bezeichnung eignet sich die Funktion besser als die momentan gewünschte Darstellung: z.B. Navigation, Inhaltsbereich

          Nehmen wir gleiches Beispiel: Ich habe die 7 nicht-title-Container in unbekannter Reihenfolge. Wie bekomme ich sie mit css so sortiert, dass login und calender links sind - beide z.B. 200px breit und zwar login oben und calender direkt darunter, ohne zu wissen, wie hoch der login-container ist usw.?

          Ich meine, wenn das geht, bevorzuge ich das - ich will sowieso den content immer gerne als erstes angeben, damit lynx und andere (Braille) nicht erst tonnenweise Nav-Links vorgelesen bekommen, bevor's zum Inhalt kommt, bisher habe ich aber immer nur gelesen und gehört, dass die Container in der richtigen[TM] Reihenfolge (also hier z.B. erst links, dann rechts, dann mitte, head vor allen dreien) stehen müssen, und unter der Voraussetzung kann ich dann auch gleich die content-container in die richtigen layout-container sortieren, wird ja eh alles on-the-fly generiert.

          Die mögliche Fehlerquelle [...] Meta-Element [...] erstes Kindelement des head-Elements [...]

          Diese Trivialitäten habe ich eigentlich alle eingehalten, Martin hat ja schon darauf aufmerksam gemacht, dass eventuell schon ein Header vom Server mitgeliefert wird, für mich ist das alles aber nicht Gegenstand der Forschung meine main.php beginnt nämlich so:

            
<?  
// If we don't overwrite this, we will send text/html in character set utf-8  
header("Content-Type: text/html; charset=utf-8");

          Und damit habe ich dieses Problem grundsätzlich nicht. Das war ja nur die eine kleine HTML-Datei, die ich hier postete, die das Problem hatte, deswegen dort &uuml;.

          Grüße, ein weniger als vorher Gefrusteter

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. border oder nicht border ...

            Daniel.S
            – Informationen zu den Bewertungsregeln

            Hallo,

            Gibt's irgendwelche Fallen in Bezug auf overflow :auto;, oder ist das jetzt ein Allrounder, der immer funktioniert?

            overflow ungleich visible erzeugt immer einen BFC, allerdings ist das nicht die Aufgabe von overflow, sondern nur ein Nebeneffekt.

            Mache dich mit dem Sinn der overflow-Eigenschaft vertraut um selbst mögliche unerwünschte Nebeneffekte herauszufinden.

            Wenn du zumindest weisst, das das erste Kind nicht gefloatet oder absolut positioniert wird

            Ich weiß gar nichts. Die Layout Datei weiß nicht, was in den einzelnen Containern angezeigt werden wird.

            Du bist nicht die Layout-Datei, sondern der Autor. Du musst wissen, ob dies der Fall ist oder nicht.

            Was, wenn die linke Spalte demnächst rechts oder oben stehen soll?

            Dann wird z.B.

            (...) in (...)

            geändert.

            Ich sehe dort nirgends die kritisierten Bezeichnungen.

            Wenn es sich um PHP-Code handelt solltest du aber <?php statt <? schreiben.

            Als Bezeichnung eignet sich die Funktion besser als die momentan gewünschte Darstellung: z.B. Navigation, Inhaltsbereich

            Nehmen wir gleiches Beispiel: Ich habe die 7 nicht-title-Container in unbekannter Reihenfolge. Wie bekomme ich sie mit css so sortiert, dass login und calender links sind - beide z.B. 200px breit und zwar login oben und calender direkt darunter, ohne zu wissen, wie hoch der login-container ist usw.?

            Ich weis nicht, was "nicht-title-Container" sein sollen. Ich verstehe auch nicht, was die Frage mit meiner Feststellung zu tun hat ;)

            Zwei Blockelemente im normalen Elementfluss werden immer genau untereinander dargestellt. Wenn du Positionierung nutzt um einen seitlichen Abschnitt zu erzeugen, dann nutze weniger Positionierung. Ein einziges Element zu Positionieren ist in vielen Fällen ausreichend.

            Ich meine, wenn das geht, bevorzuge ich das - ich will sowieso den content immer gerne als erstes angeben, damit lynx und andere (Braille) nicht erst tonnenweise Nav-Links vorgelesen bekommen, bevor's zum Inhalt kommt, bisher habe ich aber immer nur gelesen und gehört, dass die Container in der richtigen[TM] Reihenfolge (also hier z.B. erst links, dann rechts, dann mitte, head vor allen dreien) stehen müssen, und unter der Voraussetzung kann ich dann auch gleich die content-container in die richtigen layout-container sortieren, wird ja eh alles on-the-fly generiert.

            Bei Float-Layouts spielt die Reihenfolge eine Rolle, bei Positionierung nicht. Positionierung ist aber nochmal komplizierter als Floats.

            Diese Trivialitäten habe ich eigentlich alle eingehalten, Martin hat ja schon darauf aufmerksam gemacht, dass eventuell schon ein Header vom Server mitgeliefert wird, für mich ist das alles aber nicht Gegenstand der Forschung meine main.php beginnt nämlich so:

            Das ist irrelevant. Wenn die Datei von lokaler Stelle geöffnet wird, muss sich die (korrekte) Meta-Angabe an einer für den Dekoder zugänglichen Position befinden.

            Gruß, Daniel

            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

  2. border oder nicht border ...

    Matthias Apsel Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Om nah hoo pez nyeetz, Gefrusteter!

    <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.1//EN' 'http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd'>

    <style>
    body { margin: 0px; }
    .top {
    background-image:url("bild.png"); height: 256px;
    /* border: 1px dashed silver; */
    }
    </style>
    <div class="top"><h1 style="text-size:100px">Haupt&uuml;berschrift</h1><p style="text-size=50px">Unter&uuml;berschrift</p></div>
    <div class="middle">Text</div>

      
Es gibt auch noch das HTML-Element.  
  
Matthias

-- 
1/z ist kein Blatt Papier.  
![](http://www.billiger-im-urlaub.de/kreis_sw.gif)
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln