Mehrere Tabellen in einem Div mit gewissem abstand erstellen nund das div zentrieren

web673 · 31 August 2008

Hi

ich habe ein "neues" problem "nerfend schreib" und ich bekomms wieder nicht hin......

also das div liegt um alle tabellen und divs herum. (ich bleib beim tabellendiv design).

jetzt möchte ich die erste tabelle mit einem abstand von 50 px vom zentrierten div machen. dann die zweite tabelle von der ersten tabelle mit einem abstand von 60 px...

wie ghet das genau ?
das ich an einem objekt eine gewisse entfernung machen kann ?

grüße

_Thor_ · 31 August 2008

Genau was du suchst. ;) Abstände: Übersicht: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets

web673 · 1 September 2008

hi

okay ich habs hinbekommen

aber jetzt interpretiert der ie den code total falsch und der firefox stellt alles richtig dar... wieso ?.. . ich verzweifel noch.. blöder ie.....

hier mein code: (index.php)

Code:

<?php include 'header.php';	//Header Datei (in dieser Datei befinden sich die Syles) ?>
<br><br>

<div style="width: 944px; margin: 0px auto">
    <div class="left_box">
    <table border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td class="oben_links1"></td>
		<td class="oben_mitte1">Willkommen</td>
		<td class="oben_rechts1"></td>
	</tr>

	<tr>
		<td class="links1"></td>
		<td class="inhalt1">
        <p>Home</p>
        </td>
		<td class="rechts1"></td>
	</tr>

	<tr>
		<td class="unten_links1"></td>
		<td class="unten_mitte1"></td>
		<td class="unten_rechts1"></td>
	</tr></table>
</div>

<div class="right_box"><img src="http://www.html.de/images/lg.png" alt="bild" border="0" height="210" width="120"></div>
<div class="left_box2"><img src="http://www.html.de/images/rg.png" alt="bild" border="0" height="210" width="120"></div>

<table class="tabelle" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td class="oben_links"></td>
		<td class="oben_mitte">willkommen</td>
		<td class="oben_rechts"></td>
	</tr>

	<tr>
		<td class="links"></td>
		<td class="inhalt">
        <p>dasdddddddddd ddddd ddddddd dddddddddd dddddd ddddddd ddddddd dddddddd ist der inhalt :-)</p>
	    <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
	    <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
	    <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
	    <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
	    <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>
        </td>
		<td class="rechts"></td>
	</tr>

	<tr>
		<td class="unten_links"></td>
		<td class="unten_mitte"></td>
		<td class="unten_rechts"></td>
	</tr>
</table><br></div>
</body>

hier die header.php

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title><?php echo $title ?></title>
<link href="design.css" rel="stylesheet" type="text/css">
    <style type="text/css">
      .left_box {
       position: fixed;
       padding-left: 5px;
      }
	  .left_box2 {
       position: fixed;
      padding-left:5px;
	   top:180px;
      }
      .right_box {
       position: fixed;
		margin-left: 823px;
		top:180px;
      }
      .#centert {
	margin-left: auto; 
	margin-right: auto;
	margin: 0 auto; 
      }
    </style>
    </head>

<body>

hier die design.css

