von Ebenen in Tabellen Quellcode verhaut!?

Mich@el · 13.09.2006, 09:29

Ich habe eine Seite mit mehreren Ebenen erstellt. Wenn ich jetzt in DW unter Modifizieren die Ebenen in Tabellen "umwandeln" lasse, zerhaut das ziemlich den Quellcode. D.h. der Quellcode der (jetzt) entstandenen Tabellen sind ewig groß.
Ist das unter diesen Umständen grds. "normal"?

Eigentlich wollte ich ja alles in Ebenen lassen, bekam aber keine Zentrierung hin. Ich habe schon die Möglichkeit des Suchens genutzt und auch mehrere Einträge hierüber gefunden. Liegt wohl u.a. an der "absoluten" Einstellung der Ebenen. Mit css habe ich´s auch schon versucht und den Code von heromaster genutzt:

Code:

html,body {
font:.9em/1.3em Georgia, Verdana, Arial, Helvetica, sans-serif;
background:#E4E4C9;
color:#555;
text-align:center; /*Für den Internet Explorer*/
}

div#center {
text-align:left;
margin:0 auto;
background:#C5C58B;
width:700px;
border:2px solid #FFF;
padding:15px
}

Funktioniert aber leider auch nicht?!

Deswegen wieder zurück zu den "schönen" Tabellen.

Aber der Quellcode?

newcommer · 13.09.2006, 09:48

Erst mal finde ich die Vorgehensweise "goldig" ;-)
Man macht sich die Mühe und erstellt das Layout ohne Tabellen und sagt nachher zu DW ... "Mach mir bitte wieder Tabellen daraus ;-)" ...

Das Zentrieren der Seite sollte eigentlich ohne grössere Probleme gehen !!!
Dieses "text-align: center" im body für den IE kannst Du eigentlich vernachlässigen, da es nur den IE < 6 betrifft (bitte nicht schlagen, aber für den mache ich schon lange keine Seiten mehr) ...

Ansonsten sollte ein "margin:auto;" in Deinem äusseren Container reichen, um die Seite zu zentrieren ...

Und dass der Quellcode der Tabelle sehr gross wird kann ich mir auch vorstellen ... Denke aber mal, dass dies sich nur vermeiden lässt, wenn Du nicht mit Tabellen layoutest ;-)

Torsten · 13.09.2006, 09:55

Tabellen haben definitiv mehr HTML-Code als DIV-Container.
Ein Vergleich zuerst der HTML-Code einer Tabelle mit einer Zelle:

PHP-Code:


			
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>

Und nun der Code eines DIV-Containers:

PHP-Code:


			
<div id="Layer1"></div>

sämtliche Formatierungen des DIV-Containers werden dabei in CSS definiert:

PHP-Code:


			
#Layer1 {
    position:absolute;
    left:20px;
    top:90px;
    width:446px;
    height:183px;
    z-index:1;
}

Das macht den HTML-Code sehr schlank da man ja sämtliche CSS Anweisungen in eine externe Datei auslagern kann.

Soweit zur Theorie, in der Praxis muss man selbst Hand anlegen.
Dreamweaver positioniert nämlich alle aufgezogenen DIV-Container absolut - das ist nicht immer Optimal.

Um Dein Problem zu lösen gibst am besten mal ein Onlinebeispiel Preis damit wir sehen können an welcher Stelle es hapert

Mich@el · 13.09.2006, 10:06

Zitat:

Erst mal finde ich die Vorgehensweise "goldig" ;-)
Man macht sich die Mühe und erstellt das Layout ohne Tabellen und sagt nachher zu DW ... "Mach mir bitte wieder Tabellen daraus ;-)" ...

Zitat:

Um Dein Problem zu lösen gibst am besten mal ein Onlinebeispiel Preis damit wir sehen können an welcher Stelle es hapert

mach´ich, sobald ich zu Hause bin!

Danke schon mal für die ausführlichen Tipps!
Michael

Mich@el · 13.09.2006, 17:22

so, hier habe ich mal den Code vom Anfang der neuen Seite:

Code:

<!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=iso-8859-1" />
<title>solar-direct Service</title>
<style type="text/css">
<!--

