logo_right.jpg in den Vordergrund

JimboV · Beitrag von **JimboV** » 27.09.2008 10:13

Hallo,

Bei mir gibt es in dem Ordner: "styles/style/theme/images" die Datei: "logo_right.jpg und logo_left.jpg.

Hier kann ich das Logo für die Rechte und Linke Seite im Header festlegen. http://jimbov.ji.funpic.de

Das Bild auf der Linken Seite ist 1200 Pixel lang und das auf der rechten nur 245 Pixel.

Wie schaffe ich folgendes:

1. Dass das logo_left.jpg das Forum Fenster nicht unnötig auseinander zieht, sondern, am rechten rand abgeschnitten wird.

2. Dass das rechte Logo im Vordergrund ist, also dass das logo_right.jpg über das logo_left.jpg geschoben wird.

Miriam · Beitrag von **Miriam** » 27.09.2008 10:40

Prinzipiell wäre das so möglich:

Code: Alles auswählen

<div style="background: url(logo_left.jpg) no-repeat; height:100%;"><img src="logo_right.jpg" align="right"></div>

Der Hintergrund des div Containers ist das linke Bild und das rechte Bild ist in dem div Container drin.

JimboV · Beitrag von **JimboV** » 12.10.2008 22:24

1.

Miriam hat geschrieben:Prinzipiell wäre das so möglich:
Code: Alles auswählen
<div style="background: url(logo_left.jpg) no-repeat; height:100%;"><img src="logo_right.jpg" align="right"></div>
Der Hintergrund des div Containers ist das linke Bild und das rechte Bild ist in dem div Container drin.

An welcher Stelle, in welcher Datei muss ich das denn einfügen?

2. Es gibt noch die Datei site_logo.jpg und logo_bg.gif, für was sind diese Dateien gut?

3. Vielleicht hilft euch dieser Ausschnitt aus der stylesheet.css zum orientieren

Code: Alles auswählen

/* Header and logo */
#maintable {
	border-style: solid;
	border-width: 0 1px 1px 1px;
	border-color: #000;
	margin: 0 auto;
}
#logorow {
	background: url(images/logo_bg.gif) top left repeat-x;
	text-align: center;
	padding: 0;
}

#logo-left {
	background: url(images/logo_left.jpg) top left no-repeat;
}
#logo-right {
	background: url(images/logo_right.jpg) top right no-repeat;
}

#logorow, #logo-left {
	height: 120px;
	overflow: hidden;
}


.pm-notify-new, .pm-notify-unread {
	border-left: solid 1px #FFF721;
	border-right: solid 1px #FFF600;
	border-top: solid 1px #FFF721;
	border-bottom: solid 1px #FFF600;
	background: #313131 url(images/cell.gif) top left repeat-x;
	margin: 10px 0;
	padding: 10px;
	text-align: center;
	font-size: 12px;
	font-weight: bold;
}
.pm-notify-new a, .pm-notify-new a:visited, .pm-notify-unread a, .pm-notify-unread a:visited { text-decoration: underline; }
.pm-notify-header {
	margin-bottom: 10px;
	color: #CCC;
}
.pm-notify-new, .pm-notify-unread:hover {
	border-left: solid 1px #FFF;
	border-right: solid 1px #F0F0F0;
	border-top: solid 1px #FFF;
	border-bottom: solid 1px #F0F0F0;
}
.pm-notify-new { padding: 30px; }

Beitrag von **JFooty** » 13.10.2008 09:04

JimboV hat geschrieben:An welcher Stelle, in welcher Datei muss ich das denn einfügen?

Die Datei heißt overall_header.html.
Die passende Stelle in der Datei? Ohne Angaben zum Style lässt sich das nicht sagen.

JimboV hat geschrieben:2. Es gibt noch die Datei site_logo.jpg und logo_bg.gif, für was sind diese Dateien gut?

Ist doch eigentlich selbst erklärend.

site_logo.jpg ist das Logo der Seite.
logo_bg.gif ist ein Hintergrundbild (background) für das Logo.

JimboV hat geschrieben:3. Vielleicht hilft euch dieser Ausschnitt aus der stylesheet.css zum orientieren

Damit kann man lediglich die Vermutung äußern, dass der Style auf subsilver2 basiert.

JimboV · Beitrag von **JimboV** » 13.10.2008 12:05

Also der Style heißt: AcidTech Yellow

Braucht ihr sonst noch Informationen?

Miriam hat geschrieben:Prinzipiell wäre das so möglich:
Code: Alles auswählen
<div style="background: url(logo_left.jpg) no-repeat; height:100%;"><img src="logo_right.jpg" align="right"></div>
Der Hintergrund des div Containers ist das linke Bild und das rechte Bild ist in dem div Container drin.

Habe das in der overall_header.html jetzt mal so (siehe unten) eingefügt ist das so richtig?

Code: Alles auswählen

<body class="{S_CONTENT_DIRECTION}">

<a name="top"></a>

<table border="0" cellspacing="0" cellpadding="0" width="{$CA_WIDTH}" id="maintable" align="center">
<tr>
	<td id="logorow" align="center"><div id="logo-left"><div id="logo-right">
		<a href="{U_INDEX}">{SITE_LOGO_IMG}</a>
		<div style="background: url(logo_left.jpg) no-repeat; height:100%;"><img src="logo_right.jpg" align="right"></div>
	</div></div></td>
</tr>
<tr>

Beitrag von **JFooty** » 13.10.2008 12:53

JimboV hat geschrieben:Habe das in der overall_header.html jetzt mal so (siehe unten) eingefügt ist das so richtig?

Code: Alles auswählen

<body class="{S_CONTENT_DIRECTION}">
<a name="top"></a>
<table border="0" cellspacing="0" cellpadding="0" width="{$CA_WIDTH}" id="maintable" align="center">
<tr>
<td id="logorow" align="center">
<div id="logo-left">
<div id="logo-right">
<a href="{U_INDEX}">{SITE_LOGO_IMG}</a>
<div style="background: url(logo_left.jpg) no-repeat; height:100%;"><img src="logo_right.jpg" align="right">
</div>
</div>
</div>
</td>
</tr>
<tr>

Also das kannst du mit Sicherheit kürzen. Die beiden div-Container logo-left bzw. logo right kannst du heraus nehmen,
denn mit Miriam's Vorschlag hast du ja beide Bilder einem div-Container. Weiterhin scheint mir

Code: Alles auswählen

<a href="{U_INDEX}">{SITE_LOGO_IMG}</a>

deplatziert. Probiere es mal so:

Code: Alles auswählen

<body class="{S_CONTENT_DIRECTION}">
<a name="top"></a>
<table border="0" cellspacing="0" cellpadding="0" width="{$CA_WIDTH}" id="maintable" align="center">
<tr>
<td id="logorow" align="center">
<div style="background: url(logo_left.jpg) no-repeat; height:100%;">
<a href="{U_INDEX}">
<img src="logo_right.jpg" align="right">
</a>
</div>
</td>
</tr>
<tr>

Damit ist das logo_right als Link auf den Forenindex anklickbar. Evtl. musst du noch ein paar Größenangaben anpassen.