MatzeA: Hintergrundbreite eingrenzen.... z.B. Breit 550 px

Hi,

irgendwie bekomme ich das nicht gebacken.
Bei folgendem Quellcode erscheint der hintergrund des jeweiligen Textes sehr breit.
So breit, dass es das eigentlich Design der Seite stört.
Wie kann ich dies entsprechend unterbinden bzw. auf eine bestimmte breite formatieren?

<html xmlns="http://www.w3.org/1999/html">

<head>
<title>Dube Homepage</title>
<base target="_self">
<style type="text/css">
<!--
 body { text-decoration:none; color:#12295A; }
 table { border: 2px; border-color:#E5EAF6; border-collapse: collapse}
 h1 {background-color: #E5EAF6;  }
 h2 {background-color: #12295A; color: #E5EAF6 }
 a:link { text-decoration:underlined; font-weight:bold; color:#12295A; }
 a:visited { text-decoration:underlined; font-weight:bold; color:#12295A; }
 a:hover { text-decoration:underlined; font-weight:bold; background-color:#E5EAF6; }
 a:active { text-decoration:underlined; font-weight:bold; background-color:#7992C9; }
-->
</style>
</head>

<body topmargin="0" leftmargin="0" background="images/bg_main.jpg">

<blockquote>
      <p></p>
  <h1>Aktuelle Termine und Veranstaltungen. </h1>
  <h2>31.12.03 ~ 02.01.04 Silvesterparty in der Bude.</h2>

<br><p> Demnächst mehr.</p>

</blockquote>
</body>

</html>

Gruss Matze

  1. Bei folgendem Quellcode erscheint der hintergrund des jeweiligen Textes sehr breit.

    Hmm... Was genau meinst Du denn jetzt?
    Ich sehe da nur einen Hintergrund, nämlich dn, den Du im Body eingebunden hast:

    <body topmargin="0" leftmargin="0" background="images/bg_main.jpg">

    Und das würde ich so nicht machen... Ist das nicht als deprecated eingestuft? Ich bin mir da nicht sicher...
    Aber ich würde das hier anders angehen und das ganz besonders, wenn ich mit XHTML statt HTML arbeite.
    Wieso bindest Du das Bild nicht mit CSS ein? Dann hast Du auch einiges mehr an Möglichkeiten...
    http://selfhtml.teamone.de/css/eigenschaften/hintergrund.htm#background_image

    und mit background-repeat, background-position, background-attachment, ... kannst Du dann genaueres regeln.

    1. Servus,

      sorry Du liegst etwas auf dem Holzweg.
      Das mit dem Bild Hintwergrund war nicht gemeint sondern:

      h1 {background-color: #E5EAF6;  }
      h2 {background-color: #12295A; color: #E5EAF6 }

      Was sich etwas weiter unten auswirkt und leider leider viel Zu lang ist.

      Kann man genau den Hintergrund des h1 bzw. h2 Objektes auf eine max. breite von 550 pixel reduzieren?

      Gruss Matze

      1. Aha. Das meinst Du. Ja, nachdem ich den Code mal rauskopiert und im Browser getestet habe, sehe ich, was Du meinst.
        Wenn Du nicht den h1 formatierst, sondern Deinen Text in einen Span faßt, dann funktioniert es:
        <h1><span style="background-color:#e5eaf6;">Text</span></h1>

        So und dann nochmal kurz zu der Trennung von Text und Design. Ich würde das background halt aus dem body nehmen und die Formatierung mit CSS vornehmen.
        Dann hast Du noch topmargin und leftmargin im Body. Das würde ich auch mit CSS machen. Und wenn Du es schon nicht mit CSS machen willst, dann würde ich da noch marginwidth="0" und marginheight="0" mit dazu schreiben. Das Ganze soll ja im IE und im Netscape hinhauen.

        1. Servus,

          Wenn Du nicht den h1 formatierst, sondern Deinen Text in einen Span faßt, dann funktioniert es:
          <h1><span style="background-color:#e5eaf6;">Text</span></h1>

          Damit habe ich nun aber das problem, dass der jeweilige Hintergrund nur so lange wie der Text ist.
          Ich wolle das jedoch nach möglichkeit einheitlich haben
          Sprich immer die gleiche länge, z.B. 550 px.

          Die Seite gehört zu einem Frameset und sollte eben mit einer breite von 550 px bündig mit dem Kopf abschliessen.

          Ich schau mal was ich noch so finde.
          Danke schon mal :-))

          Gruss Matze.

      2. Moin!

        Das mit dem Bild Hintwergrund war nicht gemeint sondern:

        h1 {background-color: #E5EAF6;  }
        h2 {background-color: #12295A; color: #E5EAF6 }

        Was sich etwas weiter unten auswirkt und leider leider viel Zu lang ist.

        Wenn du eine gewisse Breite haben willst, definiere eine.

        http://selfhtml.teamone.de/css/eigenschaften/positionierung.htm#width

        - Sven Rautenberg

        --
        Die SelfHTML-Developer sagen Dankeschön für aktuell 20885,68 Euro Spendengelder!
        1. Servus,

          Wenn du eine gewisse Breite haben willst, definiere eine.

          http://selfhtml.teamone.de/css/eigenschaften/positionierung.htm#width

          h1 {background-color: #E5EAF6; width: 550px; }

          So müsste es dann gehen?
          Ja genau sowas habe ich gesucht.
          Vielen dank.

          Gruss Matze

          1. Moin!

            h1 {background-color: #E5EAF6; width: 550px; }

            So müsste es dann gehen?
            Ja genau sowas habe ich gesucht.

            h1 ist ein Blockelement, genau wie div. Hat nur andere Standardformatierungen (typischerweise große, fette Schrift und einen Randabstand nach oben und unten). Man kann also alle für Blockelemente gültigen CSS-Anweisungen verwenden.

            - Sven Rautenberg

            --
            Die SelfHTML-Developer sagen Dankeschön für aktuell 20885,68 Euro Spendengelder!
    2. Hallo,

      Ich sehe hier keinen Unterschied zwischen XHTML und HTML. Die Empfehlung ist die gleiche: Trennung von Design (CSS) und Inhalt (X/HTML), wann immer es geht, also immer dann, wenn nicht irgendwelche wichtigeren Browser einen Strich durch die Rechnung machen!

      Also Hintergrundbilder, Breiten, Abstände, ... also alles was mit dem Design zu tun hat, mit CSS machen. Alles, was den Inhalt angeht, also Überschriften (h1...6), Textblöcke (p) oder Listen (li) etc. mit HTML machen!

      Tomek

  2. irgendwie bekomme ich das nicht gebacken.
    Bei folgendem Quellcode erscheint der hintergrund des jeweiligen Textes sehr breit.

    Du meinst die Hintergrundfarbe?
    Das ist für Blockelemente das normale Verhalten.

    Wie kann ich dies entsprechend unterbinden bzw. auf eine bestimmte breite formatieren?

    indem du eine Breite angibst, aber ob du das wirklich willst, weiß ich nicht.

    <head>
    <title>Dube Homepage</title>
    <base target="_self">

    Das ist wohl überflüssig.

    <style type="text/css">
    <!--
    body { text-decoration:none; color:#12295A; }

    Hier kannst du auch Ränder angeben, die sich dann auf die Darstellung von den Blockelementen auswirken.

    z.b.
    body
    {
    color:#12295A;
    margin-left:250px;
    margin-right:250px;
    padding:0;
    background: url(images/bg_main.jpg) #fff;
    }

    h1 {background-color: #E5EAF6;  }
    h2 {background-color: #12295A; color: #E5EAF6 }

    a:link { text-decoration:underlined; font-weight:bold; color:#12295A; }
    a:visited { text-decoration:underlined; font-weight:bold; color:#12295A; }

    Besuchte Links nicht zu kennzeichnen ist nicht sonderlich userfreundlich. außerdem kannst du hier dir doppelte Angaben sparen.

    a { text-decoration:underlined; font-weight:bold; color:#12295A; }
    a:link {  }
    a:visited {  }
    a:hover { background-color:#E5EAF6; }
    a:active { background-color:#7992C9; }

    <blockquote>

    wozu Blockquote?
    http://selfhtml.teamone.de/html/referenz/elemente.htm#blockquote
    Du markierst ein Zitat?

    <p></p>

    ein leerer Absatz?
    du suchst evtl:
    h1
    {
     margin-top: 1em;
    }

    <h1>Aktuelle Termine und Veranstaltungen. </h1>
      <h2>31.12.03 ~ 02.01.04 Silvesterparty in der Bude.</h2>

    <br><p> Demnächst mehr.</p>

    ein leeres br?
    du suchst evtl.
    p
    {
    margin-top:1em;
    }

    Struppi.

    1. Hi,

      a { text-decoration:underlined; font-weight:bold; color:#12295A; }

      daß Du diesen fehlerhaften Wert so einfach übernimmst..;-)

      freundliche Grüße
      Ingo

      1. a { text-decoration:underlined; font-weight:bold; color:#12295A; }

        daß Du diesen fehlerhaften Wert so einfach übernimmst..;-)

        jaja, wenn man einfach nur kopiert, hier steht's wie's geht: http://selfhtml.teamone.de/css/eigenschaften/schrift.htm#text_decoration

        Struppi.