nicht angemeldet
div mit 100% ist zu hoch / warum Tags selbst schließen?
0 0 
Gunnar Bittersmann
0
1 
MudGuard
div mit 100% ist zu hoch / warum Tags selbst schließen?
Hi,
ich versuche gerade, meine mit Tabellen erstellte Page (sunxxpress.com) etwas dem heutigen Standard anzupassen und eine valide div-formatierte Page zu erstellen (sunxxpress.com/test).
Nun habe ich die vier Haupt-divs übereinander angelegt und davon dreien eine feste Höhe gegeben und dem content-div die Höhe 100%, so dass der Footer stehts am unteren Rand ist. Anschauen könnt ihr euch das ganze unter www.sunnxpress.com/test/index.php - die CSS unter www.sunnxpress.com/test/div.css.
Leider wird nun aber der Footer unterhalb des Sichtbereiches angezeigt und man muss sogar noch runterscrollen, um ihn zu sehen - Wie kann das sein? Mit Tabellen hätte ich das Problem jetzt nicht ;)
Und noch ne Frage: Welchen Sinn macht es, Tags wie img oder br mit /> selbst zu schließen, um das Dokument valide zu bekommen? Für mich ist das nur unnötiger Traffic...
Würde mich außerdem um Rückmeldung freuen, ob die ganze Umstellung überhaupt Sinn macht oder ob ich nicht gleich bei Tabellen bleiben kann...
Danke!
Oli
-
Hallo,
Leider wird nun aber der Footer unterhalb des Sichtbereiches angezeigt und man muss sogar noch runterscrollen, um ihn zu sehen - Wie kann das sein?
Beachte das Box-Modell: Platzdebarf = Rahmenbreite + Margin + Padding + Höhe
Und noch ne Frage: Welchen Sinn macht es, Tags wie img oder br mit /> selbst zu schließen, um das Dokument valide zu bekommen?
Nicht valide, sondern wohlgeformt. Ein XML-Parser weiß nichts über Sonderregeln wie "img ist inhaltsleer", daher erwartet er, dass jedes Element wieder geschlossen wird. Ob dies nun so:
<img></img>
oder so (Kurzschreibweise in XML):
<img />
passiert, ist dabei egal.Ob du alles richtig gemacht hast, kannst du testen, indem du dein Dokument einfach mal als "application/xhtml+xml" (oder alternativ text/xml) auslieferst.
mfg. Daniel
-
@@Daniel Richter:
Ob dies nun so:
<img></img>
oder so (Kurzschreibweise in XML):
<img />
passiert, ist dabei egal.Nö. Die erste Schreibweise könnten Tagsoup-Parser ber Verarbeitung als 'text/html' übelnehmen. Sie ist nicht HTML-kompatibel und sollte nicht verwendet werden. [XHTML1 §C.2]
Live long and prosper,
Gunnar--
Das einzige Mittel, den Irrtum zu vermeiden, ist die Unwissenheit. (Jean-Jacques Rousseau)-
Hallo,
@@Daniel Richter:
Wieso 2x @? ;-)
Ob dies nun so:
<img></img>
oder so (Kurzschreibweise in XML):
<img />
passiert, ist dabei egal.Nö. Die erste Schreibweise könnten Tagsoup-Parser ber Verarbeitung als 'text/html' übelnehmen.
Ja, stimmt. Ich hatte mich in diesem Fall auf den XML-Parser bezogen. Dass in XHTML bestimmte Abwärtskompatibilitätsregeln notwendig sind, steht (leider) außer Frage (jedenfalls solange man den Inhalt nicht konsequent als application/xhtml+xml ausliefert).
Sie ist nicht HTML-kompatibel und sollte nicht verwendet werden.
Genaugenommen ist keine von beiden HTML-Kompatibel; letztere funktioniert aber aufgrund der Fehlertoleranz der verbreiteten TagSoup-Parser meist besser.
mfg. Daniel
-
@@Daniel Richter:
@@Daniel Richter:
Wieso 2x @? ;-)
Live long and prosper,
Gunnar--
Das einzige Mittel, den Irrtum zu vermeiden, ist die Unwissenheit. (Jean-Jacques Rousseau)-
Wieso 2x @? ;-)
Deshalb.das ist nur eine ausrede für seine zittrigen finger :p
-
@@suit:
das ist nur eine ausrede für seine zittrigen finger :p
r423wuiofauv drth90w4u90gvaw3rj r3489rhn 38q4rth8923gf7 823 y rq8723yer23
Live long and prosper,
Gunnar--
Das einzige Mittel, den Irrtum zu vermeiden, ist die Unwissenheit. (Jean-Jacques Rousseau)-
r423wuiofauv drth90w4u90gvaw3rj r3489rhn 38q4rth8923gf7 823 y rq8723yer23
klär mich auf :) oder war das wieder eine deiner schüttelfrost-attacken? :p
-
-
-
-
-
-
-
Hi,
Nun habe ich die vier Haupt-divs übereinander angelegt und davon dreien eine feste Höhe gegeben und dem content-div die Höhe 100%, so dass der Footer stehts am unteren Rand ist. Anschauen könnt ihr euch das ganze unter www.sunnxpress.com/test/index.php - die CSS unter www.sunnxpress.com/test/div.css.
Leider wird nun aber der Footer unterhalb des Sichtbereiches angezeigt
Du hast oben ein paar Elemente. Darunter wird ein Element dargestellt, daß so hoch sein soll wie der Viewport. Daß dessen unteres Ende unterhalb des sichtbaren Bereichs liegt, ist dann doch wohl logisch.
Und noch ne Frage: Welchen Sinn macht es, Tags wie img oder br mit /> selbst zu schließen, um das Dokument valide zu bekommen? Für mich ist das nur unnötiger Traffic...
Ah ja. Bei den / machst Du Dir wegen des je einen Byte Gedanken um den Traffik?
Das große Bild (SunExpress) hat 36255 Bytes. Das gleiche Bild, als PNG (indexed, 64 Farben) abgespeichert, hat 8567 Bytes. Allein dafür könntest Du schon 27688 mal den / setzen.
Wieviele / könntest Du bei gleichem Traffic setzen, wenn Du z.B. bei der oberen Navigation die weißen Striche oben/unten als Border, den Farbverlauf als 1px breites Hintergrundbild und den Text des Links einfach nur als Text auszeichnen würdest?
Selbst wenn Du die Bilder so behalten würdest: statt einmal
a img {border:none;}
schreibst Du in jedes der verlinkten Bilder
border="0"
Nochmal zum Vergleich:
a img {border:none;}
border="0" border="0"
bereits ab dem zweiten Mal hättest Du Traffic gespart.Aber Du sparst lieber einzelne Bytes, indem Du den / bei <img /> wegläßt?
Warum verwendest Du dann überhaupt XHTML statt HTML?cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
O o ostern ...
Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
-
Hi,
Nun habe ich die vier Haupt-divs übereinander angelegt und davon dreien eine feste Höhe gegeben und dem content-div die Höhe 100%, so dass der Footer stehts am unteren Rand ist. Anschauen könnt ihr euch das ganze unter www.sunnxpress.com/test/index.php - die CSS unter www.sunnxpress.com/test/div.css.
Leider wird nun aber der Footer unterhalb des Sichtbereiches angezeigt
Du hast oben ein paar Elemente. Darunter wird ein Element dargestellt, daß so hoch sein soll wie der Viewport. Daß dessen unteres Ende unterhalb des sichtbaren Bereichs liegt, ist dann doch wohl logisch.
Hi, danke für den Hinweis... Wie kann ich denn nun umsetzen, was ich möchte? Also, dass div.content genau so groß ist, dass alle 4 divs zusammen 100% ausfüllen? Gibt es sowas in der Art wie height:100%-500px, also 100% minus 500 Pixel?
Und noch ne Frage: Welchen Sinn macht es, Tags wie img oder br mit /> selbst zu schließen, um das Dokument valide zu bekommen? Für mich ist das nur unnötiger Traffic...
Ah ja. Bei den / machst Du Dir wegen des je einen Byte Gedanken um den Traffik?
Das große Bild (SunExpress) hat 36255 Bytes. Das gleiche Bild, als PNG (indexed, 64 Farben) abgespeichert, hat 8567 Bytes. Allein dafür könntest Du schon 27688 mal den / setzen.
Wieviele / könntest Du bei gleichem Traffic setzen, wenn Du z.B. bei der oberen Navigation die weißen Striche oben/unten als Border, den Farbverlauf als 1px breites Hintergrundbild und den Text des Links einfach nur als Text auszeichnen würdest?
Selbst wenn Du die Bilder so behalten würdest: statt einmal
a img {border:none;}
schreibst Du in jedes der verlinkten Bilder
border="0"
Nochmal zum Vergleich:
a img {border:none;}
border="0" border="0"
bereits ab dem zweiten Mal hättest Du Traffic gespart.Auch hier danke für die Tipps. Wie gesagt, ich bin noch sehr neu im CSS-basierten Webdesign und versuche natürlich, so viel Code wie möglich zu sparen und bin somit für alle Tipps dankbar. Das mit dem Bild wird eh noch geändert, wollte nur erstmal irgendwas im Content stehen haben. Dennoch sind diese 2 Byte doch unnötig, wenn es doch auch ohne das Schließen klappt? Ich verstehe eure Argumente zwar, aber bis auf eine minimale Minderheit sollte das doch wirklich niemandem auffallen, oder?
Aber Du sparst lieber einzelne Bytes, indem Du den / bei <img /> wegläßt?
Warum verwendest Du dann überhaupt XHTML statt HTML?Gute Frage... Ich höre von allen Seiten immer nur, ich solle meine Webseite XHTML-valid machen und weiß eigentlich selbst nicht warum ;-) - Hat es irgendwelche besonderen Vorteile?
cu,
AndreasSorry für die dummen Frage und vielen Dank,
Oli-
Hi,
Wie gesagt, ich bin noch sehr neu im CSS-basierten Webdesign
Dann gewoehne dir bitte sofort ab, "aber es funzt doch" als ein in irgendeiner Hinsicht ein brauchbares Argument zu betrachten.
und versuche natürlich, so viel Code wie möglich zu sparen und bin somit für alle Tipps dankbar.
Man kann sich auch kaputt sparen.
Dennoch sind diese 2 Byte doch unnötig, wenn es doch auch ohne das Schließen klappt?
Pfui, aus - bleiben lassen.
Danke.Ich verstehe eure Argumente zwar, aber bis auf eine minimale Minderheit sollte das doch wirklich niemandem auffallen, oder?
Halte dich beim Erstellen von HTML- und CSS-Code an die Regeln, die die jeweilige Spezifikation vorgibt, Punkt Aus.
Ueberpruefe deinen Code diesbezueglich mit den dafuer vorgesehenen Validatoren.
http://validator.w3.org/
http://jigsaw.w3.org/css-validator/MfG ChrisB
--
„This is the author's opinion, not necessarily that of Starbucks.“ -
@@Oli:
Aber Du sparst lieber einzelne Bytes, indem Du den / bei <img /> wegläßt?
Das Leerzeichen vor "/>" kann man wirklich sparen.
Warum verwendest Du dann überhaupt XHTML statt HTML?
Gute Frage... Ich höre von allen Seiten immer nur, ich solle meine Webseite XHTML-valid machen und weiß eigentlich selbst nicht warum ;-) - Hat es irgendwelche besonderen Vorteile?XHTML statt HTML? Ja, das hat Vorteile. Strengere Regeln ⇒ weniger Möglichkeiten, Fehler zu machen.
Valider Quelltext? Ja, das hat Vorteile. Andernfalls raten Browser, was der Webseitenautor gemeint haben könnte. Ergebnis ungewiss.
Live long and prosper,
Gunnar--
Das einzige Mittel, den Irrtum zu vermeiden, ist die Unwissenheit. (Jean-Jacques Rousseau)
-
-
Hallo,
hat also echt niemand eine Lösung für mein div-Problem?Wenn ich ein div mit 100px Höhe habe, wie bekomme ich dann ein zweites div darunter, dass das Fenster genau ausfüllt, also mit 100%-100px? Ich habe versucht, margin-top:-100px zu setzen und dann die ersten 100px mit einem Spacer-div freizuhalten, doch das geht auch nur im Firefox.
Sollte dies nicht gehen, ist das für mich ein sehr elementarer Nachteil gegenüber Tabellen...
Danke!
-