Brauche Hilfe bei der "Reparatur" einer Tabelle

Kathi84 · 5. September 2010

Hallo in die Runde!

Ich hab auf der Suche nach einer Lösung meines Problems hierher gefunden und hoffe sehr, mir kann jemand bei dieser eigentlichen Kleinigkeit helfen. Ich hab leider nur relative Grund-/Anfängerkenntnisse in HTML und CSS. Trotzdem hab ich es mir zur Aufgabe gemacht, einem Freund von mir bei seiner Webseite zu helfen. Auch das Seminar hab ich schon durch, komm aber trotzdem nicht weiter. Zu meiner Schande muss ich gestehen, ich habe nachfolgendes Script aus dem Quelltext kopiert und quasi nur die Problemzone in den Editor gehauen.
Das Problem ist das Folgende: Ich bekomme nicht die gewünschte Höhe der Tabelle. Das heißt, im IE 7 wird sie so angezeigt wie sie sein soll, im IE 8 nur im Komp-Modus und der Mozilla reißt sie genauso auseinander.

Hier ist mal der Quelltext:

HTML

<!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>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>startseite</title>
<meta name="description" content=" "  />
<meta name="keywords" content=" " />
<meta name="robots" content="follow" />
<meta name="date" content="2007-03-04">
<link rel="stylesheet" href="mm_lodging1.css" type="text/css" />
<style type="text/css">
body { background-color:rgb(204,204,204); }
.style2 { font-family:Arial; font-size:9pt; color:white; }
a { text-decoration:none; text-underline:none }
a:hover { color:rgb(255,255,153); background-color:rgb(255,255,153); }




</style>
</head>
<body>
<SCRIPT type=text/JavaScript>




</SCRIPT>







                                <td width="229"><TABLE width="212">
      <tr>
		<td width="11" height="22" bgcolor="#E6E6E6"> 
		   <p align=left><img src="para.jpg" width="11" height="20" border="0"></p></td>
		<td width="4" height="22" bgcolor="#E6E6E6">
		<p><font face="verdana"><span style="font-size:7pt;"><b>&nbsp;</p></span></p>                  
                <td width="183" height="22" bgcolor="#DFDEDE">
                         <p align="left"><a href="url"><span style="font-size:7pt;"><b><font face="Verdana" color="black"><IMG
                  class=namo-bullet1
                   src="nth_theme_theme_formal_bullet_l.gif" 
                  border=0 align="absmiddle" width="6" height="5">&nbsp;Startseite 




 </TBODY></TABLE>

Alles anzeigen

Also die jeweilge Zelle soll so hoch sein, wie die Paragraph-Grafik. Und egal was ich mache, keine Höhe, Höhe in Pixel wie Grafikhöhe, es ändert sich einfach nichts. Langsam verzweifel ich wirklich. Um das Problem sichtbar zu machen, hier mal zwei Bilder. Einmal so wie das Endergebnis aussehen soll und einmal wie es jetzt ist.
[attachment=1]richtig.JPG[/attachment]

Bitte bitte kann mir jemand dabei helfen?
Schonmal vielen lieben Dank und liebe Grüße
Kathrin

Sarkkan · 5. September 2010

