Wie mache ich weiter (CSS) ?

Status
Nicht offen für weitere Antworten.
G

GreenBeret

Mitglied
habe zuerst ein framegrüst gebaut, dreispaltig, obere und untere spalte variabel, mittlere spalte ist content (543px hoch)
habe die content-seite (start.html) folgendermaßen gemacht:
es wird evtl sehr viel Inhalt reinkommen, ich will dass das hintergrundbild aber konstant ist.
habe also im prinzip zwei möglichkeiten: a) ich fixe das hintergrundbild per css (background-attachment:fixed; padding:0px; background-position:top;) und schreibe einfach den Inhalt (der Inhalt wird auch in tabellen gepackt). sollte der inhalt nicht auf die seite passsen scrollt man den inhalt, das hintergrundbild bleibt bestehen.
b) ich füge das bild ganz normal ein (damit es zentriert ist einfach als bild in eine zentrierte tabelle). den content packe ich in eine tabelle, dort aber in ein Div-Tag das bei overflow auf scroll gestellt ist
soweit so gut

mein problem ist das ich ja irgendwie meine menüansteuerung machen muss. meine lösung war, dort wo das menü ist eine ein-zeile-ein-spale-tabelle zu machen, dort hinein ein transparentes gif, und das bekommt das imagemap. problem dabei: die browser Firefox und IE6 stellen die zentrierte tabelle immer an einer etwas verschobenen stelle dar, das imagemap stimmt nicht mehr. habe mal als beispiel die seite hochgeladen (noch ohne imagemap, sondern nur die tabelle). unter FF ists ok, unter IE nicht

mit verfahren b) sollte es eigentlich gehen, da ich auf das eigentlich bild das imagemap mache, aber mich interessiert trotzdem wie es mit verfahren a) geht

Seite (Framegerüst)
Seite (start.html bzw nur die content seite)
 
Hallo,

wenn ich dich richtig verstanden habe, möchtest du text über nen Bild legen.
Du kannst die Spalte wo der content ist komplett per css gestalten, auch mit hintergrundbild,
und dann mit Scrolleiste in der Tabelle...

Dies funktioniert auch - zumindetens bei mir im Firefox 1.0
 
Versuch mal folgendes:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
	<title>Homepage von Ivan Shekov</title>
	<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
	<style type="text/css">
		body {
			color:				#F3EEDA;
			font-size:			100.01%;
			font-family:			Arial, Helvetica, sans-serif;
			line-height:			1.5em;
			text-align:			center;
			background:			#591C1C;
		}
		#wrap {
			position:			relative;
			margin:				0 auto;
			width:				750px;
			min-height:			543px;
			text-align:			left;
			background:			url(http://www.ivanshekov.de/gui/test/start-bg.jpg) no-repeat 50% 0;
		}
		#nav {
			position:			absolute;
			top:				36px;
			right:				40px;
			list-style-type:		none;
			margin:				0;
			padding:			0;
		}
		#nav li {
			float:				left;
		}
		#nav li a:link {
			display:			block;
			width:				150px;
			height:				36px;
			margin:				0 8px;
			background:			#f90;
			-moz-opacity:			0.5;
			filter:				alpha(opacity=50);
		}
		#nav li a:link span {
			display:			none;
		}
		#content {
			margin-left:			280px;
			font-size:			smaller;
			font-weight:			bolder;
		}
		h1 {
			margin-left:			280px;
			padding:			100px 0 0;
			font-size:			large;
		}
		h2 {
			margin-left:			280px;
			font-size:			medium;
		}
	</style>
</head>

<body>
<div id="wrap">

	<h1>Ivan Shekov</h1>
	<h2>Komponist</h2>

	<ul id="nav">
		<li><a href="werke" title="Werke"><span>Werke</span></a></li>
		<li><a href="kontakt" title="Kontakt"><span>Kontakt</span></a></li>
		<li><a href="engagieren" title="Engagieren"><span>Engagieren</span></a></li>
	</ul>

	<div id="content">
		<p>Ivan Shekov, geboren 1942 in Sofia, Bulgarien, studierte an der dortigen Musikhochschule. Erste Kompositionen, meist f&uuml;r Klavier, entstanden, als er noch Sch&uuml;ler war. Zun&auml;chst internationale Karriere als Konzertpianist, Goldmedaille des &quot;Busoni&quot;-Klavierwettbewerbs in Italien. 1979 schrieb er Lieder f&uuml;r Kinderchor und Kammerorchester im Auftrag des Bulgarischen Fernsehens. Seit 1980 lebt der Komponist in Deutschland. Neben Orchester- und Vokalwerken komponiert Shekov vorwiegend konzertante Kammermusik f&uuml;r alle Instrumente und Kompositionen f&uuml;r junge Musiker. Werke von Ivan Shekov sind bei Kompositionswettbewerben in Berlin 1992 und in Lugano 1994 augezeichnet worden.</p>
	</div>
</body>
</div>
</html>
 
puhh Gumbo, starker Tobak den du mir gibst, sieht schon ganz gut aus

ich versuche gerade den Code zu verstehen.
body{}:
du hast erstmal per CSS dem browser gesagt dass alles, was im body ist, gecentered ist (und gleichzeitig die schriftart arial hat usw)

#wrap{}
ein großes viereck erstellt das inenrhalb des bodys ist mit dem bild als hintergrund, aber was bedeutet das "50% 0;" am ende ?

#nav{}
ab da versth ich nicht mehr so ganz :) du hast nur einen punkt angegeben der von oben 36px und von rechts 40 px entfernt ist ...
und alles was danach kommt ist mir auch spanisch ;) bloß das mit dem moz-opacy und filter scheint so zu sein damit man das menü nochmal sieht
und das mit h1 und h2 verstehe ich auch noch
 
Ich erklär's dir:
Erst einmal habe ich die Navigationselemente in eine ungeordnete Liste gesetzt. Diese Liste habe ich nun oben rechts positioniert. Weiterhin habe ich den Listenelementen mit float: left die typischen Blockeigenschaften entzogen. Damit die Verweise innerhalb der Listenelemente jedoch skaliert werden können, habe ich ihnen die Eigenschaft display: block zugewiesen. Dann noch ein paar Korrekturen mittels margin und die Verweise decken sich mit der Hintergrundgrafik. Da jetzt aber noch der Text sichtbar ist, habe ich ihn in ein weiteres Element gesetzt, und es anschließend versteckt.

Das 50% 0 entspricht der Hintergrundpositionierung: 50% von der linken Elementgrenze (also mittig) und 0 von der oberen. Es hätte ebenso gut mittels top, top center oder center top definiert werden können. Ich persönlich nutze aber gerne die prozentuale Angabe.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück