✔ Tabelle zerfällt in 1000 Stücke wenn in DIV eingebunden

soezkan · 23. Juni 2009

Hallo zusammen,

ich habe vor Ewigkeiten mal mit Dreamweaver eine Tabelle gebaut, die ettliche Zellen enthält. Man kann diese Tabelle auch richtig anzeigen lassen, es sei denn sie steht direkt im HTML.
Wenn ich sie aber in ein DIV packe, dann fällt sie auseinander.

Es scheint so zu sein, als ob sich das <table ...> irgendwie nach unten hin die maximale Höhe sucht und dann nach unten "aufplatzt".
Hier auch der HTML-Source. Da sind jetzt zwar keine Images vorhanden, aber der Browser zeigt das trotzdem so wie es eigentlich sein sollte:

HTML:

siehe angehängtes ZIP

Kann mir da bitte jemand einen Rat geben?

Mein Website-Layout, in das diese Tabelle eingebunden wird, ist ein dreispaltiges DIV Layout, mit fixer breite, zentriert. Im mittleren DIV ist dann die Tabelle (welche leider komplett "nach unten aufbricht".

1000 Dank für jeden Tipp,
Viele Grüße,
Soezkan

tombe · 23. Juni 2009

Ich würde mir die Tabelle/die Datei(en) ja mal anschauen aber

a) bekomme ich eine Meldung die Datei sei ungültig oder beschädigt und
b) springt mein Virenschutz an

Gruß Thomas

Maik · 23. Juni 2009

soezkan hat gesagt.:
Wenn ich sie aber in ein DIV packe, dann fällt sie auseinander.

Hab ich eben gemacht, aber da fällt nix auseinander - warum auch?

mfg Maik

soezkan · 23. Juni 2009

Hallo Maik,

danke schonmal für die Nachricht. Ich hatte Dich ja gestern schonmal angesprochen wegen des Layouts und wenn Du die Tabelle in die #ContentBox packst, dann fällt sie auseinander.

Hier nochmal der Code:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="description" content="insurance">
<title>Meine Seite</title>
<link href="css/meineseite.css" rel="stylesheet" type="text/css">
<style type="text/css">
</style>
</head>
<body>

<div id="centerboxmain">
    <div id="LeftColumn">
    <p><img src="images/logo.png" border="0" alt="Meine Seite Logo"></p>
    <p><img src="bilder/clock.png" border="0" alt="Clock Cypheron"></p>
    </div>
    <div id="RightColumn">
    <p><img src="images/bookmark.png" border="0" alt="Bookmark this site"> Bookmark<br />
    <img src="images/feed.png" border="0" alt="RSS Feed"> RSS Feed</p>
    </div>
    <div id="CenterColumn">
        <div id="HeaderBox">
        Die heutigen Wissenschaftler haben Mathematik durch Experimente ersetzt, und sie verlieren sich von einer Gleichung in der anderen, bis sie schließlich eine Struktur konstruieren werden, die gar keine Beziehung mehr zur Realität hat.
        <br />
        <p class="celebrity">Nikola Tesla</p>
        </div>
        <div id="NavigationBox">
            <div id="MainNavigation">
                 <h6>Algorithmen</h6>
                <h6>Korrespondenzen</h6>
                <h6>Art Gallery</h6>
                <h6>Videos</h6>
                <h6>News</h6>
                <h6>Kontakt</h6>
            </div>
            <div id="SubNavigation">
                 <h6>Forum</h6>
                <h6>Newsletter</h6>
                <h6>Glossar</h6>
                <h6>Disclaimer</h6>
                <h6>Quellen</h6>
                <h6>Links</h6>                
            </div>
        </div>
        <div id="ContentBox">
        <p><h3>Die Zwei&nbsp;&nbsp; &bull; &nbsp;&nbsp;2<p style="font-weight: normal; font-variant: normal; font-size: 14px; font-style: normal">Two - Deux - Dos - Iki - Dva - ???</p></h3>
        </p>
        <p><br /><br />
        <p class="ContentColumnLeft">Dualit&auml;t, Zwielicht, Zwietracht, Konflikt, Zweifel, Andersartigkeit, der statische Zustand, das Verwurzelte, Gleichgewicht, Stabilit&auml;t, Reflexion, die entgegengesetzten Pole, die Doppelnatur des Menschen. Begierde, denn alles, was in Dualit&auml;t manifestiert ist, existiert in Gegensatzpaaren. Wie die Eins einen Punkt darstellt, steht die zwei f&uuml;r eine Strecke.</p>
        <p class="ContentColumnRight">Die Zwei ist das Weinen und das Lachen. Sie repr&auml;sentiert das urweibliche Prinzip der Empf&auml;ngnis, der gro&szlig;en Mutter. Das Gefühl bestimmt die Handlungen. Die Gegens&auml;tze, Sonne und Mond, K&ouml;nig und K&ouml;nigin, Schwefel und Quecksilber, anf&auml;nglich antagonistisch, aber am Ende aufgel&ouml;st und vereint im Androgyn.</p>
        </p>
        </div>
    </div>
