Mehrere Hintergrundbilder mit HTML/CSS

hellemon · 26.03.2012

AW: Mehrere Hintergrundbilder mit HTML/CSS

warum machst du es dir eigentlich so schwer?

Code:

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8" />
    <title>HTML5 Layout</title>
    <style type="text/css">
    <!--
    #header {
     width: 95%;
     height: 500px;
     background: blue;
     border: 1px solid red;
    }

    .inside {
      width: 900px;
      height: 400px;
      margin: 0 auto;
      border: 1px solid yellow;
    }
    =-->
    </style>
  </head>
  <body>
  <div id="header">
   <div class="inside">Text
   </div
</div>
  </body>
</html>

margin: auto; alleine bringt dir nichts? Du solltest dir mal das CSS Box Modell nochmal genauer ansehen.

Gruß hellemon

Davi2000 · 26.03.2012

AW: Mehrere Hintergrundbilder mit HTML/CSS

hellemon schrieb:
warum machst du es dir eigentlich so schwer?

Code:

<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8" /> <title>HTML5 Layout</title> <style type="text/css">  </style> </head> <body> <div id="header"> <div class="inside">Text </div </div> </body> </html>

margin: auto; alleine bringt dir nichts? Du solltest dir mal das CSS Box Modell nochmal genauer ansehen.

Gruß hellemon

Warum bringt

HTML:

margin: auto;

alleine nichts? Solange man der Box ne größe gibt, ist das kein Problem.

Blurange · 26.03.2012

AW: Mehrere Hintergrundbilder mit HTML/CSS

Ja aber ich versteh nicht wo dann mein Fehler war.
Ich hatte es ja eigentlich so. bloß das ich keine Höhe und keinen Rahmen vergeben habe

Ok, ich hab meinen Fehler gefunden, ich hab einfach das ganze ohne head bereich gemacht! :-D
Peinlicher Fehler :-D

hellemon · 26.03.2012

AW: Mehrere Hintergrundbilder mit HTML/CSS

Davi2000 schrieb:
Warum bringt

HTML:

margin: auto;

alleine nichts? Solange man der Box ne größe gibt, ist das kein Problem.

Will dich jetzt nicht demotivieren, du hast zwar in dem Beispiel hier recht, aber Grundsätzlich richtet man Block-Elemente und dazu gehört der DIV Container mit margin: 0 auto; aus. Entweder habe die alle unrecht oder du Recht, persönlich kenne ich es auch nicht anders wie mit 0 auto auszurichten. 0 ist oben/unter auto ist rechts/links

http://www.instantshift.com/2010/03/15/47-css-tips-tricks-to-take-your-site-to-the-next-level

http://www.vanseodesign.com/css/centering-with-css

http://www.bluerobot.com/web/css/center1.html

Gruß hellemon

Blurange · 26.03.2012

AW: Mehrere Hintergrundbilder mit HTML/CSS

War das jetzt an mich gerichtet?
Ich hab meinermeinung nach alles eigentlich Richtig gemacht, bloß ich habe den Doctype + header immer weggelasen bei der Testdatei, deswegen hat das nicht funktioniert. :-D
Aber Danke, kann das Forum hier aufjedenfall nur weiterempfehlen, schnelle hilfe und auch wenn mans nicht gleich kapiert, wird einem weiterhin geholfen.
Danke

Davi2000 · 26.03.2012

AW: Mehrere Hintergrundbilder mit HTML/CSS

hellemon schrieb:
Will dich jetzt nicht demotivieren, du hast zwar in dem Beispiel hier recht, aber Grundsätzlich richtet man Block-Elemente und dazu gehört der DIV Container mit margin: 0 auto; aus. Entweder habe die alle unrecht oder du Recht, persönlich kenne ich es auch nicht anders wie mit 0 auto auszurichten. 0 ist oben/unter auto ist rechts/links

http://www.instantshift.com/2010/03/15/47-css-tips-tricks-to-take-your-site-to-the-next-level

http://www.vanseodesign.com/css/centering-with-css

http://www.bluerobot.com/web/css/center1.html

Gruß hellemon

Hey demotivieren wirst du mich nicht, dafür ist heute einfach ein zu schöner Tag.

Wenn es danach geht Browserübergreifend auf Nummer sicher zu gehen , das Margin top und Margin bottom kein Abstand ist, klar dann ist es besser so.

Wenn es aber nur darum geht eine Div Box zu zentrieren, spricht meiner Meinung nach nichts gegen:

HTML:

margin: auto;

Blurange · 26.03.2012

AW: Mehrere Hintergrundbilder mit HTML/CSS

@DerOtto: Gute Erklärung in der Demo.
Mal eine Frage an dich, ist es nicht sinvoller die Css in Blöcken zu schreiben und nicht alles in einer Zeile?

patrick_l · 26.03.2012

AW: Mehrere Hintergrundbilder mit HTML/CSS

Davi2000 schrieb:
Wenn es danach geht Browserübergreifend auf Nummer sicher zu gehen , das Margin top und Margin bottom kein Abstand ist, klar dann ist es besser so.

Schonmal etwas von Browser bzw. CSS Reset gehört

Mit dem Sternselektor die Werte von margin und padding zurücksetzen ("reseten"). Dann gibt es auch keine Probleme.

Code:

/*----- css -----*/
* {margin:0; padding:0;}

Blurange schrieb:
@DerOtto: Gute Erklärung in der Demo.
Mal eine Frage an dich, ist es nicht sinvoller die Css in Blöcken zu schreiben und nicht alles in einer Zeile?

Ich schreibe in der Regel auch alles erst einmal in Blöcken. Anschließend wenn ich fertig bin, also die Seite komplett fertig ist wird in zwei Schritten das CSS komprimiert. Im ersten werden die Blöcke auf Zeilen gebracht.

Anschließend wenn alles hoch geladen wird gehe ich nochmal hin und lösche per Script alle Leerstellen aus meinem Stylesheet. Je kleiner ein CSS, eine Website im allgemeinen um so weniger ist der Traffic und schneller der Seitenaufbau.

Grüße Patrick

Blurange · 27.03.2012

AW: Mehrere Hintergrundbilder mit HTML/CSS

Aso ok, aber das mit den Leerstellen ist doch eigentlich nicht unbedingt notwendig, merkt man doch bestimmt kaum. Außer du hast ein Stylesheet von mehreren 1000 Zeilen.