Code:

	* {
	padding: 0;
	margin: 0;
	}

	body {
	color: #000000;
	font-size: 12px;
	background-color: #5b7e94;

	}

	img {
	border: none;
	vertical-align: middle;
	}

	.oben_mitte {
	position: relative;
	width: 580px;
	height: 54px;
	text-align: center;
	background-image: url(images/ramen/oben_mitte.png);
	background-repeat: repeat-x;
	background-position: center;
	}

	.oben_links {
	position: relative;
	width: 36px;
	height: 54px;
	text-align: center;
	background-image: url(images/ramen/oben_links.png);
	background-repeat: no-repeat;
	background-position: center;
	}

	.oben_rechts {
	position: relative;
	width: 47px;
	height: 54px;
	text-align: center;
	background-image: url(images/ramen/oben_rechts.png);
	background-repeat: no-repeat;
	background-position: center;
	}

	.links {
	position: relative;
	width: 36px;
	height: 1px;
	text-align: center;
	background-image: url(images/ramen/links.png);
	background-repeat: repeat-y;
	background-position: center;
	}

	.rechts {
	position: relative;
	width: 47px;
	height: 1px;
	text-align: center;
	background-image: url(images/ramen/rechts.png);
	background-repeat: repeat-y;
	background-position: center;
	}

	.inhalt {
	position: relative;
	text-align:center;
	background-repeat: repeat;
	background-image: url(images/ramen/hg.png);
	}

	.unten_links {
	position: relative;
	width: 36px;
	height: 66px;
	text-align: center;
	background-image: url(images/ramen/unten_links.png);
	background-repeat: no-repeat;
	background-position: center;
	}

	.unten_mitte {
	position: relative;
	width: 1px;
	height: 66px;
	text-align: center;
	background-image: url(images/ramen/unten_mitte.png);
	background-repeat: repeat-x;
	background-position: center;
	}

	.unten_rechts {
	position: relative;
	width: 47px;
	height: 66px;
	text-align: center;
	background-image: url(images/ramen/unten_rechts.png);
	background-repeat: no-repeat;
	background-position: center;
	}

	.oben_mitte1 {
	width: 1px;
	height: 54px;
	background-image: url(images/ramen/oben_mitte.png);
	background-repeat: repeat-x;
	background-position: center;
	}

	.oben_links1 {
	width: 36px;
	height: 54px;
	background-image: url(images/ramen/oben_links.png);
	background-repeat: no-repeat;
	background-position: center;
	}

	.oben_rechts1 {
	width: 47px;
	height: 54px;
	background-image: url(images/ramen/oben_rechts.png);
	background-repeat: no-repeat;
	background-position: center;
	}

	.links1 {
	width: 36px;
	height: 1px;
	background-image: url(images/ramen/links.png);
	background-repeat: repeat-y;
	background-position: center;
	}

	.rechts1 {
	width: 47px;
	height: 1px;
	background-image: url(images/ramen/rechts.png);
	background-repeat: repeat-y;
	background-position: center;
	}

	.inhalt1 {
	background-repeat: repeat;
	background-image: url(images/ramen/hg.png);
	text-align: center;
	}

	.unten_links1 {
	width: 36px;
	height: 66px;
	background-image: url(images/ramen/unten_links.png);
	background-repeat: no-repeat;
	background-position: center;
	}

	.unten_mitte1 {
	width: 1px;
	height: 66px;
	background-image: url(images/ramen/unten_mitte.png);
	background-repeat: repeat-x;
	background-position: center;
	}

	.unten_rechts1 {
	width: 47px;
	height: 66px;
	background-image: url(images/ramen/unten_rechts.png);
	background-repeat: no-repeat;
	background-position: center;
	}

	.tabelle {
	margin-left: 160px;
	}

	.menu {
	text-align:center;
	}

	.textboxen {
	background-color: #CCCCCC;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-bottom-color: #d7a256;
	border-left-color: #d7a256;
	border-right-color: #d7a256;
	border-top-color: #d7a256;
	}

	h1 {
	font-family: Arial;
	font-size: 36px;
	font-style: normal;
	display: inline;
	color: #99CCFF;
	}

	h2 {
	font-family: Arial;
	font-size: 17px;
	font-style: normal;
	display: inline;
	}
	
	h3 {
	font-family: Arial;
	font-size: 18px;
	font-style: normal;
	display: inline;
	}

	.menum {
	color: #7c1e29;
	text-decoration: none;
	font-family: "Times New Roman", Times, serif;
	font-size: 15pt;
	}
	
	.menum:hover {
	color: #7c1e29;
	text-decoration: underline;
	font-family: "Times New Roman", Times, serif;
	font-size: 15pt;
	}

	.link {
	color: #D5A726;
	text-decoration: none;
	font-family: "Times New Roman", Times, serif;
	font-size: 15pt;
	}

	.link:hover {
	color: #D5A726;
	text-decoration: underline;
	font-family: "Times New Roman", Times, serif;
	font-size: 15pt;
	}

	.right {
	text-align: right;
	}

	.left {
	text-align: left;
	}

	.mail {
	font-size: 9px
	}

	.menuklotz {

	margin: 0 0 0 auto;
	position: fixed;
	}

manche elemente in der css datei sind nichtmer da also nicht wudern.. ich bin am experimentieren

ich hoffe einer kann mich wegen der ie fehlinterpretation aufklähren

danke schonmal

grüße

web673

prm · 1 September 2008

Solange du diesen Mix aus Tabellen und divs, dazu noch mit unnötigen position-Angaben hast, wird das nichts werden.

Die Tabellen sind m.E. vollkommen unnötig.
Es wäre sinnvoll, wenn du dir über die Anordnung von Div's per float-Angaben etwas Gedanken machen würdest. Damit kannst du diese nebeneinander anordnen, ohne die Tabellenkonstruktion.

Wenn du unbedingt beim "Tabellendesign" bleiben willst (Efchen sei dir gnädig), dann verzichte konsequent auf CSS-Angaben, die da nicht reinpassen, insbesondere was Positions betrifft.

So wie es aussieht hast du ein klassisches dreipaltiges Layout. Sieh dir hierzu einmal dieses Beispiel an: Dreispaltiges Layout, zentriert mit fixen Breiten

web673 · 1 September 2008

hi

ich habe das jetzt mit würgen hinbekommen ^^

es funktioniert jetzt im firefox 2, 3 und ie 7.

grüße

web673

Mehrere Tabellen in einem Div mit gewissem abstand erstellen nund das div zentrieren

web673

Neues Mitglied

_Thor_

Aktives Mitglied

web673

Neues Mitglied

prm

Aktives Mitglied

web673

Neues Mitglied

Neueste Beiträge