</div>
</body>
</html>

Und hier das aktuelle CSS:

HTML:

body {
	background: url(../images/background_rect.png) repeat-y 50% 0;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	font-family: Georgia;
	background-color: #460202;
	text-align: center;
}

#centerboxmain {
	width: 1024px; 
	padding: 0px 0px 0px 0px;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-right: auto;
	margin-left: auto; 	
	/* opera does not like 'margin:20px auto' */
	text-align:left; 
	/* part 2 of 2 centering hack */
	width: 1024px; /* ie5win fudge begins */
	voice-family: "\"}\"";
	voice-family:inherit;
	width: 994px;
	min-height: 100%;
	height: 100%;
/*border: 1px dotted green;*/
}

html>body #centerboxmain {
	width: 994px; /* ie5win fudge ends */
	min-height: 100%;
	height: 100%;
}



/********************/
/** LEFT COLUMN *****/
/********************/

div#LeftColumn {
	font-family: Georgia;
	font-size: 15px;
	float: left; 
	width: 140px;
	margin: 10px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	min-height: 100%;
	height: 100%;
	text-align: center;
/*border: 1px dotted green;*/
}
div#LeftColumn p {
	font-family: Arial;
	font-size: 12px;
	margin: 0px 0px 0px 0px; 
	padding: 0px 0px 20px 0px;
}
div#LeftColumn ul {
	margin: 0px 0 15px 15px; 
	padding: 0 0 0 0;
}
div#LeftColumn li {
	font-family: Georgia;
	font-size: 15px;
	list-style: none;
	margin: 0px 0px 0px 0px; 
	padding: 0px 0px 0px 0px;
}

div#LeftColumn a {
	font-family: Georgia;
	font-size: 15px;
	display: block;
	text-decoration: none;
}
div#LeftColumn a:link {
	color: #666666
}
div#LeftColumn a:visited {
	color: #666666; 
}
div#LeftColumn a:hover {
	color: #000000; 
}
div#LeftColumn a:active {
	color: #666666 
}
div#LeftColumn a.subnavi {
	font-family: Georgia;
	font-size: 12px;
	list-style: none;
	margin: 0px 0px 0px -5px; 
	padding: 3px 0px 3px 0px;
}



/********************/
/** RIGHT COLUMN ****/
/********************/

div#RightColumn {
	font-family: Arial;
	float: right; 
	clear: none;
	width: 128px;
	color: #ffffff;
	margin: 17px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	font-size: 15px;
	text-align: left;
/*border: 1px dotted green;*/
}

div#RightColumn h2 {
	font-size: 14px;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}

div#RightColumn h3 {
	font-size: 14px;
	font-weight: normal;
	margin: 0px 0px 0px 0px ;
	padding: 0px 0px 7px 0px ;
}

div#RightColumn p {
	font-size: 14px;
	color: #EAE4D6;
	margin: 7px 0px 15px 0px ;
	padding: 7px 0px 0px 0px ;
}

div#RightColumn a {
	font-family: Arial;
	font-size: 13px;
	font-weight: bold;
	text-decoration: none;
	color: #FB8360;
}
div#RightColumn a:link {
	color: #FB8360
}
div#RightColumn a:visited {
	color: #FB8360; 
}
div#RightColumn a:hover {
	color: #FB8360; 
	text-decoration: underline;
}
div#RightColumn a:active {
	color: #FB8360 
}



