Probleme mit dem Box-Modell

  • Hallo Leute, wie der Titel schon verrät habe ich einige Probleme mit dem Box-Modell.
    Ich habe erst gestern angefangen mit HTML und CSS und habe mir gleich vorgenommen meine Designs in einer Extradatei anzulegen, die ich dann später in alle html-Datein einbinden kann.
    Nun bin ich wie gesagt beim Boxmodell angelangt und wollte das zur Übung mal anwenden.
    Hier meine Index.htm:



    Wenn man sich das ganze nun anguckt, dann sieht man den Titel der Seite, umgeben von einem Rahmen mit Hintergrundbild. Nun will ich den Rahmen anpassen und das Bild vergrößern, da mir das alles zu "gequetscht wirkt" und dachte mir, dass das Box-Modell genau für solche Zwecke gedacht ist.
    Ich habe nun aber keine Ahnung, wie ich das Box-Modell in meine design-Datei einarbeiten soll.
    Hier mal der Code:


    Code
    h1 {
        font: normal normal normal 100%/100% arial, sans-serif;
        text-align:center;
        border:5px dotted orange;
        background-image: url(html-seminar.jpg);
     }


    Das Bild ist übrigens von hier: <!-- m --><a class="postlink" href="http://www.html-seminar.de/grafiken.htm">http://www.html-seminar.de/grafiken.htm</a><!-- m -->


    Ich hoffe ihr könnt mir helfen!


    MfG
    Siddius


    Edit: Ok, habe jetzt einfach die Boxbefehle in meinen Quellcode eingefügt und es hat auch soweit funktioniert. Meine design.css sieht jetzt wie folgt aus:



    Darf ich das einfach so einfügen, oder ist das "unsauber"? Und wie kann ich das nun mittig anordnen ? Das Ganze ist nun nämlich nicht mehr mittig.

  • Block-Elemente (wie h1, p, ...) kannst du mit margin: 0 auto mittig anordnen, du musst ihnen dafür natürlich auch eine Breite geben.
    In deinem Falle, wenn du jetzt z.B. den body also die ganze Seite mittig haben möchtest machst du folgendes:

    Code
    body {
     width: 950px;
     margin: 0 auto;
    }


    Benutze für Code das nächste mal bitte die Code-Funktion.

  • Kleine Ergänzung:


    Das "auto" beim margin bezieht sich auf die linke und die rechte Seite, wenn du oben und unten allerdings auch margin haben möchtest, kannst du natürlich auch margin: 15px auto; verwenden oder so :D


    LG

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!