Hey (=

Wir helfen dir doch gerne, besonders Tabellen bereitet vielen große Schwierigkeiten^^
Als erstes habe ich mal angefangen, da ein wenig aus zu misten bei deiner Tabelle^^
Theoretisch war die Höhenangabe und die <p>-Tags überall der Fehler. Nachdem ich diese raus genommen habe, konnte ich ohne Probleme mit CSS die Höhe der gesamten Reihe ändern

HTML

<!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>startseite</title>
    <meta name="description" content=" "  />
    <meta name="keywords" content=" " />
    <meta name="robots" content="follow" />
    <meta name="date" content="2007-03-04">
    <link rel="stylesheet" href="mm_lodging1.css" type="text/css" />
    <style type="text/css">
    body { background-color:rgb(204,204,204); }
    .style2 { font-family:Arial; font-size:9pt; color:white; }
    a { text-decoration: none;}
    a:hover { color:rgb(255,255,153); background-color:rgb(255,255,153); }




    /* Ab hier gehört es zur Tabelle - Sarkkan */
    table.navi {
        width: 212px;
        border: 0;
    }
    table.navi tr {
        height: 10px;
        padding: 0; margin: 0;
    }
    table.navi tr td {
        width: 11px;
        background-color: #E6E6E6
    }
    table.navi tr td + td {
        width: 4px;
        background-color: #E6E6E6
    }
    table.navi tr td + td + td {
        width: 183px;
        background-color: #DFDEDE;
    }




    </style>
    </head>
    <body>







        <table class="navi">
          <tr>
            <td><img src="para.jpg" /></td>
            <td>&nbsp;</td>
            <td><img class="namo-bullet1" src="nth_theme_theme_formal_bullet_l.gif" border="0" width="6"/>&nbsp;Startseite</td>
</tr>
    </table>

Alles anzeigen

So funktioniert das^^
Am besten bitte immer alles in CSS Auslagern, auch die Bildersachen^^
(Dafür war ich aber jetzt was faul )

Bei Fragen zu meinem Code: Frag ruhig (=

PS: Das soll mal eine Navigation werden?
Dann empfehle ich dir übrigens eher das mit einer Liste zu machen (=

Kathi84 · 5. September 2010

Hallo Sarkkan!

Ich danke dir schonmal sehr. Sieht direkt viel aufgeräumter aus :lol: Und ja, du hast recht. Das ist eine Navigation. Insgesamt sind das 38 Punkte. Aber irgendwie hab ich nachwievor das Problem, dass ich es nicht kleiner bekomme. Zwar ist die Reihe jetzt genauso groß wie die Grafik, aber diese selbst ist jetzt insgesamt zu groß. Wenn ich höher gehe in den Pixeln, wirds höher, aber sobald ich unter 10px geh, tut sich gar nix mehr. Oder ist das jetzt nur bei mir so? :?

Wie müsste ich denn bei einer Liste vorgehen? Was vielleicht wirklich einfacher wäre.
So wie ich das noch im Kopf hab, war das
<li>...</li>
<li>...</li>
<li>...</li>

Aber mit welcher Information muss ich die ... füllen? Du siehst, du hast es mit nem blutigen Anfänger zu tun:-D

Edith hat noch etwas vergessen: Nur die "Oberthemen" haben einen Paragraphen davor. Die Unterseiten quasi sehen genauso aus, nur eben ohne Paragraphen am Anfang, dafür weiter nach links gerückt.

Sarkkan · 5. September 2010

Und zwar gehst du da wie folgt vor:

Code

/* Style-Datei ANFANG */
    ul.navi {
        width: 200px;
        background-color: #FF0000;
    }
    ul.navi li {
        list-style: url('BILD');
        background-color: #008000;
    }




    ul.navi ul li {
        list-style: none;
    }




/* Style-Datei ENDE */







/* Liste */
<ul class="navi">
    <li>1. Punkt
        <ul>
        <li>1.1</li>
        <li>1.2</li>
        <li>1.3</li>
        </ul>
    </li>




    <li>2. Punkt
        <ul>
        <li>2.1</li>
        <li>2.2</li>
        <li>2.3</li>
        </ul>
    </li>




    <li>3. Punkt
        <ul>
        <li>3.1</li>
        <li>3.2</li>
        <li>3.3</li>
        </ul>
    </li>




    <li>4. Punkt
        <ul>
        <li>4.1</li>
        <li>4.2</li>
        <li>4.3</li>
        </ul>
    </li>




    <li>5. Punkt
        <ul>
        <li>5.1</li>
        <li>5.2</li>
        <li>5.3</li>
        </ul>
    </li>
</ul>

Alles anzeigen

Das ist so der Grundaufbau (=
Dort wo "BILD" steht schreibst du den relativen Pfad zu dem Paragrapfenbild hin^^
Und joa.. den rest solltest du glaube ich so hinkriegen^^
Bei Fragen.. du weißt, wo du mich findest

Brauche Hilfe bei der "Reparatur" einer Tabelle

Jetzt mitmachen!

Teilen