body {

	background-color: #F5F7F4;
	background-image: url(Grafiken/hintergrund_1.jpg);
	background-repeat: repeat-x;
}
#untereBeschriftung {
	position:absolute;
	left:409px;
	top:49px;
	width:130px;
	height:20px;
	z-index:9;
	background-color: #FFFFCC;
}
#Inhalt {
	position:absolute;
	left:50px;
	top:74px;
	width:750px;
	height:204px;
	z-index:10;
	background-color: #CCCCCC;
}
#navcontainerA {
	position:absolute;
	left:70px;
	top:498px;
	width:170px;
	height:65px;
	z-index:11;
	background-color: #ffffff;
}
#navcontainerB {
	position:absolute;
	left:429px;
	top:498px;
	width:170px;
	height:65px;
	z-index:13;
	background-color: #FFFF99;
}
#navcontainerC {
	position:absolute;
	left:612px;
	top:498px;
	width:170px;
	height:65px;
	z-index:14;
	background-color: #FFFF99;
}
#navcontainerD {
	position:absolute;
	left:70px;
	top:570px;
	width:170px;
	height:65px;
	z-index:15;
	background-color: #FFFF99;
}
#navcontainerE {
	position:absolute;
	left:429px;
	top:570px;
	width:170px;
	height:65px;
	z-index:17;
	background-color: #FFFF99;
}
#navcontainerF {
	position:absolute;
	left:612px;
	top:570px;
	width:170px;
	height:65px;
	z-index:18;
	background-color: #FFFF99;
}
#Inhalt_klein {
	position:absolute;
	left:50px;
	top:640px;
	width:750px;
	height:44px;
	z-index:19;
	background-color: #FFFF66;
}
#navcontainerA {
}
-->
</style>
<script type="text/javascript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
<link href="styles/navi.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.Stil1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
}
-->
</style>
<link href="styles/navigation.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.Stil3 {font-size: 14px}
-->
</style>
<link href="styles/center.css" rel="stylesheet" type="text/css" />
<link href="styles/navihori.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="NavButton1" style="position: absolute; left: 428px; top: 25px; width: 124px; height: 25px; z-index: 1">
  <ul><li><a href="#" class="Stil3">Startseite</a></li>
</ul></div>
<div id="NavButton2" style="position: absolute; left: 563px; top: 25px; width: 124px; height: 25px; z-index: 2">
  <ul><li><a href="#" class="Stil1">Kontakt</a></li>
</ul></div>
<div id="NavButton3" style="position: absolute; left: 696px; top: 25px; width: 124px; height: 25px; z-index: 3">
  <ul><li><a href="#" class="Stil1">Impressum</a></li>
</ul></div>
<div id="Logo" style="position: absolute; left: 72px; top: 52px; width: 752px; height: 207px; z-index: 4; background: #CCCCCC"></div>
<div id="Flashanimation" style="position: absolute; left: 72px; top: 262px; width: 752px; height: 20px; z-index: 5; background: #FF9933"></div>
<div id="Hauptinhalt" style="position: absolute; left: 72px; top: 285px; width: 752px; height: 186px; z-index: 6; background: #FFFF00"></div>
<div id="Team" style="position: absolute; left: 84px; top: 476px; width: 240px; height: 66px; z-index: 7; background: #FFFFFF"><img src="Grafiken/Team_navi.jpg" alt="" name="Team_navi" width="110" height="64" border="1" align="left" id="Team_navi" /></div>
<div id="Leistung" style="position: absolute; left: 328px; top: 476px; width: 242px; height: 66px; z-index: 8; background: #FFFFFF"><img src="Grafiken/Leistung_navi.jpg" alt="" name="Leistung_navi" width="110" height="64" border="1" align="left" id="Leistung_navi" /></div>
<div id="Referenzen" style="position: absolute; left: 575px; top: 476px; width: 240px; height: 66px; z-index: 9; background: #FFFFFF"><img src="Grafiken/Referenzen_navi.jpg" alt="" name="Referenzen_navi" width="110" height="64" border="1" align="left" id="Referenzen_navi" /></div>
<div id="Kontakt" style="position: absolute; left: 84px; top: 545px; width: 240px; height: 66px; z-index: 10; background: #FFFFFF"><img src="Grafiken/Kontakt_2_navi.jpg" alt="" name="Kontakt_2_navi" width="110" height="64" border="1" align="left" id="Kontakt_2_navi" /></div>
<div id="Formulare" style="position: absolute; left: 328px; top: 545px; width: 242px; height: 66px; z-index: 11; background: #FFFFFF"><img src="Grafiken/Formular_navi.jpg" alt="" name="Formular_navi" width="110" height="64" border="1" align="left" id="Formular_navi" /></div>
<div id="Partner" style="position: absolute; left: 575px; top: 545px; width: 240px; height: 66px; z-index: 12; background: #FFFFFF"><img name="Partner_navi" src="Grafiken/Partner_navi.jpg" width="110" height="64" border="1" id="Partner_navi" alt="" /></div>
<div id="Inhalt_unten" style="position: absolute; left: 72px; top: 614px; width: 752px; height: 44px; z-index: 13; background: #FFFF66"></div>

</body>
</html>

newcommer · 13.09.2006, 17:27

So wie Torsten es schon vermutet hat, wird das mit dem Zentrieren nichts, da alle Container absolut positioniert sind ... und dann geht das nicht ;-)

