Überlappen

Quintilian

Hi!
Man hat mich gefragt, ob und wie es möglich ist
folgendes Problem zu lösen:

Auf einer Webseite codiert in XHTML befindet sich am oberen Rand so wie hier
im Forum ein Banner, oder Bild ich weiss nicht genau wie man es nennt.
Auf jeden Fall so ein Bild wie das oben" Informatik- forum ....und die schwangere Eule.Bibliotek....fouhttp://http://www.informatik-forum.at/index.php?

Nun auf dieser Homepage, sollen die Spitzen einiger Buchstaben über dem
Bild in den CSS bereich hinunterragen, also überlappen. Dabei
müssen die Links noch anklickbar sein.

Ich dachte, dass man nicht all zu komplizeiert denken sollte und einfach die
Spitzen der Buchstaben abschneidet, und in den unteren Bereich dazuzeichnent.

Ich kenne mich mit XHTML nicht aus, ist so etwas möglich,
sodass ich nicht den Cutter zur Hand nehmen muss?

mfg.

T.

Fridolin

Zitat von Trilimanski

Nun auf dieser Homepage, sollen die Spitzen einiger Buchstaben über dem
Bild in den CSS bereich hinunterragen, also überlappen. Dabei
müssen die Links noch anklickbar sein.

Ich dachte, dass man nicht all zu komplizeiert denken sollte und einfach die
Spitzen der Buchstaben abschneidet, und in den unteren Bereich dazuzeichnent.

Ich kenne mich mit XHTML nicht aus, ist so etwas möglich,
sodass ich nicht den Cutter zur Hand nehmen muss?

Alles anzeigen

Ich glaub du willst ganz einfach nur transparenzen in dein bild einbauen, dann passt das auch...

lg
ekimus

rck

Zitat von Trilimanski

Nun auf dieser Homepage, sollen die Spitzen einiger Buchstaben über dem Bild in den CSS bereich hinunterragen, also überlappen. Dabei müssen die Links noch anklickbar sein.

Wie wäre es mit 2 DIVs, die einfach überlappen?

Ich habe auf diese Art und Weise das Logo von meinem neuen Layout "OrangeLight" gestaltet, es handelt sich um ein container DIV und zwei darin befindliche DIVs.

Der CSS-Style sieht so aus:

Code

#header {
	margin           : 0;
	padding          : 0;
}


#logo {
	position         : relative;
	width            : 214px;
	height           : 44px;
	top              : -20px;
	left             : 180px;
	background-image : url([url]http://www.kiesler.at/themes/OrangeLight/kiesler.gif[/url]);
	background-repeat: no-repeat;
}


#masthead {
	border           : solid 1px white;
	border-width     : 1px 0;
	padding          : 0.5em;
	padding-bottom   : 0;
}


#masthead h1 {
	padding          : 0;
	margin           : 0;
}

Alles anzeigen

Du siehst hier auch gut, wie Du mit top / left / etc. die Dinge positionieren kannst.

Ins HTML bindest Du es so ein:

HTML

<html><head>
	<style type="text/css"><!--
		@import "themes/OrangeLight/layout_screen.css";
	--></style>
</head><body>
		<div id="header">
			<div id="masthead" class="inside"><p><sup>Orange</sup>/<sub>Light</sub></p>
				<hr class="hide" />
			</div>
			<div id="logo"> </div>
		</div>
</body></head>

Alles anzeigen

... vereinfacht:

HTML

<html><head>
	<style type="text/css"><!--
		@import "themes/OrangeLight/layout_screen.css";
	--></style>
</head><body>
<div id="header">
  <div id="masthead"><h1>Homepage Titel</h1></div>
  <div id="logo"></div>
</div>
</body></html>

Und wenn Du Dich auf meiner Homepage einloggst, kannst Du es Dir unter Control Panel - My Settings - Change View ansehen. Mir gefällt das Theme unter Internet Explorer 6 am Besten, die Input-Gradients kriege ich in den anderen Browsern nicht hin.

Ob Du nun Grafiken überlappen lässt oder Text ist wurscht. DIV ist DIV, egal was drinnen steht.

Zitat

Ich dachte, dass man nicht all zu komplizeiert denken sollte und einfach die Spitzen der Buchstaben abschneidet, und in den unteren Bereich dazuzeichnent.

Das war der Stand der Dinge bis vor einiger Zeit: Einfach eine Tabelle nehmen, Grafik zerstückeln und irgendwie aufteilen. Mittlererweile gibt's da glücklicherweise angenehmere, CSS-basierte Techniken.

Überlappen

Jetzt mitmachen!

Benutzer online in diesem Thema