Bild im Footer

[AnnasKramkiste]

Moin moin,

ich hatte früher ein Forum mit dem DirtyBoard 2.0 Style und dort im Footer ein Bild eingesetzt.
http://www.epos-gilde.de/wacken/index.php

Dieses Bild möchte ich nun halbwegs wieder im proSilver für 3.1.5 haben, nur leider weiß ich nicht genau wie...
(probiere da grad ein bisschen aus, also nicht über die Farbgebung wundern)
http://www.annadannhauer.de/CampDavid/

Es wäre schön, wenn das Bild zentriert wäre, das ist im Moment etwas nach rechts verschoben. Habe wider besseren Wissens overall_footer.html verändert. Allerdings kommt mir das komisch vor.

Würd mich über eure Hilfe freuen

Liebe Grüße aus Hamburch,
Anna

[BNa]

zeig doch mal deine overall_footer.html, damit wir da was reinfriemeln können..

edit: reschdchreipunk

[AnnasKramkiste]

Naja, es ist nur ein

Code: Alles auswählen

<img src= styles/prosilver/theme/images/bg_footer.jpg>

dazwischen gequetscht... Das glaub ich aber nicht, dass das richtig ist.
Ansonsten ist das die ganz normale proSilver Datei.

Code: Alles auswählen

		<!-- EVENT overall_footer_content_after -->
	</div>

<!-- EVENT overall_footer_page_body_after -->

<div id="page-footer" role="contentinfo">
	<!-- INCLUDE navbar_footer.html -->
 
	<div class="copyright">
		<!-- EVENT overall_footer_copyright_prepend -->
		{CREDIT_LINE}
		<!-- IF TRANSLATION_INFO --><br />{TRANSLATION_INFO}<!-- ENDIF -->
		<!-- EVENT overall_footer_copyright_append -->
		<!-- IF DEBUG_OUTPUT --><br />{DEBUG_OUTPUT}<!-- ENDIF -->
		<!-- IF U_ACP --><br /><strong><a href="{U_ACP}">{L_ACP}</a></strong><!-- ENDIF -->
	</div>
<img src= styles/prosilver/theme/images/bg_footer.jpg>
	<div id="darkenwrapper" data-ajax-error-title="{L_AJAX_ERROR_TITLE}" data-ajax-error-text="{L_AJAX_ERROR_TEXT}" data-ajax-error-text-abort="{L_AJAX_ERROR_TEXT_ABORT}" data-ajax-error-text-timeout="{L_AJAX_ERROR_TEXT_TIMEOUT}" data-ajax-error-text-parsererror="{L_AJAX_ERROR_TEXT_PARSERERROR}">
		<div id="darken">&nbsp;</div>
	</div>

	<div id="phpbb_alert" class="phpbb_alert" data-l-err="{L_ERROR}" data-l-timeout-processing-req="{L_TIMEOUT_PROCESSING_REQ}">
		<a href="#" class="alert_close"></a>
		<h3 class="alert_title">&nbsp;</h3><p class="alert_text"></p>
	</div>
	<div id="phpbb_confirm" class="phpbb_alert">
		<a href="#" class="alert_close"></a>
		<div class="alert_text"></div>
	</div>
</div>

</div>

<div>
	<a id="bottom" class="anchor" accesskey="z"></a>
	<!-- IF not S_IS_BOT -->{RUN_CRON_TASK}<!-- ENDIF -->
</div>

<script type="text/javascript" src="{T_JQUERY_LINK}"></script>
<!-- IF S_ALLOW_CDN --><script type="text/javascript">window.jQuery || document.write(unescape('%3Cscript src="{T_ASSETS_PATH}/javascript/jquery.min.js?assets_version={T_ASSETS_VERSION}" type="text/javascript"%3E%3C/script%3E'));</script><!-- ENDIF -->
<script type="text/javascript" src="{T_ASSETS_PATH}/javascript/core.js?assets_version={T_ASSETS_VERSION}"></script>
<!-- INCLUDEJS forum_fn.js -->
<!-- INCLUDEJS ajax.js -->

<!-- EVENT overall_footer_after -->

<!-- IF S_PLUPLOAD --><!-- INCLUDE plupload.html --><!-- ENDIF -->
{$SCRIPTS}

<!-- EVENT overall_footer_body_after -->

