✔ tabele-ganz-unten-halten

Status
Nicht offen für weitere Antworten.
M

mike4004

Erfahrenes Mitglied
Hi

ich wollt mal fragen gibt es eine möglichkeit mit css ein Table wie die siehe code immer 3 cm vor dem unteren ende des browser anzuzeigen egal welche auflösung eingestellt ist.



Code: 
<table bgcolor="#000000" border="0" cellpadding="0" cellspacing="0" width="100%">

hier ist ein Bild

http://mike4004.drition.net/tabele.JPG


danke schon mal

mfg mike4004
 
Dies ist mit Hilfe einer Positionierung am unteren Browserfensterrand möglich:

Code: 
table.footer
{
position: absolute;
left: 0;
bottom: 3cm;
background: #000000;
width: 100%;
}
HTML: 
<table class="footer" border="1" cellpadding="0" cellspacing="0">
 <tr>
  <td>test</td>
 </tr>
</table>
 
Hi

danke für die Antwort es geht nur jetzt hab ich noch ein problem unzwar hab ich über dar Tabele einen copyright hinweiß "© COPYRIGHT 2005 ALL RIGHTS RESERVED....."
nur leider steht der jetzt in der Luft und wenn ich ihm die gleiche Klasse geben rührt er sich kein Stück.

mfg mike4004
 
Hi

hier ist der Quelcode leider ist die Seite noch nicht online.

dein css binde ich unter dem Namen cm.css ein.


Code: 
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="" content=">
<meta name="" content="">
<title></title>
</head>
<link rel="stylesheet" type="text/css" href="cm.css" media="all" />

<body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" marginheight="0" marginwidth="0" bgcolor="#FFFFFF">

<table border="0" width="100%" bgcolor="#000000" cellspacing="0" cellpadding="0">
  <tr>
    <td width="50%"><img border="0" src="img/blankspacer.jpg" width="26" height="43">
    </td>
    <td width="50%" valign="top">
      <p align="right"></td>
  </tr>
</table>

<table border="0" width="100%" cellspacing="0" cellpadding="0" background="img/yellow.jpg">
  <tr>
    <td width="100%"><img border="0" src="img/logo.jpg" width="190" height="61"><img border="0" src="img/2images.jpg" width="166" height="61"></td>
  </tr>
</table>
<table border="0" width="100%" bgcolor="#000000" cellspacing="0" cellpadding="0">
  <tr>
    <td width="100%"><font color="#FFFFFF">&nbsp; <font face="Arial" size="2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <b>Home&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Bilder &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Personen&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Kontakt&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</b></font></font></td>
  </tr>
</table>
<table border="0" width="100%" cellspacing="0" cellpadding="0">
  <tr>
    <td width="100%">
      <table border="0" width="100%" cellspacing="0" cellpadding="0">
        <tr>
          <td width="100%">
            <blockquote>
              <p><font color="#000000" face="Arial" size="2">&nbsp;<br>
              Hier kommt der Text! </font></p>
              <p><font color="#000000" face="Arial" size="2">&nbsp;</font></p>
              <p><font color="#000000" face="Arial" size="2">&nbsp;</font></p>
              <p><font color="#000000" face="Arial" size="2">&nbsp;</font></p>
              <p><font color="#000000" face="Arial" size="2">&nbsp;</font></p>
              <p><font color="#000000" face="Arial" size="2">&nbsp;</font></p>
              <p><font color="#000000" face="Arial" size="2">&nbsp;</font></p>
            </blockquote>
            <p align="center"><font class="footer" color="#000000"  face="Arial" size="1">©
            COPYRIGHT 2005 ALL RIGHTS RESERVED ... </font></td>
        </tr>
      </table>
    </td>
  </tr>
</table>
<table border="0" width="100%" class="footer" bgcolor="#000000" cellspacing="0" cellpadding="0">
  <tr>
    <td width="100%"><font size="1">&nbsp;</font></td>
  </tr>
</table>

</body>

</html>
 
Lösungsvorschlag:

HTML: 
<table border="0" class="footer" cellspacing="0" cellpadding="0">
  <tr>
    <td style="background:#ffffff;"><p align="center"><font color="#000000"  face="Arial" size="1">©
            COPYRIGHT 2005 ALL RIGHTS RESERVED ... </font></td>
  </tr>
  <tr>
    <td width="100%"><font size="1">&nbsp;</font></td>
  </tr>
</table>
 
Noch was Grundsätzliches: Attribute, die ein HTML-Element gestalten/formatieren, sollten durch entsprechende CSS-Eigenschaften ersetzt werden.

So wird beispielsweise aus

HTML: 
<body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" marginheight="0" marginwidth="0" bgcolor="#FFFFFF">
CSS: 
body {
margin: 0;
padding: 0;
background: #ffffff;
}
HTML: 
<body>

oder aus
HTML: 
<table border="0" width="100%" cellspacing="0" cellpadding="0" background="img/yellow.jpg"> ... </table>
wird
CSS: 
table.bgImage {
border: 0;
width: 100%;
background: url(img/yellow.jpg);
}
HTML: 
<table class="bgImage" cellspacing="0" cellpadding="0"> ... </table>

Das gilt auch für die Attribute color, face, size zur Schriftformatierung,

HTML: 
<p><font color="#000000" face="Arial" size="2">&nbsp;<br>
              Hier kommt der Text! </font></p>
die sich in der CSS-Datei global für alle gewünschten Elemente bestimmen lassen:

CSS: 
body, td, p {
font-family: arial, sans-serif;
font-size: 12px;
color: #000000;
}
HTML: 
<p>Hier kommt der Text!</p>

Und noch ein Tipp: der Abstand zwischen den einzelnen Wörtern (spätere horizontale Navigation), der z.Zt. mit erzwungenen Leerzeichen &nbsp; zurechtgerückt ist, lässt sich mit der CSS-Eigenschaft word-spacing oder margin eleganter regeln ;)

Mehr Details zur Formatierungssprache CSS findest du auf SELFHTML: Stylesheets (CSS).
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück