Beiträge von Siddius

Siddius · 20. Oktober 2010

Danke für die schnelle Antwort!

Siddius · 20. Oktober 2010

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:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">




<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">




<head>




  <title>Meine erste Homepage</title>




  <link href="design.css" type="text/css" rel="stylesheet" />




</head>




<body>




   <h1>Herzlich willkommen auf meiner ersten Homepage</h1>




   <p>Das wird die Startseite meiner ersten Homepage</p>




</body>
</html>

Alles anzeigen

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: <a class="postlink" href="http://www.html-seminar.de/grafiken.htm">http://www.html-seminar.de/grafiken.htm</a>

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:

Code

h1 {
    font: normal normal bold 125%/100% arial, sans-serif;
    color:black;
    text-align:center;
    border:5px dotted orange;
    background-image: url(html-seminar.jpg);
    width:400px;
    height:35px;
    padding:15px;
    margin:15px;
 }

Alles anzeigen

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.