3 divs + seitengröße anpassen?!

Muskatnussnolog

Hi leute!

also i bin erstmal neu hier und will gleich mal mein problem posten...

ich bin gerade dabei ein logo auf einer page am top einzufügen..
hab bemerkt das das recht blöd aussieht...
nun hab ich is in 3 teile geteilt und jedes in nen div gepackt!
jedoch bring ich es einfach nicht fertig alle 3 logos nebeneinander
anzuzeigen?!
das linke und das rechte logo sollen fixiert da bleiben wo sie sind
und das in der mitte soll sich je nach seiten größe in der "width" verändern.

zur zeit sieht mein code so aus:

HTML

<html>
  <head>
  <link rel="stylesheet" type="text/css" href="style.css">


  </head>
  <body>
    <div id="banner">
      <div id="banner1"</div>
      <div id="banner2"</div>
      <div id="banner3"</div>
    </div>
  </body>
</html>

Alles anzeigen

und meine style.css so:

Code

body{
     padding: 0px;
     margin: 0px;
     }


#banner{
        display: block;
        width:100%;height:165px;
        }


#banner1{
        background-image: url(./images/banner1.png);
        background-repeat:no-repeat;
        width:678px;height:165px;
        float:left;
        }

#banner2{
        background-image: url(./images/banner2.png);
        background-repeat:repeat-x;
        width: 31%; height: 165px;
        float:left;
        }

#banner3{
        background-image: url(./images/banner3.png);
        background-repeat:no-repeat;
        width: 16%; height: 165px;
        float:right;
        }

Alles anzeigen

hab schon vieles ausprobiert aber es will nicht hinhaun!
ich schaff es nur das alle in der gleichen zeile bleiben wenn ich alle drei
mit % ... aber ich will ja nur das sich das mittlere zusammenzieht / ausdehnt?!

danke schon mal für antworten!
mfg muskatnuss

sejuma

Das Problem liegt daran, dass du für die drei banner-Teile Pixel- und Prozentwerte verwendest. Das können die Browser nicht auf einen gemeinsamen Nenner bringen.
Entweder nimm nur Prozent oder nur Pixel.

Übrigens musst du die id's auch richtig schließen:
Statt

Code

<div id="banner1"</div>

nimm

Code

<div id="banner1"></div>

Muskatnuss

hui danke =) die div schließung hab ich glatt übersehen...
nur daran lags jetzt nicht...

ich hab auch schon versucht alle mit px bzw % zu versehen...
das problem dann ist das der browser alle 3 grafiken verkleinern beginnt!!!
ich möchte aber nur die mittlere verkleinern lassen.
also sollen links und rechts immer fix bleiben!

aber danke schonmal für die answer

Muskatnuss

hier meine neue style.css

Code

body{
     padding: 0px;
     margin: 0px;
     }




#banner1{
        background-image: url(./images/banner1.png);
        background-repeat:no-repeat;
        width:678px;height:165px;
        float:left;
        }

#banner2{
        background-image: url(./images/banner2.png);
        background-repeat:repeat-x;
        margin-left:678px;
        width: 392px; height: 165px;
        float:left;
        position:absolute;
        }

#banner3{
        background-image: url(./images/banner3.png);
        overflow:visible;
        background-repeat:no-repeat;
        width: 206px; height: 165px;
        float:right;
        }

Alles anzeigen

nur leider hab ich hier das prblem bei verkleinern des browsers schiebt
sich die rechte grafik hinter die mittlere...
wobei mir umgekehr lieber wäre xD

mfg muskatnuss

sejuma

Soll denn in den mittleren banner noch Inhalt rein? Sonst macht eine Anpassung ja keinen Sinn!
Ansonsten würde ich das so machen:

Code

#banner1{
        background:red;
        background-repeat:no-repeat;
        width:678px;height:165px;
        float:left;
        }


#banner2{
        background: green;
        background-repeat:repeat-x;
        width: auto; height: 165px;
        float:left;


        }


#banner3{
        background:magenta;
        overflow:visible;
        background-repeat:no-repeat;
        width: 206px; height: 165px;
        float:left;
        }

Alles anzeigen

Tags