Doppelter Farbverlauf, repeat-y Problem

El Draco · Beitrag von **El Draco** » 16.03.2011 19:33

Hallo,

ich weiss nicht mehr weiter

Folgendes Problem,
ich möchte auf der linken und rechten Seite einen Farbverlauf installieren.
Hierzu gibt es eine schöne Lösung.

http://www.zdnet.de/webentwicklung_css_ ... 7410-3.htm

Diese Lösung habe ich schon ein paar mal erfolgreich angewendet.
Bei phpbb gelingt mir dies jedoch nicht.

Die Zeilen:
#bkgnd2 {
position: absolute;
top: 0px;
right: 0px;
height:auto;
width:100%;
min-height:100%;
background:transparent url(./images/bgright.jpg);) right top
background-repeat:repeat-y;
text-align:center;
}

* html #bkgnd2 {
height:100%;
}

habe ich in die colours.css eingebunden.

Die Zeile:
<div id="bkgnd2">
habe ich hinter dem Body-Tag der overall_header eingebunden.

Das Problem ist, das der Befehl "background-repeat:repeat-y;" ignoriert wird.
Das bedeutet das das "bgright.jpg" über die gesamte Forenbreite wiederholt wird.

Siehe hier: http://support.islavida.de/

Woran liegt das, beziehungsweise, wieso wird der "repeat-y" Befehl ignoriert ?

Herzlichen Dank im voraus.
El Draco

Beitrag von **Talk19zehn** » 03.04.2011 14:44

Doppelter Farbverlauf, repeat-y Problem - Farbverlauf links und rechts vom Forum
Bezug: Standard Prosilver 3.08

Hello El Draco,

auch ich bin mit dem genannten Standardvorschlag der Seite nicht zweifelsfrei für ein phpbb zurecht gekommen. Die daraus folgenden Umbaumaßnahmen sind für ein phpbb doch recht erheblich, wie ich meine. Darum habe ich nun ein anderes Konzept umgesetzt. Zunächst habe ich eine Farbverlaufsgrafik in einer maximalen Größe von 75x2px erstellt und diese zweimal abgespeichert ( eine um 180° gedreht ). Da hier von prozentualen Werten ausgegangen wird, sollten m.E. die Grafiken eine Breite von 75px nicht überschreiten. Eine Forenbreite von 50% macht zudem meiner Auffassung nach wenig Sinn.

In der common.css änderte ich:

Code: Alles auswählen

body {
	/* Text-Sizing with ems: http://www.clagnut.com/blog/348/ */
	font-family: Verdana, Helvetica, Arial, sans-serif;
	color: #828282;
	background-color: #ffffff;
	background: url("{T_THEME_PATH}/images/bodywrapgradientleft75x2.gif") repeat-y left top fixed;
	/*font-size: 62.5%;			 This sets the default font size to be equivalent to 10px */
	font-size: 10px;
	margin: 0px auto;
	padding: 0;
}

...(...)...

Code: Alles auswählen

#wrap {
	width: 99%;
	margin: 0px auto;
	border: #ffffff 2px solid;
}

Border: Meine Erachtens zweckmäßig um die Rundungen bei kleinerer Auflösung aufrecht zu erhalten ( hier die Farbe Weiß, die dem Hintergrund entspricht ). Die 99% sollten eingehalten und nicht wesentlich unterschritten werden ( beachte bitte Bildschirmauflösungen ).

und fügte folgende ID in der common.css hinzu:

Code: Alles auswählen

#containerbody {
	background: url("{T_THEME_PATH}/images/bodywrapgradientright75x2.gif") repeat-y right top fixed;
	margin: 0;
	padding: 0px 76px 20px 76px;
	height: 100%;
}

Padding: oben, rechts, unten, links = 76px für den Abstand genutzt, da die Grafik 75px in der Breite hat und um 1px erhöht, so dass das Konstrukt nicht "am Rand klebt".

Overall_header.html:
Nach:

Code: Alles auswählen

<body id="phpbb" class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}">

fügte ich ein:

Code: Alles auswählen

<div id="containerbody">

Overall_footer.html: --> Bitte Edit Nr. 2 beachten

Vor:

Code: Alles auswählen

</body>

fügte ich ein:

Code: Alles auswählen

</div><!-- ende containerbody -->

Ergänzender Hinweis:
Das Ende der Overall_footer.html sieht dann folgendermaßen aus:

...(...)...

Code: Alles auswählen

</div><!-- ende containerbody -->
</body>
</html>

Ergebnis:

[ externes Bild ]

IE8 und FF4.0 soweit fehlerfrei. Bin mir jedoch nicht ganz sicher, ob Auflösungen kleiner 1024 x 768px gänzlich in den gängigen Browsern abgedeckt werden. Firefox zeigt mir persönlich bei 800x600px zumindest keine Einschränkungen in den Breitendarstellungen an.

Beste unverbindliche Grüße
BTW

Ich bin nicht fehlerlos......

Edit:
Im persönlichen Bereich = UCP ergeben sich in der Darstellung noch Fehlerchen, da der Farbverlauf nicht gänzlich bis zum unteren Ende reicht. Da muss nachgebessert werden, da offenbar ein margin oder padding greift? Ich habe leider momentan keine Idee, wo ich noch suchen sollte. Ggf. erbarmt sich eine helfende Hand, - diese kleine Hoffnung möchte ich nicht so rasch aufgeben.

Viele Grüße

Ein Anfang ist jedenfalls gemacht.

Edit: Nr. 2
Wenn ich lediglich dem Elternelement "body" ein Height von 100% gebe, funktioniert das Konstrukt ( so oder so incl. der Ursprungsseite laut Anfrage ) nicht. Warum auch immer...
Mein Testforum hat weder Werbebanner, die im Footer liegen noch wird die Geburtstage oder ähnliche Teilchen ausgegeben, die den Footer in seiner Höhe verändern.
Also hieß das Motto "Platz befüllen" - nur wie?

