Seite 1 von 1

Bild oben links einfügen (overall_header)

Verfasst: 15.11.2010 22:35
von o0Pascal0o
Hallo,

ich möchte ein Bild oben links einfügen. Der klick auf das Bild soll irgendwohin verlinken. Das klappt auch soweit mit dem verlinken. Aber das Bild wird nicht angezeigt. Nur der Text vom onmouseover. Habe das hier eingefügt in die overall_header von meinem template:

hinter dem hier:

Code: Alles auswählen

<script type="text/javascript" src="{T_TEMPLATE_PATH}/ca_scripts.js"></script>

Code: Alles auswählen

    <a href="MeinLink"
    target="_blank"><img
    style="border: 0px solid ; width: 256px; height: 256px;"
    src="styles/etechgray/imageset/MeinBild.png"
    alt="Mein Onmouseovertext"></a>
danach kommt dann das hier im code der overall_header:

Code: Alles auswählen

</head>
Was mache ich falsch?

Re: Bild oben links einfügen (overall_header)

Verfasst: 15.11.2010 22:38
von dagobert50gold
Hallo,

mache den Link mal in den body-Bereich. Im head-Bereich sind nur solche Sachen wie Skripte, ...

Re: Bild oben links einfügen (overall_header)

Verfasst: 15.11.2010 22:47
von o0Pascal0o
Danke habs gemacht. Aber das Problem bleibt dann natürlich bestehen. Ich habe jetzt mal anstelle iner png-Datei eine gif-Datei benutzt - und jetzt funkoniert es.

Allerdings wird der Hintergrund nach unten geschoben. Wie kann ich das verhindern? Das normale site_logo.png verschiebt ja den Hintergrund auch nicht nach unten(sondern ist als gif mit unsichtbaren Hintergrund über dem Hintergrund). Der neue Buttom soll praktisch links neben dem Site_logo sein. Nicht darüber, wie jetzt.. jetzt ist er oben links. Also auch mit unsichtbarem Hintergrund(hat das Bild) über dem Hintergrund sein.

Re: Bild oben links einfügen (overall_header)

Verfasst: 16.11.2010 00:39
von Metzle
Hallo,

pack das Bild mal in den gleichen div-Container/die gleiche Tabelle wie das Logo, das wäre mal eine Maßnahme, die du probieren könntest.
Ein Link zum Forum kann auch nicht schaden.

Re: Bild oben links einfügen (overall_header)

Verfasst: 16.11.2010 08:51
von o0Pascal0o
Du meinst aber schon, in die overall_header & dort in den div-container. Ich habe das mal so gemacht:

Code: Alles auswählen

</head>
<body class="{S_CONTENT_DIRECTION}">

<a name="top"></a>

<table border="0" cellspacing="0" cellpadding="0" width="{$CA_WIDTH}" id="maintable" align="center">
<tr>
        <td id="logorow" align="center"><div id="logotop">
                <a href="{U_INDEX}">{SITE_LOGO_IMG}</a>
        </div></td>
</tr>
<tr>
        <td id="logorow" align="left"><div id="logotop2">
                <a href="{U_INDEX}">{CHAT.GIF}</a>
        </div></td>
</tr>
<a href="MeinLink"
    target="_blank"><img
    style="border: 0px solid ; width: 256px; height: 256px;"
    src="styles/etechgray/imageset/MeinBild.gif"
    alt="Mein Onmouseovertext"></a>
<tr>
        <td class="navrow">
                <!-- IF not S_IS_BOT -->
Aber am Ergebnis änder sich nichts, wie gewünscht(Template refreshed). Alles bleibt beim Alten, bis auf, dass jetzt unterhalb des Site-Logos, ein Text erscheint "MeinBild.gif" - dort kann ich auch den Link aufrufen. Also jetz 2x. 1x ganz oben links und 1x unterhalb vom Sitelogo oberhalb der Buttons: "Registrieren • FAQ • Suche • Anmelden".
(Site ist noch offline) Hier mal ein Bild davon: http://img44.imageshack.us/img44/9638/logotpc.jpg (67kb)
Und so soll es aussehen: http://img600.imageshack.us/img600/7747/logo2x.jpg (71kb)

Re: Bild oben links einfügen (overall_header)

Verfasst: 16.11.2010 10:14
von Talk19zehn
Hallo o0Pascal0o,
soweit ich erkenne, hast Du weder eine neue Zeile noch eine neue Zelle geöffnet. Ich meine, dass daran die Darstellung zunächst einmal scheitert. Des Weiteren hast Du u.a. die Grafikgröße mit 256px angegeben.