/********************/
/** CENTER COLUMN ***/
/********************/

div#CenterColumn {
	margin: 0px 0px 0px -140px;
	padding: 0px 0px 0px 0px;
	text-align: center;
	float: left;
	width: 620px;
/*border: 1px dotted green;*/
}
* html div#CenterColumn {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	height: 1em;  /* Workaround gegen den 3-Pixel-Bug des Internet Explorer bis Version 6 */
}

/* HEADER BOX */

div#HeaderBox {
	margin: 20px 0px -5px 208px;
	padding: 0px 0px 0px 0px;
	font-family: Georgia;
	font-size: 12px;
	font-style: italic;
	text-align: left;
	color: #715E37;
	min-height: 78px;
	height: 78px;
	width: 580px;
}
* html div#HeaderBox {/*Bug fix IE6 */
	margin: 0px 0px 0px -10px;
	padding: 0px 0px 0px 0px;
}

div#HeaderBox .celebrity {
	margin: 0px 0px 0px 0px;
	font-variant: small-caps;
	text-align: right;
}

/* NAVIGATION BOX */

div#NavigationBox {
	margin: 0px 0px 0px 166px;
	padding: 0px 167px 0px 0px;
	text-align: center;
}
* html div#NavigationBox {/*Bug fix IE6 */
	margin: 0px 0px 0px -14px;
	padding: 0px 0px 0px 0px;
}

div#MainNavigation {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	background-color: #1C3369;

	width: 660px;
	min-height: 32px;
	height: 32px;
	text-align: center;
/*border: 1px dotted green;*/
}

div#MainNavigation h6 {
	margin: 6px 0px 0px 10px;
	padding: 0 0px 0 14px;
	font-family: Georgia;
	font-size: 14px;
	font-variant: small-caps;
	font-weight: normal;
	font-style: normal;
	color: #ffffff;
	float: left;
	text-align: center;
}

div#MainNavigation a {
	font-family: Georgia;
	font-size: 14px;
	font-weight: normal;
	text-decoration: none;
	color: #ffffff;
}
div#MainNavigation a:link {
	color: #ffffff
}
div#MainNavigation a:visited {
	color: #ffffff; 
}
div#MainNavigation a:hover {
	color: #ffffff; 
	text-decoration: underline;
}
div#MainNavigation a:active {
	color: #ffffff 
}

div#SubNavigation {
	margin: 0px 0px 0px 0px;
	padding: 0 0 0 0;
	color: #1C3369;
	background-color: #D0BCA6;
	width: 660px;
	min-height: 30px;
	height: 30px;
}
div#SubNavigation h6 {
	margin: 6px 8px 0px 10px;
	padding: 0 0px 0 16px;
	font-family: Georgia;
	font-size: 13px;
	font-variant: small-caps;
	font-weight: normal;
	font-style: normal;
	color: #1C3369;
	float: left;
	text-align: center;
}

div#SubNavigation a {
	font-family: Georgia;
	font-size: 13px;
	font-weight: normal;
	text-decoration: none;
	color: #1C3369;
}
div#SubNavigation a:link {
	color: #1C3369
}
div#SubNavigation a:visited {
	color: #1C3369; 
}
div#SubNavigation a:hover {
	color: #1C3369; 
	text-decoration: underline;
}
div#SubNavigation a:active {
	color: #1C3369 
}

/* CONTENT BOX */

div#ContentBox {
	margin: 0 0px 0 165px;
	padding: 30px 20px 30px 20px;
	font-family: Georgia;
	font-size: 14px;
	color: #1C3369;
	width: 620px;
	min-height: 100%;
	height: 100%;
	text-align: left;
	vertical-align: top;
}
* html div#ContentBox {/*Bug fix IE6 */
	margin: 0px 0px 0px -14px;
	padding: 30px 0px 0px 0px;
}

div#ContentBox p {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;	
}

div#ContentBox h3 {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	font-size: 16px;
	color: #1C3369;
	text-align: center;
}

