YourWBB

yourWBB » yourWBB Misc * » Das Proggen » HTML, XHTML, JavaScript & CSS » Werbebanner in Header einbauen?

» Hallo Gast [Anmelden|Registrieren]

Letzter Beitrag | Erster ungelesener Beitrag

3.497 Views | | Thema zu Favoriten hinzufügen

Neues Thema erstellen Antwort erstellen

Werbebanner in Header einbauen?

Autor

Beitrag

« Vorheriges Thema | Nächstes Thema »

Barthez
Mitglied

Dabei seit: 07.07.04
Beiträge: 304
Forenversion: 3.0

Werbebanner in Header einbauen?

Antworten Zitieren Editieren Melden UP

Hi Leute ich möchte gerne über meine Banner Grafik einen Werbebanner mit den Maßen x,y und den Koordinaten x,y legen ... wie stell ich das an ?

der Anfang meines Headertemplates sieht so aus .... wo muß ich jetzt was genau einfügen?
<table style="width:900px" cellpadding="0" cellspacing="1" align="center" border="0" class="tableoutborder">
<tr>
<td class="mainpage" align="center">
<table style="width:100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left" style="background-image: url(images/header_line1.gif); height:17px;"><span class="smallfont></span></td>
<td align="right" style="background-image: url(images/header_line1.gif); height:17px;"><span class="smallfont"><a href="google_sitemap.php">Sitemap</a> <a href="fastindex.html">Fastindex</a></span></td>
</tr>
</table>

<div align="center">
<table width="900" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="2"><div align="center"><img src="{$style['imagefolder']}/header1.gif" alt="Keeperforum.de"></div></td>
</tr>

anschließend kommt der Rest der für die Navi links zuständig ist!

Wär super wenn mir da einer helfen könnte?

Ich danke Euch!

__________________
Gruß
Barthez

Dieser Beitrag wurde 1 mal editiert, zum letzten Mal von Barthez: 18.12.06 21:03.

18.12.06 21:01

E-Mail WWW Finden Als Freund hinzufügen

Schweinebacke Schweinebacke ist männlich

Mitglied

Dabei seit: 06.01.06
Beiträge: 826
Herkunft: Baden Württemberg

Antworten Zitieren Editieren Melden UP

Da hier in die Zelle setzen wo dein header1.gif drin ist.

code:
1:	<div id="banner" style="position:relative; left:Xpx; top:Ypx; width:Xpx; height:Ypx; overflow:hidden; z-index:100;"><img src="banner.gif" alt="Werbebanner" boder="0"></div>

Durch position:relative; wird von dem Zellenrand der Tabelle gemessen.

Das erste div-Tag ist für dein jetzigen Header. Da der 130pix hoch ist gilt für den Werbebanner für den oberen Rand ein minus 130px ( top:-130px; ) wenn der vom Zellenrand aus anfangen soll.

Und so sieht das dann aus:

code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:

<table style="width:900px" cellpadding="0" cellspacing="1" align="center" border="0" class="tableoutborder">
<tr>
<td class="mainpage" align="center">
<table style="width:100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left" style="background-image: url(images/header_line1.gif); height:17px;"><span class="smallfont></span></td>
<td align="right" style="background-image: url(images/header_line1.gif); height:17px;"><span class="smallfont"><a href="google_sitemap.php">Sitemap</a> <a href="fastindex.html">Fastindex</a></span></td>
</tr>
</table>

<div align="center">
<table width="900" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td colspan="2"><div id="banner" style="position:relative; left:0px; top:0px; width:898px; height:130px; overflow:hidden; z-index:90;"><img src="{$style['imagefolder']}/header1.gif" alt="Keeperforum.de">
    <div id="banner" style="position:relative; left:0px; top:-130px; width:X px; height:Y px; overflow:hidden; z-index:100;"><img src="banner.gif" alt="Werbebanner" boder="0"></div></div></td>
  </tr>

Dieser Beitrag wurde 1 mal editiert, zum letzten Mal von Schweinebacke: 18.12.06 22:32.

18.12.06 22:30

E-Mail Finden Als Freund hinzufügen

Barthez
Mitglied

Dabei seit: 07.07.04
Beiträge: 304
Forenversion: 3.0

Themenstarter Thema begonnen von Barthez

Antworten Zitieren Editieren Melden UP

ja danke das funktioniert soweit ... was aber leider irgednwie nicht geht ist das der Banner weiter nach rechts soll ... dabei habe ich schon überall rumgespielt ... schon komisch!
Was muß ich machen damit er z.B. rechtsbündig ist?

