zurück zur Startseite
  

Registrieren Hilfe Benutzerliste Suchen Heutige Beiträge Alle Foren als gelesen markieren

Zurück XHTMLforum > (X)HTML und CSS > (X)HTML
Seite neu laden Tabellen als Div Container

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 06.10.2010, 13:58
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
  
Registriert seit: 06.10.2010
Beiträge: 177
SpecialFighter befindet sich auf einem aufstrebenden Ast
Frage 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>
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 06.10.2010, 14:04
$("#mettbröttchen");
XHTMLforum-Mitglied
  
Registriert seit: 28.09.2010
Ort: Bremen
Beiträge: 448
zeji wird schon bald berühmt werden
Standard
hast du auch noch nen stylesheet dazu?
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 06.10.2010, 14:10
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
  
Registriert seit: 06.10.2010
Beiträge: 177
SpecialFighter befindet sich auf einem aufstrebenden Ast
Standard
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}
Mit Zitat antworten
  #4 (permalink)  
Alt 06.10.2010, 14:12
Erfahrener Benutzer
XHTMLforum-Kenner
  
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard
Zitat:
Zitat von SpecialFighter Beitrag anzeigen
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)
Mit Zitat antworten
  #5 (permalink)  
Alt 06.10.2010, 14:16
$("#mettbröttchen");
XHTMLforum-Mitglied
  
Registriert seit: 28.09.2010
Ort: Bremen
Beiträge: 448
zeji wird schon bald berühmt werden
Standard
Evtl hilft auch das weiter.

Layout ohne Tabellen
Geändert von zeji (06.10.2010 um 14:19 Uhr)
Mit Zitat antworten
  #6 (permalink)  
Alt 06.10.2010, 14:19
Erfahrener Benutzer
XHTMLforum-Kenner
  
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard
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.
Geändert von fricca (06.10.2010 um 14:20 Uhr) Grund: Link wurde wieder entfernt.
Mit Zitat antworten
  #7 (permalink)  
Alt 06.10.2010, 14:25
$("#mettbröttchen");
XHTMLforum-Mitglied
  
Registriert seit: 28.09.2010
Ort: Bremen
Beiträge: 448
zeji wird schon bald berühmt werden
Standard
Zitat:
Zitat von fricca Beitrag anzeigen
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^
Mit Zitat antworten
  #8 (permalink)  
Alt 12.10.2010, 17:40
Neuer Benutzer
neuer user
  
Registriert seit: 12.10.2010
Beiträge: 2
Greggy befindet sich auf einem aufstrebenden Ast
Standard
Wenn ich das Durcheinander sehe empfehle ich mal einen Text wann man Tebellen wie einsetzt und wann nicht.

Gruß!
Mit Zitat antworten
Antwort

« Vorheriges Thema | Nächstes Thema »
Themen-Optionen
Ansicht
Linear-Darstellung Linear-Darstellung

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.
BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus

Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
div container Höhe anpassen funktioniert nicht! hopaba CSS 4 21.02.2010 17:23
DIV container verschachteln und pixelgenau platzieren Yakilo CSS 4 02.02.2010 19:18
Div mit margin spannt Div container nicht auf. donfo CSS 11 27.02.2008 11:51
div container nebeneinander platzieren müsli CSS 4 11.11.2007 16:14
Div Container aufteilen Steakfred CSS 1 26.04.2006 20:46


Alle Zeitangaben in WEZ +2. Es ist jetzt 23:08 Uhr.

Datenschutzerklärung - Impressum - Archiv - Nach oben

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

© Dirk H. 2003 - 2023