</body>
</html>

Beim Zentrieren des header-Bilds musste was in der common.css verändert werden, aber da ist das Bild ja schon vorhanden. Deswegen bin ich mir nicht sicher, was ich jetzt hier beim footer machen muss.

[Crizzo]

Du musst einfach nur das hier beachten: KB:dateiedit und den Bild-HTML-Code auch richtig schreiben: http://wiki.selfhtml.org/wiki/Img

[Talk19zehn]

Hi, wenn ich das richtig entdeckte, hast du die ID --> page-footer neu deklariert. Das kann dann rechnerisch natürlich nicht passen, da du hierin diese Werte

Code: Alles auswählen

#page-footer {
    clear: both;
    margin: -1px auto;
    min-height: 300px;
    min-width: 950px;
    padding: 0 20px;
    width: 950px;
}

nutzt und abweichende Werte als in der ID --> wrap ansetzt, jedoch innerhalb von wrap agierst. Setze #page-footer deshalb bitte auf den Ursprung zurück.

Ich würde anders verfahren, zumal "die abgeschnittenen Beine des rechten Bildes" etwas merkwürdig anmuten. Keine fertige Idee: Bitte teste, prüfe und passe an. Nur auf die Schnelle mal geschaut ....

Neu (!) füge hinzu common.css

Code: Alles auswählen

.myownpage-footer {
    clear: both;
    margin: -1px auto;
    max-width: 1152px;
    min-height: 300px;
    min-width: 625px;
    padding: 20px;
}
.myfooterlogo img {
   max-width: 64%;
   height: auto;
}

overall_footer.html suche </body> und füge davor ein:

Code: Alles auswählen

   <div class="myownpage-footer">
      <div class="myfooterlogo" style="text-align:center;"><img src="{T_THEME_PATH}/images/bg_footer.jpg" alt="" /></div>
   </div>

BTW:
Den Pfad {T_THEME_PATH} --> bitte korrekt anpassen --> <img src="{T_THEME_PATH}/images/bg_footer.jpg" alt="" />, da ich nur mit Firebug agierte.

M.E. musst du noch mit padding, text-align:center "rangieren".

Grüße

[AnnasKramkiste]

Moin,

vielen Dank Talk19zehn, das hat mir schon mal geholfen Ich hab leider nicht so viel Ahnung davon, mach das nur hobbymäßig
Das Bild wird jetzt kleiner angezeigt als normal, kannst du mir noch sagen woran das liegt? Sonst probier ich mal ein bisschen rum.
Die Beine waren übrigens anfangs so gewollt, da beim anderen Style dort direkt Seitenschluss war. Muss ich jetzt natürlich ändern

EDIT: Ah, habs kapiert mit der Größe ^^

Vielen Dank noch mal!

LG,
Anna

[Talk19zehn]

Moin, moin, - ach so.

Code: Alles auswählen

   <div class="myownpage-footer">
      <div class="myfooterlogo" style="text-align:center;"><img src="./images/bg_footer.jpg" alt="" /></div>
   </div>

Um die Grafik ganz am Ende zu positionieren kannst du meiner Auffassung nach das padding in der Klasse body und dem neuen Footer testweise auf Null setzen. Und text-align: center weise besser der Klasse direkt zu.

denke bitte daran, dass du das responisve Layout anpassen solltest.

Ungefähr so: einfach mal ausprobieren (noch kein fertiger Code) .... Teste was passiert, wenn du das Browserfenster verkleinerst und aufziehst.

Code: Alles auswählen

/* responsive design */
@media only screen and (max-width: 768px), only screen and (max-device-width: 768px) {

	.myownpage-footer {
		clear: both;
		margin: -1px auto;
		width: 94%;
		padding: 0px;
	}
	.myfooterlogo img {
		max-width: 60%;
		height: auto;
	}
}

... bzw. teste hier: http://bradfrost.com/demo/ish/?url=http ... pBB%2F#318 (oben links gib deine Seite an).
Neben Firebug kannst du Web Developer nutzen, um dein Layout auszuwerten, Fehler zu suchen oder so ... Beide AddOns (Firefox) sind wirklich sehr praktisch.

Wahrscheinlich gibt es noch ganz andere Lösungsansätze. Meine genannten Ideen sind unverbindlich und änderbar. Du schaffst das!

LG