[~Chiller~]

Hallo,

ich bin gerade daran mir eine Homepage mit HTML/CSS zu programmieren.
Mann muss dazusagen ich mach das mit "learning by doing", sprich ich habe keinerlei Vorerfahrung.

Bis jetzt habe ich eigentlich alles was ich weiß von www.selfhtml.org.

Nun habe ich auch schon eine Homepage gebastelt die mir recht gut gefällt.

Aber ich habe noch 2 große und wichtige Fragen:

1.

Man kann ja die bestimmten "CSS-Labels" fixieren, sprich wenn man runterscrollt bewegen diese sich mit, sind also fix auf dem Bildschirm. Funktioniert auch ganz prächtig nach der Anleitung bei SelfHTML.
Aber eben nur mit meiner Navigationsleiste.
Das selbe wollte ich nun auch mit meiner Info-Box und meiner Fusszeile machen, diese sind aber nicht fix.
Ich habe auch schon herrausgefunden, dass es daran liegt, dass das "Label" nicht "#fixiert" ist.
Nur dann bleibt das Element wirklich starr auf dem Bildschirm.
Aber ich kann ja nicht 3mal die gleiche CSS-Formation nehmen, da die Position des "Labels" ja immer verschieden ist.
Wie umgehe ich dieses Problem?
Auszug:

	#fixiert {
		position: absolute;
		top: 5em; left: 1em;
		border: 1px solid white;
	}
		html>body #fixiert {  /* nur fuer moderne Browser! */
		position: fixed;
	}
	#fixiert2 {
		position: absolute;
		top: 50.5em; left: 1em; right: 1em;
		border: 1px solid white;
	}
		html>body #fixiert {  /* nur fuer moderne Browser! */
		position: fixed;
	}
	#fixiert3 {
		position: absolute;
		top: 5em; left: 67em; right: 1em;
		border: 1px solid white;
	}
		html>body #fixiert {  /* nur fuer moderne Browser! */
		position: fixed;
	}

<div id="fixiert">
	<ul id="Navigation">
		<li><a href="#Home">Home</a></li>

		<li><h2>Musik</h2></li>

		<li><a href="#Beispiel">Seite1</a></li>
		<li><a href="#Beispiel">Seite 2</a></li>
		<li><a href="#Beispiel">Seite 3</a></li>

		<li><h2>Rubrik 2</h2></li>
		<li><span>aktuelle Seite</span></li>
		<li><a href="#Beispiel">Seite 5</a></li>

		<li><a href="#Beispiel">Seite 6</a></li>

		<li><h2>Rubrik 3</h2></li>
		<li><a href="#Beispiel">Seite 7</a></li>
		<li><a href="#Beispiel">Seite 8</a></li>
		<li><a href="#Beispiel">Seite 9</a></li>
	</ul>
</div>

<div id="fixiert3">
	<div id="Info">
		  <h2>Info</h2>

		<p><b><u>22.07.2007</u></b></p>
		<p>Infotext.</p>
	</div>
</div>
<div id="fixiert2">
	<p id="Fusszeile">Hier kommt der Fusszeilentext hin.</p>
</div>

Mein 2tes Problem ist mehr ein Verständnisprob.
Und zwar hab ich ja eine Navigation, einen Inhalt, eine Überschrift usw.
Nun habe ich mich früher auch mal in HTML-Frames eingearbeitet.
Bei diesen kann man ja nur einen Frame verändern wenn man auf einen Link in einem anderen Frame klickt.
Z.B. auf Link in Navigationsframe klicken und damit den Inhalt von dem Inhaltsframe ändern.
Also die html-Datei von der der Inhalt bezogen wird.
Code:

<a href="inhalt.html" target="rechts">Home</a>

Sprich in dem Target "rechts" wird "inhalt.html" ausgegeben.
Geht dies bei CSS auch oder muss ich die gesamte Seite (bis auf die CSS-Includedatei) neu schreiben, nur mit anderem Inhalt eben?

Bitte helft mir Anfänger

MfG Chiller

[amalbhalbe]

2.) ( 1. is zu stressig momentan ^^ )

CSS hat mit dem Laden eines Inhaltes nichts mehr zu tun - css stellst reines design dar, also wenn du auf deinen Link im Menü klickst, ladet sich im Normalfall eine neue Site wo die Fixelemente wie Menü, banner, footer u.sw. gleich nochmal drin sind nur eben der content sich verändert hat.
das kannst du allerdings recht simpel mit php umgehen falls du bock hast das zu "erlernen" kannst dich ja via pn melden. oder messi

mfg

[~Chiller~]