ich habe jetzt die Grafik noch um einen Hyperlink erweitert ... es sieht jetzt so aus!

<div id="banner" style="position:relative; left00px; top:-100px; width:468 px; height:60 px; overflow:hidden; z-index:100;"><a href="http://www.domain.de"><img src="http://www.keeperforum.de/banner/goalkeeping_banner.gif" alt="Werbebanner" border="0"></a></div></div>

__________________
Gruß
Barthez

Dieser Beitrag wurde 1 mal editiert, zum letzten Mal von Barthez: 19.12.06 13:39.

19.12.06 13:32

E-Mail WWW Finden Als Freund hinzufügen

Schweinebacke Schweinebacke ist männlich

Mitglied

Dabei seit: 06.01.06
Beiträge: 826
Herkunft: Baden Württemberg

Antworten Zitieren Editieren Melden UP

Den verschiebst du bei left:0px; 0= ganz Links.

Du kannst auch right:0px statt left:0px; verwenden, dann liegt der Banner ganz Rechts.

Wenn du ihn genau in der Mitte haben möchtest ist ein wenig Rechnen angesagt.

Beispiel Banner 468pix Breit – Header ist 898pix Breit

Dann muss der Banner left:499px; die Hälfte des Headers von links sein. Da der Banner selbst 468pix groß ist muss er um die Hälfte wieder zurückgesetzt werden. Sprich margin-left:-234px; Mit den Angaben liegt es dann genau in der Mitte.

<div id="banner" style="position:relative; left:499px; top:-100px; margin-left:-234px; width:468px; height:60px; overflow:hidden; z-index:100;">

19.12.06 15:24

E-Mail Finden Als Freund hinzufügen

Barthez
Mitglied

Dabei seit: 07.07.04
Beiträge: 304
Forenversion: 3.0

Themenstarter Thema begonnen von Barthez

Antworten Zitieren Editieren Melden UP

der Witz dabei ist wenn ich right gegen left austausche dann passiert gar nichts!?

<div id="banner" style="position:relative; right00px; top:-100px; width:468 px; height:60 px; overflow:hidden; z-index:100;"><a href="http://www.domain.de"><img src="banner.gif" alt="Werbebanner" border="0"></a></div></div></td>

__________________
Gruß
Barthez

Dieser Beitrag wurde 1 mal editiert, zum letzten Mal von Barthez: 19.12.06 16:04.

19.12.06 16:03

E-Mail WWW Finden Als Freund hinzufügen

Schweinebacke Schweinebacke ist männlich

Mitglied

Dabei seit: 06.01.06
Beiträge: 826
Herkunft: Baden Württemberg

Antworten Zitieren Editieren Melden UP

Laut deinem Quelltext steht da right00px; richtig wäre right:0px;

Du hast da eine Null zuviel und einen Doppelpunkt zu wehnig.

19.12.06 16:50

E-Mail Finden Als Freund hinzufügen

Barthez
Mitglied

Dabei seit: 07.07.04
Beiträge: 304
Forenversion: 3.0

Themenstarter Thema begonnen von Barthez

Antworten Zitieren Editieren Melden UP

also ich habe es korrigiert, aber das Ergebnis ist immer noch gleich Null

<div id="banner" style="position:relative; right:0px; top:-100px; width:468 px; height:60 px; overflow:hidden; z-index:100;"><a href="http://www.domain.de"><img src="banner.gif" alt="Werbebanner" border="0"></a></div></div></td>

__________________
Gruß
Barthez

19.12.06 17:03

E-Mail WWW Finden Als Freund hinzufügen

Byteandi Byteandi ist männlich

Mitglied

Dabei seit: 03.09.06
Beiträge: 50
Herkunft: Berlin
Forenversion: 2.3

Antworten Zitieren Editieren Melden UP

HI,

wenn du von deinem keeperforum redest, dann bist du die sache da so ziemlich falsch angegangen.

du hast das jetzt so aufgebaut:

code:

1:
2:
3:
4:

<div id="banner" style="position:relative; left:0px; top:0px; width:898px; height:130px; overflow:hidden; z-index:90;"><img src="images//header1.gif" alt="Keeperforum.de">
    <div id="banner" style="position:relative; right:0px; top:-100px; width:468 px; height:60 px; overflow:hidden; z-index:100;"><a href="http://www.domain.de"><img src="banner.gif" alt="Werbebanner" border="0"></a></div></div>

das kann so nix........