div#ContentBox a {
	font-family: Georgia, Times New Roman;
	text-decoration: underline; 
	color: #1D3367;
}
div#ContentBox a:hover {
	text-decoration: none;
	color: #1D3367;
}
div#ContentBox a:active {
	text-decoration: none; 
	color: #1D3367;
}

div#ContentBox .ContentColumn {
	margin: 15px 0px 0px 0px;
	padding: 10px 21px 10px 0px;
	width: 185px;
	text-align: justify;
	vertical-align: top;
	float: left;

}

div#ContentBox .ContentColumn h4 {
	margin: 0px 0px 2px 0px;
	padding: 0px 0px 0px 0px;
	font-size: 14px;
}

div#ContentBox .ContentColumn p {
	margin: 0px 0px 17px 0px;
	padding: 0px 0px 0px 0px;
	font-size: 14px;
}

div#ContentBox .ContentColumnLeft {
	margin: 0 0 0 0px;
	padding: 0 0 0 0;
	width: 296px;
	text-align: justify;
	float: left;
}
div#ContentBox .ContentColumnLeft h4 {
	margin: 10px 0px 5px 0px;
	padding: 0px 0px 0px 0px;
	font-size: 14px;
}
div#ContentBox .ContentColumnLeft p {
	margin: 0px 0px 12px 0px;
	padding: 0px 0px 0px 0px;
	font-size: 14px;
}


div#ContentBox .ContentColumnRight {
	margin: 0 -1px 0 0;
	padding: 0 0 0 0;
	width: 296px;
	text-align: justify;
	float: right;

}
div#ContentBox .ContentColumnRight h4 {
	margin: 10px 0px 5px 0px;
	padding: 0px 0px 0px 0px;
	font-size: 14px;
}
div#ContentBox .ContentColumnRight p {
	margin: 0px 0px 12px 0px;
	padding: 0px 0px 0px 0px;
	font-size: 14px;
}

div#ContentBox .ContentSmallColumn {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	width: 185px;
	text-align: justify;
	float: left;
}

div#ContentBox .ContentBigColumn {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	width: 405px;
	float: right;
}

div#ContentBox .ContentWideColumn {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	width: 620px;
	text-align: justify;
	vertical-align: top;
	float: left;
}

th.alphabet_col_head {
	font-family: Georgia;
	padding: 5px 0 5px 0;
	border-left: 1px solid #ffffff;
	background-color: #1C3369;
	color: #ffffff;	
	text-align: center;
	vertical-align: top;
}
td.alphabet_col {
	font-family: Georgia;
	padding: 5px 0 5px 0;
	border-left: 1px solid #1C3369;
	border-bottom: 1px solid #1C3369;
	color: #1C3369;	
	text-align: center;
	vertical-align: top;
}

div#ContentBox .DivideContent {
	clear: both;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}

/* LICENSE BOX */

div#LicenseBox {
	margin: 10px 0px 0px 166px;
	padding: 10px 20px 10px 20px;
	color: #1C3369;	
	width: 620px;
	text-align: left;
	font-size: 10px;
}

div#LicenseBox a {
	font-family: Georgia, Times New Roman;
	text-decoration: underline; 
	color: #1C3369;	
}
div#LicenseBox a:hover {
	text-decoration: none;
	color: #1C3369;	
}
div#LicenseBox a:active {
	text-decoration: none; 
	color: #1C3369;	
}


/* FORM CLASSES */

.select_tiny {
	font-family: Georgia, Times New Roman; 
	font-size: 14px;
	color: #1D3367;
	background-color: #D0BCA6;
	font-style: italic;
	padding-left: 3px;
	letter-spacing: 0px;
	border: 1px solid #460202;
	width: 60px;
	padding: 3px;
	background-image: url(../images/input_bg.jpg);
}

.select_small {
	font-family: Georgia, Times New Roman; 
	font-size: 14px;
	color: #1D3367;
	background-color: #D0BCA6;
	font-style: italic;
	padding-left: 3px;
	letter-spacing: 0px;
	border: 1px solid #460202;
	width: 120px;
	padding: 3px;
	background-image: url(../images/input_bg.jpg);
}

.select_wide {
	font-family: Georgia, Times New Roman; 
	font-size: 14px;
	color: #1D3367;
	background-color: #D0BCA6;
	font-style: italic;
	padding-left: 3px;
	letter-spacing: 0px;
	border: 1px solid #460202;
	width: 240px;
	padding: 3px;
	background-image: url(../images/input_bg.jpg);
}

.input {
	font-family: Georgia, Times New Roman; 
	font-size: 13px;
	color: #1D3367;
	background-color: #D0BCA6;
	font-style: italic;
	padding-left: 3px;
	letter-spacing: 0px;
	border: 1px solid #460202;
	padding: 2px;
	height: 22px;
	vertical-align: middle;
	background-image: url(../images/input_bg.jpg);
}

.input_kontakt {
	font-family: Georgia, Times New Roman; 
	font-size: 13px;
	color: #1D3367;
	font-style: italic;
	padding-left: 3px;
	letter-spacing: 0px;
	border: 1px solid #460202;
	width: 240px;
	padding: 2px;
	height: 22px;
	vertical-align: middle;
	background-image: url(../images/input_bg.jpg);
}

.input_recommend {
	font-family: Georgia, Times New Roman; 
	font-size: 13px;
	color: #1D3367;
	font-style: italic;
	padding-left: 3px;
	letter-spacing: 0px;
	border: 1px solid #460202;
	width: 140px;
	padding: 2px;
	height: 22px;
	vertical-align: middle;
	background-image: url(../images/input_bg.jpg);
}

.input_normal {
	font-family: Georgia, Times New Roman; 
	font-size: 13px;
	color: #1D3367;
	background-color: #D0BCA6;
	font-style: italic;
	padding-left: 3px;
	letter-spacing: 0px;
	border: 1px solid #460202;
	width: 240px;
	padding: 2px;
	height: 22px;
	vertical-align: middle;
	background-image: url(../images/input_bg.jpg);
}

.input_small {
	font-family: Georgia, Times New Roman; 
	font-size: 13px;
	color: #1D3367;
	background-color: #D0BCA6;
	font-style: italic;
	padding-left: 3px;
	letter-spacing: 0px;
	border: 1px solid #460202;
	width: 44px;
	padding: 2px;
	height: 22px;
	vertical-align: middle;
	background-image: url(../images/input_bg.jpg);
}

.input_tiny {
	font-family: Georgia, Times New Roman; 
	font-size: 13px;
	color: #1D3367;
	background-color: #D0BCA6;
	font-style: italic;
	padding-left: 3px;
	letter-spacing: 0px;
	border: 1px solid #460202;
	width: 30px;
	padding: 2px;
	height: 22px;
	vertical-align: middle;
	background-image: url(../images/input_bg.jpg);
}

.input_text {
	font-family: Georgia, Times New Roman; 
	font-size: 13px;
	color: #1D3367;
	background-color: #D0BCA6;
	font-style: italic;
	padding-left: 3px;
	letter-spacing: 0px;
	border: 1px solid #460202;
	width: 280px;
	height: 150px;
	padding: 3px;
	background-image: url(../images/input_bg_long.jpg);
}

.submit {
	font-family: Georgia, Times New Roman; 
	font-size: 13px;
	color: #1D3367;
	background-color: #EAE4D6;
	font-style: normal;
	font-variant: small-caps;
	padding-left: 3px;
	letter-spacing: 0px;
	border: 2px solid #1D3367;
	letter-spacing: 1px;
	font-weight: bold;
	padding: 6px;
	vertical-align: middle;
	background-image: url(../images/input_bg.jpg);
}

.citation {
	font-style: italic;
}

Ich hoffe Du kannst was damit anfangen.

Vielen Dank für mehr Info.

Soezkan

Maik · 23. Juni 2009

Ähm, dies war gestern der letzte Stand der Dinge: http://www.tutorials.de/forum/css/3...sen-abstand-aber-nicht-immer.html#post1772498

Und wieso kommst du jetzt mit dem alten HTML-Code ums Eck?

Zumindest weiß ich jetzt schon mal, weshalb du da mit margin-left:-140px für #CenterColumn herumhantieren mußt :suspekt:

