Ergebnis 1 bis 14 von 14
  1. #1
    Jack0815 ist offline Jungspund
    registriert
    09-10-2004
    Beiträge
    21

    Question Zeilenhöhe mit Tabellenhöhe = 100%, Zelleninhalt obenbündig ausgerichtet funzt net

    Hi ihr,

    ich hoffe, ihr könnt mir helfen - ich steht gerade etwas auf dem Schlauch.

    Ich habe eine Tabelle mit zwei Spalten, die 100% der Seitenhöhe ausfüllen soll.
    Darin habe ich mehrere Zellen definiert, davon soll die erste Zelle das Logo (genau 186 pixel hoch) enthalten, die zweite Zeile das Menü, und der Rest dann den Seiteninhalt. Dieser enthält nochmals eine Tabelle.

    Nun habe ich das Prob, dass die erse (Logo)-Zeile immer dann zu groß angezeigt wird, wenn die Seite nicht ganz 'gefüllt' ist. Sprich, bei den Seiten mit Text, der länger als der angezeigte Bildschirm ist, wird die erste Zeile korrekt angezeigt: die erste Zeile ist so hoch wie das Logo.

    Ist aber der Seiteninhalt kleiner als der Bildschirm, dann wird die Tabelle an sich irgendwie 'zentriert' und die erste Zeile größer dargestellt, also oben das Logo und darunter dann Leerraum.

    Ich hab schon ewig rumprobiert und gesucht, finde aber keine Lösung für das Problem. Vielleicht habt ihr einen Tipp?

    Viele Grüße
    Jacky

    Hier noch der Code:

    Datei index.html
    Code:
    <!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=iso-8859-1" />
    <link rel="stylesheet" href="mm.css" type="text/css" />
    </head>
    
    <body>
    
    <table width="100%" border="0" cellpadding="0" cellspacing="0">
    
      <tr >
      <td width="678" nowrap="nowrap" bgcolor="#DEDEDE" height="10">
        <img src="images/titel_links.jpg" alt="" width="678"  height="186"/></a><br />
      </td>
       <td bgcolor="#C2C2C2" align="left" height="86">
        <img src="images/titel_rechts.jpg" alt="" width="343" height="186"/>
      </td>
      </tr>
    
      <tr bgcolor="#ffffff">
         <td colspan="2"><img src="mm_spacer.gif" alt="" width="1" height="1" border="0" /></td>
      </tr>
    
     <tr bgcolor="#a4c2c2">
        <td width="678" height="16" bgcolor="#C2C2C2" class="navText" id="navigation" align="left" valign="top">
              <img src="images/break.gif" alt=""/><a href="index.html">Home</a>
              <img src="images/break.gif" alt=""/><a href="kontakt.html">Kontakt</a>
        </td>
        <td bgcolor="#A9A9A9">&nbsp;</td>
      </tr>
    
      <tr bgcolor="#ffffff">
          <td colspan="2"><img src="mm_spacer.gif" alt="" width="1" height="1" border="0" /></td>
      </tr>
    
      <tr bgcolor="#ffffff">
          <td colspan="2"><img src="mm_spacer.gif" alt="" width="1" height="1" border="0" /></td>
      </tr>
    
      <tr>
          <td width="678" bgcolor="#ffffff"><br />
          <table border="0" cellspacing="0" cellpadding="0" width="600">
            <tr>
              <td colspan="2" class="pageName"><span class="pageName">
              HOME 
             ----snip----  Hier kommt der Seiteninhalt  ----snip---- 
             </span></td>
            </tr>
            </table>	
         </td>
      </tr>
    </table>
    </body>
    </html>
    und hier die dazugehörige CSS-Datei mm.css
    Code:
    body {
    	margin:0px;
    	height: 100%;
    	background-color: #FFFFFF;
    	}
    html {
    	height: 100%;
    }
    
    	
    table {
    	height:100%;
    	vertical-align: top;
    	margin-left: 0px;
    	}
    	
    td {
    	color:#333333;
    	font-family: arial;
    	font-size: 12px;
    	vertical-align: top;
    	line-height: normal;
    	}
    tr {
    	vertical-align: top;
    }

  2. #2
    Avatar von dkdenz
    dkdenz ist offline Foren-Gott
    registriert
    13-04-2004
    Ort
    Lübeck
    Beiträge
    12.050

    AW: Zeilenhöhe mit Tabellenhöhe = 100%, Zelleninhalt obenbündig ausgerichtet funzt ne

    Nimm mal das fette raus. Vielleicht tut sich was...
    Code:
    <img src="images/titel_links.jpg" alt="" width="678"  height="186"/></a><br />

  3. #3
    Jack0815 ist offline Jungspund
    registriert
    09-10-2004
    Beiträge
    21

    AW: Zeilenhöhe mit Tabellenhöhe = 100%, Zelleninhalt obenbündig ausgerichtet funzt net

    Hi dkdenz,

    habe ich probiert. Der Tag </a> ist ein Überbleibsel eines Ankers, den ich vor dem Posten des Codes entfernt hatte. Wenn ich das </a> und das <br /> entferne, bleibt die Anzeige aber leider genauso, wie sie war.... Hat also keine Wirkung :-(

    Gruß + danke
    Jacky

  4. #4
    Avatar von dkdenz
    dkdenz ist offline Foren-Gott
    registriert
    13-04-2004
    Ort
    Lübeck
    Beiträge
    12.050

    AW: Zeilenhöhe mit Tabellenhöhe = 100%, Zelleninhalt obenbündig ausgerichtet funzt ne

    Schwer zu sagen jetzt, so ohne die Grafiken.
    Hast Du die Seite auch online?

    Folgendes verstehe ich nicht ganz.
    Wieso hat das td eine Höhe von 10?
    Das Bild dann aber eine Höhe von 186?
    Code:
      <td width="678" nowrap="nowrap" bgcolor="#DEDEDE" height="10">
        <img src="images/titel_links.jpg" alt="" width="678"  height="186"/>
      </td>
    Eventuell könntest Du das Image 'pimpen', indem Du das machst:
    Code:
      <td width="678" nowrap="nowrap" bgcolor="#DEDEDE" height="10">
        <img src="images/titel_links.jpg" alt="" width="678"  height="186" style="position:relative; top:0px; left:0px;" />
      </td>

  5. #5
    Jack0815 ist offline Jungspund
    registriert
    09-10-2004
    Beiträge
    21

    AW: Zeilenhöhe mit Tabellenhöhe = 100%, Zelleninhalt obenbündig ausgerichtet funzt net

    Hi dkdenz,

    danke - aber leider auch noch nicht die Lösung.
    Wo die "10" herkommt, weiss ich auch nicht - Tippfehler, sorry - war aber auch im Source Code.

    Ich hab jetzt mal die relative Positionierung versucht, das war's auch noch nicht. Ich denke, es liegt nicht daran, dass das Bild nicht richtig positioniert wird, sondern dass aus irgendeinem Grund die Zeilenhöhe ausgedehnt wird, sobald der Text kleiner als der sichtbare Bildschirm ist.

    Ich hab die Seiten grad mal hochgeladen - Du findest sie unter
    http://www.kinder-augsburg.de/Versio...tra/index.html

    Schau die Seiten mal mit dem IE an, da wird schon die Index-Seite (Home) nicht richtig angezeigt.
    Mit dem Mozilla funktionieren die ersten vier Seiten richtig, dann aber die Seiten Kontakt und Impressum wie im IE nicht ... *blöder Fehler*

    Viele Grüße
    Jacky

  6. #6
    Avatar von dkdenz
    dkdenz ist offline Foren-Gott
    registriert
    13-04-2004
    Ort
    Lübeck
    Beiträge
    12.050

    AW: Zeilenhöhe mit Tabellenhöhe = 100%, Zelleninhalt obenbündig ausgerichtet funzt ne

    Also im FireFox sehe ich kein von Dir geschildertes Problem.
    (bis auf die horizontale Scrollbar)
    Und einen IE habe ich nicht installiert.
    Im Opera solltest Du auch noch mal nachtesten.

  7. #7
    Jack0815 ist offline Jungspund
    registriert
    09-10-2004
    Beiträge
    21

    AW: Zeilenhöhe mit Tabellenhöhe = 100%, Zelleninhalt obenbündig ausgerichtet funzt net

    Hi dkdenz,

    danke fürs Testen. Ich hab grad selbst nochmal mit Firefox geschaut, bei mir tritt das Problem dort aber genauso auf. Vielleicht habe ich mich zu unklar ausgedrückt, oder aber ich habe eine höhere Bildschirmauflösung als Du und Du siehst es deswegen nicht.

    Zur Verdeutlichung habe ich hier mal einen Screenshot mit dem Firefox:
    http://www.kinder-augsburg.de/Versio...a/testbild.jpg
    Hier 'schwebt' das grüne Logo links oben in der Mitte der Tabellenzeile.

    Richtig wäre es so:
    http://www.kinder-augsburg.de/Versio.../testbild2.jpg
    Hier ist das Logo ordentlich links oben 'angeklebt'. Dies aber nur, weil meines Erachtens die Seite 'voll' ist, also über den Bildschirmrand nach unten hinausgeht, so dass man scrollen muss.

    Ich hab jetzt grad nochmal eine absolute Positionierung versucht. Dann rutscht das Logo wenigstens nach oben links wo es hinsoll. Aber die Tabellenzeile selbst bleibt immer noch zu groß, obwohl ich ja explizit eine Höhe angebe mit
    Code:
    <td width="678" nowrap="nowrap" bgcolor="#DEDEDE" height="186">
    Viele Grüße
    Jacky

  8. #8
    Avatar von dkdenz
    dkdenz ist offline Foren-Gott
    registriert
    13-04-2004
    Ort
    Lübeck
    Beiträge
    12.050

    AW: Zeilenhöhe mit Tabellenhöhe = 100%, Zelleninhalt obenbündig ausgerichtet funzt ne

    Hm, was mir da jetzt noch spontan einfällt,
    wäre der Kommentar, das der irgendwas damit zu tun hat.
    Code:
    <!--td width="15" nowrap="nowrap"><img src="mm_spacer.gif" alt="" width="15" height="1" border="0" /></td-->

  9. #9
    Jack0815 ist offline Jungspund
    registriert
    09-10-2004
    Beiträge
    21

    AW: Zeilenhöhe mit Tabellenhöhe = 100%, Zelleninhalt obenbündig ausgerichtet funzt net

    Nein, das hat leider auch keine Wirkung ...
    :-(

    Ich verstehe das Verhalten einfach nicht. Die Tabellenzeile wird einfach vergrößert, obwohl explizit eine Höhe angegeben ist. Die Höhe der unteren Tabellenzeile (Seiteninhalt) kann ich ja schlecht angeben, weil die in Abhängigkeit von der Bildschirmgröße angezeigt werden soll.

    Ich hab mal unter
    http://www.kinder-augsburg.de/Version Petra/index2.html
    eine Version mit absoluter Positionierung hochgeladen, damit verschwindet zwar dieser 'Tabellenzeilen-Expansions-Effekt', aber so will ich das eigentlich nicht unbedingt machen. Außerdem wird dann unten wieder die Hintergrundfarbe der Titelzeile angezeigt und nicht der weiße Hintergrund der letzten Tabellenzeile.

    Gruß
    Jacky *ratlos*

  10. #10
    Jack0815 ist offline Jungspund
    registriert
    09-10-2004
    Beiträge
    21

    AW: Zeilenhöhe mit Tabellenhöhe = 100%, Zelleninhalt obenbündig ausgerichtet funzt net

    So, nun hab ich nochmal was geändert.
    Und zwar die Definition height:100% in der CSS-Definition für die Tabelle raugeschmissen.

    Jetzt wird die Logo-Zeile korrekt angezeigt, allerdings eben auch die Tabelle nicht über die ganze Seite.
    Zwar unschön, aber immer noch besser als die andere Variante....

    Gruß + danke
    Jacky

  11. #11
    cag-live ist offline Jungspund
    registriert
    22-11-2004
    Ort
    Zweenfurth
    Beiträge
    12

    AW: Zeilenhöhe mit Tabellenhöhe = 100%, Zelleninhalt obenbündig ausgerichtet funzt net

    also folgende Fehler seh ich im HTML, hier mal berichtigt:

    Code:
    <!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=iso-8859-1" />
    <link rel="stylesheet" href="mm.css" type="text/css" />
    </head>
    
    <body>
    
    <table width="100%" border="0" cellpadding="0" cellspacing="0">
    
      <tr >
      <td width="678" nowrap="nowrap" bgcolor="#DEDEDE" height="10">
        <img src="images/titel_links.jpg" alt="" width="678"  height="186"/></a><br />
      </td>
       <td bgcolor="#C2C2C2" align="left" height="86">
        <img src="images/titel_rechts.jpg" alt="" width="343" height="186"/>
      </td>
      </tr>
    
      <tr bgcolor="#ffffff">
         <td colspan="2"><img src="mm_spacer.gif" alt="" width="1" height="1" border="0" /></td>
      </tr>
    
     <tr bgcolor="#a4c2c2">
        <td width="678" height="16" bgcolor="#C2C2C2" class="navText" id="navigation" align="left" valign="top">
              <img src="images/break.gif" alt=""/><a href="index.html">Home</a>
              <img src="images/break.gif" alt=""/><a href="kontakt.html">Kontakt</a>
        </td>
        <td bgcolor="#A9A9A9">&nbsp;</td>
      </tr>
    
      <tr bgcolor="#ffffff">
          <td colspan="2"><img src="mm_spacer.gif" alt="" width="1" height="1" border="0" /></td>
      </tr>
    
      <tr bgcolor="#ffffff">
          <td colspan="2"><img src="mm_spacer.gif" alt="" width="1" height="1" border="0" /></td>
      </tr>
    
      <tr>
          <td width="678" bgcolor="#ffffff"><br />
          <table border="0" cellspacing="0" cellpadding="0" width="600">
            <tr>
              <td colspan="2" class="pageName"><span class="pageName">
              HOME 
             ----snip----  Hier kommt der Seiteninhalt  ----snip---- 
             </span></td>
            </tr>
            </table>	
         </td>
      </tr>
    </table>
    </body>
    </html>
    der richtige code:

    Code:
    <!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=iso-8859-1" />
    <link rel="stylesheet" href="mm.css" type="text/css" />
    </head>
    
    <body>
    
    <table width="100%" border="0" cellpadding="0" cellspacing="0">
    
      <tr >
      <td width="678" nowrap="nowrap" bgcolor="#DEDEDE" height="186">
        <img src="images/titel_links.jpg" alt="" width="678"  height="186"/><br />
      </td>
       <td bgcolor="#C2C2C2" align="left" height="186">
        <img src="images/titel_rechts.jpg" alt="" width="343" height="186"/>
      </td>
      </tr>
    
      <tr bgcolor="#ffffff">
         <td colspan="2"><img src="mm_spacer.gif" alt="" width="1" height="1" border="0" /></td>
      </tr>
    
     <tr bgcolor="#a4c2c2">
        <td width="678" height="16" bgcolor="#C2C2C2" class="navText" id="navigation" align="left" valign="top">
              <img src="images/break.gif" alt=""/><a href="index.html">Home</a>
              <img src="images/break.gif" alt=""/><a href="kontakt.html">Kontakt</a>
        </td>
        <td bgcolor="#A9A9A9">&nbsp;</td>
      </tr>
    
      <tr bgcolor="#ffffff">
          <td colspan="2"><img src="mm_spacer.gif" alt="" width="1" height="2" border="0" /></td>
      </tr>
    
      <tr>
          <td width="678" bgcolor="#ffffff" colspan="2"><br />
          <table border="0" cellspacing="0" cellpadding="0" width="600">
            <tr>
              <td class="pageName">
              HOME 
             ----snip----  Hier kommt der Seiteninhalt  ----snip---- 
             </td>
            </tr>
            </table>	
         </td>
      </tr>
    </table>
    </body>
    </html>

  12. #12
    Jack0815 ist offline Jungspund
    registriert
    09-10-2004
    Beiträge
    21

    AW: Zeilenhöhe mit Tabellenhöhe = 100%, Zelleninhalt obenbündig ausgerichtet funzt net

    danke cag-live,

    das habe ich nun geändert. Waren Überbleibsel vom wilden Rumprobieren ;-)

    Leider löst auch das nicht das Problem - sobald ich die Tabelle im CSS-Skript als 100% Höhe definiere, zieht er die obere Logo-Zeile größer, wenn nicht in der Anzeige mehr als die sichtbare Bildschirmanzeige belegt wird...

  13. #13
    cag-live ist offline Jungspund
    registriert
    22-11-2004
    Ort
    Zweenfurth
    Beiträge
    12

    AW: Zeilenhöhe mit Tabellenhöhe = 100%, Zelleninhalt obenbündig ausgerichtet funzt net

    naja ich glaube zum einen, gibt es das "height"-Attribut im Tabellen-Tag nicht.

    und außerdem ist das ein Bug bzw. ein unschöner Fehler von den Browser die es trotzdem erkennen

  14. #14
    Avatar von dkdenz
    dkdenz ist offline Foren-Gott
    registriert
    13-04-2004
    Ort
    Lübeck
    Beiträge
    12.050

    AW: Zeilenhöhe mit Tabellenhöhe = 100%, Zelleninhalt obenbündig ausgerichtet funzt ne

    Da ja nun schon XHTML verwendest, solltest Du vielleicht auch mal in Betracht ziehen,
    ganz auf Tabellen zum Layouten zu verzichten.
    Nimm statt dessen div-Container. Mit diesen kannst Du ziemlich genau werkeln...

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •