Hintergrundbox für Text

    Hallo zusammen!

    Ich habe auf meinem Copmuter ein paar HTML-Dateien für eine Homepage... Bin eigentlich ein Neuling und komme nun an einer Stelle nicht weiter!

    Und zwar:

    Ich habe über ein verknüpftes CSS-Dokument alle möglichen Dinge, auch eigene Klassen, festgelegt. So auch ein Hintergrundbild, welches ich anschließend noch zentriert habe. So, nun zum wichtigen Teil!

    Meine Überschriften und Absätze haben an den Rändern jeweils einen Freiraum von 20% (über den "margin-[...]"-Befehl) sowie eine Textausrichtung. Das ganze habe ich farblich hinterlegt, so wollte ich eine Box für den Text erschaffen, doch das Ganze schlug fehl!

    Zwischen jeder Überschrift und jedem neuen Absatz ist nun ein Leerraum. Also meine Frage:

    Wie kann ich eine Box um sämtliche Texte ziehen?

    MfG
    Gast JFaron

    Ein Link zur Seite? Oder mindestes der HTML/CSS Code. Besser wäre ein Link

    Zitat von Unregistriert

    Ein Link zur Seite? Oder mindestes der HTML/CSS Code. Besser wäre ein Link



    Tut mir Leid, das ganze ist intern!

    Hier ein Screen: *klick*

    Hier der Code der HTML-Datei:

    Und der aus der CSS:

    Zitat von alxy

    zB einen div-Tag um allle Texte herum machen, diesem eine Id geben und diese Id dann im css ansprechen und entsprechend deiner Vorstellung gestalten ;)



    Tut mir Leid, bin absoluter Neuling und weiß darüber gar nix!

    Muss das ungefähr folgendermaßen aussehen?

    Code
    ...
<body>
<div ID=Beispiel-ID>MEIN TEXT</div>
</body>
...

    Und im CSS-Document z. B. eine Hintergrundfarbe verpassen? Was gebe ich dann da ein?

    Code
    .div ID }
background-color:#ffffff
}
    Zitat von JFaron

    Tut mir Leid, bin absoluter Neuling und weiß darüber gar nix!

    Muss das ungefähr folgendermaßen aussehen?

    Code
    ...
<body>
<div ID=Beispiel-ID>MEIN TEXT</div>
</body>
...

    Und im CSS-Document z. B. eine Hintergrundfarbe verpassen? Was gebe ich dann da ein?

    Code
    .div ID }
background-color:#ffffff
}



    Die Seiten kenne ich, ich finde aber nix über eine "div ID"!

    Nein, das müsste ungefähr so aussehen:

    HTML
    <div id="content">Deine Texte, hier können auch weiter divs folgen!
....
</div>

    css:

    HTML
    #content {
background-color:#fffff
}

    Übrigens, ids werden in css mit # eingeleitet; class mit .

    Zitat von alxy

    Nein, das müsste ungefähr so aussehen:

    HTML
    <div id="content">Deine Texte, hier können auch weiter divs folgen!
....
</div>

    css:

    HTML
    #content {
background-color:#fffff
}

    Übrigens, ids werden in css mit # eingeleitet; class mit .



    Danke.. Im Ansatz habe ich ja schon richtig gedacht ;)

    Ich habe nochmal eine Frage!

    Mein Doc. wird von einem Header geschmückt.
    HTML:

    Code
    <header><img src="Grafiken/HeaderV2.png" alt="Herzlich Willkommen!" width="720" height="200" style="border: 0px;" /></header>


    CSS:

    Code
    header {
	text-align: center;
}

    Meine #content-Box ist folgendermaßen definiert:

    Code
    #content {
	margin-left: 20%;
	margin-right: 20%;
	background: #C0C0C0;
	padding-right: 10px;
	padding-left: 10px;
	padding-top: 10px;
	padding-bottom: 10px;
}

    Wenn ich nun aber mein Fenster verkleinere, wird entsprechend die gesamte Seite skaliert, aber an den Seiten bleiben immer meine 20% Freiraum bestehen, ist ja klar! Nun schießt der Header aber, bei kleinen Fenstern, über die Box hinaus.

    Ich meine mit Befehlen (die ich mir leicht auf selfhtml raussuchen könnte) den Header einfach abschneiden zu können, dass will ich aber nicht!

    Lässt sich irgendwie der Header relativ zur Fenstergröße des Browsers minimieren? Wie z. B. bei der Firefox-Startseite?

    Oder, optimal wäre hier ein und, ist es möglich, den Seitenrand bei einer zu kleinen Fensterauflösung verschwinden zu lassen?

    Hoffe ihr wisst wieder Atnworten...

    MfG
    JFaron

    1.) <header> ist kein mir bekanntes HTML Tag!
    2.) Binde den Header lieber so ein <div id="header">
    3.) Nimm doch die gleichen angaben wie beim content, also:

    HTML
    #header { 	margin-left: 20%; 	margin-right: 20%; 	background-image: "Grafiken/headerv2.png";
}
    Zitat von alxy

    1.) <header> ist kein mir bekanntes HTML Tag!
    2.) Binde den Header lieber so ein <div id="header">
    3.) Nimm doch die gleichen angaben wie beim content, also:

    HTML
    #header { 	margin-left: 20%; 	margin-right: 20%; 	background-image: "Grafiken/headerv2.png";
}



    Tut mir Leid, aber das funktioniert nicht, denn...

    ...ich muss einen Text schreiben, damit der volle Header angezeigt wird (Ist ja ein Hintergrund, und wenn es keinen Vordergrund gibt, wird der Hintergrund nicht angezeigt!)
    ...das ganze wird, beim skalieren des Fensters, abgeschnitten!