Header Logo der Monitor auflösung anpassen?

In diesem Forum kann man Fragen zur Programmierung stellen, die bei der Entwicklung von Mods für phpBB 3.0.x oder dem Modifizieren des eigenen Forums auftauchen.
Forumsregeln
phpBB 3.0 hat das Ende seiner Lebenszeit überschritten
phpBB 3.0 wird nicht mehr aktiv unterstützt. Insbesondere werden - auch bei Sicherheitslücken - keine Patches mehr bereitgestellt. Der Einsatz von phpBB 3.0 erfolgt daher auf eigene Gefahr. Wir empfehlen einen Umstieg auf die neuste phpBB-Version, welches aktiv weiterentwickelt wird und für welches regelmäßig Updates zur Verfügung gestellt werden.
Benutzeravatar
Shorty1968
Mitglied
Beiträge: 1894
Registriert: 08.09.2011 17:37

Header Logo der Monitor auflösung anpassen?

Beitrag von Shorty1968 »

Hallo ich möchte mein Header Logo der Besucher auflösung anpassen,aber leider weiss ich nicht wie ich das genau machen muss.

Meine Auflösung ist 17" 1366x768 aber andere habenz.b. 19 " 1280 x1024 Px bei denen ist mein Logo nach Rechts versetzt und es entsteht unten ein Scrollbalken.

Kann mir bitte jemand sagen wie ich das machen kan,ich habe da leider keine ahnung und Google sagt nichts darüber wie es beim phpbb gemacht werden muss/sollte.

Link zu Demo Zwecken:
http://www.phpbb-service.de/portal.php

Gruß
Benutzeravatar
Miriam
Mitglied
Beiträge: 12310
Registriert: 13.10.2004 07:18
Kontaktdaten:

Re: Header Logo der Monitor auflösung anpassen?

Beitrag von Miriam »

Was hältst Du für den Anfang von der Idee, Dein div mit der ID headerbar mittig auszurichten? Mittels margin: 0px auto;.
Gruss, Miriam.
Ich schmeiß' alles hin und...
... lasse es liegen
Benutzeravatar
Shorty1968
Mitglied
Beiträge: 1894
Registriert: 08.09.2011 17:37

Re: Header Logo der Monitor auflösung anpassen?

Beitrag von Shorty1968 »

Hallo meinst du es so.

Öffne style/prosilver/templates/overall_header.html finde:

Code: Alles auswählen

<a href="{U_INDEX}" title="{L_INDEX}" id="logo">{SITE_LOGO_IMG}</a>
				<h1>{SITENAME}</h1>
				<p>{SITE_DESCRIPTION}</p>
				<p class="skiplink"><a href="#start_here">{L_SKIP}</a></p>
Ersetze es mit:

Code: Alles auswählen

<div id="headerbar">
				<a href="{U_INDEX}" title="{L_INDEX}" id="logo">{SITE_LOGO_IMG}</a>
				<h1>{SITENAME}</h1>
				<p>{SITE_DESCRIPTION}</p>
				<p class="skiplink"><a href="#start_here">{L_SKIP}</a></p>
			</div>
öffne style/prosilver/themes/color.css finde:

Code: Alles auswählen