Tja, wer lesen kann, ist klar im Vorteil

Maik hat gesagt.:
Da es sich hier um ein Layout mit fixer Breite handelt, kannst du den mittleren Spaltenblock #CenterColumn im HTML-Code zwischen den beiden äußeren Blöcken aufrufen, anstatt am Ende des Markups, und ihn im CSS mittels float:left aus dem normalen Textfluß nehmen.

Dies verhindert den verursachten Darstellungsfehler durch das angewandte clear:both im Block #ContentBox .

mfg Maik

soezkan hat gesagt.:
Danke schonmal für die Antwort, nur leider verstehe ich nicht was ich tun soll. Könntest Du mir nochmal helfen? Danke!

Maik hat gesagt.:

HTML:

<div id="centerboxmain">
        <div id="LeftColumn">...</div>
        <div id="CenterColumn">...</div>
        <div id="RightColumn">...</div>
</div>

CSS:

div#CenterColumn {
        margin: 0px 0px 0px 0px;
        padding: 0px 0px 0px 0px;
        text-align: center;
        float:left; /* Element soll rechts umflossen werden */
        width:620px; /* Elementbreite = #ContentBox */
}

div#HeaderBox {
        margin: 0px 0px -5px 0px; /* linker Außenabstand auf 0 gesetzt */
        padding: 20px 0px 0px 0px;
        font-family: Georgia;
        font-size: 12px;
        font-style: italic;
        text-align: left;
        color: #715E37;
        min-height: 78px;
        height: 78px;
        width: 580px;
}
div#NavigationBox {
        margin: 0px 0px 0px 0px; /* linker Außenabstand auf 0 gesetzt */
        padding: 0px 167px 0px 0px;
        text-align: center;
}
div#ContentBox {
        margin: 0 0 0 0; /* linker Außenabstand auf 0 gesetzt */
        padding: 30px 20px 30px 20px;
        font-family: Georgia;
        font-size: 14px;
        color: #1C3369;
        width: 620px;
        min-height: 100%;
        height: 100%;
        text-align: left;
        vertical-align: top;
}

mfg Maik

Wenn ich in meinen gestern überarbeiteten Code deine Tabelle in #ContentBox einpflanze, zerfällt sie in keinster Weise in 1000 Stücke.

mfg Maik

soezkan · 23. Juni 2009

Hallo!

Danke schonmal für die hilfreichen Tipps

Das mit der div#ContentBox stimmt, aber darin liegen ja immer div-klassen nebeneinander und wenn man die Tabelle in .ContentColumnBig (oder eine andere) packt zerbröselt alles. Hier nochmal der Abschnitt für #ContentBox:

HTML:

/* CONTENT BOX */

div#ContentBox {
	margin: 0 0px 0 165px;
	padding: 30px 20px 30px 20px;
	font-family: Georgia;
	font-size: 14px;
	color: #1C3369;
	width: 620px;
	min-height: 100%;
	height: 100%;
	text-align: left;
	vertical-align: top;
}
* html div#ContentBox {/*Bug fix IE6 */
	margin: 0px 0px 0px -14px;
	padding: 30px 0px 0px 0px;
}

div#ContentBox p {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;	
}

div#ContentBox h3 {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	font-size: 16px;
	color: #1C3369;
	text-align: center;
}

div#ContentBox a {
	font-family: Georgia, Times New Roman;
	text-decoration: underline; 
	color: #1D3367;
}
div#ContentBox a:hover {
	text-decoration: none;
	color: #1D3367;
}
div#ContentBox a:active {
	text-decoration: none; 
	color: #1D3367;
}

div#ContentBox .ContentColumn {
	margin: 15px 0px 0px 0px;
	padding: 10px 21px 10px 0px;
	width: 185px;
	text-align: justify;
	vertical-align: top;
	float: left;

}

div#ContentBox .ContentColumn h4 {
	margin: 0px 0px 2px 0px;
	padding: 0px 0px 0px 0px;
	font-size: 14px;
	text-align: left;
	vertical-align: top;
}

div#ContentBox .ContentColumn p {
	margin: 0px 0px 17px 0px;
	padding: 0px 0px 0px 0px;
	font-size: 14px;
}

