Supportnet / Forum / Webseiten/HTML
Wie zentriere ich eine Tabelle
Frage
Hallo!
Ich möchte das die folgende Mitteilung mit Schatten immer in der Fenstermitte bleibt, unabhängig von der Fenstergröße und Monitor-Auflösung. Die Mitteilung soll immer in dem sichtbaren Tabellenrahmen bleiben und das möglichst bei allen Browsertypen.
Danke, schon mal für euere Hilfe.
<style type="text/css">
<!--
html, body { width:100%; height:100%; margin:0; padding:0; }
.aussen { width:100%; height:100%; }
.innen { margin-left:auto;
margin-right:auto;
margin-top:50px;
margin-bottom:50px;
text-align:center;
vertical-align:middle;
}
.text { font-size:16pt;
color:#FFFFFF;
font-family:Helvetica, Verdana, Arial;
text-align:center;
}
.text1 { font-size:14pt;
color:#FFFF00;
font-family:Helvetica, Verdana, Arial;
text-align:center;
}
a { text-decoration:none; }
DIV.shadow { display:block;
background-color:#cdcdcd;
position:relative;
top:0px;
left:0px;
margin-left:15px;
margin-right:10px
}
DIV.shadow TABLE { display:block;
border:1px solid #7F7F7F;
position:relative;
top:-5px;
left:-5px;
}
-->
</style>
</head>
<body text="#000000" link="#FF0000" alink="#FF0000" vlink="#FF0000" bgcolor="#F4F4F4" background="images/bgrnd.jpg">
<table class="aussen" border="0" cellpadding="0" cellspacing="0" summary="Mitteilung">
<tr>
<td>
<div class="innen">
<table width="380" height="210" border="1" cellpadding="0" cellspacing="0" summary="">
<tr>
<td>
<div class="shadow">
<table width="360" height="180" bgcolor="#33CC99" border="0" cellpadding="0" cellspacing="0" summary="">
<tr>
<td>
<div align="right" style="margin:0px 8px 0px 0px;">
<a href="kontakt.html" target="haupt" title="Fenster schließen">
<span><font color="#000000">[x]</font></span></a>
</div>
<p class="text"><b>! Mitteilung !</b></p>
<br>
<p class="text1">Es gibt eine Lösung.</p>
<br>
</td>
</tr>
</table>
</div>
</td></tr></table>
</div>
</td></tr>
</table>
Antwort 1 von rfb
mal ehrlich: der Quellcode ist eine Katastrophe. Ich hab eine ganze Weile gebraucht um in dem table-div-sonstwas-Tag-Gewusel überhaupt die Mitteilung zu entdecken. 78 Zeilen Quellcode (und die sind ja nicht mal vollständig) auf 2 Zeilen Text ist ein krasses Missverhältnis.
Wie sowas mit einfachem CSS gemacht wird, wird hier erklärt:
Auch mal in den Quellcode schauen.
Wie sowas mit einfachem CSS gemacht wird, wird hier erklärt:
http://www.wpdfd.com/editorial/thebox/deadcentre4.htmlAuch mal in den Quellcode schauen.
Antwort 2 von Flupo
Zitat:
mal ehrlich: der Quellcode ist eine Katastrophe. Ich hab eine ganze Weile gebraucht um in dem table-div-sonstwas-Tag-Gewusel überhaupt die Mitteilung zu entdecken. 78 Zeilen Quellcode (und die sind ja nicht mal vollständig) auf 2 Zeilen Text ist ein krasses Missverhältnis.
mal ehrlich: der Quellcode ist eine Katastrophe. Ich hab eine ganze Weile gebraucht um in dem table-div-sonstwas-Tag-Gewusel überhaupt die Mitteilung zu entdecken. 78 Zeilen Quellcode (und die sind ja nicht mal vollständig) auf 2 Zeilen Text ist ein krasses Missverhältnis.
Genauso ging´s mir auch. Ich hab ein bisschen versucht, am Code zu frickeln, aber da ist es einfacher, neu anzufangen.
Der Link ist Spitze.
Gruß Flupo
Antwort 3 von derpfleger
Antwort 4 von KOKI
Ich danke allen für die Hinweise. Ich glaube, dass es jetzt klappt, zu mindest im IE. Mit anderen Browsern kann ich es nicht kontrollieren. Vielleicht habt ihr die Möglichkeit?
Hier meine jetzige Ausführung:
<html>
<head>
<style type="text/css" >
<!--
body { margin: 0px; }
#horizon { display: block;
position: absolute;
top: 50%;
width: 100%;
text-align: center;
overflow: visible;
visibility: visible; }
#content { background-color: #cdcdcd;
margin-left: -180px;
position: absolute;
top: -80px;
left: 50%;
visibility: visible; }
.text { font-size: 16pt;
color: #FFFFFF;
font-family: Helvetica, Verdana, Arial;
text-align: center; }
.text1 { font-size: 14pt;
color: #FFFF00;
font-family: Helvetica, Verdana, Arial;
text-align: center; }
a { text-decoration: none; }
DIV.shadow TABLE { display: block;
border: 1px solid #7F7F7F;
position: relative;
top: -5px;
left: -5px;
text-align: center; }
//-->
</style>
</head>
<body bgcolor="#F4F4F4" background="images/bgrnd.jpg">
<div id="horizon">
<div id="content" class="shadow">
<table width="360" height="180" bgcolor="#33CC99" border="0" cellpadding="0" cellspacing="0" summary="">
<tr>
<td>
<div align="right" style="margin:0px 10px 0px 0px;">
<a href="kontakt.html" target="haupt" title="Fenster schließen">
<span><font color="#000000">[x]</font></span></a>
</div>
<p class="text"><b>! Mitteilung !</b></p>
<br>
<p class="text1">Das ist meine Lösung.</p>
<br>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
Hier meine jetzige Ausführung:
<html>
<head>
<style type="text/css" >
<!--
body { margin: 0px; }
#horizon { display: block;
position: absolute;
top: 50%;
width: 100%;
text-align: center;
overflow: visible;
visibility: visible; }
#content { background-color: #cdcdcd;
margin-left: -180px;
position: absolute;
top: -80px;
left: 50%;
visibility: visible; }
.text { font-size: 16pt;
color: #FFFFFF;
font-family: Helvetica, Verdana, Arial;
text-align: center; }
.text1 { font-size: 14pt;
color: #FFFF00;
font-family: Helvetica, Verdana, Arial;
text-align: center; }
a { text-decoration: none; }
DIV.shadow TABLE { display: block;
border: 1px solid #7F7F7F;
position: relative;
top: -5px;
left: -5px;
text-align: center; }
//-->
</style>
</head>
<body bgcolor="#F4F4F4" background="images/bgrnd.jpg">
<div id="horizon">
<div id="content" class="shadow">
<table width="360" height="180" bgcolor="#33CC99" border="0" cellpadding="0" cellspacing="0" summary="">
<tr>
<td>
<div align="right" style="margin:0px 10px 0px 0px;">
<a href="kontakt.html" target="haupt" title="Fenster schließen">
<span><font color="#000000">[x]</font></span></a>
</div>
<p class="text"><b>! Mitteilung !</b></p>
<br>
<p class="text1">Das ist meine Lösung.</p>
<br>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
Antwort 5 von rfb
Wozu ist die Tabelle gut?
Tipp: Rahmen kannst du genauso auch um DIVs ziehen, Layoutabellen sind seit ca. 5 Jahren dazu nicht mehr nötig!
Tipp: Rahmen kannst du genauso auch um DIVs ziehen, Layoutabellen sind seit ca. 5 Jahren dazu nicht mehr nötig!
Antwort 6 von derpfleger
Weder FF2.0 noch Opera9.0 stellen die Seite so dar, wie du es dir vorstellst. Dein Text wird nicht zentriert.
Antwort 7 von rfb
eine einfache Befolgung der verlinkten Anleitungen aus Antwort 1 und Antwort 3 hätte diese Probleme vermieden.
Antwort 8 von derpfleger
Vielleicht so:
Gruß derpfleger
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Zentrieren</title>
<style type="text/css">
body {
font-family:Arial;
background-color:#F4F4F4;
}
#zentriert {
position: absolute;
top: 50%;
left: 50%;
width: 360px;
height : 180px;
margin-top: -90px;
margin-left: -180px;
border:1px solid #808080;
padding:0px;
background-color:#33CC99;
overflow:auto;
}
#horizon {
position: absolute;
top: 50%;
left: 50%;
width: 360px;
height : 180px;
margin-top: -82px;
margin-left: -172px;
border:1px solid #000000;
background-color:#cdcdcd;
border:0px;
}
#content {
text-align:right;
}
a.right {
padding-right:10px;
text-decoration:none;
color:#000000;
font-family:Times New Roman;
}
p.font1 {
text-align:center;
font-size:1.2em;
font-weight:bold;
color:#FFFFFF;
}
p.font2 {
text-align:center;
font-size:1.2em;
color:#FFFF00;
}
-->
</style>
</head>
<body>
<div id="horizon">
</div>
<div id="zentriert">
<div id="content">
<p><a href="kontakt.html" target="haupt" title="Fenster schließen" class="right">[x]</a></p>
<p class="font1">!Mitteilung!</p>
<p class="font2">Das ist meine Lösung.</p>
</div>
</div>
</body>
</html>Gruß derpfleger
Antwort 9 von derpfleger
Und noch ein bischen überflüssigen Code entfernt:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Zentrieren</title>
<style type="text/css">
body {
font-family:Arial;
background-color:#F4F4F4;
}
#zentriert {
position: absolute;
top: 50%;
left: 50%;
width: 360px;
height : 180px;
margin-top: -90px;
margin-left: -180px;
border:1px solid #808080;
padding:0px;
background-color:#33CC99;
overflow:auto;
text-align:right;
}
#horizon {
position: absolute;
top: 50%;
left: 50%;
width: 360px;
height : 180px;
margin-top: -82px;
margin-left: -172px;
border:1px solid #000000;
background-color:#cdcdcd;
border:0px;
}
a.right {
padding-right:10px;
text-decoration:none;
color:#000000;
font-family:Times New Roman;
}
p.font1 {
text-align:center;
font-size:1.2em;
font-weight:bold;
color:#FFFFFF;
}
p.font2 {
text-align:center;
font-size:1.2em;
color:#FFFF00;
}
-->
</style>
</head>
<body>
<div id="horizon">
</div>
<div id="zentriert">
<p><a href="kontakt.html" target="haupt" title="Fenster schließen" class="right">[x]</a></p>
<p class="font1">!Mitteilung!</p>
<p class="font2">Das ist meine Lösung.</p>
</div>
</body>
</html>Antwort 10 von KOKI
@derpfleger
Super deine Hilfe, werde es gleich mal ausprobieren.
Funktioniert das aber auch in den anderen Browsern?
Super deine Hilfe, werde es gleich mal ausprobieren.
Funktioniert das aber auch in den anderen Browsern?
Antwort 11 von vadder
allerdings gehts nicht mit umlauten ..
:-))
vadder
:-))
vadder
Antwort 12 von derpfleger
@KOKI: getestet in IE6, FF2, Opera9.
W3C: Valides HTML 4.01 Transitional.
@Vadder:Wie meinst du das?
W3C: Valides HTML 4.01 Transitional.
@Vadder:Wie meinst du das?
Antwort 13 von derpfleger
Ein kleiner bug:
Bitte ersetze
durch
FF fügt sonst beim Klicken auf das Kreuz (= den link) einen waagerechten Scrollbalken ein. Das ist unschön.
Gruß derpfleger
Bitte ersetze
a.right {
padding-right:10px;
text-decoration:none;durch
a.right {
margin-right:10px;
text-decoration:none;FF fügt sonst beim Klicken auf das Kreuz (= den link) einen waagerechten Scrollbalken ein. Das ist unschön.
Gruß derpfleger
Antwort 14 von sutadur
Zitat:
Layoutabellen sind seit ca. 5 Jahren dazu nicht mehr nötig!
Layoutabellen sind seit ca. 5 Jahren dazu nicht mehr nötig!
Nötig nicht, aber so schön einfach ... :o)
Antwort 15 von rfb
@sutador: aber hier wird sie nicht mal zum Positionieren genutzt (das könnte man ja noch verstehen) sondern nur um einen Rahmen einzufügen. Und das ist nun wirklich mit CSS wesentlich einfacher.
Antwort 16 von KOKI
Ich danke allen. Ihr habt mir super geholfen.