Frames oder Tabelle?

R

Rockfreak

Aktives Mitglied
Thread Starter
Dabei seit
11.11.2008
Beiträge
104
Reaktionspunkte
0
Moin,

ich wollte die Homepage für unser studentisches Projekt in PHP umprogrammieren. Ich dachte an eine Mainseite mit ner Tabelle wo dann das Design in die Mitte kommt. Einach eine Spalte und 3 Zeilen mit Bildern und Navigation oben und in der mitte dann die beweglichen Seiten reinladen und unten wieder ne Zeile mit Bildern und Logos.

Die Seite ist bisher mit Frames und als "jetzt machst du das mal eben" Neueinsteiger in dieser Seite komme ich mit den Frames nichts zurecht, da ich die nciht optimal ergänzen kann.

Daher meine Frage: lieber einfuchsen in Frames oder alles neu machen?
Wenn neu, wie fixiere ich die tabelle, so dass sie immer in der mitte des Browserfensters ist? Das Design sollte wenn möglich nicht geändert werden...

ICh hoffe, dass war nicht zu viel Text :)
 
Lass es mich so formulieren. Die Frage ähnelt er Frage: "Welchem Arm darf ich dir abschlagen? Links oder rechts?"

Beide Möglichkeiten sind Mist. Tables dienen nicht em Markup und Frames sind quasi out ;)

Les dich in das Thema DIV Container und CSS ein. Aber ansonsten musst du es wissen, da beide Optionen andere Ziele verfolgen. Aber warum arbeitest du nicht direkt mit PHP Includes wenn du auch mit PHP arbeitest?
 
ich glaube auf die icludes wollte ich hinaus. muss mich erst wieder in die ganze geschichte reinarbeiten.

mir geht es hauptsächlich um das design. das sollte so bleiben wie es ist und ich habe beim nachbau mit tabellen so meine probleme und werd mir mal das mit den containern und css ansehen, da so die alte seite auch gemacht wurde plus frames.

bei interesse Klick
 
Wenn ich die wahl zwischen Frames und Tabellen hätte, würde ich CSS wählen. :)

Da Du ja eh PHP verwenden möchtest und keine rein statischen Seiten hast, binde doch die Navigation per include ein, oder gib die Navigation einfach über eine Methode aus.

Da gabs schonmal was hier im Forum.
Kannst ja mal danach suchen.

Ansonsten wäre eine Lösung mit divs und css auch noch einen Blick wert.
Da muß man sich aber erstmal etwas reinarbeiten.
 
ich glaube auf die icludes wollte ich hinaus. muss mich erst wieder in die ganze geschichte reinarbeiten.

mir geht es hauptsächlich um das design. das sollte so bleiben wie es ist und ich habe beim nachbau mit tabellen so meine probleme und werd mir mal das mit den containern und css ansehen, da so die alte seite auch gemacht wurde plus frames.

bei interesse Klick

Nich bös sein. Hab mir mal den Quelltext angeguckt :)

Is ja im Prinzip schon alles mit Div Containern gemacht worden. Letztendlich sind die Divs ja nur ein Container. Wo dieser steht, wie er aussieht etc. bestimmt ja CSS.

http://de.selfhtml.org/css/intro.htm

Ich denke das ist ein guter Einstieg ... ;)
 
Ich war mal etwas neugierig und habe mal einfach die HTML-Codes und das CSS der drei Frames in ein einziges HTML-Dokument zusammengepastet.
Natürlich nicht komplett, sondern nur die Inhalte.

Für simples zusammenpasten sieht das eigentlich schon nicht schlecht aus. :)

Der Code ist zwar streng genommen etwas gräuselich, aber Du wirst wahrscheinlich erstmal froh sein, wenn Du es in funktionierend hinbekommst. :)

HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
		<meta name="generator" content="Adobe GoLive" />
		<BASE HREF="http://www.ac2030.de/">
		<title>Blended Wing Body Projekt AC20.30</title>
		<link href="css/basic.css" rel="stylesheet" type="text/css" media="all" />
		<style type="text/css" media="all"><!--