Ich habe meine Page nun weiterbearbeitet und an sich ist sie soweit auch fertig.
Nun habe ich aber 2 große Probleme entdeckt nach meiner kurzen Freude .

Zum einen habe ich die Bildschirmauflösung 1280x1024.
Bei 1024x768 sieht man nur die halbe Navileiste und alles ist eben zu groß für den Bildschirm *sfz*
Aber gut da muss ich eben etwas zurückfahren oder kann man das einstellen dass die Page automatisch kleiner wird?

Nuja zu meinem 2ten und weitaus wichtigerem Problem, bei dem ich dringend Hilfe brauche bevor ich verweifel.
Ich habe das mit dem fixieren soweit gut hinbekommen. Sieht (im Firefox und der richtigen Auflösung) auch supi aus und bewegt sich kein Stück .
Im IE hats mich dann ja erst mal angeschissen, da dieser andere Fixbefehle benötigt.
Aber ich habs nun auch so hinbekommen dass es bei Firefox wie bei IE läuft (andre Browser hab ich nicht zum testen).
Nun habe ich aber noch einen Anzeigefehler beim IE. Die Fuss- und Kopfzeile setzt er ganz links und nicht über die gesamte Breite der Seite wie ich das gern wollte.

Ich habe die Seite stark vereinfacht um euch das Problem aufzuzeigen:
Homepage *klick*

zum Codegeschnippsel:

der HTML-Teil

<html>
<head>
<title>Title</title>
<link rel="stylesheet" type="text/css" href="formate.css">
<body>

<div id="fixiert_Überschrift">
	<h1><u><b>Überschrift</b></u></h1>
</div>

<div id="fixiert_Info">
	<div id="Info">
		  <h2>Info</h2>

		<p><b><u>xx.xx.xxxx</u></b></p>
		<p>Infoboxinhalt</p>
	</div>
</div>

<div id="fixiert_Fusszeile">
	<p id="Fusszeile">
		Die Homepage ist seit dem xx.xx.xxxx online.
	</p>
</div>

<div id="fixiert_Navigation">
	<ul id="Navigation">
		<li><a href="homepage.php">Home</a></li>

		<li><h2>Rubrik 1</h2></li>
		<li><a href="#Beispiel">Beispiel</a></li>
		<li><a href="#Beispiel">Beispiel</a></li>
		<li><a href="#Beispiel">Beispiel</a></li>

		<li><h2>Rubrik 2</h2></li>
		<li><a href="#Beispiel">Beispiel</a></li>
		<li><a href="#Beispiel">Beispiel</a></li>
		<li><a href="#Beispiel">Beispiel</a></li>

		<li><h2>Rubrik 3</h2></li>
		<li><a href="#Beispiel">Beispiel</a></li>
		<li><a href="#Beispiel">Beispiel</a></li>
		<li><a href="#Beispiel">Beispiel</a></li>
		<li><a href="#Beispiel">Beispiel</a></li>
	</ul>
</div>

<div id="Scrollbereich">
	<div id="Inhalt">
		<h2><center><b><u>Test</u></b></center></h2>
		<br>
		<hr>
		<br>
		<p>Test</p>
		<p>Test</p>
	</div>
</div>
</body>
</html>

der CSS-Teil

	body {
		color: white;
		background-image:url(schwarz.jpg); background-attachment:fixed;
		font-size: 100.01%;
		font-family: Helvetica,Arial,sans-serif;
		margin: 0; padding: 1em;
		min-width: 41em; /* Mindestbreite verhindert Umbruch und Anzeigefehler in modernen Browsern */
	}

	#fixiert_Navigation {
		position: absolute;
		top: 5em; left: 1em;
		border: 1px solid white;
		z-index:1;
	}
	  html>body #fixiert_Navigation {  /* nur fuer moderne Browser! */
			position: fixed;
	  }
	#fixiert_Fusszeile {
		position: absolute;
		bottom: 0; left: 1em; right: 1em;
		border: 1px solid white;
		z-index:1;
		background-color:#000000;	
	}
	  html>body #fixiert_Fusszeile {  /* nur fuer moderne Browser! */
		  position: fixed;
	}
	#fixiert_Info {
		position: absolute;
		top: 5em; left: 67em; right: 1em;
		border: 1px solid white;
		z-index:1;
	}
	  html>body #fixiert_Info {  /* nur fuer moderne Browser! */
			position: fixed;
	  }
	#fixiert_Überschrift {
		position: absolute;
		top: 0; left: 1em; right: 1em;
		border: 1px solid white;
		z-index:1;
		background-color:#000000;
	}
	  html>body #fixiert_Überschrift {  /* nur fuer moderne Browser! */
			position: fixed;
	  }

	h1 {
		font-size: 1.5em;
		margin: 0; padding: 0.3em;
		text-align: center;
		border: 2px solid white;
	}

	ul#Navigation {
		width: 10em;
		margin: 0; padding: 0.2em 0.8em 0.8em;
		border: 1px solid white;
	}
	* html ul#Navigation {  /* Korrekturen fuer IE 5.x */
		width: 11.6em;
		w\idth: 10em;
		padding-left: 0;
		padd\ing-left: 0.8em;
	}
	ul#Navigation li {
		list-style: none;
		margin: 0.4em; padding: 0;
	}
	ul#Navigation a, ul#Navigation span, ul#Navigation h2 {
		display:block;
		padding: 0.2em;
		text-decoration: none; font-weight: bold;
		border: 1px solid black;
		border-left-color: gray; border-top-color: gray;
		color: black; background-color: white;
 	}
	* html ul#Navigation a, * html ul#Navigation span, * html ul#Navigation h2 {
		width: 100%;	/* Breitenangabe fuer IE 5.x */
		w\idth: 8.8em;  /* Breitenangabe fuer IE 6 */
	}
	ul#Navigation a:hover, ul#Navigation span {
		border-color: white;
		border-left-color: black; border-top-color: white;
		color: black; background-color: white;
	}
	ul#Navigation h2 {
		font-size: 1em;
		margin: 1.1em 0 0;
		border-color: gray;
		color: black; background-color: white;
	}

	#Info {
		font-size: 0.9em;
		float: right; width: 12em;
		margin: 0; padding: 0;
	}
	#Info h2 {
		font-size: 1.33em;
		margin: 0.2em 0.5em;
	}
	#Info p {
		font-size: 1em;
		margin: 0.5em;
	}

	#Inhalt {
		margin: 4em 14em 3em 14em;
		padding: 0 1em;
		border: 1px solid white;
		display: block;
	}
	* html div#Inhalt {
		height: 1em;  /* Workaround gegen den 3-Pixel-Bug des Internet Explorer bis Version 6 */
	}
	#Inhalt h2 {
		font-size: 1.2em;
		margin: 0.2em 0;
	}
	#Inhalt p {
		font-size: 1em;
		margin: 1em 0;
	}

	  p#Fusszeile {
		clear: both;
		font-size: 0.9em;
		margin: 0;
		padding: 0.1em;
		text-align: center;
		border: 1px solid white;
	  }

</style>

<!--[if lt IE 7]><style type="text/css">
	  @media screen {
			html, body {
				  height: 100%; overflow-y: hidden;
			}
			#Scrollbereich {
				  height: 100%; width: 100%; overflow: auto;
			}
			#Inhalt {
				  position: static;
			}
	  }
</style><![endif]-->

</head>

ich bitte euch um schnelle Hilfe bevor ich mir die letzten Haare ausreisse

[~Chiller~]

War ne super Idee, aber funktioniert leider nicht.

Für mich sieht es so aus, als wenn der IE die Rahmenformatierung

top: 0; left: 1em; right: 1em;

nicht komplett ausführt...sprich das "right: 1em" ignoriert.
Weil er macht den Rahmen in dem vogegebenen Abstand schätze ich, sprich

margin: 0; padding: 0.3em;

Hat noch jemand eine Idee?

[~Chiller~]

einfach nur genial, es funktioniert

danke!!!!

Und wie löse ich das Problem mit der Größe bei verschiedenen Bildschirmauflösungen am besten?

Ich habe mir schon gedacht dass ich einfach 2mal die Homepage schreibe und auf der Startseite den Benutzer nach seiner Auflösung Frage. Bei 1024x768 würde ich einfach die Navigation und alles etwas kleiner gestalten.

Weil so einfach kann man das ja sonst nicht lösen, dass auch wenn das Fenster kleiner ist, die komplette Homepage angezeigt wird oder?

[~Chiller~]

hab das Problem annähernd gelöst wie man sehen kann: *klick*

Also sieht auch bei 1024x768 noch gut aus...bis auf eine Kleinigkeit:

Die Navigation ist nach unten zu groß...und man kann ja nicht runterscrollen weil sie fixiert ist.
Aber da kann ich wohl nur die Leiste an sich kleiner gestalten oder?...nicht dass sie von der Größe her im Verhältnis gleichgroß ist wie bei 1280x1024 weil da gefällt mir die Größe eigentlich super...

[~Chiller~]

