Benutzerdefinierte Suche

HTML: Problem mit Tabellen

  1. Wullschi

    Wullschi Thread Starter

    Hallo

    Ich arbeite gerade an meiner Homepage, und bin auf ein Problemgestossen.
    Ich habe untereinander 3 Tabellen angelegt. Die erste hat eine Zeile, und eine Zelle, die 2. hat eine Zeile und 6 Zellen, die dritte wieder eine Zeile und eine Zelle. In die Zellen habe ich den Banner und die Bilder der Buttons, welche zum Banner gehören, eingebaut.

    Wenn ich aber einem Button einen Link zuweise wird der Banner auseinandergerissen. Es entstehen abstände zwischen der Mittleren und den anderen beiden Tabellen. Das geschieht jedoch nur in Firefox.
    [​IMG]

    Hier mein html-code:


    <!---Header+Navi--->
    <table cellspacing="0" cellpadding="0" align="center" border="0">
    <tr>
    <td height="153" width="925" align="center">
    <img height="153" width="925" src="Restbanner/oben.jpg" border="0">
    </td>
    </tr>
    </table>


    <table cellspacing="0" cellpadding="0" align="center" border="0">
    <tr>
    <td width="256" height="24">
    <img height="24" width="256" src="Restbanner/mittelinks.jpg" border="0">
    </td>

    <td width="70" height="24">
    <a href="bla.html">
    <img height="24" width="70" src="Buttons/b1.jpg" border="0">
    </a>
    </td>

    <td width="104" height="24">
    <img height="24" width="104" src="Buttons/b2.jpg" border="0">
    </td>

    <td width="115" height="24">
    <img height="24" width="115" src="Buttons/b3.jpg" border="0">
    </td>

    <td width="85" height="24">
    <img height="24" width="85" src="Buttons/b4.jpg" border="0">
    </td>


    <td width="295" height="24">
    <img height="24" width="295" src="Restbanner/mitterechts.jpg" border="0">
    </td>
    </tr>
    </table>


    <table cellspacing="0" cellpadding="0" align="center" border="0">
    <tr>
    <td height="58" width="925" align="center">
    <img height="58" width="925" src="Restbanner/unten.jpg "border="0">
    </td>
    </tr>
    </table>

    <!---Ende Header+Navi--->



    Weiss vieleicht jemand weiter?

    mfg Wullschi
     
    Wullschi, 16.07.2005
  2. Rakor

    RakorMacUser Mitglied

    Mitglied seit:
    05.11.2003
    Beiträge:
    2.785
    Zustimmungen:
    3
    Wieso packst du das ganze nicht in eine dreizeilige Tabelle?!
     
    Rakor, 16.07.2005
  3. Wullschi

    Wullschi Thread Starter

    Ja, das habe ich soeben auch versucht. Ich habe die Zeilen mit colspan verbunden. Gebracht hats aber nicht viel :(

    <table cellspacing="0" cellpadding="0" align="center" border="0">
    <tr>
    <td height="153" width="925" align="center" colspan=6>
    <img height="153" width="925" src="Restbanner/oben.jpg" border="0">
    </td>
    </tr>


    <table cellspacing="0" cellpadding="0" align="center" border="0">
    <tr valign=top>
    <td width="256" height="20" bgcolor=red>
    <img height="24" width="256" src="Restbanner/mittelinks.jpg" border="0" valign=bottom>
    </td>

    <td width="70" height="20">
    <a href="bla.html">
    <img height="24" width="70" src="Buttons/b1.jpg" border="0">
    </a>
    </td>

    <td width="104" height="20">
    <img height="24" width="104" src="Buttons/b2.jpg" border="0">
    </td>

    <td width="115" height="20">
    <img height="24" width="115" src="Buttons/b3.jpg" border="0">
    </td>

    <td width="85" height="20">
    <img height="24" width="85" src="Buttons/b4.jpg" border="0">
    </td>


    <td width="295" height="20">
    <img height="24" width="295" src="Restbanner/mitterechts.jpg" border="0">
    </td>
    </tr>



    <table cellspacing="0" cellpadding="0" align="center" border="0">
    <tr valign=top>
    <td height="58" width="925" align="center" colspan=6 valign=top>
    <img height="58" width="925" src="Restbanner/unten.jpg" border="0">
    </td>
    </tr>
    </table>
     
    Wullschi, 16.07.2005
  4. janpi3

    janpi3MacUser Mitglied

    Mitglied seit:
    01.02.2005
    Beiträge:
    8.027
    Zustimmungen:
    154
    wiso machst du das nicht mit CSS?
     
    janpi3, 16.07.2005
  5. Wullschi

    Wullschi Thread Starter

    hmmm… weil ich keine Ahnung von CSS habe :D
     
    Wullschi, 16.07.2005
  6. norbi

    norbiMacUser Mitglied

    Mitglied seit:
    14.01.2003
    Beiträge:
    3.506
    Zustimmungen:
    22
    .. .dann solltest Du CSS lernen. Ist nicht schwer.

    Tabellen sind für tabellarische Daten da, für's Layout gibt's CSS.

    No.
     
    norbi, 16.07.2005
  7. arne1900

    arne1900MacUser Mitglied

    Mitglied seit:
    28.09.2004
    Beiträge:
    1.454
    Zustimmungen:
    14
    Ich rate dir auch CSS zu lernen, weil es 1. total einfach ist und du dir damit 2. einen Menge Probleme im Zusammenhang mit oftmals sehr "eigenwilligen" Tabellen ersparst.
    Zum Thema CSS findest du auf http://de.selfhtml.org alles was du zum Lernen benötigst.

    Gruß und viel Spaß,
    arne1900.
     
    arne1900, 16.07.2005
  8. Wullschi

    Wullschi Thread Starter

    Ich hab da noch ein css-layout von einer anderen Page, welches mir ein Kollege erstellt hat. Ich verstehe es zwar nicht vollständig, aber ich habe es zumindest schonmal geschaft eine Grafik als hintergrund zu verwenden.

    HTML-Code:
    <div id="navcontainer">
    <ul id="navlist">
    <li id="active"><a href="#">link1</a></li>
    <li><a href="#">link2</a></li>
    <li><a href="#">link3</a></li>
    <li><a href="#">link3</a></li>
    <li><a href="#">link5</a></li>
    <li><a href="#">link6</a></li>
    </ul>
    </div>

    CSS-Code:


    #navcontainer ul {
    padding-left: 0;
    margin-left: 0;
    color: #000000;
    float: left;
    width: 100%;
    font-family: verdana, arial, sans-serif;
    font-size: 9px;
    font-weight: bold;
    border-top: 1px solid #FBB1B0;
    border-bottom: 1px solid #FBB1B0;
    }

    #navcontainer ul li {
    display: inline;
    }

    #navcontainer ul li a {
    padding: 5pt 10pt 5pt 10pt;
    background: #ffffe0 url(buttons/b1.jpg);
    color: #000000;
    text-decoration: none;
    float: left;
    border-right: 1px dashed #FBB1B0;
    }


    #navcontainer ul li a:hover {
    background-color: #FC4A46;
    color: #000000;
    }

    Der Fette Teil ist meiner Meinung nach dafür verantwortlich, dass die Navigation horizontal ausgerichtet ist.
    Nun möchte ich aber nicht immer das gleiche Bild als hintergrund, sondern bei jeder Zelle ein anderes. Hat jemand einen Vorschlag?
     
    Wullschi, 16.07.2005
  9. dms

    dms Thread Starter

    Schreib das mal alles in eine Zeile. Hab's jetzt nicht ausprobiert, aber der IE z.B. macht bei solchen Konstrukten in der Regel jedenfalls Probleme. Evtl. schliesst sich der FF bei bestimmten Doctypes da an...

    <td width="70" height="24"><a href="bla.html"><img height="24" width="70" src="Buttons/b1.jpg" border="0"></a></td>

    Und ja, sowas macht man besser mit CSS. Speziell für Menüs verwendet man am besten Listen (<ul> und <li>).
    Auf meiner Seite könntest Du Dir den Code anschauen/klauen.

    Edit: Ah, genau so habe ich das gemeint. Für die horizontale Anordnung ist unter anderem das float:left, richtig. Das display:inline ist da aber auch sehr wichtig, da Listen-Elemente eigentlich Block-Elemente sind und somit einen Absatz erzeugen würden.
    Wenn Du für jedes <li> ein anderes Hintergrundbild haben möchtest kannst Du das direkt im HTML-Code definieren:

    <li style="background-image:url(dein_bild.gif);">...</li>
     
  10. Wullschi

    Wullschi Thread Starter

    Vielen Dank schonmal für diese Info. Deine Page ist auch noch recht aufschlussreich. Wenn ich den Hintergrund aber im HTML-Bereich definiere, ist es mir aber nicht möglich für jeden Button den richtigen Hoverbutton einzublenden. Oder lässt sich das auch gleich im HTML-Dokument lösen?

    Edit: Wenn ich das Bild in das HTML-Dokument Packe, verschwindet die Zelle wenn ich keinen Text eingebe. Das sollte ja nicht der Fall sein, da das Bild den Text schon enthält.
     
    Wullschi, 16.07.2005
Die Seite wird geladen...
Ähnliche Themen - HTML Problem Tabellen
  1. benqsimens
    Antworten:
    16
    Aufrufe:
    1.445
    falkgottschalk
    29.11.2013
  2. muplo
    Antworten:
    5
    Aufrufe:
    1.038
  3. freakApple
    Antworten:
    5
    Aufrufe:
    580
  4. Swabke
    Antworten:
    5
    Aufrufe:
    881
    falkgottschalk
    09.06.2012
  5. GaboGabo
    Antworten:
    7
    Aufrufe:
    1.120
    GaboGabo
    21.01.2012