Seite 1 von 4
Header Logo der Monitor auflösung anpassen?
Verfasst: 17.12.2012 16:20
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ß
Re: Header Logo der Monitor auflösung anpassen?
Verfasst: 17.12.2012 18:23
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;.
Re: Header Logo der Monitor auflösung anpassen?
Verfasst: 17.12.2012 19:08
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:
Ich habe es auch schon mit
margin-left: auto;margin-right: auto; versucht,es wird einfach Mittig gesetzt.
Re: Header Logo der Monitor auflösung anpassen?
Verfasst: 17.12.2012 19:19
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.
Re: Header Logo der Monitor auflösung anpassen?
Verfasst: 17.12.2012 19:22
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.
Re: Header Logo der Monitor auflösung anpassen?
Verfasst: 17.12.2012 19:25
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.
Re: Header Logo der Monitor auflösung anpassen?
Verfasst: 17.12.2012 19:58
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?
Re: Header Logo der Monitor auflösung anpassen?
Verfasst: 17.12.2012 20:10
von Crizzo
Ich hab dir empfohlen kein
width zu benutzen und du machst es trotzdem und jetzt geht es nicht? Verstehe ich das richtig?
Re: Header Logo der Monitor auflösung anpassen?
Verfasst: 17.12.2012 20:17
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?
Re: Header Logo der Monitor auflösung anpassen?
Verfasst: 22.12.2012 00:09
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?