Header Logo der Monitor auflösung anpassen?

[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ß

[Miriam]

Was hältst Du für den Anfang von der Idee, Dein div mit der ID headerbar mittig auszurichten? Mittels margin: 0px auto;.

[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.

[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.

[Shorty1968]

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.

[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.

[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?

[Crizzo]

Ich hab dir empfohlen kein width zu benutzen und du machst es trotzdem und jetzt geht es nicht? Verstehe ich das richtig?

[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?

[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?