Mischung aus CSS und Tabellen

Status
Nicht offen für weitere Antworten.
F

fuxxor

Mitglied
Hallo, kann mir jemand sagen, wie folgendes komplett ohne Tabellen machen kann?


CSS-Code:
HTML: 
body{
  background: #000000;
  margin: 0;
}

table, tr, td{
  padding: 0;
  margin: 0;
}

#container{
  height: 421px;
  overflow: hidden;
  border-top: 3px #FFFFFF solid;
  border-bottom: 3px #FFFFFF solid;
}

#container #text{
  width: 850px;
  margin: 10px;
  text-align: left;
  color: #71675E;
  font: 12px Garamond;
  letter-spacing: 1px;
}

#container img{
  border-left: 3px #FFFFFF solid;
  border-right: 3px #FFFFFF solid;
  height: 421px;
}

#header{ width: 850px; height: 65px; overflow: fixed; }
#footer{ width: 850px; height: 65px; overflow: hidden; }
#header #text{
  position: relative;
  color: #D4D0C8;
  font: 48px Garamond;
  text-align: center;
  letter-spacing: 15px;
  z-index: 1;
}
#header #links{
  position: relative;
  color: #FFFFFF;
  font: 15px Garamond;
  text-align: left;
  letter-spacing: 1px;
  top: -8px;
  left: -225px;
  width: 400px;
  margin-bottom: -5px;
  z-index: 4;
}
#links a{ color: #FFFFFF; text-decoration: none; }
#links a:hover{ color: #71675E; }

#header #category{
  position: relative;
  color: #71675E;
  font: 11px Garamond;
  text-align: right;
  letter-spacing: 1px;
  top: -17px;
  left: -5px;
  margin-bottom: -17px;
  z-index: 3;
}
#category a{ color: #71675E; text-decoration: none; }
#category a:hover{ color: #FFFFFF; }

#header #series{
  position: relative;
  color: #71675E;
  font: 11px Garamond;
  text-align: right;
  letter-spacing: 1px;
  top: -30px;
  left: -40px;
  margin-bottom: -30px;
  z-index: 2;
}
#series a{ color: #71675E; text-decoration: none; }
#series a:hover{ color: #FFFFFF; }

#footer #series-info{
  position: relative;
  color: #71675E;
  font: 14px Garamond;
  text-align: left;
  letter-spacing: 3px;
  top: 5px;
  left: 25px;
  margin-bottom: -14px;
  z-index: 2;
}
#footer #series-name{
  position: relative;
  color: #FFFFFF;
  font: 30px Garamond;
  text-align: left;
  letter-spacing: 1px;
  top: 5px;
  left: 10px;
  margin-bottom: -15px;
  z-index: 1;
}
#footer #series-count{
  position: relative;
  color: #71675E;
  font: 12px Garamond;
  text-align: left;
  letter-spacing: 1px;
  top: 15px;
  left: 125px;
  margin-bottom: -12px;
  z-index: 3;
}

#footer #thumbnails{
  position: relative;
  color: #71675E;
  font: 11 Garamond;
  letter-spacing: 1px;
  top: -25px;
  z-index: 4;
}

#footer #copyright{
  position: relative;
  color: #FFFFFF;
  font: 11px Garamond;
  text-align: center;
  letter-spacing: 1px;
  top: -10px;
  z-index: 3;
}

#thumbnails img{
  border: 2px #ffffff solid;
  height: 25px;
  width: 25px;
  margin: 2px;
}

#thumbnails a{ color: #71675E; text-decoration: none; }
#thumbnails a:hover{ color: #FFFFFF; }

HTML-Code:
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <title>Titel/title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link rel="stylesheet" type="text/css" media="screen, projection" href="styles.css" />
</head>

<body>

<table width="100%" height="100%" cellpadding="0" cellspacing="0">
  <tr>
    <td bgcolor="#C7C0B8">
    </td>
  </tr>
  <tr>
    <td height="65" bgcolor="#C7C0B8" align="center"><div id="header">
        <div id="text">Titel</div>

        <div id="links"><a href="index.html">HOME</a> / <a href="index2.html">Link1</a> 
          / <a href="#">Link2</a> / <a href="#">Link3</a></div>

        <div id="category"><a href="#">sublink1</a> / <a href="#">sublink2</a> 
          / <a href="#">sublink1</a> / <a href="#">sublink1</a> / <a href="#">sublink1</a> 
          / <a href="#">sublink1</a></div>
      
    </div></td>
  </tr>
  <tr>
    <td height="425" bgcolor="#D4D0C8" align="center">

    <div id="container"><img src="example.jpg"></div>

  </td>
  </tr>
  <tr>
    <td height="65" bgcolor="#C7C0B8" align="center"><div id="footer">

        <div id="series-name">sublink1</div>
        <div id="series-count">3 / 10</div>

        <div id="thumbnails"> <img src="./example.jpg"><a href="index5.html"><img src="./example2.jpg"></a><img src="./images/blank.jpg"><img src="./images/blank.jpg"><img src="./images/blank.jpg"><img src="./images/blank.jpg"><img src="./images/blank.jpg"><img src="./images/blank.jpg"><img src="./images/blank.jpg"><img src="./images/blank.jpg"> 
          <br />
        </div>

        <div id="copyright">Footer</div>
    </div></td>
  </tr>
  <tr>
    <td bgcolor="#C7C0B8">
    </td>
  </tr>
</table>

</body>
</html>
 
Einfach die entsprechenden Elemente durch andere, vorzugsweise div-Elemente, ersetzen und anschließend mit CSS positionieren.
 
Gumbo, gib ihm doch wenigstens ein paar von deinen coolen Links. ;)

Achja, übrigens:
Code: 
Verwandte Themen auf tutorials.de
Thema 	                Erstellt von 	Forum 	Antworten 	Letzter Beitrag
Css in Tabellen 	PeterSchmidt 	CSS 	2 	        31.01.04 00:31
Tabellen oder CSS? 	Muffinmampfer 	CSS 	9         	24.01.04 19:46
CSS und Tabellen  	caramba  	CSS  	10  	        21.10.01 15:10
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück