Logo - Position und Größe

[Mountigo]

Hallo,

ich habe ein kleines Problem mit dem header in meinem Forum und hoffe, dass Ihr mir weiterhelfen könnt. Nach längerer Suche und dem Lesen diverser Beiträge konnte ich noch keine Lösung finden.

Link zum Forum: http://forum.mountigo.de/

Verwendetes Template: prosilver

Folgendes Problem
Das Headerbild sollte in dem blaugrauen Kasten mit festen Abständen zu den Rändern liegen. Wird das Browserfenster zusammengeschoben oder hat der Bildschirm nicht eine ganz bestimmte Auflösung, dann passen Bild und Container nicht zusammen. Anders ausgedrückt - wenn der Container sich dynamisch verändert bleibt das Bild unverändert und schiebt über den Container hinaus.
--> Gibt es eine Möglichkeit das Bild entsprechend dynamisch einzubinden, so dass der rechte Rand "abgeschnitten" wird und das Bild immer mit einem definierten Abstand zum Rand des Containers dargestellt wird.

Ich hoffe Ihr versteht was ich meine und könnt mir weiterhelfen.


Vielen Dank im Voraus und Grüße
Mountigo

[Talk19zehn]

Hello Mountigo,

--> Gibt es eine Möglichkeit das Bild entsprechend dynamisch einzubinden,...(...)...

ja, eine solche Möglichkeit gibt es. Ich nutze diese Idee seit langem uneingeschränkt in den Browsern. Jedenfalls habe ich keinen Nachteil bislang entdeckt. Ich weiß gar nicht mehr, ob ich sie ( so oder ähnlich ) in einem Fachbuch oder im Netz gefunden hatte.
Ich erstellte eine Hauptgrafik ( Rose ), eine Füllgrafik ( schmalen Streifen von dem Rosenbildchen ) und eine Nebengrafik ( Puzzle ). Von der Hauptgrafik habe ich einen schmalen Streifen zugeschnitten, die ich als Füllgrafik verwende. Die Hauptgrafik habe ich im nächsten Schritt zu einem Puzzle umgewandelt und die drei Grafiken kennzeichnend der Klasse abgespeichert. Natürlich muss man schauen, wie sich ggf. eine eigene Größenbestimmung auswirkt. Du könntest anhand des Beispiels zunächst einmal versuchen, deine Grafik auf 120px unter Beachtung der Seitenverhältnisse in der Höhe zu beschränken, um zu sehen, was ich meine und wie sich die Darstellung auswirkt. Es gibt sicherlich eine Vielzahl an Programmen, die diese leichten Handhabungen bzw. Umwandlungen ermöglichen. Wichtig ist, eine gleiche Höhe der verwendeten Grafiken. Wobei ich der Auffassung bin, dass eine Höhe von maximal 120px ausreichend bemessen ist, um eine Seitendarstellung in ihrer Höhe nicht unattraktiv zu gestalten. Insbesondere, wenn die Grafik bspw. zusätzlich mit der Klasse Headerbar verknüpft wird. Ohne Gewähr, da ich mir nicht sicher bin, ob sich im Verlauf der Jahre ein Fehler eingeschlichen hat. Neulich hatte ich durch ein vielfaches Kopieren Sacherhalte vertauscht und staunte, was sich ergab und sah den "Wald vor Bäumen nicht", während meiner Fehlersuche. Ratsam ist aus meiner Sicht, sich möglichst an die CSS-Vorgaben, wie bspw. width, zu halten.

Drei Bilder aus der vorhandenen Grafik anfertigen und auf gleiche Höhe ( 120px ) zuschneiden. Die Grafiken links und rechts haben hier die gleiche Breite ( 160px ): Nur ein Beispiel einer Konzeption
Ähnliche Modelle findest du sicherlich unter G++gle.

Bild für den füllenden Bereich:
[ externes Bild ]

Bild linker Bereich:
[ externes Bild ]

Bild rechter Bereich:
[ externes Bild ]



CSS: common.css

Code: Alles auswählen

#logokopf {
background-image: url(http://.../img/belbircorangerosecmm120jw2.jpg);
background-repeat: repeat-x;
background-position: left top;
margin-left: 2px;
background-color: #394E79;
position:relative;
height: 120px;
}

#logokopf_links {
background-image: url(http://.../img/belbircorangerosecmm120wp4.jpg);
background-repeat: no-repeat;
position: absolute;
left: 0;
z-index: 1;
width: 749px;
height: 120px;
}

#logokopf_rechts {
background-image: url(http://.../img/belbircorangerosecmm120kt9.jpg);
top: 0;
background-repeat: no-repeat;
position: absolute;
top: 0;
right: 284px;
z-index: 2;
width: 271px;
height: 120px;
}

Ausgabe

Code: Alles auswählen

<div id="logokopf">
<div id="logokopf_links"></div><!--Ende logokopf_links-->
<div id="logokopf_rechts"></div><!--Ende logokopf_rechts-->
</div><!--Ende logokopf-->

Die Angabe background-color: #deinFarbwert; --> sollte zum Hintergrund der Seite oder Headers ( falls der Bildserver einmal ausfällt ) passen, bitte bedenkend berücksichtigen und anstatt der vorgegeben HTML-Auszeichnung und ggf. Elemente aus dem Standard-Style Prosilver zu verwenden / erneut einzubinden.

Code: Alles auswählen

<div class="headerbar">
		<div class="inner"><span class="corners-top"><span></span></span>
<div id="logokopf">
<div id="logokopf_links"></div><!--Ende logokopf_links-->
<div id="logokopf_rechts"></div><!--Ende logokopf_rechts-->
</div><!--Ende logokopf-->
<span class="corners-bottom"><span></span></span></div>
		</div>

Beste Grüße


Edit: Uups - RS

[Mountigo]

Hallo,

vielen Dank für die schnelle und ausführliche Antwort. Ich werde das nachher mal testen.


Beste Grüße
Mountigo

[Dumdi]

Genau das habe ich auch versucht. Es passiert aber nichts
Link kann ich gerne per PN zuschicken.

[Talk19zehn]

Hello Dumdi, meines Wissens klappt das zweifelsfrei seit dem Jahr 2006 in den Browsern problemlos. Sodann ist dein Link zur Seite ist im Forum gerne willkommen.


Edit:
OK, nochmals zum Verständnis und mit phpBB-konformer CSS-Notation der Bilder.

Anmerkung zu dieser Idee:
Es geht inhaltlich darum, das nachfolgende Konstrukt anstatt der Standardlösung zu verwenden oder ggf. in Eigeninitiative mit der Standardlösung zu *kombinieren. Drei Grafiken bitte, wie beschrieben anfertigen.
In diesem Beispiel sind sie nun 70px hoch und haben 93px in der Breite. Wichtig ---> Jedoch das Bild zum Füllen ist 15px breit. Die Bilder bitte im Verzeichnis Theme / Images speichern.

common.css ergänzen

Code: Alles auswählen

	#logokopf {
	background-image: url("{T_THEME_PATH}/images/fuellenlogo15x70.jpg");
	background-repeat: repeat-x;
	margin-left: 2px;
	background-color: #394E79;
	position:relative;
	height: 70px;
	}

	#logokopf_links {
	background-image: url("{T_THEME_PATH}/images/linkslogo93x70.jpg");
	background-repeat: no-repeat;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 749px;
	height: 70px;
	}

	#logokopf_rechts {
	background-image: url("{T_THEME_PATH}/images/rechtslogo93x70.jpg");
	top: 0;
	background-repeat: no-repeat;
	position: absolute;
	right: 284px;
	z-index: 2;
	width: 271px;
	height: 70px;
	}

Beachte bitte ---> background-color: #394E79; -----> Bitte auf deinen passenden Farbwert anpassen.

Ausgabe zum Beispiel in der overall_header.html:

Suche:

Code: Alles auswählen

<div id="wrap">

davor ( oder danach, je nach Belieben ) einfügen:

Code: Alles auswählen

<!-- Anfang Headerlogo //-->
		<div class="headerbar">
			<div class="inner"><span class="corners-top"><span></span></span>
			<div id="logokopf">
				<div id="logokopf_links"></div><!--Ende headerlogo_links-->
				<div id="logokopf_rechts"></div><!--Ende headerlogo_rechts-->
			</div>
			<span class="corners-bottom"><span></span></span></div>
		</div>
<!-- Ende Headerlogo //-->

	<div style="clear: both;"></div>

*Ggf. kombiniere die Inhalte der Container der Standardlösung mit diesem Lösungsvorschlag. Dabei ist unbedingt auf die vorgegebene Verschachtelung der DIV-Container zu achten! Hier im Beispiel beginnend mit --> "Headerlogo".
Beste Grüße

Habe es soeben nochmals genutzt und kann keine Fehler feststellen.

[ externes Bild ]


Ergänzender Hinweis: Ein Kombination der Notationen könnte in der HTML-Ausgabe wie folgt aussehen

Code: Alles auswählen

<!-- Anfang Headerlogo //-->
		<div class="headerbar">
			<div class="inner"><span class="corners-top"><span></span></span>
			<div id="logokopf">
				<div id="logokopf_links"></div><!--Ende headerlogo_links-->
				<div id="logokopf_rechts"></div><!--Ende headerlogo_rechts-->
			</div>
		<div id="site-description">
				<!-- <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>
			<span class="corners-bottom"><span></span></span></div>
		</div>
		<!-- Ende Headerlogo //-->

	<div style="clear: both;"></div>

Ergebnis:

[ externes Bild ]


Edit:
Eine andere Möglichkeit zur Veränderung der Standardlösung, welche aus meiner Sicht gut geignet ist für abstrakte Grafiken, die sich horizontal je Auflösung visuell in der Darstellung anpassen können, gibt es im Snippet-Bereich.


Edit:

Hello Dumdi,
wie ich dem Link aus deiner PN entnehmen konnte, lagen keine Grafiken entsprechend der CSS-Notationen vor.