HTML: Problem mit Tabellen

Dieses Thema im Forum "Web Page Design" wurde erstellt von Wullschi, 16.07.2005.

  1. Wullschi

    Wullschi Thread Starter Gast

    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
     
  2. Rakor

    Rakor MacUser Mitglied

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

    Wullschi Thread Starter Gast

    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>
     
    Zuletzt von einem Moderator bearbeitet: 16.07.2005
  4. janpi3

    janpi3 MacUser Mitglied

    Beiträge:
    8.005
    Zustimmungen:
    154
    MacUser seit:
    01.02.2005
    wiso machst du das nicht mit CSS?
     
  5. Wullschi

    Wullschi Thread Starter Gast

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

    norbi MacUser Mitglied

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

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

    No.
     
  7. arne1900

    arne1900 MacUser Mitglied

    Beiträge:
    1.454
    Zustimmungen:
    14
    MacUser seit:
    28.09.2004
    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.
     
  8. Wullschi

    Wullschi Thread Starter Gast

    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?
     
    Zuletzt von einem Moderator bearbeitet: 16.07.2005
  9. dms

    dms Thread Starter Gast

    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>
     
    Zuletzt von einem Moderator bearbeitet: 16.07.2005
  10. Wullschi

    Wullschi Thread Starter Gast

    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.
     
    Zuletzt von einem Moderator bearbeitet: 16.07.2005
Die Seite wird geladen...
Ähnliche Themen - HTML Problem Tabellen
  1. benqsimens
    Antworten:
    16
    Aufrufe:
    1.345
  2. muplo
    Antworten:
    5
    Aufrufe:
    992
  3. freakApple
    Antworten:
    5
    Aufrufe:
    548
  4. Swabke
    Antworten:
    5
    Aufrufe:
    855
  5. JoeyM
    Antworten:
    1
    Aufrufe:
    541

Diese Seite empfehlen