Deine Tabelle auszugsweise: In der hast Du versehentlich nach dem Zeilenende < / tr > Deine Verlinkung eingesetzt, - jedoch dadurch eine neue Zeile "erzwungen", die in der Form einer Tabelle allerdings "wenig Sinn" macht . Du müsstest die Tabelle einfach noch entsprechend anpassen.

Code: Alles auswählen

<table border="0" cellspacing="0" cellpadding="0" width="{$CA_WIDTH}" id="maintable" align="center">
<tr>
        <td id="logorow" align="center"><div id="logotop">
                <a href="{U_INDEX}">{SITE_LOGO_IMG}</a>
        </div></td>
</tr>
<tr>
        <td id="logorow" align="left"><div id="logotop2">
                <a href="{U_INDEX}">{CHAT.GIF}</a> 
        </div></td>
</tr>
<a href="MeinLink"
    target="_blank"><img
    style="border: 0px solid ; width: 256px; height: 256px;"
    src="styles/etechgray/imageset/MeinBild.gif"
    alt="Mein Onmouseovertext"></a>
<tr>

Wenn ich mich nicht täusche, sollte es anhand des Musters möglich sein, Dein Konstrukt anzupassen. Probiere es bitte aus. Beachte bitte: Hierbei habe ich aus zeitlichen Gründen keinen Bezug auf die Pfadverknüpfung Deines Bildes bzw. auf das von Dir verwendete Style genommen.
Beispiel einer Tabelle: 8 Zellen nebeneinander bei einer Breitenaufteilung von 100%

Code: Alles auswählen

<table width='100%' cellpadding='4' cellspacing='0'>
<tr>
<td style="text-align:center" width='10%'><img src="{T_THEME_PATH}/images/icon_home.gif" width="12" height="11" alt="..." />&nbsp;<a href='#'><b>Eine Linkbezeichnung</b></a></td>
<td style="text-align:center" width='10%'><img src="{T_THEME_PATH}/images/icon_home.gif" width="12" height="11" alt="..." />&nbsp;<a href='#'><b>Eine Linkbezeichnung</b></a></td>
<td style="text-align:center" width='10%'><img src="{T_THEME_PATH}/images/icon_home.gif" width="12" height="11" alt="..." />&nbsp;<a href='#'><b>Eine Linkbezeichnung</b></a></td>
<td style="text-align:center" width='10%'><img src="{T_THEME_PATH}/images/icon_home.gif" width="12" height="11" alt="..." />&nbsp;<a href='#'><b>Eine Linkbezeichnung</b></a></td>
<td style="text-align:center" width='10%'><img src="{T_THEME_PATH}/images/icon_home.gif" width="12" height="11" alt="..." />&nbsp;<a href='#'><b>Eine Linkbezeichnung</b></a></td>
<td style="text-align:center" width='10%'><img src="{T_THEME_PATH}/images/icon_home.gif" width="12" height="11" alt="..." />&nbsp;<a href='#'><b>Eine Linkbezeichnung</b></a></td>
<td style="text-align:center" width='10%'><img src="{T_THEME_PATH}/images/icon_home.gif" width="12" height="11" alt="..." />&nbsp;<a href='#'><b>Eine Linkbezeichnung</b></a></td>
<td style="text-align:center" width='10%'><img src="{T_THEME_PATH}/images/icon_home.gif" width="12" height="11" alt="..." />&nbsp;<a href='#'><b>Eine Linkbezeichnung</b></a></td>
</tr>
</table>

Vgl. bitte.: http://de.selfhtml.org/html/tabellen/index.htm




Viele Grüße

Re: Bild oben links einfügen (overall_header)

Verfasst: 16.11.2010 21:41
von o0Pascal0o
danke Dir. Für sich genommen klappt das. Aber die absolute Position stimmt noch nicht. Es ist immer noch über dem Forenlogo (logo_side.png). Es soll aber daneben sein. Jetzt weiß ich zwar, wie ich ein 2te Bild, bei Bedard neben mein 1. Bild bekomme, aber wie ich das 1. Bild einfüge, weiß ich nicht.

So sieht es jetzt aus(oben sind nebeneinander viele minilinks): http://img135.imageshack.us/img135/6163/overall1f.jpg
Und so soll es aussehen(ganz oben die minilinks wegdenken): http://img339.imageshack.us/img339/6541/overall2.jpg

so sieht der code dazu aus momentan:

Code: Alles auswählen

</head>
<body class="{S_CONTENT_DIRECTION}">