.headerbar {
	background-image: url("{T_THEME_PATH}/images/ban.png");
	background-position:center;
	background-repeat: no-repeat;
	width: 1300px;
	height: 255px;
	color: transparent;
Fürge darunter ein:

Code: Alles auswählen

margin: 0px auto;
Ich habe es auch schon mit margin-left: auto;margin-right: auto; versucht,es wird einfach Mittig gesetzt.
Zuletzt geändert von Shorty1968 am 17.12.2012 19:20, insgesamt 1-mal geändert.
Benutzeravatar
Crizzo
Administrator
Administrator
Beiträge: 11982
Registriert: 19.05.2005 21:45
Kontaktdaten:

Re: Header Logo der Monitor auflösung anpassen?

Beitrag von Crizzo »

Nein, du brauchst ein dynamisch Breites Element, welches bei schmäleren Browserfenstern (und nur das zählt, Auflösung sagt nicht viel, Scrollbar, Toolbar und Co werden noch abgezogen und nicht jeder surft in Vollbild) einfach schmäler wird und das als Hintergrundbild oder <img>-Bild eingebundene Logo wird dann einfach seitlich abgeschnitten.

1300px ist deutlich zu breit. Ich für meinen Teil surfe bei verfügbaren 1920px in der Breite mit effektiven 1185px in der Breite.
Benutzeravatar
Shorty1968
Mitglied
Beiträge: 1894
Registriert: 08.09.2011 17:37

Re: Header Logo der Monitor auflösung anpassen?

Beitrag von Shorty1968 »

BlackHawk87 hat geschrieben:Nein, du brauchst ein dynamisch Breites Element, welches bei schmäleren Browserfenstern (und nur das zählt, Auflösung sagt nicht viel, Scrollbar, Toolbar und Co werden noch abgezogen und nicht jeder surft in Vollbild) einfach schmäler wird und das als Hintergrundbild oder <img>-Bild eingebundene Logo wird dann einfach seitlich abgeschnitten.
Wie bekomme ich das hin?

Ich habe schon versucht das Logo schmäler zu machen,aber auch dann zieht es nach rechts raus.
Benutzeravatar
Crizzo
Administrator
Administrator
Beiträge: 11982
Registriert: 19.05.2005 21:45
Kontaktdaten:

Re: Header Logo der Monitor auflösung anpassen?

Beitrag von Crizzo »

Ohne width und ohne float ist ein Blockelement immer genauso so breit, wie es margin, padding und der vorhandene Platz zu lässt. Also im Urfall: 100% der verfügbaren Breite.

Wenn du das Element eben so selbst die Breite bestimmen lässt, kannst du ihm ein breites Logo geben und overflow:hidden (ungetestet) oder eben per "background-image" einbinden. Letzteres lässt sich natürlich auch zentrieren. Natürlich müssen die Eltern- und Kindelemente das auch mitmachen.
Benutzeravatar
Shorty1968
Mitglied
Beiträge: 1894
Registriert: 08.09.2011 17:37

Re: Header Logo der Monitor auflösung anpassen?

Beitrag von Shorty1968 »

ich habe in der color.css ein width angegeben mit der Breite des Logos.

Ich bekomme es nicht hin,welche Grösse würdet ihr für das Logo nehmen?
Benutzeravatar
Crizzo
Administrator
Administrator
Beiträge: 11982
Registriert: 19.05.2005 21:45
Kontaktdaten:

Re: Header Logo der Monitor auflösung anpassen?

Beitrag von Crizzo »

Ich hab dir empfohlen kein width zu benutzen und du machst es trotzdem und jetzt geht es nicht? Verstehe ich das richtig? :-?
Benutzeravatar
Shorty1968
Mitglied
Beiträge: 1894
Registriert: 08.09.2011 17:37

Re: Header Logo der Monitor auflösung anpassen?

Beitrag von Shorty1968 »

nein ich wollte damit sagen,das ich schon vorher eins eingebaut hatte,aber nun nach deinem Post ist es draußen.

Ich habe es nun denke ich soweit hinbekommen,kann mal bitte jemand mit einer anderen auflösung schauen ob es nun besser aussieht?
Benutzeravatar
Shorty1968
Mitglied
Beiträge: 1894
Registriert: 08.09.2011 17:37

Re: Header Logo der Monitor auflösung anpassen?

Beitrag von Shorty1968 »

ich habe es nun auch noch mal mit Javascript versucht,in dem ich eine angepasste css Datei anzeigen lassen möchte wenn der User auf der Seite ist,aber dieser Code Lädt die css Datei nicht:

Code: Alles auswählen

<script type="text/javascript">
var gespeichert = "nichts gespeichert";
if (document.cookie) {
  gespeichert = document.cookie;
} else {
document.cookie = "<link rel="stylesheet" type="text/css" href="ban2.css">" + document.lastModified;
}
alert(document.lastModified + " - " + gespeichert);

var gespeichert = "nichts gespeichert";
if (document.cookie) {
  gespeichert = document.cookie;
} else {
document.cookie = "<link rel="stylesheet" type="text/css" href="ban2.css">" + document.lastModified;
}
alert(document.lastModified + " - " + gespeichert);

if (screen.width == 1024) {
document.write('<link rel="stylesheet" type="text/css" href="ban2.css">');
alert("Wenn sie auf OK Klicken wird die Seite in 1024 x 768 geladen!");
}

else if (screen.width == 1280) {
document.write('<link rel="stylesheet" type="text/css" href="ban3.css">');
alert("Wenn sie auf OK Klicken wird die Seite in 1280 x 1024 geladen!");
}
</script>
Ich möchte den Code so machen,das das Popup Fenster weg ist,dazu müsste ich warscheinlich nur das alert raus löchen denke ich,aber die css Datei wird so auch nicht geladen was ist da Falsch?

Dann wollte ich mich mal an Responsive Design versuchen,da kenne ich noch überhaupt nicht und ich denke das habe ich auch falsch verstanden,den das was ich gefunden habe habe ich so verstanden das in die overal_header.html man das nur einbinden muss:

Code: Alles auswählen

<link rel="stylesheet" type="text/css" media="(max-device-width: 1024x768)" href="{T_THEME_PATH}/ban2.css" />
aber auch hier wird die css Datei nicht geladen,kann mir bitte jemand helfen das um zu setzen?
Antworten

Zurück zu „[3.0.x] Mod Bastelstube“