body { margin: 0 0 0; }
#Ebene1 { position: absolute; top: 50px; left: 15%; width: 800px; height: 650px; }
#topframe { position: absolute; top: 0; left: 0; width: 800px; height: 100px; }
#Container1 { width: 800px; height: 650px; }
#bottom { position: absolute; top: 550px; left: 0; width: 800px; height: 100px; }
#mainframe { position: absolute; top: 100px; left: 0; width: 800px; height: 450px; }
.dsR426 /*agl rulekind: base;*/ { position: absolute; top: 30px; left: 608px; width: 190px; height: 37px; }
.dsR432 /*agl rulekind: base;*/ { left: 0; width: 799px; height: 96px; }
.dsR435 /*agl rulekind: base;*/ { text-align: center; position: absolute; top: 40px; left: 528px; width: 72px; height: 20px; }
.dsR437 /*agl rulekind: base;*/ { text-align: center; position: absolute; top: 40px; left: 438px; width: 82px; height: 20px; }
.dsR439 /*agl rulekind: base;*/ { text-align: center; position: absolute; top: 40px; left: 348px; width: 82px; height: 20px; }
.dsR441 /*agl rulekind: base;*/ { text-align: center; position: absolute; top: 40px; left: 238px; width: 102px; height: 20px; }
.dsR443 /*agl rulekind: base;*/ { text-align: center; position: absolute; top: 40px; left: 105px; width: 123px; height: 20px; }
.dsR444 /*agl rulekind: base;*/ { position: absolute; top: 0; left: 10px; width: 95px; height: 92px; }
.ds1 /*agl rulekind: base;*/ { font-size: 14px; }
.dsR439 /*agl rulekind: base;*/ { text-align: left; position: absolute; top: 10px; left: 90px; width: 619px; height: 20px; }
.dsR442 /*agl rulekind: base;*/ { text-align: left; position: absolute; top: 30px; left: 251px; width: 458px; height: 110px; }
.dsR450 /*agl rulekind: base;*/ { position: absolute; top: 30px; left: 90px; width: 150px; height: 112px; }
.dsR462 /*agl rulekind: base;*/ { position: absolute; top: 142px; left: 90px; width: 150px; height: 112px; }
.dsR463 /*agl rulekind: base;*/ { text-align: left; position: absolute; top: 142px; left: 251px; width: 459px; height: 103px; }
.dsR464 /*agl rulekind: base;*/ { text-align: left; position: absolute; top: 254px; left: 0; width: 793px; height: 20px; }
.dsR465 /*agl rulekind: base;*/ { text-align: left; position: absolute; top: 294px; left: 90px; width: 619px; height: 143px; }
.dsR466 /*agl rulekind: base;*/ { text-align: left; position: absolute; top: 274px; left: 90px; width: 619px; height: 20px; }
.dsR467 /*agl rulekind: base;*/ { background-image: url(http://www.ac2030.de/sites/frames/Untitled-1%20copy.png); width: 794px; height: 438px; }
.dsR33 /*agl rulekind: base;*/ { width: 800px; height: 101px; }
.dsR38 /*agl rulekind: base;*/ { position: absolute; top: 10px; left: 10px; width: 112px; height: 80px; }
.dsR40 /*agl rulekind: base;*/ { position: absolute; top: 10px; left: 130px; width: 125px; height: 80px; }
.dsR42 /*agl rulekind: base;*/ { position: absolute; top: 10px; left: 270px; width: 139px; height: 80px; }
.dsR44 /*agl rulekind: base;*/ { position: absolute; top: 10px; left: 420px; width: 136px; height: 80px; }
.dsR45 /*agl rulekind: base;*/ { position: absolute; top: 20px; left: 560px; width: 240px; height: 59px; }

--></style>

	</head>

	<body>
		<div id="Ebene1">
			<div id="Container1">
				<div style=" position: relative; width: 801px; height: 651px; -adbe-g: p,10,10;">
                    <!-- OBEN -->

<div class="dsR432" style=" margin: auto; position: relative; width: 799px; height: 96px; -adbe-g: p,10,10;background-color: #e3e3e3;">
			<div>
				<a href="main.html" target="mainframe"><img class="dsR29 dsR444" src="../../media/logos/bwb_logo.png" alt="" height="92" width="95" border="0" /></a></div>
			<div class="dsR443" style="-adbe-c:c;">
				<a href="../ac2030/ac2030.html" target="mainframe">Der AC20.30</a></div>

			<div class="dsR441" style="-adbe-c:c;">
				<a href="../die_gruppe/die_gruppe.html" target="mainframe">Die Gruppe</a></div>
			<div class="dsR439" style="-adbe-c:c;">
				<a href="../medien/medien.html" target="mainframe">Medien</a></div>
			<div class="dsR437" style="-adbe-c:c;">
				<a href="../foerdere/foerderer.html" target="mainframe">Förderer</a></div>
			<div class="dsR435" style="-adbe-c:c;">

				<a href="../kontakt/kontakt.html" target="mainframe">Kontakt</a></div>
			<div>
				<a href="http://www.haw-hamburg.de" target="_blank"><img class="dsR426" src="../../media/logos/logokl_fa_rechts01_trans_01.gif" alt="" height="37" width="190" border="0" /></a></div>
						
					</div>
                    <!-- CONTENT -->

<div class="dsR467" style=" margin: auto; position: relative; -adbe-g: p,10,10;">
			<div class="dsR464" style="-adbe-c:c;">
				_____________________________________________________________________________</div>
			<div class="dsR465" style="-adbe-c:c;">
				<div align="justify">
					<span class="ds1">Mit dem Beginn der Semesterferien konnten die Arbeiten am BWB-Projekt im vollen Umfang weitergehen. Hierfür werden in einem Mock-Up des Ac20.30 alle Bauteile eingebaut und getestet. Die Studenten können so verschiedene Konfigurationen entwickeln um bestmögliche Ergebnisse zu erzielen. Nebenbei wird das CAD-Modell des Nurflüglers verfeinert und erweitert. Ein solches virtuelles Modell ist eine Basis für alle weiteren Entwicklungen, aber auch Grundlage für genauere Schwerpunktberechnungen und CFD-Analysen.</span></div>

			</div>
			<div class="dsR466" style="-adbe-c:c;">
				<span class="ds1">26.07.2008</span></div>
			<div class="dsR439" style="-adbe-c:c;">
				<span class="ds1">29.01.2008</span></div>
			<div>
				<img class="dsR351 dsR450" src="http://www.ac2030.de/ac2040_ep1.jpg" alt="" border="0" /></div>
			<div>

				<img class="dsR462" src="http://www.ac2030.de/ac2040_ep2.jpg" alt="" height="112" width="150" border="0" /></div>
			<div class="dsR442" style="-adbe-c:c;">
				<div align="justify">
					<span class="ds1">Derzeit befinden sich die Studenten der HAW Hamburg in der Klausurenphase. Dies hat die Studenten allerdings nicht abgehalten ein paar wichtge Termine wahrzunehmen, wie zum Besipiel einen Fototermin mit dem Hamburger Wirtschaftssenator oder die Präsenzaktion in der Hamburger Europa-Passage.</span></div>
			</div>
			<div class="dsR463" style="-adbe-c:c;">
				<div align="justify">
					<span class="ds1">In den Semesterferien wird dann wieder mit Hochruck am AC20.30 gearbeitet um es weiter voran zu treiben und es für den Erstflug vorzubereiten. Weitere Informationen folgen.</span></div>

			</div>
		</div>
		

					<!-- UNTEN -->
<div class="dsR33" style=" margin: auto; position: relative; width: 800px; height: 101px; -adbe-g: p,10,10;background-color: #e3e3e3;">
			<div>
				<img class="dsR45" src="../../media/logos/lshh.gif" alt="" height="59" width="240" border="0" /></div>
			<div>
				<img class="dsR38" src="../../media/botom/1.png" alt="" height="80" width="112" border="0" /></div>
			<div>

				<img class="dsR40" src="../../media/botom/3.png" alt="" height="80" width="125" border="0" /></div>
			<div>
				<img class="dsR42" src="../../media/botom/2.png" alt="" height="80" width="139" border="0" /></div>
			<div>
				<img class="dsR44" src="../../media/botom/4.png" alt="" height="80" width="136" border="0" /></div>
		</div>

				</div>
			</div>

		</div>
		<p></p>
	</body>

</html>
 
Vielen Dank, für die Antworten.

Das die HP schon mit DIV Containern gemacht wurde, hatte ich nach euren Tipps auch gesehen. Das zusammenbasteln, hat mir auch schon ganz gut gefallen :)

Es wurde alles mit Golive gemacht, soviel ich weiß, und ich bearbeite es mit meiner guten alten Deamweaver MX Version.

Werde mir das morgen mal in Ruhe ansehen und versuchen die Tipps umzusetzten.

Danke
 
Huhu,

ja das mit dem zusammenbasteln hat soweit geklappt und das design sieht aus wie es soll.
Jetzt aber mal wieder ein Problem: Ich habe ein kleines Bild eingefügt, Flagge deutsch, und auch mit div's und css bearbeitet hingeschoben wo es hin soll und alles was ICH so bedacht habe. Nur wird Sie mir nicht angezeigt, wenn ich es Browser test. Denkfehler von mir?
 
Vieleicht hast Du sie per CSS einfach in einen nicht sichtbaren bereich verschoben, oder sie wird von anderen Elementen Überdeckt.

Wenn Du den Firefox benutzt, dann lade Dir doch mal das Addon firebug herunter.
Das ist gold wert und damit wirst Du das Bild schon wiederfinden. :)
 
Zurück
Oben Unten