✔ 3-Spalteb-DIV mit Menü links

Status
Nicht offen für weitere Antworten.
K

Klettermaxe

Grünschnabel
Hallo alle zusammen,

da ich das Problem hatte, dass sich meine Website nicht bei allen Auflösungen komplett zeigte, sondern am unteren Ende etwas abgeschnitten wurde und die 3 Frames in der Breite zusammen gestaucht wurden, habe ich etwas gegoogelt und bin auf die Layout-Gestaltung via DIVs und CSS gekommen. (Von Framesets wurde ja häufig abgeraten.)
Nun hab ich es endlich geschafft, die 3 Bilder so zu positionieren und, wie ich mir das vorstelle. (Die Site ist nun Scrollbar und die Bilder in den DIVs werden nicht mehr gestaucht, wenn die Breite geändert wird.)
Jetzt steh ich aber vor dem nächsten Problem.
Ich würde gerne in dem linken DIV mein Menü wieder so aufbauen, wie ich es in meinem HTML-Frameset getan habe. Es soll also beim Klick auf den Menü-Punkt links, das DIV in der Mitte gändert werden. Das linke und rechte DIV bleibt immer unverändert. (In HTML habe ich das so gelöst:

index.html
Code: 
<body bgcolor="#ffffff">
<img src="bilder/01.jpg" name="n01" width="162" height="732" hspace="0" vspace="0" border="0" usemap="#n01Map" id="n01" />
<map name="n01Map" id="n01Map"><area shape="rect" coords="43,664,153,681" href="./impressum.html" target="main" />
<area shape="rect" coords="70,62,132,95" href="./02.html" target="main" />
<area shape="rect" coords="52,105,143,124" href="./pictures.html" target="main" />
</map>
</body>

Hier der Link zur derzeitigen HTML-Version.

Da es aber ohne Frames auch keine Targets gibt, steh ich jetzt vor einem Rätsel!
Mein der zeitige Code sieht so aus:

index.css
Code: 
@charset "utf-8";
		
	body {
	background-color: #000000;
	position: absolute;
	left: 50%;
	top: 50%;
	padding-top: 0%;
	margin-top:-366px;
	height: 732px;
	width: 968px;
	margin-left: -484px;
		}
	
	#links {
	background-color: #000000;
	background-image: url(../pics/01.jpg);
	top: 0px;
	left: 0px;
	width: 162px;
	height: 732px;
	position: absolute;
		}

	#mitte {
	background-color: #000000;
	background-image: url(../pics/02.jpg);
	position: absolute;
	left: 162px;
	top: 0px;
	height: 732px;
	width: 671px;
		}

	#rechts {
	background-color: #000000;
	background-image: url(../pics/03.jpg);
	left: 833px;
	top: 0px;
	position: absolute;
	height: 732px;
	width: 135px;
			}

index.html
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Index</title>
<link rel="stylesheet" type="text/css" href="css/index.css" />
</head>

<body>

<div id="links"></div>

<div id="mitte"></div>

<div id="rechts"></div>

</body>
</html>

Hier der Link zur Versuchsversion.

Hat jemand nen Tip für mich, wie man das realisieren kann?
Vielen Dank
 
Zuletzt bearbeitet:
Grundsätzlich gibt es da mehrere Möglichkeiten:

Eine Frameset-Seite hat das Problem, dass man die Seiten im Frameset nicht direkt ansprechen kann (oder es gibt Probleme,dass man die Herkunft nicht direkt sehen kann usw.). Deine Bilder wirst Du aber nicht direkt verlinken wollen. In diesem Fall kannst Du einen iframe nutzen, der sich wie ein ganz normaler Frame verhält. Diesen iframe baust Du in die div mit 100% Größe ein. Verlinken kannst du dann wie vorher.

Wenn Du auch keinen iframe haben willst, kannst Du die Bilder in übereinanderliegende divs laden und die divs unsichtbar machen. Mit dem Klick auf die entsprechenden Menüpunkte werden dann die entsprechenden divs angezeigt.

Per Ajax kannst Du die Bilder bei Klick zur Laufzeit laden.
 
Moin,

mit der Formatierungssprache CSS lässt sich an dem Umstand aber nichts ändern / verbessern, denn für solche Aufgaben ist sie überhaupt nicht ausgelegt bzw. vorgesehen.

Grundsätzlich stehen dir hier drei Techniken zur Auswahl, um den Inhalt im DIV zu tauschen:

  1. iFrame (= eingebetteter Frame im div-Element)

  2. JS/AJAX -> Dynamic Ajax Content als mögliches Anwendungsbeispiel

  3. PHP -> [phpf]include[/phpf]-Methode, um die Inhalte serverseitig dynamisch in das Dokument zu laden.
    In unseren PHP-Tutorials finden sich hierzu auch diverse Anleitungen, falls diese Sprache für dich Neuland sein sollte.
Das Thema bring ich dann erstmal im HTML-Forum unter, bis geklärt ist, wie du es nun umsetzen möchtest.

mfg Maik
 
Zunächst mal vielen Dank.

Ich denke, ich werde mit JS/Ajax weitermachen.
iframes mag ich nicht und PHP ist mir ehrlich gesagt etwas zu komplex.

Habe mir gerade mal Deinen Link dazu angeschaut und das Script eingebaut.
Scheint schon bissl zu funktionieren. *freu*
Ich lege über meinen Hintergrund ein transparentes GIF und verlinke dann darüber.
Spricht da etwas dagegen?
Habe nur bemerkt, dass die html-Datei (bestehende aus meiner alten Seite), die ich in den DIV-Container geladen habe noch nicht pixelgenau passt. Ich denke, dass ich die Positionierung dort vornehmen muss!?

Grüße
 
Klettermaxe hat gesagt.:
Habe nur bemerkt, dass die html-Datei (bestehende aus meiner alten Seite), die ich in den DIV-Container geladen habe noch nicht pixelgenau passt. Ich denke, dass ich die Positionierung dort vornehmen muss!?
Zum Vergrößern anklicken....

Möglichwerweise brauchst du nur den Universalselektor * zu Beginn der aufgerufenen Stylesheets zu notieren, um die (in den Browsern voreingestellten) Polsterungseigenschaften aller im Dokument enthaltenden Block-Elemente auf null zurückzusetzen, und sie dort gezielt zu deklarieren, wo sie erwünscht sind.

Code: 
* {
margin:0;
padding:0;
}

Das hat den Hintergrund, dass sich diese Default-Werte für Außen- und Innenabstände der einzelnen Block-Elemente in den Browser-Typen z.T. erheblich unterscheiden, was bei einem "pixelgenauen / -orientierten" Layout gleich ins Gewicht fällt, wenn die Seitendarstellung in ihnen miteinander verglichen wird.

mfg Maik
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück