CSS - 2 Logos nebeneinander - nur wie?!

[Sascha_C]

Hallo zusammen,

ich kenne mich nur laienhaft mit mit der CSS-Sprache aus, daher hoffe ich dass mir jemand helfen kann.

Ich habe folgendes Problem:

Ich möchte auf unsere Firmenhomepage gerne 2 "Logos" nebeneinander darstellen. Das ist zum einen das Firmenlogo als .jpeg (894x180) und zum anderen ein animiertes .gif (265x180). Die Homepage hat eine fixe Breite von 1150px.

Was muss ich in die .CSS Datei schreiben damit die beiden Logos nebeneinander sind?

Im Moment sieht es so aus:

/* ### Logo ################################################################# */

#logo {
position:left;
background-image: url(Firmenlogo.jpeg);
background-color: white;
background-position: 0 0;
background-repeat: no-repeat;
height:180px;
width:894px;
top: 0px;
margin-left: 0px;
}

#logo b {
position:right;
background-image: url(xxx.gif);
background-color: white;
background-position: 0 0;
background-repeat: no-repeat;
height:180px;
width:256px;
top: 0px;
margin-right: 0px;
}

/* ### Header ############################################################### */

.....

Egal wie ich es drehe und wende, es wird immer nur ein Bild angezeigt...

Kann mir jemand weiterhelfen?


LG
Sascha

[Richard.Laing]

hi sascha

Code: Alles auswählen

position:left;

ist so nicht ganz richtig.

Code: Alles auswählen

position:absolute; left:0;

wäre richtig
aber auch nur wenn der header oder wo immer die bilder drin sind position:relative; hat
gruß richy

[frood]

Dein CSS hat einen Fehler:
#logo b würde bold-Tags innerhalb eines Div-Containers mit der ID "logo" betreffen.
Nimm stattdessen: #logo_b

Dann würde ich die Logos eher in einem festen Bereich fliessen lassen und nicht absolut positionieren.
Bei absoluter Positionierung kann es leicht zu Überlagerungen kommen.

Ich würde dir diese Struktur empfehlen:

Code: Alles auswählen

<div id="header">
   <div id="logo_a">
       &nbsp;
   </div>
   <div id="logo_b">
       &nbsp;
   </div>
</div> 

Und das CSS:

Code: Alles auswählen

#header {
  display:block;
  float:left;
  height:180px;
  width:1150px;
}

#logo_a {
  display:block;
  float:left;
  height:180px;
  width:894px;
  background:#FFFFFF url(Firmenlogo.jpeg) no-repeat left top;
}

#logo_b {
  display:block;
  float:right;
  height:180px;
  width:256px;
  background:#FFFFFF url(xxx.gif) no-repeat left top;
}

Margin brauchst Du nicht, ist per default 0.

Gruss
Marc

[Sascha_C]

Vielen Dank für die Antworten!

Habe es so gemacht wie Marc geschrieben hat und es funktioniert einwandfrei!

P-E-R-F-E-K-T!

Gruß
Sascha

[frood]

... das ist doch schön.

Eine gute CSS-Referenz findest Du hier:

http://www.css4you.de/

Gruss
Marc

[Lara88]

... das ist doch schön.

Eine gute CSS-Referenz findest Du hier:

http://www.css4you.de/

Gruss
Marc

Die Referenz ist super, besten Dank