XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   (X)HTML (http://xhtmlforum.de/forumdisplay.php?f=72)
-   -   Tabellen als Div Container (http://xhtmlforum.de/showthread.php?t=62600)

SpecialFighter 06.10.2010 13:58
Tabellen als Div Container
 
Hallo alle zusammen,

man soll ja anstelle von tabellen nur noch div container verwenden.

Nun habe ich versucht meine index.html (Tabellen verseucht ) durch div container zu ersetzen.

Aber iwie haut das nicht so hin. Am ende sieht alles sehr komisch aus.
Wäre jemand so nett und könnte mir meine index.html mal anpassen damit ich sehe wie es richtig aussehen muss.

Schon mal vielen Dank

Hier die index.html:


HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Titel - Startseite</title>

</head>
<body id="page1">

<table class="main_table">
<tr>
<td class="site_center">
<table class="site_center1">
<tr>
<td>
<!-- Header -->
</td>
</tr>
<tr>
<td>
<table id="content">
<tr>
<td>
<table class="row2">
<tr>
<td>
<table class="col2">
<tr>
<td style="height:314px; width:233px" class="bg_color">
<!-- Inhalt linke Box -->
</td>
</tr>

<tr>
<td style="height:28px"></td>
</tr>
</table>
</td>
<td>
<table class="col3">
<tr>
<td class="box1">
<div>
<img alt="" src="" /><br />
<p style="line-height:20px;">
<!-- Content -->
</p>
<img alt="" src="" class="indent" />
</div>
</td>
</tr>
<tr>
<td>
<table class="box2">
<tr>
<td style="width:295px">
<div style="margin:0px 30px 10px 48px">
<img alt="" src="" />
</div>
</td>
<td style="width:1px" class="bg_li_bot"><img alt="" style="margin-top:79px" src="" /></td>
<td style="width:295px">
<div style="margin:0px 30px 10px 48px">
<img alt="" src="" />
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table>
<tr>
<td>
<table id="footer">
<tr>
<td class="row1"></td>
</tr>
<tr>
<td class="row2">
<div style="float:left; width:600px;">
<!-- Footer Inhalt -->
</div>

<!-- PAYPAL SPENDE BUTTON -->
<div>
<!-- Button -->

</div>
<!-- PAYPAL SPENDE BUTTON -->
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- Monitoring -->
</body>
</html>

zeji 06.10.2010 14:04
hast du auch noch nen stylesheet dazu?

SpecialFighter 06.10.2010 14:10
Code:
body {padding:0; margin:0; height:750px; background:#6f6f6f}
table, td {border-collapse:collapse;}
table, td, img {border:0; padding:0;}
form, td{margin:0; padding:0;}
html {height:100%;}
br{font-size:10px}
table{border:0px; border-collapse:collapse;        }
body, td{
        font-size:11px;
    font-family:Tahoma;
    color:#7d7b7b;
        line-height:13px;
        vertical-align:top;
        padding:0px;
}



a img{ border:0px}
img{ vertical-align:top}

strong{ color:#91908d}
b{ color:#585858}
span{}
span a{}
span a:hover{}

a{ color:#99c000; text-decoration:underline}
a:hover{ color:#99c000; text-decoration: none}

.bg_bot{ background:url(../../images/bg_bot.gif) top left repeat-x #6f6f6f}
.bg_color{ background:#f2f2f2}
.bg_li_bot{ background:url(../images/bg_li_bot.gif) top left repeat-y}
.bg_color_top{ background:#FFFFFF}




ul{list-style:none}
li{ line-height:18px }
li a{ background:url(../images/1_z1.gif)  center left no-repeat; background-position:0 5px; margin:0px; padding-left:9px;color:#91908d; text-decoration:underline}
li a:hover{color:#91908d; text-decoration:none}




.more{background:url(../images/1_z2.gif)  center left no-repeat; background-position:0 5px; padding-left:12px; vertical-align:middle; color:#434343; font-weight:bold; text-decoration:none}
.more:hover{ text-decoration:underline}



.main_table{ margin:0 auto;  width:100%; background:url(../images/bg_left.gif) top left repeat-x #c4c4c4}
.site_center{margin:0 auto; text-align:center; width:770px; background:url(../images/bg_bot.gif) bottom left repeat-x}
.site_center1{ margin:0 auto; text-align:left; width:770px;}
 /*header*/
#header{ height:339px; width:770px}
#header .row1{ height:26px; background:url(../images/bg_hed_top.gif) top left repeat-y }
#header .row2{ height:313px; background:url(../images/bg_hed_li.gif) top left repeat-x }

#header .row2 .col1{ width:586px; background:url(../images/bg_header.jpg) bottom right no-repeat}

#header .row2 .col1 div{ padding:142px 0 0 60px}
#header .row2 .col1 .title{ margin:0 89px 0 0px}
#header .row2 .col2{ width:184px}

#header .row2 .col2 .indent{ margin:101px 0 0px 0px}



/*content*/
#content{width:780px; height:352px; margin-left: -5px; margin-top: 8px; background:#FFFFFF; }


/*page1*/
#page1 #content .row1{ height:10px; background:url(../images/bg_top_con.gif) top left repeat-x}
#page1 #content .row2{ height:342px}

#page1 #content .row2 .col1{ width:21px}
#page1 #content .row2 .col2{ width:233px}

#page1 #content .row2 .col2 .title{ margin:0 0 25px 0px}
#page1 #content .row2 .col3{ width:516px}

#page1 #content .row2 .col3 .box1{ height:206px; color:#91908d}
#page1 #content .row2 .col3 .box_extra{ height:70px; color:#91908d}

#page1 #content .row2 .col3 .box1 div{ padding:30px 59px 15px 28px}
#page1 #content .row2 .col3 .box_extra div{ padding:30px 59px 15px 28px}

#page1 #content .row2 .col3 .box1 p{ margin:23px 15px 13px 0px}
#page1 #content .row2 .col3 .box-extra p{ margin:23px 15px 13px 0px}

#page1 #content .row2 .col3 .box1 .indent{ margin:19px 0px 0px 0px}
#page1 #content .row2 .col3 .box_extra .indent{ margin:19px 0px 0px 0px}
#page1 #content .row2 .col3 .box2{ height:136px}




/*page2*/
#page2 #content .row1{ height:10px; background:url(../images/bg_top_con.gif) top left repeat-x}
#page2 #content .row2{ height:342px}

#page2 #content .row2 .col1{ width:516px}

#page2 #content .row2 .col1 .box1{ height:242px}

#page2 #content .row2 .col1 .box1 div{ padding:32px 25px 10px 60px}
#page2 #content .row2 .col1 .box1 .title{ margin:0px 0px 28px 0px}
#page2 #content .row2 .col1 .box1 .title_1{ margin:13px 0px 0px 0px}
#page2 #content .row2 .col1 .box1 p{ margin:1px 15px 11px 0px}
#page2 #content .row2 .col1 .box2{ height:100px}
#page2 #content .row2 .col2{ width:233px}

#page2 #content .row2 .col2 .box1{ height:314px}

#page2 #content .row2 .col2 .box1 div{ padding:34px 15px 10px 38px}
#page2 #content .row2 .col2 .box1 .indent{ margin:29px 0px 19px 2px}
#page2 #content .row2 .col2 .box1 p{ margin:4px 0px 12px 2px}
#page2 #content .row2 .col2 .box2{ height:28px}
#page2 #content .row2 .col3{ width:21px}



/*page3*/
#page3 #content .row1{ height:10px; background:url(../images/bg_top_con.gif) top left repeat-x}
#page3 #content .row2{ height:342px}

#page3 #content .row2 .col1{ width:21px}
#page3 #content .row2 .col2{ width:233px}

#page3 #content .row2 .col2 .box1{ height:314px}

#page3 #content .row2 .col2 .box1 div{ padding:34px 15px 10px 38px}
#page3 #content .row2 .col2 .box1 .title{ margin:0px 0px 25px 0px}
#page3 #content .row2 .col2 .box1 p{ margin:4px 0px 18px 2px}
#page3 #content .row2 .col2 .box2{ height:28px}
#page3 #content .row2 .col3{ width:516px}

#page3 #content .row2 .col3 div{ padding:32px 50px 10px 28px}
#page3 #content .row2 .col3 .title{ margin:0px 0px 21px 0px}



/*page4*/
#page4 #content .row1{ height:10px; background:url(../images/bg_top_con.gif) top left repeat-x}
#page4 #content .row2{ height:342px}

#page4 #content .row2 .col1{ width:516px}

#page4 #content .row2 .col1 div{ padding:32px 20px 10px 60px}
#page4 #content .row2 .col1 .title{ margin:0px 0px 25px 0px}
#page4 #content .row2 .col1 .title_1{ margin:26px 0px 25px 0px}
#page4 #content .row2 .col1 .indent{ margin:20px 0px 0px 0px}
#page4 #content .row2 .col2{ width:233px}

#page4 #content .row2 .col2 .box1{ height:314px}

#page4 #content .row2 .col2 .box1 div{ padding:34px 20px 10px 39px}
#page4 #content .row2 .col2 .box1 .title{ margin:0px 0px 26px 0px}
#page4 #content .row2 .col2 .box2{ height:28px}
#page4 #content .row2 .col3{ width:21px}



/*page5*/
#page5 #content .row1{ height:10px; background:url(../images/bg_top_con.gif) top left repeat-x}
#page5 #content .row2{ height:342px}

#page5 #content .row2 .col1{ width:21px}
#page5 #content .row2 .col2{ width:233px}

#page5 #content .row2 .col2 .box1{ height:314px}

#page5 #content .row2 .col2 .box1 div{ padding:34px 20px 10px 38px}
#page5 #content .row2 .col2 .box1 .title{ margin:0px 0px 25px 0px}
#page5 #content .row2 .col2 .box2{ height:28px}
#page5 #content .row2 .col3{ width:262px}

#page5 #content .row2 .col3 div{ padding:32px 0 0 28px}
#page5 #content .row2 .col3 .indent{ margin:28px 0 19px 0px}
#page5 #content .row2 .col4{ width:233px}

#page5 #content .row2 .col4 .box1{ height:314px}

#page5 #content .row2 .col4 .box1 div{ padding:34px 15px 10px 38px}
#page5 #content .row2 .col4 .box1 .title{ margin:0px 0px 28px 0px}
#page5 #content .row2 .col4 .box2{ height:28px}
#page5 #content .row2 .col5{ width:21px}




/*page6*/
#page6 #content .row1{ height:10px; background:url(../images/bg_top_con.gif) top left repeat-x}
#page6 #content .row2{ height:342px}

#page6 #content .row2 .col1{ width:516px}

#page6 #content .row2 .col1 .box1{ height:238px; color:#91908d}

#page6 #content .row2 .col1 .box1 div{ padding:32px 0 0 60px}
#page6 #content .row2 .col1 .box1 .title{ margin:0px 0 28px 0px}
#page6 #content .row2 .col1 .box2{ height:104px}
#page6 #content .row2 .col2{ width:233px}

#page6 #content .row2 .col2 .box1{ height:314px}

#page6 #content .row2 .col2 .box1 div{ padding:34px 15px 10px 38px}
#page6 #content .row2 .col2 .box1 .title{ margin:0px 0px 26px 0px}
#page6 #content .row2 .col2 .box2{ height:28px}
#page6 #content .row2 .col3{ width:21px}




/*page7*/
#page7 #content .row1{ height:10px; background:url(../images/bg_top_con.gif) top left repeat-x}
#page7 #content .row2{ height:342px; width:770px; color:#91908d}
#page7 #content .row2 div{ padding:32px 43px 10px 60px}






/*footer*/
#footer { width:780px; height:59px; margin:0 auto; margin-left:-5px;}

#footer .row1{ height:5px; background:url(../images/bg_foot.gif) top left repeat-x;}
#footer .row2{ height:54px; background:#919190; color:#FFFFFF; font-size:10px}
#footer .row2 div{ padding:19px 0 0 61px}
#footer .row2 .indent{ margin:0 15px 0 15px}
#footer .row2 a{ color:#FFFFFF; text-decoration: underline}
#footer .row2 a:hover{ color:#FFFFFF; text-decoration: none}



/*input*/
input {
        font-family:Tahoma;
          font-size:11px;
          color:#91908d;
        }

.submit {
                color: #000;
}

.input1{
  background:#ffffff;
  border:1px solid #91908d;
  width:201px; height:15px;
  color:#91908d;
  font-size:10px
}
#input2{
  width:44px; height:11px;
  border:0px;
}
#input3{
  width:39px; height:11px;
  border:0px;
}
textarea{
  font-family:Tahoma;
  font-size:11px;
  color:#91908d}

fricca 06.10.2010 14:12
Zitat:
Zitat von SpecialFighter (Beitrag 476887)
man soll ja anstelle von tabellen nur noch div container verwenden.
Nein.
Man soll seinen Inhalt sinnvoll mit HTML auszeichnen und das Layout mit CSS machen.
"Layout mit Divs" ist genauso falsch wie "Layout mit Tabellen".

Zitat:
Nun habe ich versucht meine index.html (Tabellen verseucht ) durch div container zu ersetzen.
So funktioniert das nicht.
Du musst deine grundsätzliche Herangehensweise komplett umstellen.

Zitat:
Aber iwie haut das nicht so hin. Am ende sieht alles sehr komisch aus.
Das macht nichts. HTML hat mit dem Aussehen nichts zu tun. Dafür gibt es dann CSS.

Zitat:
Wäre jemand so nett und könnte mir meine index.html mal anpassen damit ich sehe wie es richtig aussehen muss.
Hier gibt es Hilfe zu Selbsthilfe, keine kostenlosen Dienstleistungen.

Lesestoff für dich, damit du dich in die neue Herangehensweise einarbeiten kannst:
Allgemein:
A List Apart: Articles: 12 Lessons for Those Afraid of CSS and Standards

HTML:
Vorsprung durch Webstandards | Semantischer Code - Definitionen, Methoden, Zweifel
Vorsprung durch Webstandards | Retro-Coding: Semantischer Code ist der Anfang von gutem Design

CSS:
Teil 1 kostenlos online lesen - Little Boxes - Webseiten gestalten mit HTML und CSS (von Peter Müller)

zeji 06.10.2010 14:16
Evtl hilft auch das weiter.

Layout ohne Tabellen

fricca 06.10.2010 14:19
zeji, was willst du damit sagen?
Der Link zeigt ein Beispiel für das, was man nicht tun sollte: Datentabellen mit Divs nachbauen.

edit: Ah, jetzt ist der Link wieder verschwunden. Besser so.

zeji 06.10.2010 14:25
Zitat:
Zitat von fricca (Beitrag 476893)
zeji, was willst du damit sagen?
Der Link zeigt ein Beispiel für das, was man nicht tun sollte: Datentabellen mit Divs nachbauen.

edit: Ah, jetzt ist der Link wieder verschwunden. Besser so.

die Editfunktion sei dank, zuerst falschen Link eingebunden^

Greggy 12.10.2010 17:40
Wenn ich das Durcheinander sehe empfehle ich mal einen Text wann man Tebellen wie einsetzt und wann nicht.

Gruß!


Alle Zeitangaben in WEZ +2. Es ist jetzt 19:49 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023