+- Juergens-Workshops.de Forum (https://forum.juergens-workshops.de)
+-- Forum: HTML und Co (https://forum.juergens-workshops.de/forumdisplay.php?fid=62)
+--- Forum: CSS und Javascript (https://forum.juergens-workshops.de/forumdisplay.php?fid=86)
+--- Thema: Tabellen-Design per <div> sieht nur im IE ordentlich a (/showthread.php?tid=18918)
Tabellen-Design per <div> sieht nur im IE ordentlich a - flowitch - 28.11.2003
Hallo!
Ich habe eine kleine Seite gemacht, wo die Inhalte (Menü, Überschrift, Content) mit 4 Tabellen per
Code:
<div>Habe die Tabellen bis teils auf width, padding per CSS definiert. Da ich noch HTML und CSS Anfänger bin, finde ich meine Fehler nicht!
Der IE zeigt alles so an, wies sein soll. Opera auch fast, nur ist da die Breite der Überschrift- und Status- Tabelle (beide aus einer Datei included) nicht 100%, sondern mal breiter und mal weniger breit - finde keine Regelmäßigkeit!
Mozilla kommt anscheinend damit garnicht klar. Da wird das Design der einen Tabelle (Menü)
Code:
<table class=geruest>Ich weiß jetzt nicht wie ich euch den Code am besten zeigen soll. Ich poste hier einfach mal die Betreffenden Definitionen aus meiner CSS Datei und den Quelltext von meiner Startseite.
CSS:
Code:
.geruest {
border-color:#0080FF;
background-color:#F0F0F0;
border-width:1px;
border-style:solid;
font-size:8pt;
font-family:Verdana,Arial;
color:#000C00;
}
.geruest100 {
border-color:#0080FF;
background-color:#F0F0F0;
border-width:1px;
border-style:solid;
width:100%;
font-size:8pt;
font-family:Verdana,Arial;
color:#000C00;
}
.noborder {
border-style:none;
font-size:8pt;
font-family:Verdana,Arial;
color:#000C00;
}
.ueberschrift {
border-color:#0080FF;
background-color:#F0F0F0;
border-width:1px;
border-style:solid;
font-size:12pt;
font-family:Verdana,Arial;
color:#000C00;
font-weight:bold;
text-align:center;
width:100%;
}
.status {
border-width:1px;
border-style:solid;
border-color:black;
background-color:#F0F0F0;
text-align:left;
width:100%;
padding:5px;
margin-top:3px;
}
.status1 {
font-size:10pt;
font-family:Verdana,Arial;
color:#500000;
font-weight:bold;
}Hier noch etwas Quelltext:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> </title>
<link rel=stylesheet type="text/css" href="formate.css">
<link rel=stylesheet type="text/css" href="anordnung.css">
</head>
<body bgcolor="white">
<div id='menue'>
<table class='geruest' width='100px'>
<tr bgcolor='#404040'>
<td colspan='2' class='head-small'> Menü </td>
</tr><tr>
<td height='20'> </td>
</tr><tr>
<td valign='top'>[img]gfx/bullet_menue.gif[/img]</td>
<td>[url=/djo-user/index.php?module=01]Startseite[/url]</td>
</tr><tr>
<td height='10'> </td>
</tr><tr>
<td valign='top'>[img]gfx/bullet_menue.gif[/img]</td>
<td>Datensatz
suchen</td>
</tr><tr>
<td colspan='2'>[url=/djo-user/index.php?module=03]- Direkt[/url]</td>
</tr><tr>
<td colspan='2'>[url=/djo-user/index.php?module=04]- Alphabet[/url]</td>
</tr><tr>
<td colspan='2'>[url=/djo-user/index.php?module=05]- Volltext (*)[/url]</td>
</tr><tr>
<td height='10'> </td>
</tr><tr>
<td valign='top'>[img]gfx/bullet_menue.gif[/img]</td>
<td>[url=/djo-user/index.php?module=02&action=select_all]Alle Einträge[/url]</td>
</tr><tr>
<td height='10'> </td>
</tr><tr>
<td valign='top'>[img]gfx/bullet_menue.gif[/img]</td>
<td>[url=/djo-user/index.php?module=10&action=vorschlag&type=new]Neuer Vorschlag[/url]</td>
</tr><tr>
<td height='10'> </td>
</tr><tr>
<td valign='top'>[img]gfx/bullet_menue.gif[/img]</td>
<td>[url=/djo-user/index.php?module=07]Hilfe[/url]</td>
</tr><tr>
<td height='10'> </td>
</tr><tr>
<td valign='top'>[img]gfx/bullet_menue.gif[/img]</td>
<td>[url=/djo-user/index.php?module=08]Kontakt / Impressum[/url]</td>
</tr><tr>
<td height='25'></td>
</tr><tr bgcolor='#404040'>
<td height='13' colspan='2'></td>
</tr>
</table>
</div>
<div id='content'><table width='100%'><tr><td>
<html>
<head>
<title>content.php</title>
</head>
<html>
<head>
<title>Startseite</title>
</head>
<table class='geruest100' cellpadding='12px'><tr>
<td>
// INHALT CONTENT FRAME
</td></tr></table>
</body>
</html>
</body>
</html></td></tr></table>
</div>
<div id='ueberschrift'><table width='100%'><tr><td>
<table class='ueberschrift' cellpadding='4px'><tr>
<td> Datenbank "Jüdische Persönlichkeiten" </td>
</tr>
</table>
<table class='status'><tr>
<td width='100px' align='center' class='def_bold'>[img]gfx/status.gif[/img]Status:</td>
<td class='status1'>
</td>
</tr></table>
</td></tr></table>
</div>
<div id='status2'>
</div>
</body>
</html>Mir fällt da gerade noch was auf, jetzt wo ich den Quelltext komplett anschaue (nicht jede Datei einzeln) - ich sollte wohl besser die ganzen html, head, body usw Tags aus den ganzen module-Dateien raus machen?!
Da sind bestimmt noch viele andere Fehlerchen drin! Bin für jeden Tipp dankbar! Denn habe grade erst angefangen mich intensiv mit PHP, MySQL, HTML und CSS zu befassen!
Aber als erstes würde ich gerne wissen wie ich die Seite auf allen Browser ordentlich dargestellt bekomme - vor allem warum Mozilla das
Code:
<table class='geruest'>Ich bedanke mich bei allen, die sich die Mühe machen das zu lesen und nach den Fehlern suchen, ganz herzlich im Vorraus!! Vielen Dank euch!
MfG
Flow
Tabellen-Design per <div> sieht nur im IE ordentlich a - flowitch - 28.11.2003
Was mir noch auffällt: Auch die Content-Tabelle (content.php) wird nicht 100% breit, sondern nur wo breit wie der Inhalt!
Tabellen-Design per <div> sieht nur im IE ordentlich a - Helmut - 28.11.2003
Hi,
Zitat:ganzen html, head, body usw Tags aus den ganzen module-Dateien raus machen?!
das auf jeden Fall, denn der IE ist da bedeutend Fehlertoleranter als Mozilla und andere.
Eine andere gute Idee ist es zu versuchen den Content und das Layout zu trennen und Templates auf HTML Basis einzusetzen.
Sowas könnte mit der Funktion:
Code:
<?php
function tparser($template,$endung="html")
{
return str_replace("\"","\\\"",implode("",file($template.".".$endung)));
}
function templ_output($template) {
echo $template;
}
?>und dem Aufruf der Funktion
Code:
eval("templ_output(\"".tparser("layout")."\");");erreicht werden. Das Template könnte dann so aufgebaut sein... ist ein Auschnitt aus einem GB Layouttemplate:
Code:
<table width="600" cellspacing="1" cellpadding="0" border="0" class="tdr">
<tr>
<td class="tdk">[img]http://www.inspire-world.de/guestbook/$array[9][/img]
[url=mailto:$array[2]]$array[1][/url] - [url=$array[3]]$array[3][/url]</td>
</tr>
<tr>
<td class="tdc">$array[5]</td>
</tr>
<tr>
<td class="tdk">$array[7] - $array[8]</td>
</tr>
</table>Wenn ich mit Templates arbeite, oder ein neues Script in Perl entwickle hab ich es meist so gemacht das ich zuerst eine HTML Seite erstellt habe die das Layout im Ganzen darstellt. Das kann man dann mit den Browsern erstmal testen. Dann das Layout in Templatesegmente teilen und als header.html, content.html und footer.html, bzw. was so gebraucht wird, abspeichern.
Cu Helmut
Tabellen-Design per <div> sieht nur im IE ordentlich a - flowitch - 28.11.2003
Hallo Helmut!
Danke für die schnelle und ausführliche Antwort!
Ich habe das mit Trennung von Content und Layout noch nicht ganz verstanden!
Und ich denke, meine Seite ist ja auch kein gutes Beispiel dafür, weil sie nur aus wenigen Tabellen besteht, kaum Grafiken... schlicht eben.
Also ich habe versucht das Layout zu trennen. So sieht von jedem Modul das Grundgerüst so aus, bzw manchmal für eine Unterteilung 2 mal diese Tabelle:
Code:
<table class='geruest100' cellpadding='12px'><tr>
<td>
....
</td></tr></table>Das bei meiner Datenbank je nach Modul noch die ein oder andere Tabelle da mit rein kommt, lässt sich wohl nicht vermeiden?
Dein PHP Script versteh ich nicht ganz, was mich auch nicht wundert, kann noch nicht so viel mehr als einfaches schreiben und auslesen.
Aber mein System hab ich nach http://tut.php-q.net/frames.html erstellt. Gibts gute Gründe das wieder zu ändern?
Ich würds gern erstmal so lassen!
Hast du denn einen Idee warum Mozilla die Menü-Tabelle nicht hin bekommt, Überschrift nicht ausgerichtet wird und bei Opera Tabellen nicht bis zum rechten Seitenrand gehen?
Hab ich Fehler oder unlogische Sachen in meinem CSS?
Danke!!
Tabellen-Design per <div> sieht nur im IE ordentlich a - Helmut - 28.11.2003
Hi,
nun ich sag Dir ganz ehrlich, ein Layout mit DIV's für alle Browser gleich aussehend zu stricken kann Dich zur Verzweiflung treiben. Die Sachen werden leider teilweise noch zu unterschiedlich interpretiert. So verlangt der eine Browser die Notierungen im CSS anders als Browser B oder C.
Zu der DIV Layout Geschichte gibt es auch in den größeren HTML Foren teilweise Ellenlange Threads mit den gegenteiligsten Meinungen. Die verfechter der "reinen" DIV Lehre möchten am liebsten fast alles was Table, TR, TD heisst aus dem Layout kicken, andere sagen wieder das die bei Tabellenlayouts bleiben weil einfacher und zuverlässiger zu händeln.
Du hast ja nun eher wenig DIV Tags und einige Tabellen fürs Layout im Einsatz, entscheiden musst Du das ob Du viel Aufwand in die Geschichte stecken willst zur Browseroptimierung oder lieber vorerst - bis sich vielleicht mal alle Browserhersteller auf ein Level geeinigt haben - mit Tabellen Dein Layout aufbaust.
Die Trennung von Content und Layout:
Wenn Du das mal durchziehst mit dem von mir genannten Beispiel wirst Du die Vorteile schnell nicht mehr missen wollen. Es passieren nämlich weniger Fehler wenn Du den Layoutcode vom Scriptcode trennst und es ist auch leichter Designänderungen zu machen. Dein Scriptcode wird dadurch auch übersichtlicher.
Die vorgestellte Templateroutine ist eigentlich recht universell einsetzbar. Hier nur mal ein auf die schnelle realisiertes unfertiges Beispiel mit einem Gästebuch.
http://www.inspire-net.de/phptest/index.php
Das Ausgabelayout der Einträge ist ein Template wie oben vorgestellt, wollte man nun die Anordnung der Sachen ändern bräuche man nur das HTML Template anpassen und hätte ein neues Aussehen realisiert.
Die Templateroutine macht weiter nix als das diese per eval http://self.inspire-net.de/selfphp/funktionsreferenz/sonstige_funktionen/eval.html Code ausführt.
Cu Helmut
Tabellen-Design per <div> sieht nur im IE ordentlich a - Mr.Pipapo - 28.12.2003
So ein Mist!
Ich hab ein (fast) fertiges Template vor mir, dass ich in den letztten Tagen erstellt hab und jetz muss ich feststellen, dass es nur beim IE gut aussieht! :twisted:
Ich hab das Template mit XHTML und einem Stylesheet gemacht und hab kein einziges TABLE tag drin - nur DIV tags. Liegt die falsche Darstellung nun an den DIVs oder am CSS?
Tabellen-Design per <div> sieht nur im IE ordentlich a - Jürgen - 28.12.2003
Hallo,
kann man so nicht sagen, einige Browser unterstützen nicht alle Formatierungen. Hast Du ein Beispiel Online?
Gruß
Jürgen
Tabellen-Design per <div> sieht nur im IE ordentlich a - Helmut - 29.12.2003
Hi,
ist ja meine Rede... Die lieben Browser machen ihr eigenes Ding. Bei einfachen Layouts kommt man noch ganz gut über die Runden, aber spätestens wenn man anspruchsvolleres realisieren will/muss ... peng, da kannst Dir die sprichwörtliche Kugel geben!
Spätestens wenn Dir einer der hartgesottenen NS4 Nutzer die Ohren volljammert das er nix sieht oder nur Chaos rückste freiwillig in die Gummizelle ein wenn Du nur DIV'S verwenden willst.
Cu Helmut