Entweder versuchst Du einen "Aussen-Container" zu schaffen, den Du zentrierst und alle anderen Elemente relativ dazu positionierst oder Du fängst nochmal von vorne an, ohne die Funktionen von DW zu verwenden (alles von Hand schreiben... mache ich auch immer ;-)) Das jetzt auf die Schnelle ... ohne den gesamten Quellcode genaustens gelesen zu haben ;-)

Torsten · 13.09.2006, 18:20

Hallo Michael,

wenn Du mit Dreamweaver auf CSS-Designs umsteigst musst Du völlig umdenken.

Wenn Du Ebenen/Layer/DIV-Container in der Layout-Ansicht von Dreamweaver aufziehst, dann erstellt Dreamweaver einen sagen wir mal Crossbroserkompatiblen aber jedoch unflexiblen Code.

Am besten Du machst für den Anfang mal ein einfaches Tutorial, ich empfehle Dir dieses:
http://www.adobe.com/de/devnet/dream...ss_layout.html

Wenn Du das gelernte auf Dein Projekt übertragen möchtest dann mach Dir am besten mit Papier und Bleistift eine Skizze, wieviele DIV-Container und in welcher Anordnung Du diese brauchst.

Dann fängst Du an die CSS-Definition Deiner Seite zu stricken ;-)

Dabei kannst Du dann auch gleich einen div#center anlegen und wenn Du in diesem Deine anderen Container verschahctelst dann klappt das auch wie gewünscht.

Denn mitderweile gibt es unzählige Internetseiten die so aufgebaut sind und gleube mir keine von denen ist das Werk eines Zauberers

Mich@el · 13.09.2006, 20:19

Sehr guter Link, Torsten! Tutorials, das ist es, was ich eigentlich brauche.
Ich lese hier so viele Themen, die sich mit css beschäftigen. Natürlich wird immer wieder das gleiche gefragt ... und dann natürlich auch verständlich des öfteren auf ccs4you bzw. auf selfhtml verwiesen. Die Seiten sind, ohne Zweifel, wirklich gut! Und es gibt auch im Netz zig Seiten, die sich auch mit css-Tutorials beschäftigen.
Es ist nur so, dass es für mich und bestimmt auch für Andere hier im Forum nicht einfach ist, einen css Code "gleich" zu verstehen, der von Euch "Profis" dann auch immer wieder geliefert wird. Es gilt zu verstehen, was da als Antwort geschrieben wurde. Ich denke auch, dass deswegen viele User, trotz vorheriger Suche, das gleiche Thema immer wieder posten, in der Hoffnung, dass sie eine verständlichere Antwort bzw. Lösung erhalten. Es wäre einfach nur gut, wenn es zu den gelieferten Codes auch z.B. step by step Lösungen mitgeliefert werden würden. Wenn die in der Sparte DW gefragt wird, dann auch gleich mit Screenshots? Kann sein, dass ich zu viel von Euch verlange!? Ist ein Vorschlag, ein Wunsch. CSS4You ist m.M. auch nicht das ultimative Feld, wo man alles einfach erlernen kann.
Ich habe mal wieder bei amazon bestellt. Ein schönes css Buch für Einsteiger und die DW 8 DVD zum Anschauen und nachmachen. Der ultimative Kick für mich.

Vielleicht habe ich jetzt mal ein wenig Anreize für Euch geschaffen?! Würde mich und sicherlich auch andere sehr gut tun.

Viel Grüße
Michael

Torsten · 14.09.2006, 07:17

Guten Morgen Michael,

dann dürften Dich die Links aus diesem Beitrag: http://www.traum-projekt.com/forum/6...beitrag17.html sicherlich genauso interessieren.

Zu Deiner Anregung:
In den meisten Fällen ist das so das die User nicht so recht mit der Sprache herausrücken.

Ich bin mir fast sicher, wenn jemand z.B. im Dreamweaver-Board explizit danach fragt eine Anleitung bzw. einen Anstoss in die richtige Richtung zu bekommen dann bekommt er dies auch.

Man kann ebend leider nicht hinter die Kulissen schauen und weiß oft nicht ob ein User bereit ist zu lernen und aktiv am Unterricht teilzunehmen

Wenn man auf eine Frage wie:

Ich brauche eine scrollbare Zelle, wie geht das in Dreamwever?

Gleich eine komplette fertige bebilderte Lösung bietet läuft man Gefahr für den jenigen die gesamte Seite zu programmieren/schreiben

DaHu · 14.09.2006, 21:23

hallo,
um ein lyout zu zentrieren (und zwar so dass auch ältere browserversionen das interpretieren können) kann man ganz gut um alle inhalte eine äußere division legen..ich nenn die mal 'layout' und der kann man dann vollgende definition zuweisen:

#layout {
width: gewünschte weite px;
left: 50%;
margin-top: gewünschter abstand zur ob. kante;
margin-left: - hälfte der layoutbreite px;
position: relative;
}

LG

DaHu