Ja kleiner machen funktioniert recht gut.
Aber mir ist da noch eine viel stylischere Lösung eingefallen.
Ich könnte meine Navigation auch einfach um die Unterpunkte kürzen und die Unterpunkte in dynamische Unterpunkte setzten.
Also sprich die Unterpunkte werden nur in einem Block rechts neben der eigentlichen Navigation eingeblendet wenn ich mit der Maus über den "Oberpunkt" fahre.
Das Problem ist:
Ich finde bei SelfHTML.org zwar diese Option, allerdings nur für die Vertikale Navigation...wohl weil diese einfacher ist, da man nur Blockelemente druntersetzten muss oder so.
Da für ältere Browser gleich noch ein Java-Script dabei ist usw....ist mir das im Alleingang zu kompliziert wenn ich ehrlich bin. Vielleicht kann mir jemand von euch Starthilfe geben

Also das war ja meine derzeitige Navigationsleiste:

	#fixiert_Navigation {
		position: absolute;
		top: 5em; left: 1em;
		border: 1px solid white;
		z-index:2;
	}
			ul#Navigation {
		width: 10em;
		margin: 0; padding: 0.4em;
		font-size:14px;
	}
	* html ul#Navigation {  /* Korrekturen fuer IE 5.x */
		width: 11.6em;
		w\idth: 10em;
		padding-left: 0;
		padd\ing-left: 0.4em;
		font-size:14px;
	}
	ul#Navigation li {
		list-style: none;
		margin: 0.4em; padding: 0;
	}
	ul#Navigation a, ul#Navigation span, ul#Navigation h2 {
		display:block;
		padding: 0.2em;
		text-decoration: none; font-weight: bold;
		border: 1px solid white;
		border-left-color: white; border-top-color: white;
		color: black; background-color: white;
 	}
	* html ul#Navigation a, * html ul#Navigation span, * html ul#Navigation h2 {
		width: 100%;	/* Breitenangabe fuer IE 5.x */
		w\idth: 8.8em;  /* Breitenangabe fuer IE 6 */
	}
	ul#Navigation a:hover, ul#Navigation span {
		border-color: white;
		border-left-color: black; border-top-color: white;
		color: black; background-color: white;
	}
	ul#Navigation h2 {
		font-size: 14px;
		margin: 1.1em 0 0;
		border-color: white;
		color: black; background-color: white;
	}

dazu HTML:

<div id="fixiert_Navigation">
	<ul id="Navigation">
		<li><a href="homepage.php">Home</a></li>

		<li><h2>Rubrik 1</h2></li>
		<li><a href="#Beispiel">Beispiel</a></li>
		<li><a href="#Beispiel">Beispiel</a></li>
		<li><a href="#Beispiel">Beispiel</a></li>

		<li><h2>Rubrik 2</h2></li>
		<li><a href="#Beispiel">Beispiel</a></li>
		<li><a href="#Beispiel">Beispiel</a></li>
		<li><a href="#Beispiel">Beispiel</a></li>

		<li><h2>Rubrik 3</h2></li>
		<li><a href="#Beispiel">Beispiel</a></li>
		<li><a href="#Beispiel">Beispiel</a></li>
		<li><a href="#Beispiel">Beispiel</a></li>
		<li><a href="#Beispiel">Beispiel</a></li>
	</ul>
</div>

so und das was ich horizontal erreichen will ist hier beschrieben.

Please help me

[~Chiller~]

klar das ist die allgemeine Funktion...
aber das muss ja nicht im fxiert_Navigation stehn oder?
sondern da wo die normale Navigation steht...

Und das mit dem Javascript? ich mein das zeigt der IE ja so nicht an...

[~Chiller~]

steht doch so bei selfhtml. Und man solls mit javacode umgehen. hab doch oben den link gepostet. er erkennt zwar den befehl an sich aber glaube nicht mit der mouseoverabfrage.

Zitat

Um unerwünschte Auswirkungen in anderen Browsern zu vermeiden, wird das Script über eine Browserweiche nur dem Internet Explorer (auch der Macintosh-Version) zugänglich gemacht. Die Funktion hoverIE wird vom Script mittels Seite Event-Handler onload aufgerufen und erfordert keine weiteren Änderungen am HTML-Quelltext. Das Script durchsucht die in der ul id="Navigation" enthaltenen Knoten und blendet die hierin verschachtelten ul-Elemente über die CSS-Eigenschaft display beim Überfahren mit der Maus (onmouseover) ein bzw. beim Verlassen (onmouseout) wieder aus. Dies erfordert beim Internet Explorer jedoch zusätzlich eine Änderung der Seite Hintergrundfarbe (backgroundColor).

Um den Internet Explorer 7 von diesem Script auszuschließen, können Sie es in einen Seite conditional comment (<!--[if lt IE 7]> <![endif]-->) setzen, wenn Sie auf die Unterstützung der alten Macintosh-Version verzichten.