[CSS] Banner über Hintergrund justieren?

[tkiela]

Hallo.
Ich würde gerne so wie es bei www.chipmailer.de der Fall ist, einen Banner oben über einem Hintergrundbild einbringen. Wie mach ich das mit css?

 

[Marcel44]

müsste so gehen:
*edit*

<img src='banner.gif' class='banner'>

.banner{
 position: absolute;
 left: 0px; /* musst du */
 top: 700px; /* einstellen ( bottom: 100px; und right: 100px; geht auch*/ 
 z-index: 100;
}

 

[Cosmoflamme]

Es geht sogar noch einfacher:

Html

<img src="banner.jpg" id="banner">

Css

#banner {position:absolute; top:px; left:px; width:px; height:px; z-index:;}

 

[Marcel44]

löl ist das nicht das gleiche was ich gepostet hab hatte nur den html code vergessen

 

[theHacker]

löl ist das nicht das gleiche was ich gepostet hab

Ne. IDs sind unique. Klassen hingegen können mehrere Elemente haben, die die Klasse nutzen.

Und ich bin mir sicher, dass es nur genau einen Banner gibt, der auf den angegeben Koordinanten sein wird. Jede weitere Grafik mit derselben Klasse würde ja mit den anderen konkurrieren.

 

[Cosmoflamme]

Im Prinzip ja,bis auf den Unterschied class und Id.Und Deine Art zwischendrin Teile vom Quellcode als Anmerkung auszukommentieren ist..ähm.....für Anfänger vielleicht etwas verwirrend.

 

[Marcel44]

danke ich werde es mir merken

 

[Cosmoflamme]

Was theHacker meint,mit .banner sprichst Du ALLE Elemente an,die der Klasse "Banner" angehören.
Anders bei der ID,die mit #banner angesprochen werden kann,und die auch nur einmal vorkommen darf.

 

[theHacker]

danke ich werde es mir merken

Überarbeite mal deine Webseite: 20 von den 63 Fehlern haben nämlich genau diese Ursache

 

[Marcel44]

werd ich machen danke für den hinweis

 

[tkiela]

Danke für eure Antworten =)

 

[tkiela]

Sooo...
Da gibt es aber noch einen Fehler.
https://www.paid4-szene.de/
Wenn der Browser maximiert ist, ist der Banner oben perfekt.
Wenn man aber die Größe des Browsers verstellt, bewegt sich der Banner auch hin und her.

#banner1{
 position: absolute;
 right: 189px; 
 top: 78px;
 z-index: 100; 
}

So sieht der Code aus...
Wie ändere ich das, dass der Banner immer dort bleibt?

 

[gadon]

würde die seite selber fixieren wäre wohl das einfachste, was anderes fällt mir grade nicht ein.

 

[tkiela]

Und wie mach ich das?

 

[Quiny89]

feste größe zuweißen. also nicht width:90%; sondern width:950px;

 

[Cosmoflamme]

Das ist relativ einfach.Der Banner liegt in einer Tabellen-Zelle <td>,die sich je nach dem wie man das Fenster zieht verschiebt.
Gleichzeitig zurrst Du aber den Banner noch mit CSS {position:.....) auf einer festen Position fest.
Logischerweise bleibt der Banner beim Ziehen dann an seiner Stelle stehen,während der Rest der Tabelle verschoben wird.
Da Du ein Tabellenlayout hat,reicht es,den Banner mit der Tabellenzeile zu positionieren.

 

[tkiela]

Also momentan sieht das ja so aus:

<td colspan="2" background="bilder/head.gif" alt="Chipmailer" align="right"><br><br><br><br><br><br><img src="https://www.paid4-szene.de/bilder/banner/error.gif" alt="Keine akiven Werbekampagnen!" border="1" id="banner1"></a>        <br><br><br><br><br><br><br><br><br></td>

Soll ich dann der Tabellenzellen eine ID geben, und genau das selbe in CSS hinein schreiben, wie bei der BannerID?

 

[Cosmoflamme]

Wozu eine ID?Du brauchst nur die CSS-Anweisung für den Banner raus nehmen.Dann baust Du den Banner in die Tabelle zwischen <td> und </td> ein,da wo jetzt der grau-blaue Hintergrund ist.
Eigentlich müsste der Banner dann mit dem Rest der Tabelle mitruschen.

 

[tkiela]

Ja, das Problem ist dann aber, dass der Banner nicht direkt dort oben im Fenster sitzt, sonder ein Stück daneben.
Ich mach das mal und du kannst dir das angucken.

 

[tkiela]

Noch jemand eine Idee, was man dagegen machen kann?