Wie erstellt man diesen Banner?

Wie erstellt man diesen Banner?

Beitragvon jules_twist » 18.08.2006, 20:11

Hallo,

ich habe auf der Website:

http://www.form.de

einen interessanten Banner gefunden. Er befindet sich auf der Startseite
und verschwindet erst, sobald der Nutzer scrollt!

Hat jemand eine Idee, wie man solch einen Banner erstellen kann?

Gruß,
Rainer, Essen
jules_twist
neu hier
 
Beiträge: 9
Registriert: 18.08.2006, 20:04

Beitragvon Laus » 18.08.2006, 20:26

Hallo

Das ist ein mit Absolut Positioniertes IFrame das per Java Script ausgeblendet wird. Wenn JS deaktiviert ist bleibt das Banner an der angezeigten Stelle auf der Seite stehen. Wenn man in den Quelltext schaut sieht man das dies über das script jScr/w3.main.js gesteuert wird.

Xaver
Lachen ist kein schlechter Anfang und bei weitem das beste Ende.
(Oscar Wilde)
Benutzeravatar
Laus
Moderator
 
Beiträge: 1229
Registriert: 25.02.2006, 00:30
Wohnort: Furth im Wald

Vielen Dank

Beitragvon jules_twist » 19.08.2006, 12:38

Hallo Xaver,

erst einmal vielen Dank für Deinen schnellen Tipp! Ich werde gleich mal versuchen ob ich das alleine hinbekomme! Mit Java Script kenne ich mich
leider nicht so gut aus – schau'n wie mal.

:-D
jules_twist
neu hier
 
Beiträge: 9
Registriert: 18.08.2006, 20:04

Schade

Beitragvon jules_twist » 19.08.2006, 23:19

Ich bekomme den Banner leider nicht hin. Ich kenn mich
dazu leider auch nicht so gut aus mit dem Programmieren! ;-(

Kann mir vielleicht jemand noch eine "Anleitung" geben?

Unter form.de ist der iframe noch dazu in einem DIV?!
Ich denke, der ist dazu da, damit die Inhalte --> Werbung z.B.
besser aktualisiert werden können?!

Also, einige Fragen und keinen blassen wie das alles geht?!
Über eine Antwort würde ich mich freuen!
Gruß!
jules_twist
neu hier
 
Beiträge: 9
Registriert: 18.08.2006, 20:04

Beitragvon skittles » 20.08.2006, 09:01

Meister Google würde dir da auch helfen können!

http://www.php-resource.de/forum/showth ... adid=29646
http://www.asphelper.de/forum/detail.asp?ID=4070

Mehr hab icha uf die schnelle auch nicht gefunden! Aber ich hoffe das ist mal ein Ansatz!
skittles
ist häufig da
 
Beiträge: 176
Registriert: 27.03.2006, 13:49
Wohnort: Wien

Vielen Dank, aber wie "klebt" der DIV immer am unt

Beitragvon jules_twist » 22.08.2006, 13:49

Die Sache mit dem iframe und JS bekomme ich jetzt hin!
Eines macht mir allerdings noch zu schaffen und zwar der DIV!
Auf der Website von FORM.de "klebt" der DIV immer am unterem Rand
des Fensters, egal ob man es größer oder kleiner skaliert!

Wie funzt das??? :-D
jules_twist
neu hier
 
Beiträge: 9
Registriert: 18.08.2006, 20:04

Beitragvon skittles » 22.08.2006, 15:30

position: absolute;
bottom: 0px;
skittles
ist häufig da
 
Beiträge: 176
Registriert: 27.03.2006, 13:49
Wohnort: Wien

DIV bleibt nur am unteren Ende der Website

Beitragvon jules_twist » 23.08.2006, 10:44

Funktioniert leider nicht.

Durch absolute und bottom bleibt der DIV nur am unteren
Ende der Webiste, aber "klebt" nicht AM FENSTER!

SIEHE --> www.FORM.DE --> Banner unten!
jules_twist
neu hier
 
Beiträge: 9
Registriert: 18.08.2006, 20:04

Beitragvon Laus » 23.08.2006, 11:18

Da du uns weiteren Code deiner Seite vorenthältst hab ich dir hier mal den relevanten Code der Seite FORM.de herauskopiert.
Das CSS dazu
Code: Alles auswählen
/* used in adframe.php only */
.bannerImageContainer {
   position: relative;
   left: 30px;
   width: 570px;
   margin: 5px 0;
   text-align: left;
}

/* used in afProjBanner2Html, contains the banner iframe */
#bannerDiv {
   position: absolute;
   top: 0px;
   left: 0px;
   width: 100%;
   height: 68px;
   background-color: white;
   border-top: 4px solid black;
   z-index: 1;
}
#bannerIFrame {
   width: 100%; height: 68px; background-color: transparent;
}

Der html Teil
Code: Alles auswählen
<div id="bannerDiv" style="display: none; visibility: hidden;" caller=""><iframe id="bannerIFrame" marginWidth="0" marginHeight="0" src="die Url des Banners" frameBorder="0" scrolling="no"></iframe></div>

Und der des banners Selbst

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>Ad Frame</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="css/w3.main.css" type="text/css">
</head>

<body>
<div class="bannerImageContainer">
<a href="Banner Url" target="_blank"><img src="data/t/TE_banner_468x60.gif" width="468" height="60" border="0"></a></div>
</body>
</html>
Lachen ist kein schlechter Anfang und bei weitem das beste Ende.
(Oscar Wilde)
Benutzeravatar
Laus
Moderator
 
Beiträge: 1229
Registriert: 25.02.2006, 00:30
Wohnort: Furth im Wald


Moderatoren: Laus, Moderatoren

Ähnliche Beiträge zu "Wie erstellt man diesen Banner?"

Zurück zu: CSS für Fortgeschrittene

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 2 Gäste