background-image + Text die Zweite

Diskutiere das Thema background-image + Text die Zweite im Forum Web-Design

  1. kaifreund

    kaifreund Thread Starter Mitglied

    Beiträge:
    52
    Zustimmungen:
    0
    Mitglied seit:
    30.07.2004
    Nochmal zu dem Thema ...

    Wie kann ich über ein zentriertes! background-image (margin:auto) einen Blocksatztext legen der nicht an die linke Kante des background-images anstösst?
    -Anders: der Blocktext soll zum Hintergrundbild einen linken und rechten Randabstand haben aber trotzdem zentriert sein (padding ist nicht da dann das Bild spinnt)...
    Also zwei verschiedene styles?
    z-index?
    Tabellen?

    Ich finde leider nichts dazu was passt kann Jemand helfen?

    http://glimpse.de/weltmarkt/

    Gruesse kai
     
  2. BEASTIEPENDENT

    BEASTIEPENDENT Mitglied

    Beiträge:
    2.006
    Zustimmungen:
    8
    Mitglied seit:
    26.10.2003
    entweder preformatted text benutzen (uralter befehl, ziemlich out of date AFAIK) oder den text in eine tabelle setzen; dann kannst du über den zellabstand {padding des textes} u.ä. den abstand genau definieren.
     
  3. kaifreund

    kaifreund Thread Starter Mitglied

    Beiträge:
    52
    Zustimmungen:
    0
    Mitglied seit:
    30.07.2004
    Habe die Lösung. Sehr einfach, ohne Tabelle und sehr flexibel. Zwei divs in Verbindung mit z-index.

    Code:
    .background{
    z-index:0;
    margin:auto;
    background: url(../pics/hintergrund.jpg) no-repeat center;
    width:1000px;
    height:304px;
    }
    
    .inhalt{
    z-index:1;
    margin:auto;
    padding-top:10px;
    padding-bottom:10px;
    text-align: justify;
    width:700px;
    height:304px;
    }{

    HTML:
    <div class="background">
    <div class="inhalt">
    Der Schreibtisch ist fast leer.... :-)
    </div></div>
    Ich danke Euch!
    kai
     
Die Seite wird geladen...

MacUser.de weiterempfehlen

  1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Akzeptieren Weitere Informationen...