Table-Verschiebung

tjey

Hallo zusammen und mit meinem Auftakt hier eu im Board, gleich mal ein tabellarisches Problem:

Code

<table border="4" width="900" height="800">
 <tr>
  <td width="900">
   <table width="900" height="200" border="4">
    <tr>
     <td width="25%">Bild links</td>
     <td width="50%">Überschrift</td>
     <td width="25%">Bild rechts</td>
    </tr>
   </table>
  </td>
 </tr>
 
 <tr>
  <td width="900">
   <table width="900" height="100" border="4">
    <tr>
     <td width="20%">leer</td>
     <td width="15%">Link 1</td>
     <td width="15%">Link 2</td>
     <td width="15%">Link 3</td>
     <td width="15%">Link 4</td>
     <td width="20%">leer</td>
    </tr>
   </table>
  </td>
 </tr>
 
 <tr>
  <td width="450">
   <table width="450" height="500" border="4">
    <tr>
     <td width="33.3%">Text_links1</td>
     <td width="33.3%">Bil_links1</td>
     <td width="33.3%">Text_rechts1</td>
    </tr>
    <tr>
     <td width="33.3%">Text_links2</td>
     <td width="33.3%">Bil_links2</td>
     <td width="33.3%">Text_rechts2</td>
    </tr>
    <tr>
     <td width="33.3%">Text_links3</td>
     <td width="33.3%">Bil_links3</td>
     <td width="33.3%">Text_rechts3</td>
    </tr>
   </table>
  </td>
  <td width="450">
   <table width="450" height="500" border="4">
    <tr>
     <td>Text_rechts</td>
    </tr>
   </table>
  </td>
 </tr>

  <tr>
   <td width="900">
    <table width="900" height="200" border="4">
     <tr>
      <td width="100%">Unten</td>
     </tr>
    </table>
   </td>
  </tr>
</table>

Alles anzeigen

Das Resultat is verschoben und zwar genau in der Mitte, bei dem Inhalt von
"Text_rechts". Dieser sollte eigentlich neben den Text,Bilder,etc. stehen..Iwie bin ich grade blind oder seh da mein Problem nich. Wäre nett, wenn einer sich bereiterklären würde, um mir den Fehler zu zeigen und gleich auch zu erklären.

Dodo

also ich versteh grad dein problem net so ganz
hast du vll einen link?

topfblume

moin ...

Du hast:

Code

<table>
<tr>
<td>EINS</td>
</tr>
<tr>
<td>ZWEI</td>
</tr>
<tr>
<td>DREI</td>
<td>VIER</td>
</tr>
<tr>
<td>FÜNF</td>
</tr>
</table>

Alles anzeigen

Gebe EINS, ZWEI, FÜNF ein colspan="2" !!

gruß ...

Bandit

Das ganze Tabellen-Layout ist doch Käse. Und seit wann kann man bei width Dezimalwerte nehmen?

topfblume

moin ...
@bandit600
wenns Käse is, wieso gibst denn Dein Senf dazu? Was für eine Frage genau hast Du zu den Weitenangaben?
gruß ...

tjey

danke wegen dem colspan..keine ahnung..war ne übung für mich..weil ich mich selten/kaum mit tabellen auseinander setzte...wo ich grad beim thema bin..:
http://www.premierdesign.de/kunden/kljb
dort hab ich das wie folgt:
1 tabelle oben (header-bild)
1 tabelle als main
2 tabellen im main drin
und dort jeweils eine div..
nun verschiebt sich jedoch bei safari, firefox und opera (ausgenommen sind ie6,7) die linke spalte immer soweit, sobald mehr text in den rechten content kommt, dass er immer mittig ist, was ich nich haben will, sondern, halt, welches div länger is, dort soll er dann weiter runter gehen..der andere soll unverändert oben bleiben..

topfblume

moin ...

Dafür dass Du Dich selten/kaum mit Tabellen beschäftigst, stellst Du aber viele Fragen in kurzer Zeit zu diesem Thema.
Vielleicht solltest Du Dich ein wenig auf den einschlägigen Seiten belesen um "banale" Fragen erst garnicht stellen zumüssen.

gruß ...

tjey

