"width-Parameter" im CSS wirkt sich auf die Tabelle nicht aus
susi999
- css
Hallo Forum!
Irgendwie schaffe ich es nicht, das "Width" im CSS für meine Tabelle richtig anzugeben. Ich möchte einen %-Wert angeben, sprich wieviel % die Tabelle auf der Seite einnehmen darf.
Egal, welchen Wert ich angebe, die Tabelle füllt immer die ganze Breite aus, bis auf ca. 2mm links.
So schaut meine CSS-Zeile aus:
table.tab1 {background-color:#ffffff; width:85%; align:center; margin-left: auto; margin-right: auto;}
Und im HTML nehme ich folgendermaßen darauf Bezug:
<table class="tab1"
style="background-color: rgb(0, 102, 102); height: 622px; text-align: left;"
frame="box" rules="none" border="4" bordercolor="#006666"
cellpadding="2" cellspacing="0">
Was stimmt daran nicht? Es ist nicht so, dass das ganze CSS falsch ist, nur eben die Tabellenbreite haut nicht hin.
Danke für Eure Antworten!
@@susi999:
nuqneH
So schaut meine CSS-Zeile aus:
table.tab1 {background-color:#ffffff; width:85%; align:center; margin-left: auto; margin-right: auto;}
Es gibt keine CSS-Eigenschaft 'align'.
Und im HTML nehme ich folgendermaßen darauf Bezug:
Nein. Du nimmst im Stylesheet Bezug auf dein HTML, niemals andersrum.
<table class="tab1"
style="background-color: rgb(0, 102, 102); height: 622px; text-align: left;"
frame="box" rules="none" border="4" bordercolor="#006666"
cellpadding="2" cellspacing="0">Was stimmt daran nicht?
Du notierst CSS-Eigenschaften inline im HTML-Code im @style-Attribut anstatt diese im Stylesheet zu notieren.
Du verwendest missbilligte HTML-Attribute zur Darstellung anstatt CSS-Eigenschaften.
Und möglicherweise auch: Du verwendest eine Tabelle zum Layouten.
Es ist nicht so, dass das ganze CSS falsch ist, nur eben die Tabellenbreite haut nicht hin.
Ohne den Tabelleninhalt zu kennen, lässt sich dazu kaum Genaueres sagen (außer der Vermutung von 'table-layout: fixed').
Online-Beispiel, bitte.
Qapla'
Hallo,
table.tab1 {background-color:#ffffff; width:85%; align:center; margin-left: auto; margin-right: auto;}
Es gibt keine CSS-Eigenschaft 'align'.
außerdem mutmaße ich mal, dass das übergeordnete Element keine feste Breite hat, und die Angabe 85% daher freischwebend in der Luft steht und ignoriert wird, weil sie einen Zirkelbezug (Excel-Terminologie) verursacht.
Ciao,
Martin
Hallo, hier ist mein HTML-Code. Erstellt habe ich das mit Seamonkey und dann händisch ein paar Anpassungen gemacht. Ich weiß nicht, seit wann und wodurch die Breite so groß war, früher war links und rechts ca. 1cm Rand (auf meinem Laptop-Bildschirm).
Grüße,
Susi
<html>
<head>
<meta name="keywords"
content="Kontent, noch ein Kontent, wieder ein Kontent">
<link href="Hyperlink.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="stylesheets/style0.css">
<style type="text/css">
<!--
-->
</style>
<meta http-equiv="Content-Type"
content="text/html; charset=ISO-8859-1">
<title>Titel Titel Titel</title>
</head>
<body
style="color: rgb(0, 0, 0); background-color: rgb(0, 204, 255); background-image: url(bilder/hintergrundbild.jpg);"
link="#000000" alink="#000099" vlink="#000000">
<table
style="background-color: rgb(0, 255, 204); width: 80%; height: 622px; text-align: left; margin-left: auto; margin-right: auto;"
frame="box" rules="none" border="4" bordercolor="#006666"
cellpadding="2" cellspacing="0">
<tbody>
<tr>
<td colspan="3" rowspan="1"
style="height: 120px; vertical-align: top;">
<table style="text-align: left; width: 100%;" border="0"
cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="vertical-align: top; height: 120px; width: 50%;"><small><a
name="home"></a></small><img style="width: 480px; height: 120px;"
alt="Alternativtext" src="bilder/logo.jpg"><br>
</td>
<td
style="vertical-align: top; width: 50%; text-align: right; height: 120px;"><img
style="width: 160px; height: 120px;" alt="" src="bilder/bild1.jpg">
<img style="width: 160px; height: 120px;" alt=""
src="bilder/bild3.jpg"> <img
style="width: 160px; height: 120px;" alt="" src="bilder/bild2.jpg"><br>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td colspan="3" rowspan="1"
style="vertical-align: top; background-color: rgb(255, 255, 255); height: 20px;"><a
href="index.html">
<small> <span style="color: rgb(0, 0, 0);"></span></small></a>
</td>
</tr>
<tr bordercolor="0">
<td
style="vertical-align: top; width: 70px; background-color: rgb(255, 255, 255);">
<big><span style="color: rgb(0, 0, 0);"></span></big>
<table style="text-align: left; width: 147px; height: 217px;"
cellpadding="2" cellspacing="5">
<tbody>
<tr>
<td style="vertical-align: top;"><big
style="color: rgb(0, 0, 0);"><a href="index.html">HOME</a><br>
<hr> </big><big style="color: rgb(0, 0, 0);"><a
href="link1">LINK1</a><br>
<hr></big><a style="color: rgb(0, 0, 0);" href="link2.htm"><big>LINK2</big></a><big
style="color: rgb(0, 0, 0);">
<hr><a href="link5.htm">LINK5</a><br>
<hr><a style="color: rgb(0, 0, 0);" href="link7.htm">LINK7</a><br>
</big><big style="color: rgb(0, 0, 0);">
<hr><a href="link6.htm"></a></big><br>
</td>
</tr>
</tbody>
</table>
</td>
<td
style="vertical-align: top; background-color: rgb(255, 255, 255); width: 5px;"><br>
</td>
<td
style="background-color: rgb(255, 255, 255); vertical-align: top;">
<table style="text-align: left; width: 1107px; height: 471px;"
frame="lhs" rules="none" border="2" bordercolor="#999999"
cellpadding="4" cellspacing="4">
<tbody>
<tr>
<td style="vertical-align: top;">
<h1>Überschrift:</h1>
<br>
<font face="Georgia, Times New Roman, Times, serif">Text...<br>
<br>
<br>
<br>
<br>
<br>
</td>
</tr>
</tbody>
</table>
<br>
</td>
</tr>
<tr>
<td
style="vertical-align: top; background-color: rgb(255, 255, 255); text-align: left;"
rowspan="1" colspan="3"><font
face="Georgia, Times New Roman, Times, serif" size="-6"><big>
</big></font><font face="Georgia, Times New Roman, Times, serif"
size="-6"><big> <br>
</big></font><font face="Georgia, Times New Roman, Times, serif"
size="-6"><big><br>
</big></font>
<table style="text-align: left; width: 100%;" border="0"
cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="vertical-align: top; width: 20%;"><font
face="Georgia, Times New Roman, Times, serif" size="-6"><big> ©
</big></font><font
face="Georgia, Times New Roman, Times, serif" size="-6"><big>Blablablabla
<br>
</big></font></td>
<td
style="vertical-align: top; width: 60%; text-align: center;"><font
face="Georgia, Times New Roman, Times, serif" size="-6"><big><a
href="link99.htm">Link99</a></big></font></td>
<td
style="vertical-align: top; text-align: right; width: 20%;"><small><span
style="text-decoration: underline;">Blabla</span> </small><br>
</td>
</tr>
</tbody>
</table>
<div style="text-align: right;"><font
face="Georgia, Times New Roman, Times, serif" size="-6"> </font></div>
</td>
</tr>
</tbody>
</table>
</body>
</html>