Darstellungsproblem mit abgerundeten Ecken

[Helmut]

Hallo,

ich habe in meine Seite die Forenregeln eingebunden, das klappt ganz gut, nur werden die Ecken nicht sauber dargestellt, da bleibt ein Ausschnitt vom Hintergrund zu sehen.

[ externes Bild ]

Mein Code sieht so aus:

Code: Alles auswählen

....
<div class="panel bg3">
	<div class="inner"><span class="corners-top"><span></span></span>
	<!-- INCLUDE svi_menue_1.html -->
	<div id="cp-main" class="mcp-main">
	<div class="panel" align="justify">
	<div class="inner"><span class="corners-top"><span></span></span>
	<h2><a><img src="../styles/prosilver/imageset/Pin2.jpg" width="13" height="20" border="0"></a>&nbsp;&nbsp;Gästebuch</h2>
	<h3></h3>	
		<dl>
		<!-- IF S_FORUM_RULES -->
		<div class="rules">
			<div class="inner"><span class="corners-top"><span></span></span>
			<!-- IF U_FORUM_RULES -->
				<a href="{U_FORUM_RULES}">{L_FORUM_RULES}</a>
			<!-- ELSE -->
				{FORUM_RULES}
			<!-- ENDIF -->
			<span class="corners-bottom"><span></span></span></div>
		</div>
		<!-- ENDIF -->
		</dl>
		<h3></h3>	
		<dl>
		<!-- BEGIN guestbook -->
		<br />
		<div id="p{guestbook.POST_ID}">
		<a href="#p{guestbook.POST_ID}"></a>		
		<a href="{guestbook.U_GB_POST}">{MINI_POST_IMG}</a>&nbsp;<span><i><strong>{guestbook.L_POST_AUTHOR_GB}</strong>&nbsp;&nbsp;{guestbook.POST_AUTHOR_FULL}
		<br /><strong>{guestbook.L_POSTED_DATE_GB}</strong>&nbsp;&nbsp; {guestbook.POST_DATE}</i></span>
		<br />
		<br />
		<div class="panel" align="center">
			<h2>{guestbook.POST_TITLE}</h2>
		</div>
		<dl>
		<p>{guestbook.POST_TEXT}</p>
		<br>
		<p>Testwerte ausgeben:<br><i>$Post_id:</i> {guestbook.POST_ID}<br><i>$sql_start:</i> {guestbook.START}</p>
		</dl>
		<div class="back2top"><a href="#wrap" class="top" title="{L_BACK_TO_TOP}">{L_BACK_TO_TOP}</a></div>
		<h3></h3>
		<!-- END guestbook -->
		<br />	
		<a href="{SVI_GB_POSTING}">Posting</a>
		</div>
		<!-- IF PAGINATION or TOTAL_POSTS -->
			<div class="pagination">
				{TOTAL_POSTS}
				<!-- IF PAGE_NUMBER --><!-- IF PAGINATION --> &bull; <a href="#" onclick="jumpto(); return false;" title="{L_JUMP_TO_PAGE}">{PAGE_NUMBER}</a> &bull; <span>{PAGINATION}</span><!-- ELSE --> &bull; {PAGE_NUMBER}<!-- ENDIF --><!-- ENDIF -->
			</div>
		<!-- ENDIF -->
		<br />
		<br />
		</dl>	
	<span class="corners-bottom"><span></span></span></div>
	</div>	
	</div>
	<div class="clear"></div>
	</fieldset>	
	</div>
	<span class="corners-bottom"><span></span></span></div>
</div>
.....

Ich habe schon eine ganze Weile versucht, den Fehler zu finden, komme aber nicht dahinter. Hat von euch einer eine Idee wo der Fehler liegt?

Gruß Helmut

[YoshiOWL]

Hi,

das problem kann man nicht so ganz einfach lösen.
Die abrundungen sind GIF-Grafiken die geziehlt auf den Original Hintergrund ausgelegt sind.
Da die Grafiken über die CSS gesetzt werden kann man sie auch nicht einfach gegen eine neue Grafik austauschen, (passen dann wieder beim normalen Hintergrund nicht)
Hirzu ist dann ein neuer Class-eintrag in den CSS-Files, sowie eine überarbeitete Grafik nötig.

Am einfachsten ist es daher, den hintergrund zu ändern.

[nickvergessen]