sind ja eig nur die 2 fragen..nur über die Zeit kamen die zu Stande. Hab erst jetzt das Forum aufgesucht, weils mehr wurden. Den Rest kann ich ja, aber wenn's so banal is, dann kann mans ja auch stumpfweg sagen..weil das Problem hab ich leider noch nich irgendwo schon einmal gefunden, denn wenn ich im Forum was poste, habe ich vorher immer, nach meiner meinung nach, gründlich gesucht, ob sich das Problem nich durch Forenlesen erübrigt.

topfblume

moin ...

Wenn Du Deinen Quelltext in Ordnung bzw. komplett ausgetauscht hast, wäre die float Eigenschaft in css eventuell etwas für Dich
http://de.selfhtml.org/css/layouts/anzeige/kopfundfuss.htm

gruß ...

Bandit

Zitat von topfblume

moin ...
@bandit600
wenns Käse is, wieso gibst denn Dein Senf dazu?

Um vielleicht dezent darauf hinzuweisen, dass man das auch besser machen kann?

wernerdeluxe

so wenig quellcode und doch so große fehler >< ... du, da muss man noch mal grundlegend alles überprüfen ;).

Du hast zb. ein <td> Tag auf gemacht was du nicht mehr schließt ... und deine Tabelle hat zwar Spalten aber keine Zeilen. hpf.

Ich guck mal um ich da durchblick und was hinbiegen kann.

Zitat von topfblume

Vielleicht solltest Du Dich ein wenig auf den einschlägigen Seiten belesen um "banale" Fragen erst garnicht stellen zumüssen.

Ob eine Frage banal ist oder nicht, muss derjenige entscheiden, der die Frage stellt. Für dich ist sie vielleicht banal, weil du die Antwort kennst, aber das ist unbedeutent.
Ich hoffe mal, dir ist klar, dass das Forum darauf basiert, das Fragen gestellt werden, auch wenn sie anderen als banal erscheinen.

Yeah, in jedem Satz das Wort "banal", selbst in diesem hier.

Gruß
Lukas

wernerdeluxe

So, kopier dir den Code mal und ersetzt deinen Alten. Die CSS Angaben kannst du wieder auslagern.

Musst nur wieder die Bilder einfügen.

Gruß
Lukas

HTML

<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>KLJB</title>
<style type="text/css">
/* Struktur der Seite */


body      { leftmargin: 0;
            topmargin: 0;
            marginwidth: 0;
            marginheight: 0;
           }


table#container { width: 800px;
            border:1px solid;
            cellpadding: 0;
            cellspacing: 0;
            margin:0 auto auto;
           }


td#header {
    height: 248px;
    }

td#navigation  { 
            width:150px;
            height:100%;
            vertical-align:top;
           }

td#navigation ul {
            list-style:none;
            margin-left:1px;
            padding-left:1px;
        }

td#navigation ul li {
            margin-left:0;
            padding-left:0;
        }

td#content  { width: 650px;
            height: 100%;
            vertical-align:top;
           }      


/* Groessen und Farben von Texten und Links */


link      { text-decoration: none;
            color: #008781;
           }


a:link    { text-decoration: none;
            color: #008781;
           }


a:visited  { text-decoration: none;
            color: #008781;
           }


a:hover    { text-decoration: underline;
            color: #008781;
           }






#mtable   { width: 718
           }




h4        { color: #008781;
            background-color: #bfe2e0;
            weight: normal;
           }
</style>
</head>
<body>