<table width='100%' cellpadding='4' cellspacing='0'>
<td style="text-align:center" width='10%'><img src="{T_THEME_PATH}/images/chat.gif" width="12" height="11" alt="..." />&nbsp;<a href='#'><b>Eine Linkbezeichnung</b></a></td>
<td style="text-align:center" width='10%'><img src="{T_THEME_PATH}/images/chat.gif" width="12" height="11" alt="..." />&nbsp;<a href='#'><b>Eine Linkbezeichnung</b></a></td>
<td style="text-align:center" width='10%'><img src="{T_THEME_PATH}/images/chat.gif" width="12" height="11" alt="..." />&nbsp;<a href='#'><b>Eine Linkbezeichnung</b></a></td>
<td style="text-align:center" width='10%'><img src="{T_THEME_PATH}/images/chat.gif" width="12" height="11" alt="..." />&nbsp;<a href='#'><b>Eine Linkbezeichnung</b></a></td>
<td style="text-align:center" width='10%'><img src="{T_THEME_PATH}/images/chat.gif" width="12" height="11" alt="..." />&nbsp;<a href='#'><b>Eine Linkbezeichnung</b></a></td>
<td style="text-align:center" width='10%'><img src="{T_THEME_PATH}/images/chat.gif" width="12" height="11" alt="..." />&nbsp;<a href='#'><b>Eine Linkbezeichnung</b></a></td>
<td style="text-align:center" width='10%'><img src="{T_THEME_PATH}/images/chat.gif" width="12" height="11" alt="..." />&nbsp;<a href='#'><b>Eine Linkbezeichnung</b></a></td>
<td style="text-align:center" width='10%'><img src="{T_THEME_PATH}/images/chat.gif" width="12" height="11" alt="..." />&nbsp;<a href='#'><b>Eine Linkbezeichnung</b></a></td>
</tr>
</table>

<a name="top"></a>

<table border="0" cellspacing="0" cellpadding="0" width="{$CA_WIDTH}" id="maintable" align="center">
<tr>
        <td id="logorow" align="center"><div id="logotop">
                <a href="{U_INDEX}">{SITE_LOGO_IMG}</a>
        </div></td>
</tr>
<tr>
Schon klar, dass ich nicht zig Bilder brauche und ich einige Zeilen löschen kann. Eines würde reichen.. aber die Grundposition stimmt ja auch noch nicht.

vielen Dank

Pascal

Re: Bild oben links einfügen (overall_header)

Verfasst: 17.11.2010 10:21
von Talk19zehn
Hello


ganz so einfach ist das leider nicht. Du müsstest Bilder übereinander stapeln (CSS) oder eben in der Tabellentechnik Tabellenzellen miteinander verbinden um einen eigenen "Kopfbereich" zu schaffen. Daher der Link zu Self.html.
Ich dachte, Du findest dort geeignete Beispiele.
Tabellenzellen miteinander verschachteln und sie mit Hintergründen auszukleiden, ist gar nicht so schwer.
In wieweit Du Deine Tabellen anpassen möchtest, kann ich nicht beurteilen. Probiere es einfach aus.
Hier findest sind ebenso Anregungen und Beispiele: Ob sie für Dein Style brauchbar sind, weiß ich nicht.

http://www.juergens-workshops.de/tutori ... w=htmltab1
http://www.juergens-workshops.de/tutori ... tabellen12

Mit der Linkzeile oben hättest Du allerdings eine kleine Soforthilfe. Diese könntest Du im Anschluss bspw. vom Logo unterbringen und bestücken. Wenn Du keine 8 Zellen benötigst, lösche die Zeilen entsprechend.
Ergänze in Deiner neuen Tabelle bitte noch nach dem öffnenden table-tag <tr> laut Muster. Ich hatte die Tabelle später noch um diesen Eintrag ergänzt, da ich ihn zuvor vergaß - Sorry.

So meinte ich das:
Du musst ja nicht den vorgegebenen Tabellenbereich des Styles in der Form nutzen. Du baust ihn um, passt ihn an oder kreierst eine eigene Tabelle, die zum Design passt.

Viele Grüße



Edit: 17.11.2010 15:57
Mir fällt ein, dass ich auf Subsilver2 bezogen mal jenes einfache Tabellenkonstrukt testweise verbaut hatte. Die Idee habe ich jedoch verworfen und gar nicht weiter verfolgt, nicht ausgearbeitet. Vielleicht ist sie ja doch für irgendetwas brauchbar?

Subsilver2