Eigentlich müssten das aber weiße runde Ecken sein, diese werden auch bei den blauen Abschnitten verwendet, die z.B. den Header umschließen.

[Berliner Schildkroete]

das Problem habe ich auch, hab das nun einfach weggelassen

Woher hast du das Gästebuch?

[gn#36]

Es gibt zwei Sätze von Runden Ecken: Blaue und Weiße. Beide werden über <span class="corners-top"></span> eingeblendet und es kommt auf den Kontext an ob die blauen oder weißen verwendet werden.
Hier liegen die Ecken grundsätzlich im Inneren von <div class="panel bg3">, daher werden sie blau, du brauchst also entweder eine zusätzliche Unterscheidung die sagt, bei panel > inner > rules > inner gibt's wieder Weiß, oder aber du erstellst dir eine neue CSS Klasse die eben wieder die weißen Verwendet und setzt diese dann statt corners-top ein.

[Helmut]

Hallo gn#36,

ich glaube, es ist einfacher zu machen, wenn eine weitere Unterscheidung eingefügt wird. In welcher CSS finde ich das, damit ich nicht lange suchen muss?


@Berliner Schildkroete
Ich bastel mir gerade das Gästebuch selber, ich verwende dazu ein eigenes Forum, dort habe ich ein Thema erstellt und lasse dann nur Antworten zu, so habe ich es auch schon auf meiner alten HP gemacht. Die Textausgabe ist mit wenigen Zeilen Code zu machen, etwas Aufwendiger wird es mit dem Posten. Ich suche hier auch gerade noch eine Lösung, siehe hier.

Gruß Helmut

[gn#36]

Muss ich auch suchen...

colors.css

[Dr.Death]

Hi,

da gibt es mehrere Stellen:

Code: Alles auswählen

colours.css (95):span.corners-top {
colours.css (96):	background-image: url("{T_THEME_PATH}/images/corners_left.png");
colours.css (99):span.corners-top span {
colours.css (100):	background-image: url("{T_THEME_PATH}/images/corners_right.png");
colours.css (103):span.corners-bottom {
colours.css (104):	background-image: url("{T_THEME_PATH}/images/corners_left.png");
colours.css (107):span.corners-bottom span {
colours.css (108):	background-image: url("{T_THEME_PATH}/images/corners_right.png");

colours.css (818):#cp-main span.corners-top, #cp-menu span.corners-top {
colours.css (819):	background-image: url("{T_THEME_PATH}/images/corners_left2.gif");

colours.css (822):#cp-main span.corners-top span, #cp-menu span.corners-top span {
colours.css (823):	background-image: url("{T_THEME_PATH}/images/corners_right2.gif");

colours.css (826):#cp-main span.corners-bottom, #cp-menu span.corners-bottom {
colours.css (827):	background-image: url("{T_THEME_PATH}/images/corners_left2.gif");

colours.css (830):#cp-main span.corners-bottom span, #cp-menu span.corners-bottom span {
colours.css (831):	background-image: url("{T_THEME_PATH}/images/corners_right2.gif");

colours.css (835):#cp-main .panel #topicreview span.corners-top, #cp-menu .panel #topicreview span.corners-top {
colours.css (836):	background-image: url("{T_THEME_PATH}/images/corners_left.gif");

colours.css (839):#cp-main .panel #topicreview span.corners-top span, #cp-menu .panel #topicreview span.corners-top span {
colours.css (840):	background-image: url("{T_THEME_PATH}/images/corners_right.gif");

colours.css (843):#cp-main .panel #topicreview span.corners-bottom, #cp-menu .panel #topicreview span.corners-bottom {
colours.css (844):	background-image: url("{T_THEME_PATH}/images/corners_left.gif");

colours.css (847):#cp-main .panel #topicreview span.corners-bottom span, #cp-menu .panel #topicreview span.corners-bottom span {
colours.css (848):	background-image: url("{T_THEME_PATH}/images/corners_right.gif");

tweaks.css (9):* html span.corners-top, * html span.corners-bottom { background-image: url("{T_THEME_PATH}/images/corners_left.gif"); }
tweaks.css (10):* html span.corners-top span, * html span.corners-bottom span { background-image: url("{T_THEME_PATH}/images/corners_right.gif"); }

Suche einfach mal in allen CSS Dateien nach " corner ".

[Helmut]

Hallo Dr.Death,

ich hab jetzt ne ganze Weile rumprobiert und bring es einfach nicht hin. Ich blicke da noch nicht wirklich durch, wie das mit den ganzen Einträgen zusammen hängt. Zu corner habe ich zig Einträge gefunden und auch an mehreren Stellen versucht, etwas zu ändern, aber es brachte mir keinen Erfolg.

Wenn ich hier was ändere, dann tut sich nur etwas an den äußersten Ecken.

Code: Alles auswählen

colours.css (95):span.corners-top {
colours.css (96):   background-image: url("{T_THEME_PATH}/images/corners_left.png");
colours.css (99):span.corners-top span {
colours.css (100):   background-image: url("{T_THEME_PATH}/images/corners_right.png");
colours.css (103):span.corners-bottom {
colours.css (104):   background-image: url("{T_THEME_PATH}/images/corners_left.png");
colours.css (107):span.corners-bottom span {
colours.css (108):   background-image: url("{T_THEME_PATH}/images/corners_right.png");

Ich habe dann versucht, hier etwas zu spielen

Code: Alles auswählen

/* Topicreview */
#cp-main .panel #topicreview span.corners-top, #cp-menu .panel #topicreview span.corners-top {
	background-image: url("{T_THEME_PATH}/images/corners_left.gif");
}

#cp-main .panel #topicreview span.corners-top span, #cp-menu .panel #topicreview span.corners-top span {
	background-image: url("{T_THEME_PATH}/images/corners_right.gif");
}

#cp-main .panel #topicreview span.corners-bottom, #cp-menu .panel #topicreview span.corners-bottom {
	background-image: url("{T_THEME_PATH}/images/corners_left.gif");
}

#cp-main .panel #topicreview span.corners-bottom span, #cp-menu .panel #topicreview span.corners-bottom span {
	background-image: url("{T_THEME_PATH}/images/corners_right.gif");
}



/* Rules Test*/
#cp-main .panel #rules span.corners-top, #inner .bg3 #rules span.corners-top {
	background-image: url("{T_THEME_PATH}/images/corners_left.gif");
}

#cp-main .panel #rules span.corners-top span, #inner .bg3 #rules span.corners-top span {
	background-image: url("{T_THEME_PATH}/images/corners_right.gif");
}

#cp-main .panel #rules span.corners-bottom, #inner .bg3 #rules span.corners-bottom {
	background-image: url("{T_THEME_PATH}/images/corners_left.gif");
}

#cp-main .panel #rules span.corners-bottom span, #inner .bg3 #rules span.corners-bottom span {
	background-image: url("{T_THEME_PATH}/images/corners_right.gif");
}

brachte mich aber auch nicht weiter. Ohne die genauen Zusammenhänge der einzelnen Einträge zu kennen, komme ich hier nicht weiter. Ich wäre dankbar, wenn mir hier jemand weiter helfen könnte.

Gruß Helmut

[gn#36]

Falls du den Firefox verwendest gibt es ein sehr nettes Tool namens Firebug mit dem du sehr leicht derartige Dinge ausprobieren kannst.

Du solltest nicht die bestehenden Dinge ändern, sondern einen neuen Eintrag hinzufügen, hierbei ist es vermutlich das einfachste, wenn du eine neue Klasse erstellst die dann die richtigen Ecken als Hintergrund erhält (würde ich dann z.b. ganz unten in der colours.css einfügen) und dem Element im HTML Code dann beide Klassen geben, so dass die generellen Eigenschaften erhalten bleiben, aber die Ecken eben für weißen Hintergrund verwendet werden.

Der andere, ebenfalls denkbare Ansatz wäre, stattdessen die bestehende Klasse zu erweitern, so dass der Kontext, in dem diese auftritt eben korrekt behandelt wird. Das wäre mit Sicherheit ein wenig schwieriger, dafür aber semantisch besser. Wenn es den Internet-Explorer nicht gäbe dann könnte man sehr gut mit den direkten Ebenen arbeiten (also z.b. html > body > div.klasse1, das würde dann auf <html><body> <div class="klasse1"> zutreffen, aber nicht auf <html><body><div class="karlheinz"><div class="klasse1">)

Ich könnte mir vorstellen dass es reicht wenn du etwas in die Datei einbaust das so ähnlich aussieht wie das hier:

Code: Alles auswählen

div.panel div.inner div.rules div.inner span.corners-top {
background-image: url(...);
}