nicht angemeldet
margin: 0px auto; funktioniert nicht
Der MartinHallo,
hab ein kleines Problem. Es geht um den blauen Hintergrund der folgenden Seite:
Der blaue Hintergrund soll bis an den oberen Rand des Vieports reichen. Hier das entsprechende CSS:
body {
width: 960px;
height: 2000px;
margin: 0px auto;
background: blue;
}
#background {
margin: 20px 0px 0px 0px;
-moz-box-shadow: 8px 8px 18px 0px black;
-moz-border-radius: 18px;
-ms-filter:"progid:DXImageTransform.Microsoft.DropShadow(color=black, offx=6, offy=6)";
filter:progid:DXImageTransform.Microsoft.DropShadow(color=black, offx=6, offy=6);
background: white;
}
Leider klappt das nicht obwohl die Zeile "margin: 0px auto;" doch eigentlich sagt, dass der blaue Hintergrund bis an den oberen Rand des Viewports reichen soll.
Hab keine Ahnung warum das nicht geht. Wäre für Hilfe sehr dankbar.
-
Hi,
hab ein kleines Problem. Es geht um den blauen Hintergrund der folgenden Seite:
Seite mit blauem Hintergrund
Der blaue Hintergrund soll bis an den oberen Rand des Vieports reichen.wie könnte er?
body {
width: 960px;
height: 2000px;
margin: 0px auto;
background: blue;
}Du legst fest, dass body "nur" 960px breit sein soll ("nur" in Anführungszeichen, weil das deutlich mehr ist, als die übliche Breite meines Browserfensters). Genau über diese Breite erstreckt sich dann auch die Hintergrundfarbe. Außerhalb davon gelten die Merkmale des html-Elements. > ~~~css #background { > margin: 20px 0px 0px 0px; > [...] > }Leider klappt das nicht obwohl die Zeile "margin: 0px auto;" doch eigentlich sagt, dass der blaue Hintergrund bis an den oberen Rand des Viewports reichen soll.
Ich sag's ja immer wieder: Collapsing Margins machen nur Ärger ...
Der obere Rand des div#background fällt mit dem oberen Rand von body zusammen, daher gelten die 20px top-margin auch für body. Ist 'ne bescheuerte Spezifikation, aber leider Tatsache.Ciao,
Martin--
Der Stress von heute ist die gute alte Zeit von morgen.
-
#background {
margin: 20px 0px 0px 0px; [...]}
> > Leider klappt das nicht obwohl die Zeile "margin: 0px auto;" doch eigentlich sagt, dass der blaue Hintergrund bis an den oberen Rand des Viewports reichen soll. > > Ich sag's ja immer wieder: Collapsing Margins machen nur Ärger ... > Der obere Rand des div#background fällt mit dem oberen Rand von body zusammen, daher gelten die 20px top-margin auch für body. Ist 'ne bescheuerte Spezifikation, aber leider Tatsache. Was kann ich denn tun, damit die 20px top-margin nur für div#background gelten und nicht für body? An die Stelle von der blauen Farbe soll ja dann später die halbtransparente Grafik so das im HTML-Hintergrund ein Verlauf zu sehen ist.-
Hi!
Was kann ich denn tun, damit die 20px top-margin nur für div#background gelten und nicht für body?
Also wenn Margin nicht zum gewünschten Ergebnis führt, welche Eigenschaft im Bezug auf Abstände kennst du noch?
Ah ..., richtig!
Padding gibt es da noch. Und in deinem Fall also ein padding-top:20px;
Für welches Element darfst du aber jetzt selber herausfinden.Überhaupt kann ich dir nur empfehlen, dich noch weiter intensiv mit der Materie CSS auseinanderzusetzen, um diese auch zu verstehen. Ansonsten stößt du an jeder Ecke wieder auf neue Probleme (und damit meine ich nicht die diversen Browser-Bugs).
CSS ist zwar einerseits einfach - andererseits aber auch (leider) nicht.
Gruß Gunther
-
Also wenn Margin nicht zum gewünschten Ergebnis führt, welche Eigenschaft im Bezug auf Abstände kennst du noch?
Ah ..., richtig!
Padding gibt es da noch. Und in deinem Fall also ein padding-top:20px;
Für welches Element darfst du aber jetzt selber herausfinden.das haupt für Padding auch nicht hin, da ich die abgerundeten Ecken von CSS 3 benutze. Darauf bin ich auch selbst gekommen. Ganz blöd bin ich ja auch nicht.
-
Hi!
das haupt für Padding auch nicht hin, da ich die abgerundeten Ecken von CSS 3 benutze. Darauf bin ich auch selbst gekommen. Ganz blöd bin ich ja auch nicht.
Letzteres habe ich weder geschrieben, noch behauptet, noch angenommen. ;-)
Und ich habe dich so verstanden, als dassbody { /* deine sonstigen Angaben */ padding-top: 20px; }das ist, was du erreichen willst.
Gruß Gunther
-
-
-
Hi,
Ich sag's ja immer wieder: Collapsing Margins machen nur Ärger ...
Was kann ich denn tun, damit die 20px top-margin nur für div#background gelten und nicht für body?dafür sorgen, dass der Anwendungsfall für Collapsing Margins hier nicht gegeben ist, z.B. indem du dem inneren Element (also hier dem div) noch border-top gibst. Weiß würde sich anbieten ...
Ciao,
Martin--
"Hier steht, deutsche Wissenschaftler hätten es im Experiment geschafft, die Lichtgeschwindigkeit auf wenige Zentimeter pro Sekunde zu verringern." - "Toll. Steht da auch, wie sie es gemacht haben?" - "Sie haben den Lichtstrahl durch eine Behörde geleitet."-
dafür sorgen, dass der Anwendungsfall für Collapsing Margins hier nicht gegeben ist, z.B. indem du dem inneren Element (also hier dem div) noch border-top gibst. Weiß würde sich anbieten ...
Dein Vorschlag hat auch nicht funktioniert. Hab jetzt aber eine Lösung gefunden. Hab einen border-top in das äußere Element gepackt und diesen Rahmen transparent gemacht:
body { width: 960px; height: 2000px; margin: 0px auto; border-top: 20px solid transparent; /* zur Vermeidung von collapsing margins*/ background: url(../images/gradient.png); }das klappt so jetzt wunderbar. Hier nochmal der Link:
-
Hi!
Dein Vorschlag hat auch nicht funktioniert. Hab jetzt aber eine Lösung gefunden. Hab einen border-top in das äußere Element gepackt und diesen Rahmen transparent gemacht:
body {
width: 960px;
height: 2000px;
margin: 0px auto;
border-top: 20px solid transparent; /* zur Vermeidung von collapsing margins*/
background: url(../images/gradient.png);
}> > das klappt so jetzt wunderbar. Hier nochmal der Link: > > [Problem gelöst](http://www.geisler-trier.de) Ah ja! Und das unterscheidet sich jetzt im Ergebnis wie von einem Padding-Top für Body? Das ist das, was ich u.a. in meinem ersten Posting meinte: Verstehen - nicht blind "rumprobieren" hilft auf Dauer wirklich weiter. Und wenn du jetzt noch die feste Height-Angabe rausnimmst und die 2 kleinen Fehlerchen beseitigst, dann sieht die Seite langsam nicht nur richtig gut aus, sondern ist auch noch valide. Weiterhin viel Erfolg & Spaß beim Erstellen. Gruß Gunther-
Ah ja! Und das unterscheidet sich jetzt im Ergebnis wie von einem Padding-Top für Body?
Das ist das, was ich u.a. in meinem ersten Posting meinte: Verstehen - nicht blind "rumprobieren" hilft auf Dauer wirklich weiter.Also wenn ich
body { width: 960px; height: 800px; margin: 0px auto; border-top: 20px solid transparent; background: url(../images/gradient.png); }durch
body { width: 960px; height: 800px; margin: 0px auto; padding-top: 20px 0px 0px 0px; background: url(../images/gradient.png); }ersetzte funktioniert der Kram nicht und das ist doch das was du meinst oder? In der Theorie müßte es gehen klar in der Praxis klappt es aber leider nicht.
Und wenn du jetzt noch die feste Height-Angabe rausnimmst und die 2 kleinen Fehlerchen beseitigst, dann sieht die Seite langsam nicht nur richtig gut aus, sondern ist auch noch valide.
Die feste Height-Angabe kann ich nicht rausnehmen, weil dann der Verlauf nurnoch oberhalb und nichtmehr unterhalb angezeigt werden würde. Hab bewußt 800px gewählt, dann muss die Grafik nicht so groß sein. Bei Seiten die eine größere Höhe als 800px haben wird der Verlauf dann unterhalb nichtmehr angezeigt, dass ist mir aber wurscht. Hauptsache bei der Startseite wird der Verlauf unterhalb angezeigt.
-
Hi!
Ah ja! Und das unterscheidet sich jetzt im Ergebnis wie von einem Padding-Top für Body?
Das ist das, was ich u.a. in meinem ersten Posting meinte: Verstehen - nicht blind "rumprobieren" hilft auf Dauer wirklich weiter.Also wenn ich
body {
width: 960px;
height: 800px;
margin: 0px auto;
border-top: 20px solid transparent;
background: url(../images/gradient.png);
}> > durch > > ~~~css > body { > width: 960px; > height: 800px; > margin: 0px auto; > padding-top: 20px 0px 0px 0px; > background: url(../images/gradient.png); > } >ersetzte funktioniert der Kram nicht und das ist doch das was du meinst oder? In der Theorie müßte es gehen klar in der Praxis klappt es aber leider nicht.
Nein, das Problem ist, dass du ungültiges CSS verwendest (weshalb die Regel von den Browsern dann ignoriert wird)!
Entweder verwendest du Kurzschreibweisen, wie bspw.
padding: 20px 0 0;oder nicht
padding-top: 20px;Gruß Gunther
-
Entweder verwendest du Kurzschreibweisen, wie bspw.
padding: 20px 0 0;
> oder nicht > ~~~css > padding-top: 20px; >uppps, ich Vollidiot *schäm* danke für die Info.
-
Entweder verwendest du Kurzschreibweisen, wie bspw.
padding: 20px 0 0;
> oder nicht > ~~~css > padding-top: 20px; >So jetzt funktioniert der Kram auch mit der Lösung die du am Anfang vorgeschlagen hast. Du hast also von Anfang an recht. Oh je ist das peinlich. Jedenfalls besten Dank für die Hilfe :-).
-
-
-
-
-
-
-
-
Hallo,
Hallo
hab ein kleines Problem.
Finde ich auch. Das ist dein 4. offener CSS-Thread zu einem Problem auf deiner hp.
Deshalb antworte ich dir nicht, sondern erwähne lediglich, dass andere schon längst den Doppelposting Tarif bezahlt hätten.Warum es dir anders ergeht, weiss ich nicht.
mfg Beat
--
Woran ich arbeite:
X-Torah
Plädoyer für eine alte Mystik
und Vers-Einteilung
in der Torah und der Apokalypse
Beat Stoecklin 2008
/|
<°)))o>< __ / | /|
/__\ _|___/ | ><o(((°>
OvVVvO __ | ><o(((°>
<°)))o>< /v v\/ |
<°)))o>< ^ ^/_/_ ><o(((°>
^^^^/___/
---- ><o(((°>
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
Der Valigator leibt diese Fische-
Finde ich auch. Das ist dein 4. offener CSS-Thread zu einem Problem auf deiner hp.
Deshalb antworte ich dir nicht, sondern erwähne lediglich, dass andere schon längst den Doppelposting Tarif bezahlt hätten.
Sorry, ich seh's ja ein. In Zukunft gelobe ich Besserung :-), hoffe natürlich das ich weiterhin mit Deiner Hilfe rechnen kann.
-