Code: Alles auswählen

 
<table width="100%" border="1" cellspacing="1" cellpadding="1">
<tr>
<td><a href="{U_INDEX}">{SITE_LOGO_IMG}</a></td>
<td width="50%" align="left"><h1>{SITENAME}</h1><span class="gen">{SITE_DESCRIPTION}</span></td>
<td>
Nützliche Links:<br /> 
<a href="http://www.wikipedia.org/">Wikipedia</a><br />
<a href="#URL">Dein Linktext</a><br />
<a href="#URL">Dein Linktext</a><br />
<a href="#URL">Ein langer Linktext</a><br />
<a href="{U_FAQ}"><img src="{T_THEME_PATH}/images/icon_mini_faq.gif" width="12" height="13" alt="..." /> {L_FAQ}</a><br />
<br />
</td>
</tr>
</table>
Bezogen auf Deine Idee, könnte die Tabelle ggf. wie folgt lauten: Habe es nicht getestet und es stellt kein fertiges Produkt dar. Dein Style nutze ich nie…  daher alles ohne Gewähr und nur als eine Art weitere kleinere Arbeitsunterlage gedacht, mehr nicht.

Code: Alles auswählen

 <table border="1" cellspacing="1" cellpadding="1" width="100%" id="maintable" align="center">
<tr>
<td id="logorow" align="center"><div id="logotop"><a href="{U_INDEX}">{SITE_LOGO_IMG}</a></div></td>
<td width="50%" align="left" id="logorow" align="left"><div id="logotop2"><a href="{U_INDEX}">{CHAT.GIF}</a></div></td>
<td>
Nützliche Links:<br /> 
<a href="#URL" target="_blank"><img style="border: 0px solid; width: "12px" height: "13px" src="styles/etechgray/imageset/MeinBild.gif" alt="..."></a><br />
<a href="http://www.wikipedia.org/">Wikipedia</a><br />
<a href="#URL">Dein Linktext</a><br />
<a href="{U_FAQ}"><img src="{T_THEME_PATH}/images/icon_mini_faq.gif" width="12" height="13" alt="..." /> {L_FAQ}</a><br />
<br />
</td>
</tr>
</table>
Es sollten sich drei nebeneinander liegend bestückte Zellen ergeben. Wenn nicht, habe ich Pech :oops: gehabt und Du musst nach einer Lösung suchen, - ggf. experimentieren. Ich kenne die verwendeten IDs Deines verwendeten Styles leider wirklich nicht. Evtl. ist gar das Logotop (Nr.1) in seiner Größe noch zu verändern.
Die Zellenbreite width="50%" bitte nach /bei Bedarf anpassen. Vergiss nicht verschiedene Auflösungen zu prüfen. Das Attribut "Title" wäre noch ganz schön?!
Hoffentlich habe ich jetzt keine groben Fehler gemacht. "Tabellentechnik" ist nämlich etwas länger her. :lol:

Hattest Du eigentlich den Ansatz von Metzle nicht noch einmal ausprobiert? Das war doch bereits ein lobender Hinweis, der offenbar nur anfänglich nicht ganz richtig umgesetzt wurde.
Grüße

Re: Bild oben links einfügen (overall_header)

Verfasst: 17.11.2010 21:58
von o0Pascal0o
Metzle hat geschrieben: pack das Bild mal in den gleichen div-Container/die gleiche Tabelle wie das Logo
So?

Code: Alles auswählen

<table border="0" cellspacing="0" cellpadding="0" width="{$CA_WIDTH}" id="maintable" align="center">
<tr>
        <td id="logorow" align="center"><div id="logotop">
                <a href="{U_INDEX}">{SITE_LOGO_IMG}</a>
<a href="MeinLink"
    target="_blank"><img
    style="border: 0px solid ; width: 56px; height: 56px;"
    src="styles/etechgray/imageset/MeinBild.png"
    alt="Mein Onmouseovertext"></a>
        </div></td>
</tr>
Talk19zehn hat geschrieben: Mit der Linkzeile oben hättest Du allerdings eine kleine Soforthilfe. Diese könntest Du im Anschluss bspw. vom Logo unterbringen und bestücken.
Im Anschluß vom Logo unterbringen? In welchem Aschluß meinst du? Hinter dieser Zeile:

Code: Alles auswählen

<td id="logorow" align="center"><div id="logotop">
Oder die Bilder zusammenfügen? Dann hätte ich aber nur 1 Link - und außerdem wäre der dann auch auf dem eigentich leerem Bereich(vom Bild ausgesehen) zu starten.


Ich vermute ich habe mich falsch ausgedrückt. Also es ist nicht so, dass die Bilder übereinander sollen. Guckt mal auf dieses Bild. So soll es aussehen. Das site_logo.gif bleibt wo es war - nämlich auf dem Hintergrund von phpBB. Der neue Buttom soll links an den Rand, ebenfalls auf den Hintergrund von phpBB - aber nicht auf das site_logo.gif:
http://img844.imageshack.us/img844/142/overalll.jpg (31kb)