<table id="container">
    <tr>
        <td id="header" colspan="2">HEADER</td>
    </tr>
    <tr height="15px">
        <td colspan="2"></td>
    </tr>
    <tr>
        <td id="navigation">
            <ul>
                <li><a href="">Startseite</a></li>
                <li><a href="">Unsere KLJB</a></li>

                <li><a href="">Termine 2008</a></li>
                <li><a href="">Aktuelles</a></li>
                <li><a href="">Gästebuch</a></li>
                <li><a href="">Links</a></li>
                <li><a href="">Presse</a></li>
                <li><a href="">Mitglied werden</a></li>
                <li><a href="">Bilder</a></li>
                <li><a href="">Alles über Lähden</a></li>
                <li><a href="">Kontakt</a></li>
            </ul>
        </td>
        <td id="content">
            <h4>Lorem ipsum dolor sit amet
            </h4>, 
                            consetetur sadipscing elitr, sed diam nonumy eirmod 
                            tempor invidunt ut labore et dolore magna aliquyam 
                            erat, sed diam voluptua. At vero eos et accusam et 
                            justo duo dolores et ea rebum. Stet clita kasd 
                            gubergren, no sea takimata sanctus est Lorem ipsum 
                            dolor sit amet. Lorem ipsum dolor sit amet, 
                            consetetur sadipscing elitr, sed diam nonumy eirmod 
                            tempor invidunt ut labore et dolore magna aliquyam 
                            erat, sed diam voluptua. At vero eos et accusam et 
                            justo duo dolores et ea rebum. Stet clita kasd 
                            gubergren, no sea takimata sanctus est Lorem ipsum 
                            dolor sit amet. Lorem ipsum dolor sit amet, 
                            consetetur sadipscing elitr, sed diam nonumy eirmod 
                            tempor invidunt ut labore et dolore magna aliquyam 
                            erat, sed diam voluptua. At vero eos et accusam et 
                            justo duo dolores et ea rebum. Stet clita kasd 
                            gubergren, no sea takimata sanctus est Lorem ipsum 
                            dolor sit amet. Duis autem vel eum iriure dolor in 
                            hendrerit in vulputate velit esse molestie 
                            consequat, vel illum dolore eu feugiat nulla 
                            facilisis at vero eros et accumsan et iusto odio 
                            dignissim qui blandit praesent luptatum zzril 
                            delenit augue duis dolore te feugait nulla facilisi. 
                            Lorem ipsum dolor sit amet, consectetuer adipiscing 
                            elit, sed diam nonummy nibh euismod tincidunt ut 
                            laoreet dolore magna aliquam erat volutpat. Ut wisi 
                            enim ad minim veniam, quis nostrud exerci tation 
                            ullamcorper suscipit lobortis nisl ut aliquip ex ea 
                            commodo consequat. Duis autem vel eum iriure dolor 
                            in hendrerit in vulputate velit esse molestie 
                            consequat, vel illum dolore eu feugiat nulla 
                            facilisis at vero eros et accumsan et iusto odio 
                            dignissim qui blandit praesent luptatum zzril 
                            delenit augue duis dolore te feugait nulla facilisi. 
                            Nam liber tempor cum soluta nobis eleifend option 
                            congue nihil imperdiet doming id quod mazim placerat 
                            facer possim assum. Lorem ipsum dolor sit amet, 
                            consectetuer adipiscing elit, sed diam nonummy nibh 
                            euismod tincidunt ut laoreet dolore magna aliquam 
                            erat volutpat. Ut wisi enim ad minim veniam, quis 
                            nostrud exerci tation ullamcorper suscipit lobortis 
                            nisl ut aliquip ex ea commodo consequat. Duis autem 
                            vel eum iriure dolor in hendrerit in vulputate velit 
                            esse molestie consequat, vel illum dolore eu feugiat 
                            nulla facilisis. At vero eos et accusam et justo duo 
                            dolores et ea rebum. Stet clita kasd gubergren, no 
                            sea takimata sanctus est Lorem ipsum dolor sit amet. 
                            Lorem ipsum dolor sit amet, consetetur sadipscing 
                            elitr, sed diam nonumy eirmod tempor invidunt ut 
                            labore et dolore magna aliquyam erat, sed diam 
                            voluptua. At vero eos et accusam et justo duo 
                            dolores et ea rebum. Stet clita kasd gubergren, no 
                            sea takimata sanctus est Lorem ipsum dolor sit amet. 
                            Lorem ipsum dolor sit amet, consetetur sadipscing 
                            elitr, At accusam aliquyam diam diam dolore dolores 
                            duo eirmod eos erat, et nonumy sed tempor et et 
                            invidunt justo labore Stet clita ea et gubergren, 
                            kasd magna no rebum. sanctus sea sed takimata ut 
                            vero voluptua. est Lorem ipsum dolor sit amet. Lorem 
                            ipsum dolor sit amet, consetetur
            </td>
    </tr>
    <tr>
        <td id="footer" colspan="2">FOOTER</td>
    </tr>
</table>


</body>
</html>

Alles anzeigen

topfblume

Ja Werner, das ist auch eine Art der Hilfe. Jedem Fragensteller eine "kommplette Lösung" anbieten, anstatt ihn daran mitwirken(lernen) zulassen.
Wo wir schon einmal bei dem Thema Lebensmittel sind. Das ist doch BANANE

Code

body      { leftmargin: 0;
            topmargin: 0;
            marginwidth: 0;
            marginheight: 0;
           }

gruß ... und feierabend

Table-Verschiebung

Tags

Benutzer online in diesem Thema