Ankündigung

Einklappen
Keine Ankündigung bisher.

Fehlerhafter Aufbau einer Tabelle!

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Fehlerhafter Aufbau einer Tabelle!

    Hallo Leute,

    ich habe eine Tabele zusammengebastelt jedoch wird diese nur in Firefox richtig angezeigt. In Internet Explorer wird der markierte Bereich (Dick) gestreckt obwohl ich ihm eine konstante Größe zugewiesen habe:

    Code:
    <table width="784" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td width="2" height="2" background="design/items/CL1.gif"></td>
        <td height="2" colspan="3" background="design/items/line1.gif"></td>
        <td width="1" height="2" background="design/items/CR1.gif"></td>
      </tr>
      <tr>
        <td width="2" height="19" background="design/items/line2.gif"></td>
        <td height="19" colspan="3" bgcolor="#CBD2DE">
    	<table width="781" height="19" border="0" cellpadding="0" cellspacing="0">
          <tr>
            <td><table height="19" border="0" cellpadding="0" cellspacing="0">
              <tr>
                <td width="7"></td>
                <td class="postBoxTitle">Titeltext</td>
              </tr>
            </table></td>
            <td><div align="right">[x] [x] </div></td>
          </tr>
        </table>
    	</td>
        <td width="1" height="19" background="design/items/CR1.gif"></td>
      </tr>
      <tr>
    
    
        [Ab hier]<td width="2" height="2" background="design/items/CL2.gif"></td>
        <td width="103" height="2" background="design/items/line3.gif"></td>
        <td width="1" height="2" background="design/items/CL2.gif"></td>[/Bis hier]
    
    
        <td width="677" rowspan="2" bgcolor="#FFFFFF" valign="top">
    	  <table width="677" border="0" cellpadding="0" cellspacing="0">
            <tr>
              <td height="2" colspan="2" background="design/items/line3.gif"></td>
            </tr>
            <tr>
              <td width="1"></td>
              <td width="666" bgcolor="#D9DEE8"><table border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td width="11" height="9"></td>
                  <td height="9"></td>
                </tr>
                <tr>
                  <td width="11"></td>
                  <td class="postBoxQuote">
    			  	Betreff
    Betreff
    Betreff
    Betreff
    Betreff
    Betreff
    Betreff
    
    				Betreff
    Betreff
    Betreff
    Betreff
    Betreff
    Betreff
    Betreff
    </td>
                </tr>
                <tr>
                  <td width="11"></td>
                  <td height="8"></td>
                </tr>
              </table></td>
            </tr>
            <tr>
              <td width="1" height="1" background="design/items/CR1.gif"></td>
              <td width="666" height="1" background="design/items/CR1.gif"></td>
            </tr>
            <tr>
              <td width="1"></td>
              <td width="666"><table border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td width="11" height="10"></td>
                  <td height="10"></td>
                </tr>
                <tr>
                  <td width="11"></td>
                  <td class="postBoxContent">
    			  	Inhalt
    Inhalt
    Inhalt
    Inhalt
    Inhalt
    Inhalt
    
    				Inhalt
    Inhalt
    Inhalt
    Inhalt
    Inhalt
    Inhalt
    </td>
                </tr>
                <tr>
                  <td width="11" height="8"></td>
                  <td height="8"></td>
                </tr>
              </table></td>
            </tr>
          </table></td>
        <td width="1" rowspan="2" background="design/items/CR1.gif"></td>
      </tr>
      <tr>
        <td width="2" background="design/items/line2.gif"></td>
        <td width="103" bgcolor="#D9DEE8" valign="top">
    	<table border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td width="7" height="4"></td>
            <td height="4"></td>
          </tr>
          <tr>
            <td width="7"></td>
            <td class="postBoxTitle">Mustermann</td>
          </tr>
          <tr>
            <td width="7" height="5"></td>
            <td height="5"></td>
          </tr>
          <tr>
            <td width="7"></td>
            <td class="postBoxTitle">07.10.2005 20:00 </td>
          </tr>
          <tr>
            <td width="7" height="9"></td>
            <td height="9"></td>
          </tr>
          <tr>
            <td width="7"></td>
            <td class="postBoxTitle">&Auml;nderung:</td>
          </tr>
          <tr>
            <td width="7"></td>
            <td class="postBoxTitle">10.11.06</td>
          </tr>
          <tr>
            <td width="7" height="17"></td>
            <td height="17"></td>
          </tr>
          <tr>
            <td width="7"></td>
            <td class="postBoxTitle">3 Versionen</td>
          </tr>
          <tr>
            <td height="8"></td>
            <td height="8"></td>
          </tr>
        </table></td>
        <td width="1" background="design/items/CR1.gif"></td>
      </tr>
      <tr background="design/items/CR1.gif">
        <td width="2" height="1" background="design/items/CR1.gif"></td>
        <td width="103" height="1" background="design/items/CR1.gif"></td>
        <td width="1" height="1" background="design/items/CR1.gif"></td>
        <td width="677" height="1" background="design/items/CR1.gif"></td>
        <td width="1" height="1" background="design/items/CR1.gif"></td>
      </tr>
    </table>
    Wie iht sehen könnt sollten diese Felder die Höhe von 2px haben, tun sie aber nicht. Hat jemand eine Idee wie man das aubügeln könnte?

    Gruß Dima


  • #2
    Ohje, mal überlegt anstelle dem Tabellengefummel auf DIV zu setzten ?

    Kommentar


    • #3
      div sind doch lediglich die Container ... wie soll man da eine Vernüftige "tabelle" zusammen setzen die in allen Browsern gleich aussieht?

      Kommentar


      • #4
        gibt es davon eine onlinetestversion, wo man sich das mal anschauen kann?

        Kommentar


        • #5
          http://www.nano-games.de/test2.htm

          Schaut euch bitte diese Seite in Firefox und in Internet explorer an! Danke

          Kommentar


          • #6
            Naja, aber das löst man jetzt nicht mit tabellen normalerweise... dazu gibts doch divs...

            tabellen sollten nicht zu layoutzwecken missbraucht werden.

            Kommentar


            • #7
              Ich verstehe das Problem nicht.

              Kommentar


              • #8
                @Zergling: Siehst du nicht diesen Fehler in Internet Explorer?
                Ich poste mal nen Shot!

                Gruß Dima

                Kommentar


                • #9
                  Zitat von lomtas
                  Naja, aber das löst man jetzt nicht mit tabellen normalerweise... dazu gibts doch divs...

                  tabellen sollten nicht zu layoutzwecken missbraucht werden.
                  Ja, nur ich habe noch nie divs zur Layout erstellung benuzt! Ich muss mal schauen ob es Beispiele dazu im Internet gibt!

                  Gruß Dima

                  Kommentar


                  • #10
                    du könntest die ganzen angaben zur tabelle mal in style-sheets packen und danach zusätzlich padding, margin und border für die betreffende zelle auf 0 setzten. also so würd ich an die sache rangehen.

                    Kommentar


                    • #11
                      Zitat von I-Spy
                      Ja, nur ich habe noch nie divs zur Layout erstellung benuzt! Ich muss mal schauen ob es Beispiele dazu im Internet gibt!
                      www.css4you.de

                      Dort gibt es einen Punkt: Wie fange ich an?

                      Wenn du das noch nie gemacht hast, dann solltest du unbedingt anfangen. Layout mit Tabellen realisieren bläht den Code unnötig auf und ist nicht so gedacht. Es ist wie Autofahren ohne Führerschein...

                      Kommentar


                      • #12
                        Dann nenn ihn doch.
                        Der Fehler ist mir nur bekannt, wenn eine fehlerhafte Anzahl für rowspan/colspan angegeben wird. Ob das der Fall ist weiß ich nicht.

                        Kommentar


                        • #13
                          Danke, ich habe angefangen CSS zu lernen! Und habe schon ein Problem, weiß nicht wie ich es beheben kann:

                          Code:
                          <html>
                          <head>
                          <title>CSS Test</title>
                          <style type="text/css">
                          #titleBg
                          {
                          	background-color:#CBD2DE;
                          	height:19px;
                          	width:781px;
                          }
                          
                          #titleText
                          {
                          	color:#434343;
                          	font-family:MS Sans Serif;
                          	font-size:12px;
                          	font-weight:bold;
                          	margin-left:7px;
                          }
                          
                          #titleButtons
                          {
                          	text-align:right;
                          	margin-right:3px;
                          }
                          </style>
                          </head>
                          <body>
                          <div id="titleBg">
                          <div id="titleText">Test</div>
                          <div id="titleButtons">Buttons</div>
                          </div>
                          </body>
                          </html>
                          Dazu ein Bild:



                          Wie man merkt ist der Text "Buttons" unter der blauen Box ist! Warum? Es ist doch im div container drin.
                          Und kann mir jemand helfen den Text "Test" in die vertikale Mitte zu setzen?
                          Danke im Voraus

                          Gruß Dima

                          EDIT:

                          Code:
                          <div id="titleBg">
                          <span id="titleText">Test</span>
                          <span id="titleButtons">Buttons</span>
                          </div>
                          Jetzt ist TEST schön zentriert und Buttons ist auch in der Box! Jedoch kriege ich Buttons nicht rechtsbündig Kann mir da jemand weiter helfen?
                          Und denkt ihr dass span container in einem div container eine gute Lösung ist?

                          Kommentar


                          • #14
                            also...

                            span ist kein container. span ist lediglich für textauszeichnungen. du kannst damit eigentlich nicht viel machen. ich selber habe es bisher kaum gebraucht.

                            div sind container. für das, was du machen willst braucht man auch container. du kannst die dann floaten lassen.

                            Also ich habe es jetzt nicht ausprobiert, würde es aber ungefährt so machen:
                            Code:
                            <html>
                            <head>
                              <title>CSS Test</title>
                              <style type="text/css">
                              #titleBg
                              {
                                 background-color:#CBD2DE;
                                 height:19px;
                                 width:781px;
                              }
                            
                              #titleText
                              {
                                 color:#434343;
                                 font-family:MS Sans Serif;
                                 font-size:12px;
                                 font-weight:bold;
                                 margin-left:7px;
                                 padding-right: 30px;
                              }
                            
                              #titleButtons
                              {
                                 text-align:right;
                                 padding-right:3px;
                                 float: right;
                                 width: 30px;
                              } 
                              </style>
                            </head>
                            
                            <body>
                              <div id="titleBg">
                                <div id="titleButtons">Buttons</div>
                                <div id="titleText">Test</div>
                              </div>
                            </body>
                            
                            </html>
                            Habs aber nicht getestet...

                            Kommentar


                            • #15
                              Danke schön! Es hat wunderbar geklappt

                              Gruß Dima

                              Kommentar

                              Lädt...
                              X