nicht angemeldet
Layer bzw. divs und padding...
0 0 0 0 0 0 ...danke!
Layer bzw. divs und padding...
Hallo,
O.K., jetzt muss ich mich wohl doch auch mal mit Layern beschäftigen...
Gefällt mir auch ganz gut soweit. Ein Problem habe ich aber nun: wenn ich für ein <div> z.B. padding: 20px angebe, dann scheinen einige Browser das an die width/height-Angabe der divs dazu zu zählen, andere nicht. So entstehen dann teilweise Lücken zwischen den divs.
Kennt jemand dieses Problem? Gibt's da eine Lösung?
Hier mal ein Beispiel:
-->http://web129.can03.de/layertest/
Mit Mozilla sieht's so aus, wie ichs haben will, mit Opera fast (bis auf den horizontalen Scrollbalken) und im IE siehts ziemlich daneben aus (Lücken!).
Schon mal danke im Voraus und viele Grüße,
Alex
-
hi
Gefällt mir auch ganz gut soweit. Ein Problem habe ich aber nun: wenn ich für ein <div> z.B. padding: 20px angebe, dann scheinen einige Browser das an die width/height-Angabe der divs dazu zu zählen, andere nicht. So entstehen dann teilweise Lücken zwischen den divs.
Das isn Bug im MSIE. Schmeinß die <?xml..> oben raus, dann geht der MSIE6 in den Standards mode und schon passt es auch da.
Grüße aus Bleckede
Kai
-
Hallo,
O.K., jetzt muss ich mich wohl doch auch mal mit Layern beschäftigen...
Gefällt mir auch ganz gut soweit. Ein Problem habe ich aber nun: wenn ich für ein <div> z.B. padding: 20px angebe, dann scheinen einige Browser das an die width/height-Angabe der divs dazu zu zählen, andere nicht. So entstehen dann teilweise Lücken zwischen den divs.
Kennt jemand dieses Problem? Gibt's da eine Lösung?
Hier mal ein Beispiel:
-->http://web129.can03.de/layertest/
Mit Mozilla sieht's so aus, wie ichs haben will, mit Opera fast (bis auf den horizontalen Scrollbalken) und im IE siehts ziemlich daneben aus (Lücken!).Schon mal danke im Voraus und viele Grüße,
AlexIch bin zwar auch noob aber ich hab da Abstandhalter.gif s zwischen..... du musst in ps oder wo du die grafiken machst ne datei 1px x 1px erstellen und in der Farbe machen, wie die lücken sein solln und in dw oder womit du deine seiten machst fügst du in den leeren Tabellenabschnitt den Abstandhalter.gif ein und machst die grösse so, wie du willst du kannst ihjn so gross machen wie du willst z.B. 800x600 oder so aber deine lücken werden net soo gross sein ;) aber kann auch sein, dass ich jetzt wieder mal nur scheisse geschrieben hab.....
MfG
Gettheflohhh
-
hi
Ich bin zwar auch noob aber ich hab da Abstandhalter.gif s zwischen..... du musst in ps oder wo du die grafiken machst ne datei 1px x 1px erstellen und in der Farbe machen, wie die lücken sein solln und in dw oder womit du deine seiten machst fügst du in den leeren Tabellenabschnitt den Abstandhalter.gif ein und machst die grösse so, wie du willst du kannst ihjn so gross machen wie du willst z.B. 800x600 oder so aber deine lücken werden net soo gross sein ;) aber kann auch sein, dass ich jetzt wieder mal nur scheisse geschrieben hab.....
hä?!? Ob das Scheiße ist läßt sich nur schwer beurteilen, aber ese kommen da leer-GIFs vor, also isses böse. ;)
Grüße aus Bleckede
Kai
-
hi
Ich bin zwar auch noob aber ich hab da Abstandhalter.gif s zwischen..... du musst in ps oder wo du die grafiken machst ne datei 1px x 1px erstellen und in der Farbe machen, wie die lücken sein solln und in dw oder womit du deine seiten machst fügst du in den leeren Tabellenabschnitt den Abstandhalter.gif ein und machst die grösse so, wie du willst du kannst ihjn so gross machen wie du willst z.B. 800x600 oder so aber deine lücken werden net soo gross sein ;) aber kann auch sein, dass ich jetzt wieder mal nur scheisse geschrieben hab.....
hä?!? Ob das Scheiße ist läßt sich nur schwer beurteilen, aber ese kommen da leer-GIFs vor, also isses böse. ;)
Grüße aus Bleckede
Kai
Sry Kai ich bin np aber kannste mir mal helfen??? guck eine nachricht unter Alex CSS!!! bitte meine ICQ : #164451573
-
Aloha!
Sry Kai ich bin np aber kannste mir mal helfen??? guck eine nachricht unter Alex CSS!!! bitte meine ICQ : #164451573
Hey, du bist ultraneu hier, beginnst aber schon Verhaltensweisen zu zeigen, die hier äußerst unerwünscht sind.
Lies bitte die </faq/>! Tu es jetzt, begieb dich direkt dorthin, ziehe nicht über Los!, ziehe keine 4000 Flames ein. :)
Insbesondere der erste Abschnitt "Allgemeines und Verhalten im Forum" ist empfehlenswert, und dort ganz speziell die Punkt 5 bis 9. Das ist wirklich nicht viel zu lesen.
Was du falsch gemacht hast?
1. Fullquote! Wenn du antwortest, steht der Text der Nachricht, auf die du antwortest, komplett im Textfeld. Lösche den Teil der Nachricht, auf den du dich nicht beziehst. Schreibe zwischen die Absätze der Nachricht, auf die du direkt eingehst, und nicht als Block untendrunter.
2. Ungeduldigkeit: Du hast deine Frage um 12:08 Uhr gestellt. Um 12:25 Uhr wirst du schon ungeduldig und weist in einem anderen Thread auf deine Probleme hin. Das ist mega-out und ganz böse. Kommt gleich nach "Frage nach 20 Minuten erneut posten".
3. Hilfeanforderung per ICQ/EMail/IRC/Telefon: Das hier ist ein Forum, alle Nachrichten kommen ins Archiv. Damit die Nachwelt auch noch was davon hat, und insbesondere damit die Teilnehmer des Forums verstehen, wie weit der Fall gediehen ist, wird eine _hier_ gestellte Frage auch nur _hier_ beantwortet.
Neue Teilnehmer sind uns immer willkommen. Nur tappen einzelne neue Teilnehmer gerne ganz am Anfang in alle Fettnäpfchen, die es gibt, und ziehen sich damit den Unmut der anderen zu. Das muß ja nicht sein.
- Sven Rautenberg
-
-
-
-
Hallo auch,
wenn du das padding (dann aber margin) dem p, der h1 ... zuweist, hast du dieses Problem nicht. Dann bleiben die Div's so, wie sie sollen!
LG, Sabine
Gefällt mir auch ganz gut soweit. Ein Problem habe ich aber nun: wenn ich für ein <div> z.B. padding: 20px angebe, dann scheinen einige Browser das an die width/height-Angabe der divs dazu zu zählen, andere nicht. So entstehen dann teilweise Lücken zwischen den divs.
Schon mal danke im Voraus und viele Grüße,
Alex -
Aloha!
Kennt jemand dieses Problem? Gibt's da eine Lösung?
Der IE bezieht die Angabe "width" auf die Breite _inklusive_ Padding, alle anderen Browser beziehen sie auf den Inhalt des divs _exklusive_ padding. Der IE rechnet falsch! Und erst der IE 6 im Standard-Modus rechnet richtig.
Mein Workaround, wenn ich DIVs mit padding brauche, die gleichbreit aussehen sollen: DIVs verschachteln!
<div style="width:200px">
<div style="padding:20px">
INhalt
</div>
</div>Der äußere DIV mit Padding 0px hat in allen Browsern die gleiche Breite von 200 px. Der innere DIV hat die Breite 100% (er nutzt also die Breite von 200px voll aus) und ein Padding von 20px. Schon ist die DIV-Kombo überall gleich breit.
- Sven Rautenberg
-
Hallo Alex,
O.K., jetzt muss ich mich wohl doch auch mal mit Layern beschäftigen...
"Layers" ist ein "boeser" Begriff.
Er erinnert an das <LAYER>-Element, das Netscape erfunden hat, das aber in keinem W3C-Standard vorkommt.
Was Du meinst, wuerde ich eher "DIV-Layout" nennen.Gefällt mir auch ganz gut soweit. Ein Problem habe ich aber nun: wenn ich für ein <div> z.B. padding: 20px angebe, dann scheinen einige Browser das an die width/height-Angabe der divs dazu zu zählen, andere nicht. So entstehen dann teilweise Lücken zwischen den divs.
Naja, der MS IE <6.0 hatte ein kaputtes "Box Model". Auch der MS IE 6.0 wendet dieses an, wenn man gewisse DOCTYPE-Angaben macht, oder wenn die Datei mit der Prolog <xml ...> beginnt.
Siehe:
http://msdn.microsoft.com/library/en-us/dnie60/html/cssenhancements.asp?frame=falseKennt jemand dieses Problem? Gibt's da eine Lösung?
Das wichtigste: Vergiss die Idee, dass Deine Seite mit allen Browsern _gleich_ aussehen soll.
Achte vielmehr darauf, dass die Seite mit allen Browsern _benutzbar_ ist, d.h. dass Du mit CSS die Seite nicht zerstoerst fuer kaputte Browser.
Vielleicht helfen auch noch ein paar margin:0 im CSS.
Diese Seite ist _ohne_ CSS eine riesige Katastrophe.
N.B.: CSS funktioniert grundsaetzlich fuer alle Elemente, nicht nur fuer <DIV> und <SPAN>.
Es ist sinnlos, alles nur noch in <DIV>-Elemente einzupacken, bloss weil kaputte Browser CSS nur in Verbindung mit <DIV> koennen.Auch wenn Du mit CSS gewisse Vorschlaege fuer's Layout machst, musst Du trotzdem immer noch darauf achten, dass die Seite auch in Browsern ohne CSS-Unterstuetzung (inklusive Netscape 4.x bei ausgeschaltetem JavaScript!) benutzbar ist.
Das .:Layertest:. ist die Hauptueberschrift; sie gehoert in ein H1-Element an den Anfang des Dokuments, und nicht bloss in ein "nichtssagendes" DIV am Schluss.
Das "o Home" ist wahrscheinlich eine Ueberschrift zweiten Grades, also ein H2-Element.
Eine sinnvolle Reihenfolge waere also z.B.:<h1>.:Layertest:.</h1>
<h2>o Home</h2><div id="main">
<p>Hier steht irgendein Text, damit die Seite gefüllt ist.</p>
<p>Das Land erstreckt sich in Nord-Süd-Ausrichtung rund 3700 km.</p>
</div>Die Navigationsleiste koenntest Du auch viel einfacher machen.
Statt wie bisher<div id="nav"><a href="..."><img src="dreieck.gif" alt="" width="9" height="9" />Home</a><br />
<a href="#"><img src="dreieck.gif" alt="" width="9" height="9" />Info</a><br />
<!-- u.s.w. -->
</div>koenntest Du z.B. schreiben:
<ul id="nav">
<li><a href="...">Home</a></li>
<li><a href="...">Info</a></li>
<!-- u.s.w. -->
</ul>Sowas waere auch fuer alte/einfache Browser eine sehr gut benutzbare Linkliste.
Um die roten Dreiecke vor jedem Listenpunkt zu haben, nimmst Du lieber CSS, als jedesmal ein <IMG>-Tag vor den Text zu stellen, siehe
http://selfhtml.teamone.de/css/eigenschaften/listen.htmUm die verschiedenen Abstaende in Listen richtig hinzukriegen, empfehle ich Dir, die folgende Seite zu lesen:
http://www.subotnik.net/style/list-box-test.htmlHTH, mfg
Thomas-
Naja, der MS IE <6.0 hatte ein kaputtes "Box Model". Auch der MS IE 6.0 wendet dieses an, wenn man gewisse DOCTYPE-Angaben macht, oder wenn die Datei mit der Prolog <xml ...> beginnt.
Siehe:
http://msdn.microsoft.com/library/en-us/dnie60/html/cssenhancements.asp?frame=false[..und weitere wertvolle Tipps]
Dem bleibt eigentlich nur noch der hier als Anmerkung zuzufügen: http://www.hut.fi/~hsivonen/doctype.html.
Gruß,
soenk.e -
Hallo & und danke für Deine Tipps!
Wegen der Reihenfolge:
Das .:Layertest:. ist die Hauptueberschrift; sie gehoert in ein H1-Element an den Anfang des Dokuments, und nicht bloss in ein "nichtssagendes" DIV am Schluss.
Ich möchte nicht, dass das <div> mit dem Hauptinhalt die anderen <div>s beim scrollen überdeckt. Kann man das vielleicht noch irgendwie anders festlegen?
Grüße, Alex
-
Aloha!
Ich möchte nicht, dass das <div> mit dem Hauptinhalt die anderen <div>s beim scrollen überdeckt. Kann man das vielleicht noch irgendwie anders festlegen?
"z-index" setzen. Dann kannst du die DIVs in der Reihenfolge im Dokument erscheinen lassen, wie sie ohne CSS sinnvoll ist, und trotzdem die Ebenensortierung mit CSS beeinflussen. Default ist, daß später definierte Layer obenauf kommen.
- Sven Rautenberg
-
Hallo,
"z-index" setzen. ...
...hm, klingt gut, sagt mir aber leider nichts. Was bedeutet das konkret?
Grüße, Alex
-
Aloha.
"z-index" setzen. ...
...hm, klingt gut, sagt mir aber leider nichts. Was bedeutet das konkret?
http://selfhtml.teamone.de/css/eigenschaften/positionierung.htm#z_index
Lesen - verstehen - anwenden.
Steht übrigens auf der Seite, die du kennen solltest: Positionierung mit CSS. ;)
- Sven Rautenberg
-
http://selfhtml.teamone.de/css/eigenschaften/positionierung.htm#z_index
Lesen - verstehen - anwenden.O.K., danke! Ich werd's versuchen...
Grüße, Alex
-
-
-
-
-
hi
N.B.: CSS funktioniert grundsaetzlich fuer alle Elemente, nicht nur fuer <DIV> und <SPAN>.
Es ist sinnlos, alles nur noch in <DIV>-Elemente einzupacken, bloss weil kaputte Browser CSS nur in Verbindung mit <DIV> koennen.diese Kaputen Browser scheinen eh nur in mancher Leute träumen zu existieren, selbst netscape 4 (der ja nun den Inbegriff des kaputten CSS darstellt) bringt das auch an anderen Elementen auf die Reihe. <div> ist also wirklich nur dazu da, wenn man andere Elemente in irgendeiner Form gruppieren will!
Grüße aus Bleckede
Kai
-
-
Hallo,
ich danke Euch für Eure Antworten. Haben mich ein ganzes Stückchen weitergebracht!
Grüße, Alex