erstens kann man eine id nur einmal vergeben, zweitens wäre es evntuell besser in dem ersten div den header als hintergrundbild einzubinden, das mit dem position:relative ist da schon gnaz gut, also kannst du das zweite div killen und gibst dem <a> tag ein position:absolute; dann kannst du es mit den angaben left/right/top oder bottom pixelgenau ausrichten.

wieso benutzt du da eigentlich z-index... da gibt es doch keinen grund für oder hab ich was übersehen?

hier mal der ungefähre code der alles über nur ein div regelt...:

code:

1:
2:
3:
4:
5:
6:

<div id="banner" style="border:1px solid #f90000; position:relative; left:0px; top:0px; 
		width:898px; height:130px; overflow:hidden; background-image:url(images/header1.gif);">
			<a style='position:absolute; right:100px; top:30px;' href="http://www.domain.de"><img 
		    src="banner.gif" alt="Werbebanner" border="0"/></a></div>

__________________

Tipps zum Thema HTML / XHTML / CSS

19.12.06 21:09

E-Mail WWW Finden Als Freund hinzufügen

Barthez
Mitglied

Dabei seit: 07.07.04
Beiträge: 304
Forenversion: 3.0

Themenstarter Thema begonnen von Barthez

Antworten Zitieren Editieren Melden UP

Hi Andy,

also ich habe da gar nicht so die Ahnung wie man merkt, ich habe nur den Codeschnipsel eingebaut den ich oben von Schweinebacke bekommen habe...

habe jetzt Deinen eingefügt:

<tr>
<td colspan="2"><div id="banner" style="position:relative; left:0px; top:0px; width:898px; height:130px; overflow:hidden; z-index:90;"><img src="{$style['imagefolder']}/header1.gif" alt="Keeperforum.de">
<div id="banner" style="border:1px solid #f90000; position:relative; left:0px; top:0px;
width:898px; height:130px; overflow:hidden; background-image:url(images/header1.gif);">
<a style='position:absolute; right:100px; top:30px;' href="http://www.domain.de"><img
src="http://www.keeperforum.de/banner/goalkeeping_banner.gif" alt="Werbebanner" border="0"/></a></div></td>
</tr>

das Problem ist das man jetzt gar nichts davon sieht!?

__________________
Gruß
Barthez

19.12.06 22:38

E-Mail WWW Finden Als Freund hinzufügen

Byteandi Byteandi ist männlich

Mitglied

Dabei seit: 03.09.06
Beiträge: 50
Herkunft: Berlin
Forenversion: 2.3

Antworten Zitieren Editieren Melden UP

ist ja alles nicht so wild.... diesen Teil musst du auch entfernen

code:
1: 2: 3:	<div id="banner" style="position:relative; left:0px; top:0px; width:898px; height:130px; overflow:hidden; z-index:90;"><img src="{$style['imagefolder']}/header1.gif" alt="Keeperforum.de">

und diesen Teil natürlich anstelle des "images" einfügen -->{$style['imagefolder']}

__________________

Tipps zum Thema HTML / XHTML / CSS

19.12.06 22:53

E-Mail WWW Finden Als Freund hinzufügen

Barthez
Mitglied

Dabei seit: 07.07.04
Beiträge: 304
Forenversion: 3.0

Themenstarter Thema begonnen von Barthez

Antworten Zitieren Editieren Melden UP

ok also das geht jetzt ... aber ich habe um das Banner jetzt einen roten Kasten??

__________________
Gruß
Barthez

19.12.06 22:57

E-Mail WWW Finden Als Freund hinzufügen

Byteandi Byteandi ist männlich

Mitglied

Dabei seit: 03.09.06
Beiträge: 50
Herkunft: Berlin
Forenversion: 2.3

Antworten Zitieren Editieren Melden UP

ups sorry, den hatte ich da mit eingebaut großes Grinsen

das hier muss aus dem style bei banner natuerlich raus

border:1px solid #f90000;

__________________

Tipps zum Thema HTML / XHTML / CSS

19.12.06 23:03

E-Mail WWW Finden Als Freund hinzufügen

Barthez
Mitglied

Dabei seit: 07.07.04
Beiträge: 304
Forenversion: 3.0

Themenstarter Thema begonnen von Barthez

Antworten Zitieren Editieren Melden UP

ok, gute Arbeit ... vielen Dank!

__________________
Gruß
Barthez

19.12.06 23:07

E-Mail WWW Finden Als Freund hinzufügen

Baumstruktur | Brettstruktur

Gehe zu:

Neues Thema erstellen Antwort erstellen

yourWBB » yourWBB Misc * » Das Proggen » HTML, XHTML, JavaScript & CSS » Werbebanner in Header einbauen?