Ergebnis 1 bis 4 von 4

Thema: 3 divs mit bg-Image nebeneinander

  1. #1
    HTML Newbie
    Registriert seit
    21.10.2012
    Beiträge
    3
    Danke
    1
    Bekam 0 mal "Danke" in 0 Postings

    Standard 3 divs mit bg-Image nebeneinander

    Hallo,

    ich möchte einen Header aus 3 Elementen aufbauen.
    In der Mitte befindet sich ein Banner, rechts und links davon soll passend ein Farbstreifen (PS-Grafik, also über background-image und repeat eingebunden) bis an den Rand der Seite gehen.
    Testweise hab ich das ganze erstmal mit 3 farblichen div-Containern gemacht

    HTML-Code:
    <html>
     <head>
      <style>
    #header{
        height:280px;
    }
       #header .left{
        float:left;
        height:100px;
        width:470px;
        background-color:#0f0;
        position:relative;
        top:180px;
       }
       #header .right{
        float:right;
        height:100px;
        width:470px;
        background-color:#f00;
        position:relative;
        top:180px;
       }
       #header .center {
        background-color:orange;
        width:645px;
        height:280px;
        margin:0 auto;
       }
      </style>
     </head>
     <body>
      <div id="header">
       <div class="left">#l</div>
       <div class="center">#c</div>
       <div class="right">#r</div>
      </div>
      <br/>
     </body>
    </html>
    Im Anhang habe ich einen Screen gepostet wie das ganze aussieht.

    Der orangene Div wäre mein Banner, grün und rot jeweils die Streifen die davon weggehen.
    Der grüne passt soweit, allerdings habe ich hier ja eine feste länge angegeben. Ich hätte ihn gerne so, dass er direkt links neben dem orangenen Bild beginnt und bis zum Ende des Bildschirms weiterläuft.

    Der rote passt irgendwie noch so gar nicht, obwohl ich ihn rechts gefloatet habe.. Er sollte genau wie der grüne verlaufen, nur eben rechts (also wie wenn man rechts neben den orangenen Container einen Spiegel legen würde).
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!
    Angehängte Grafiken Angehängte Grafiken

  2. #2
    Bandit
    Gast

    Standard AW: 3 divs mit bg-Image nebeneinander

    Verpasse #header mal eine Breite.

  3. #3
    König(in)
    Registriert seit
    07.02.2009
    Ort
    Leipzig
    Beiträge
    1.391
    Danke
    2
    Bekam 21 mal "Danke" in 20 Postings

    Standard AW: 3 divs mit bg-Image nebeneinander

    Und lass die relative Positionierung weg.

  4. #4
    Meister(in)
    Registriert seit
    24.02.2007
    Beiträge
    460
    Danke
    0
    Bekam 47 mal "Danke" in 47 Postings

    Standard AW: 3 divs mit bg-Image nebeneinander

    Abgesehen davon, dass dein Header sehr breit ist, brauchst du nur ein Container.
    Code:
     <!DOCTYPE html>
    <html>
     <head>
      <style>
    #header{
        height:280px;
        width:1585px; 
        background:url(bg.jpg) no-repeat top center; /* Grafik 1585px x 100px. Je zur Hälfte farbig */
    }
    
    
    #header p {
     width:645px; /*Bannerbreite*/
     margin:0 auto;
    }
    
    
      </style>
     </head>
     <body>
      <div id="header">
       <p><a href="banner.htm"><img src="banner.gif" alt="banner"/></a></p>
      </div>
      <br/>
     </body>
    </html>

Ähnliche Themen

  1. 3 divs nebeneinander
    Von marco563 im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 04.10.2009, 17:00
  2. Divs nebeneinander + zentrieren
    Von Marco_1987 im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 18.04.2009, 21:12
  3. Divs untereinander statt nebeneinander
    Von MasterOfDsaster im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 10.04.2009, 14:40
  4. 3 divs in einem div nebeneinander
    Von Questionmark im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 30.10.2006, 23:27
  5. 2 divs nebeneinander
    Von ad3nau im Forum HTML & CSS Forum
    Antworten: 15
    Letzter Beitrag: 26.07.2006, 14:24

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •