Grundgerüst mit <div>
0 
molily
0 0 0 molily
0 0 Grundgerüste CSS
Grundgerüst mit <div>
Hallo
Ich habe bisher das Grundgerüst meiner websites eigentlich immer mit Tabellen dargestellt. Eigentlich wäre ja mit <div>'s sauberer, deshalb übe ich derzeit damit. Nun einige Fragen:
-
Ist es nicht möglich, einem <div> einen bestimmten Bereich zuzusprechen und dem nächsten <div> dann mitgeben, dass es "100%" des übrigen Bereiches nutzen soll?
-
Sehe ich das richtig, dass Firefox die 100% eines <div>'s vom Innenrand bestimmt? Ist also ein <div> mit einem 1-px-Rahmen, welches mit "width:100%;" aufgeblasen wird, absolut gesehen 100%+2px?
-
Wenn ich einen Banner mit der Höhe "20%" habe und nun den Text darunter darstellen möchte, dann gebe ich diesem Platzhalter ja die Angaben "top:20%;left:20%;" mit (das menü ist auch 20% breit). Aber Menü und "Textbox" sind nicht genau gleich hoch. Was ist das Problem?`
Vielleicht kann mir auch jemand ein Grundgerüst mit relativen Grössen zeigen, welches sauber funktioniert, damit ich mich da mal reinlesen kann...?
Hier noch mein Beispiel:
Mein Grundgerüst
-
- Ist es nicht möglich, einem <div> einen bestimmten Bereich zuzusprechen und dem nächsten <div> dann mitgeben, dass es "100%" des übrigen Bereiches nutzen soll?
Doch, kommt aber darauf an. Meinst du vertikal oder horizontal?
Bei absoluter Positionierung kannst du natürlich mit Prozentwerten arbeiten, z.B. dem einen Element 80% Höhe geben und den anderen 20%.
- Sehe ich das richtig, dass Firefox die 100% eines <div>'s vom Innenrand bestimmt? Ist also ein <div> mit einem 1-px-Rahmen, welches mit "width:100%;" aufgeblasen wird, absolut gesehen 100%+2px?
Ja, das ist CSS-Standard seit 1996. Nur der IE macht das falsch, wenn er im Quirks-Rendermodus arbeitet. Du solltest ihn mit einem vollständigen DOCTYPE (Dokumenttyp-Deklaration) in den standardkonformen Rendermodus bringen.
width:100% musst du aber i.d.R. nicht vergeben, weil ein Blockelement automatisch den gesamten zur Verfügung stehenden Platz einnimmt.
- Wenn ich einen Banner mit der Höhe "20%" habe und nun den Text darunter darstellen möchte, dann gebe ich diesem Platzhalter ja die Angaben "top:20%;left:20%;" mit (das menü ist auch 20% breit). Aber Menü und "Textbox" sind nicht genau gleich hoch. Was ist das Problem?`
Natürlich sind Menü und Textbox nicht gleich hoch - ein Element ist erstmal so hoch wie sein Inhalt, außer du gibst ihm eine feste Höhe.
Wenn Menü und Textbox den restlichen Platz auf dem Bildschirm einnehmen sollen, dann gebe ihnen height: 80%; und am besten overflow:auto, damit Scrollbars angezeigt werden, wenn der Inhalt nicht auf den Bildschirm passt.
Mathias
-
erstmal vielen Dank für die Tipps und die Hilfeseiten. Habe das ganze mal studiert und gleich versucht umzusetzen. 2 Fragen stellen sich mir nun aber wieder bei meinem aktuellen Ergebnis:
Test-Seite-
Im IE wird das blaue Fenster in der Breite auf die maximal mögliche Grösse aufgeblasen, im Firefox wird die Mindest-Breite angenommen. Muss das so sein?
-
Wenn ich im Firefox die Position vom blauen Fenster angebe, muss ich die Grösse vom grünen Fenster mit dem gesetzten Innenabstand (padding) addieren, damit die Position stimmt. Im IE hingegen ist die Position = der Grösse vom grünen Fenster. Habe ich immernoch einen falschen Doctype?
-
Mahlzeit Kammerjäger,
Sorry! This document can not be checked.
Was genau hast Du denn da angegeben?
MfG,
EKKi--
sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|-
grosses Fragezeichen...
Woran kann das liegen, am Doctype?
-
-
- Im IE wird das blaue Fenster in der Breite auf die maximal mögliche Grösse aufgeblasen, im Firefox wird die Mindest-Breite angenommen.
Das Element hat position:absolute, also ist es nur so groß, wie der Inhalt es erfordert. Du könntest hier right:0; sagen, dann wird es auf die ganze Fläche ausgedehnt.
Wenn du ein Element neben einem anderen positionieren willst, verwende besser float (CSS-Spaltenlayout).
- Wenn ich im Firefox die Position vom blauen Fenster angebe, muss ich die Grösse vom grünen Fenster mit dem gesetzten Innenabstand (padding) addieren, damit die Position stimmt. Im IE hingegen ist die Position = der Grösse vom grünen Fenster. Habe ich immernoch einen falschen Doctype?
Nein, aber welchen IE verwendest du?
IE 7 zeigt bei mir den Abstand identisch zu Firefox an.Soll das ein Tabellenlayout werden im blauen Element?
Mathias
-
-
Hi!
Nicht perfekt aber zum Lernen und Verstehen eigentlich sehr gut: Die Templates von intensivstation.ch.
--
"Die Diebesgilde beklagte sich darueber, dass Mumm in aller Oeffentlichkeit behauptet hatte, hinter den meisten Diebstaehlen steckten Diebe."
- T. Pratchett -
moinmoin Kammjäger,
neben den bereits verlinkten Templates der *Intensivstation* finde ich persönlich auch Web-ToolBox immer wieder hilfreich, zumal man dort auch
Web-ToolBox CSS-Grundgerüst(e) findet, die gut dokumentiert sind.Einfach mal reinkucken. Ich finde die Seite insgesamt sehr hilfreich.
Gruß Krischi
-
aargh... kan man des bitte nach CSS schieben... wie sieht das denn aus...
mea culpa
Gruß Krischi
-