div#ContentBox .ContentColumnLeft {
	margin: 0 0 0 0px;
	padding: 0 0 0 0;
	width: 296px;
	text-align: justify;
	float: left;
}
div#ContentBox .ContentColumnLeft h4 {
	margin: 10px 0px 5px 0px;
	padding: 0px 0px 0px 0px;
	font-size: 14px;
	text-align: left;
	vertical-align: top;
}
div#ContentBox .ContentColumnLeft p {
	margin: 0px 0px 12px 0px;
	padding: 0px 0px 0px 0px;
	font-size: 14px;
}


div#ContentBox .ContentColumnRight {
	margin: 0 -1px 0 0;
	padding: 0 0 0 0;
	width: 296px;
	text-align: justify;
	float: right;

}
div#ContentBox .ContentColumnRight h4 {
	margin: 10px 0px 5px 0px;
	padding: 0px 0px 0px 0px;
	font-size: 14px;
	text-align: left;
	vertical-align: top;
}
div#ContentBox .ContentColumnRight p {
	margin: 0px 0px 12px 0px;
	padding: 0px 0px 0px 0px;
	font-size: 14px;
}

div#ContentBox .ContentSmallColumn {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	width: 185px;
	text-align: justify;
	float: left;
}

div#ContentBox .ContentBigColumn {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	width: 405px;
	float: right;
}

div#ContentBox .ContentWideColumn {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	width: 620px;
	text-align: justify;
	vertical-align: top;
	clear: both;
}

td {
	padding: 3px;
	text-align: left;
	vertical-align: top;
}

td.glossar {
	padding: 3px;
	text-align: left;
	vertical-align: middle;
}

li.details {
	margin-left: 5px 0 5px 0;
	padding: 3px;
	text-align: left;
	vertical-align: middle;
	width: 300px;
}

th.alphabet_col_head {
	font-family: Georgia;
	padding: 5px 0 5px 0;
	border-left: 1px solid #ffffff;
	background-color: #1C3369;
	color: #ffffff;	
	text-align: center;
	vertical-align: top;
}
td.alphabet_col {
	font-family: Georgia;
	padding: 5px 0 5px 0;
	border-left: 1px solid #1C3369;
	border-bottom: 1px solid #1C3369;
	color: #1C3369;	
	text-align: center;
	vertical-align: top;
}

div#ContentBox .DivideContent {
	clear: both;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}

Das andere muss ich mir erstmal noch ansehen.

Danke auf jeden Fall, falls Dir hier noch was auffällt und Du mir bescheid geben könntest.

Viele Grüße
Soezkan

Maik · 23. Juni 2009

*lol*

Dem "margin:0 0 0 -140px" für #CenterColumn rückst du hier scheinbar mit "margin: 0 0 0 165px" für #ContentBox zu Pelze, um am Ende einen "Zwischenabstand" von fünfundzwanzig Pixeln herauszuholen :suspekt:

Orientier dich besser mal an meinem gestern Abend zuletzt geposteten Code.

mfg Maik

soezkan · 24. Juni 2009

Ja danke, war ja auch Blödsinn mit dem -140px. Habe das geändert. Aber bei CSS bin ich immer gerade so am hinbekommen.
Die Tabelle zerbröckelt aber immer noch. Ich glaube da muss was neues her.

Danke!

Soezkan

Maik · 24. Juni 2009

soezkan hat gesagt.:
Die Tabelle zerbröckelt aber immer noch.

Bei mir nicht.

mfg Maik

soezkan · 24. Juni 2009

Das ist ja komisch. Hm.
Könntest Du mir die "funktionierende Version" bitte mal hier posten oder als ZIP senden?

Dankeschön

Viele Grüße
Soezkan

✔ Tabelle zerfällt in 1000 Stücke wenn in DIV eingebunden

soezkan

Erfahrenes Mitglied

Anhänge

tombe

Erfahrenes Mitglied

Maik

soezkan

Erfahrenes Mitglied

Maik

soezkan

Erfahrenes Mitglied

Maik

soezkan

Erfahrenes Mitglied

Maik

soezkan

Erfahrenes Mitglied

Neue Beiträge