Bild oben links einfügen (overall_header)

Alles zu Styles, Templates, Icons und Smilies für phpBB 3.0.x, sowie allgemeine Designfragen zur Integration von phpBB in bestehende Websites.
phpBB Styles Demo
Forumsregeln
Bei Style spezifischen Fragen ist der Stylename und die Downloadquelle des Styles erforderlich, besser noch die URL vom betroffenen Forum.
Antworten
Benutzeravatar
o0Pascal0o
Mitglied
Beiträge: 819
Registriert: 24.10.2010 21:32

Bild oben links einfügen (overall_header)

Beitrag 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?
phpBB: 3.3.3 De
php: 7.3
db: 5.7-MySQL
Benutzeravatar
dagobert50gold
Gesperrt
Beiträge: 1316
Registriert: 04.11.2009 16:52

Re: Bild oben links einfügen (overall_header)

Beitrag von dagobert50gold »

Hallo,

mache den Link mal in den body-Bereich. Im head-Bereich sind nur solche Sachen wie Skripte, ...
Der kleine phpBB.de-Knigge - unsere HausordnungF1 WebTipp von Dr.DeathF1 WebTipp SQL-Updates
Kein Support per PN! Auch nicht zu den F1WebTipp-SQL-Updates!
Benutzeravatar
o0Pascal0o
Mitglied
Beiträge: 819
Registriert: 24.10.2010 21:32

Re: Bild oben links einfügen (overall_header)

Beitrag 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.
phpBB: 3.3.3 De
php: 7.3
db: 5.7-MySQL
Benutzeravatar
Metzle
Ehemaliges Teammitglied
Beiträge: 10435
Registriert: 08.03.2008 02:50
Wohnort: Waiblingen-Neustadt
Kontaktdaten:

Re: Bild oben links einfügen (overall_header)

Beitrag 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.
Metzle
phpBB.de-Support-Team
Allround-phpBB.de
Benutzeravatar
o0Pascal0o
Mitglied
Beiträge: 819
Registriert: 24.10.2010 21:32

Re: Bild oben links einfügen (overall_header)

Beitrag 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)
phpBB: 3.3.3 De
php: 7.3
db: 5.7-MySQL
Benutzeravatar
Talk19zehn
Ehemaliges Teammitglied
Beiträge: 5041
Registriert: 08.06.2009 12:03

Re: Bild oben links einfügen (overall_header)

Beitrag 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
Adventereigniskalender für phpBB 3.3.x,
Meine persönliche Meinung im Jahr 2024: Im Zenit seiner Popularität wirkt KI zunächst wie eine Blaupause und lässt sich aufgrund der Vielschichtigkeit nicht auf eine einzige Botschaft reduzieren.
Benutzeravatar
o0Pascal0o
Mitglied
Beiträge: 819
Registriert: 24.10.2010 21:32

Re: Bild oben links einfügen (overall_header)

Beitrag 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
phpBB: 3.3.3 De
php: 7.3
db: 5.7-MySQL
Benutzeravatar
Talk19zehn
Ehemaliges Teammitglied
Beiträge: 5041
Registriert: 08.06.2009 12:03

Re: Bild oben links einfügen (overall_header)

Beitrag 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
Adventereigniskalender für phpBB 3.3.x,
Meine persönliche Meinung im Jahr 2024: Im Zenit seiner Popularität wirkt KI zunächst wie eine Blaupause und lässt sich aufgrund der Vielschichtigkeit nicht auf eine einzige Botschaft reduzieren.
Benutzeravatar
o0Pascal0o
Mitglied
Beiträge: 819
Registriert: 24.10.2010 21:32

Re: Bild oben links einfügen (overall_header)

Beitrag 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)
phpBB: 3.3.3 De
php: 7.3
db: 5.7-MySQL
Antworten

Zurück zu „[3.0.x] Styles, Templates und Grafiken“