Eine Abhilfe, die wahrscheinlich nicht sehr elegant ist und mich nicht "glücklich" macht, um die Farbverläufe im persönlichen Bereich bis zum unteren Rand des Bildschirms ( hier Höhe 1050px ) zu ermöglichen:
Overall_footer.html --> In Zeile 2 fügte ich ein:

Code: Alles auswählen

<p style="height: 120px"> &nbsp; </p><!-- platz schaffen farbverlauf -->

Das CR legte ich in einen separaten Div-Container, indem ich einen Abstand von oben definierte: Hier 54px

Code: Alles auswählen

<div style="margin-top: 54px;">
	<div class="copyright">Powered by <a href="http://www.phpbb.com/">phpBB</a> &copy; 2000, 2002, 2005, 2007 phpBB Group
		<!-- IF TRANSLATION_INFO --><br />{TRANSLATION_INFO}<!-- ENDIF -->
		<!-- IF DEBUG_OUTPUT --><br />{DEBUG_OUTPUT}<!-- ENDIF -->
		<!-- IF U_ACP --><br /><strong><a href="{U_ACP}">{L_ACP}</a></strong><!-- ENDIF -->
	</div>
</div>

Die sich in der overall_footer.html nach dem CR ( vgl. Original ) befindlich zwei schließenden Divs legte ich jetzt auch an das Ende.
overall_footer. html komplett:

Code: Alles auswählen

	</div>
<p style="height: 120px"> &nbsp; </p><!-- platz schaffen farbverlauf -->

<div id="page-footer">

	<div class="navbar">
		<div class="inner"><span class="corners-top"><span></span></span>

		<ul class="linklist">
			<li class="icon-home"><a href="{U_INDEX}" accesskey="h">{L_INDEX}</a></li>
				<!-- IF not S_IS_BOT -->
					<!-- IF S_WATCH_FORUM_LINK --><li <!-- IF S_WATCHING_FORUM -->class="icon-unsubscribe"<!-- ELSE -->class="icon-subscribe"<!-- ENDIF -->><a href="{S_WATCH_FORUM_LINK}" title="{S_WATCH_FORUM_TITLE}">{S_WATCH_FORUM_TITLE}</a></li><!-- ENDIF -->
					<!-- IF U_WATCH_TOPIC --><li <!-- IF S_WATCHING_TOPIC -->class="icon-unsubscribe"<!-- ELSE -->class="icon-subscribe"<!-- ENDIF -->><a href="{U_WATCH_TOPIC}" title="{L_WATCH_TOPIC}">{L_WATCH_TOPIC}</a></li><!-- ENDIF -->
					<!-- IF U_BOOKMARK_TOPIC --><li class="icon-bookmark"><a href="{U_BOOKMARK_TOPIC}" title="{L_BOOKMARK_TOPIC}">{L_BOOKMARK_TOPIC}</a></li><!-- ENDIF -->
					<!-- IF U_BUMP_TOPIC --><li class="icon-bump"><a href="{U_BUMP_TOPIC}" title="{L_BUMP_TOPIC}">{L_BUMP_TOPIC}</a></li><!-- ENDIF -->
				<!-- ENDIF -->
			<li class="rightside"><!-- IF U_TEAM --><a href="{U_TEAM}">{L_THE_TEAM}</a> &bull; <!-- ENDIF --><!-- IF not S_IS_BOT --><a href="{U_DELETE_COOKIES}">{L_DELETE_COOKIES}</a> &bull; <!-- ENDIF -->{S_TIMEZONE}</li>
		</ul>

		<span class="corners-bottom"><span></span></span></div>
	</div>

<!--
	We request you retain the full copyright notice below including the link to www.phpbb.com.
	This not only gives respect to the large amount of time given freely by the developers
	but also helps build interest, traffic and use of phpBB3. If you (honestly) cannot retain
	the full copyright we ask you at least leave in place the "Powered by phpBB" line, with
	"phpBB" linked to www.phpbb.com. If you refuse to include even this then support on our
	forums may be affected.

	The phpBB Group : 2006
//-->

<div style="margin-top: 54px;">
	<div class="copyright">Powered by <a href="http://www.phpbb.com/">phpBB</a> &copy; 2000, 2002, 2005, 2007 phpBB Group
		<!-- IF TRANSLATION_INFO --><br />{TRANSLATION_INFO}<!-- ENDIF -->
		<!-- IF DEBUG_OUTPUT --><br />{DEBUG_OUTPUT}<!-- ENDIF -->
		<!-- IF U_ACP --><br /><strong><a href="{U_ACP}">{L_ACP}</a></strong><!-- ENDIF -->
	</div>
</div>

<div>
	<a id="bottom" name="bottom" accesskey="z"></a>
	<!-- IF not S_IS_BOT -->{RUN_CRON_TASK}<!-- ENDIF -->
</div>

</div>
</div><!-- ende containerbody -->
</div>
</body>
</html>

.

Fazit: Je nach Höhe der im Footer enthaltenen Elemente ( Werbung, Tabellen, Geburtstage oder oder oder.. ) kann eine weitere Anpassung der platzschaffenden Höhen nötig werden / sein.
Die Frage ist, welche Bildschirmhöhe könnte maximal relevant sein und wie kann ich diese optimal realisieren, konnte ich nicht allein klären. Eine andere Variante für die Bereiche im UCP auszuarbeiten, wäre fein. Viele Grüße

phpBB.de

Doppelter Farbverlauf, repeat-y Problem

Doppelter Farbverlauf, repeat-y Problem

Re: Doppelter Farbverlauf, repeat-y Problem