[HTML] Tabellenlayout verzogen!

Dieses Thema im Forum "Webentwicklung" wurde erstellt von Bernie, 10. Oktober 2006 .

Schlagworte:
Status des Themas:
Es sind keine weiteren Antworten möglich.
  1. 10. Oktober 2006
    Tabellenlayout verzogen!

    Hi

    ich habe ein Design erstellt, das gesliced und im Tabellenlayout eine HP draus gemacht. Funktioniert auch wunderbar, am Anfang...
    Wenn der Content in der Mitte zu lang wird, dann fängt sich das Menü links an zu verziehen. Allerdings nur in den Browsern Firefox und Internet Explorer. In Opera wird alles super angezeigt...

    Hab schon ausprobiert, was mit eingefallen ist. Zum einen überall den tag "valign="top"" eingefügt (bei allen tr und td tags, inzwischen aber wieder entfernt, weils nix gebracht hat), bzw. auch mal probiert, alles über "styles background" im hintergrund festzumachen... hat aber alles nichts genützt...

    hab hier mal den Code und noch Bilder zur Verdeutlichung

    OPERA:
    {bild-down: http://imageshack.us/a/img48/7922/operaqf8.jpg}


    IE:
    {bild-down: http://imageshack.us/a/img48/9688/ieeb0.jpg}


    Code:
    <html>
<head>
<title>Johnny on the Spot - Rock'n'Roll</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
<!--
.Stil1 {color: #9F8D69}
.Stil2 {
 color: #A08D62;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 12px;
}
.Stil3 {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 12px;
}
.Stil6 {color: #9F8D69; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; }

a:link {color:#A08D62; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10pt; text-decoration:none}
a:hover {color:#A08D62; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10pt; text-decoration:none; font-weight:bold}
a:active {color:#A08D62; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10pt; text-decoration:none}
a:visited {color:#A08D62; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10pt; text-decoration:none}

-->
</style>

</head>
<body bgcolor="#999999" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (04_Entwurf.psd) -->
<div align="center">
<table id="Table_01" width="990" height="900" border="0" cellpadding="0" cellspacing="0" bgcolor="#000000">
 <tr>
 <td colspan="16">
 <div align="left"><img src="images/release_01.jpg" width="990" height="132" alt=""></div></td>
 <td>
 <img src="images/spacer.gif" width="1" height="132" alt=""></td>
 </tr>
 <tr>
 <td colspan="16">
 <img src="images/release_02.jpg" width="990" height="34" alt=""></td>
 <td>
 <img src="images/spacer.gif" width="1" height="34" alt=""></td>
 </tr>
 <tr>
 <td rowspan="21" valign="top">
 <img src="images/release_03.jpg" width="45" height="612" alt=""></td>
 <td colspan="4">
 <a href="index.php"><img src="images/release_04.jpg" alt="" width="39" height="11" border="0"></a></td>
 <td colspan="7" rowspan="4">
 <img src="images/release_05.jpg" width="101" height="67" alt=""></td>
 <td rowspan="20" style="background:url(images/release_06.jpg) no-repeat" valign="top" align="left">
<!-- MAIN -->
<br>
<br>
<p class="Stil2"><span class="Stil2">Zum Vergrößern der Bilder, bitte anklicken</span></p>
<table width="500" border="0" cellspacing="20">
 <tr>
 <td>...</td>
 <td>...</td>
 <td>...</td>
 </tr>
 <tr>
 <td>...</td>
 <td>...</td>
 <td>...</td>
 </tr>
 <tr>
 <td>...</td>
 <td>...</td>
 <td>...</td>
 </tr>
 <tr>
 <td>...</td>
 <td>...</td>
 <td>...</td>
 </tr>
 <tr>
 <td>...</td>
 <td>...</td>
 <td>...</td>
 </tr>
 <tr>
 <td>...</td>
 <td>...</td>
 <td>...</td>
 </tr>
 <tr>
 <td>...</td>
 <td>...</td>
 <td>...</td>
 </tr>
 <tr>
 <td>...</td>
 <td>...</td>
 <td>...</td>
 </tr>
 <tr>
 <td>...</td>
 <td>...</td>
 <td>...</td>
 </tr>
 <tr>
 <td>...</td>
 <td>...</td>
 <td>...</td>
 </tr>
 <tr>
 <td>...</td>
 <td>...</td>
 <td>...</td>
 </tr>
</table>
 <table width="500">
 <tr>
 <td width="153">&nbsp;</td>
 <td width="335" class="Stil2"><div align="right">Alle Photos sind gemacht von Bernd Schumacher<br>
 <a href="http://www.schumacher-photodesign.de" target="_blank">www.schumacher-photodesign.de</a></div></td>
 </tr>
 </table>




<!-- END MAIN --> 
 </td>
 <td colspan="3" rowspan="21" align="left" valign="top">
 <div align="left"><img src="images/release_07.jpg" width="251" height="612" alt=""></div></td>
 <td>
 <img src="images/spacer.gif" width="1" height="11" alt=""></td>
 </tr>
 <tr>
 <td colspan="4">
 <img src="images/release_08.jpg" width="39" height="23" alt=""></td>
 <td>
 <img src="images/spacer.gif" width="1" height="23" alt=""></td>
 </tr>
 <tr>
 <td colspan="2">
 <a href="band.php"><img src="images/release_09.jpg" alt="" width="34" height="10" border="0"></a></td>
 <td colspan="2" rowspan="2">
 <img src="images/release_10.jpg" width="5" height="33" alt=""></td>
 <td>
 <img src="images/spacer.gif" width="1" height="10" alt=""></td>
 </tr>
 <tr>
 <td colspan="2">
 <img src="images/release_11.jpg" width="34" height="23" alt=""></td>
 <td>
 <img src="images/spacer.gif" width="1" height="23" alt=""></td>
 </tr>
 <tr>
 <td colspan="8">
 <a href="stage.php"><img src="images/release_12.jpg" alt="" width="69" height="14" border="0"></a></td>
 <td colspan="3" rowspan="8">
 <img src="images/release_13.jpg" width="71" height="140" alt=""></td>
 <td>
 <img src="images/spacer.gif" width="1" height="14" alt=""></td>
 </tr>
 <tr>
 <td colspan="8">
 <img src="images/release_14.jpg" width="69" height="23" alt=""></td>
 <td>
 <img src="images/spacer.gif" width="1" height="23" alt=""></td>
 </tr>
 <tr>
 <td colspan="5">
 <a href="music.php"><img src="images/release_15.jpg" alt="" width="42" height="10" border="0"></a></td>
 <td colspan="3" rowspan="6">
 <img src="images/release_16.jpg" width="27" height="103" alt=""></td>
 <td>
 <img src="images/spacer.gif" width="1" height="10" alt=""></td>
 </tr>
 <tr>
 <td colspan="5">
 <img src="images/release_17.jpg" width="42" height="24" alt=""></td>
 <td>
 <img src="images/spacer.gif" width="1" height="24" alt=""></td>
 </tr>
 <tr>
 <td>
 <a href="pics.php"><img src="images/release_18.jpg" alt="" width="29" height="10" border="0"></a></td>
 <td colspan="4" rowspan="2">
 <img src="images/release_19.jpg" width="13" height="34" alt=""></td>
 <td>
 <img src="images/spacer.gif" width="1" height="10" alt=""></td>
 </tr>
 <tr>
 <td>
 <img src="images/release_20.jpg" width="29" height="24" alt=""></td>
 <td>
 <img src="images/spacer.gif" width="1" height="24" alt=""></td>
 </tr>
 <tr>
 <td colspan="3">
 <a href="shop.php"><img src="images/release_21.jpg" alt="" width="36" height="13" border="0"></a></td>
 <td colspan="2" rowspan="2">
 <img src="images/release_22.jpg" width="6" height="35" alt=""></td>
 <td>
 <img src="images/spacer.gif" width="1" height="13" alt=""></td>
 </tr>
 <tr>
 <td colspan="3">
 <img src="images/release_23.jpg" width="36" height="22" alt=""></td>
 <td>
 <img src="images/spacer.gif" width="1" height="22" alt=""></td>
 </tr>
 <tr>
 <td colspan="9">
 <a href="book.php"><img src="images/release_24.jpg" alt="" width="81" height="10" border="0"></a></td>
 <td colspan="2" rowspan="4">
 <img src="images/release_25.jpg" width="59" height="70" alt=""></td>
 <td>
 <img src="images/spacer.gif" width="1" height="10" alt=""></td>
 </tr>
 <tr>
 <td colspan="9">
 <img src="images/release_26.jpg" width="81" height="24" alt=""></td>
 <td>
 <img src="images/spacer.gif" width="1" height="24" alt=""></td>
 </tr>
 <tr>
 <td colspan="6">
 <a href="press.php"><img src="images/release_27.jpg" alt="" width="48" height="10" border="0"></a></td>
 <td colspan="3" rowspan="2">
 <img src="images/release_28.jpg" width="33" height="36" alt=""></td>
 <td>
 <img src="images/spacer.gif" width="1" height="10" alt=""></td>
 </tr>
 <tr>
 <td colspan="6">
 <img src="images/release_29.jpg" width="48" height="26" alt=""></td>
 <td>
 <img src="images/spacer.gif" width="1" height="26" alt=""></td>
 </tr>
 <tr>
 <td colspan="10">
 <a href="newsl.php"><img src="images/release_30.jpg" alt="" width="83" height="10" border="0"></a></td>
 <td rowspan="5" valign="top">
 <img src="images/release_31.jpg" width="57" height="335" alt=""></td>
 <td>
 <img src="images/spacer.gif" width="1" height="10" alt=""></td>
 </tr>
 <tr>
 <td colspan="10">
 <img src="images/release_32.jpg" width="83" height="24" alt=""></td>
 <td>
 <img src="images/spacer.gif" width="1" height="24" alt=""></td>
 </tr>
 <tr>
 <td colspan="7">
 <a href="contact.php"><img src="images/release_33.jpg" alt="" width="59" height="10" border="0"></a></td>
 <td colspan="3" rowspan="3" valign="top">
 <img src="images/release_34.jpg" width="24" height="301" alt=""></td>
 <td>
 <img src="images/spacer.gif" width="1" height="10" alt=""></td>
 </tr>
 <tr>
 <td colspan="7" rowspan="2" valign="top">
 <img src="images/release_35.jpg" width="59" height="291" alt=""></td>
 <td>
 <img src="images/spacer.gif" width="1" height="232" alt=""></td>
 </tr>
 <tr>
 <td>
 <img src="images/release_36.jpg" width="554" height="59" alt=""></td>
 <td>
 <img src="images/spacer.gif" width="1" height="59" alt=""></td>
 </tr>
 <tr>
 <td colspan="16">
 <img src="images/release_37.jpg" width="990" height="106" alt=""></td>
 <td>
 <img src="images/spacer.gif" width="1" height="106" alt=""></td>
 </tr>
 <tr>
 <td colspan="14" rowspan="2">
 <img src="images/release_38.jpg" width="921" height="16" alt=""></td>
 <td>
 <a href="impressum.php"><img src="images/release_39.jpg" alt="" width="62" height="11" border="0"></a></td>
 <td rowspan="2">
 <img src="images/release_40.jpg" width="7" height="16" alt=""></td>
 <td>
 <img src="images/spacer.gif" width="1" height="11" alt=""></td>
 </tr>
 <tr>
 <td>
 <img src="images/release_41.jpg" width="62" height="5" alt=""></td>
 <td>
 <img src="images/spacer.gif" width="1" height="5" alt=""></td>
 </tr>
 <tr>
 <td>
 <img src="images/spacer.gif" width="45" height="1" alt=""></td>
 <td>
 <img src="images/spacer.gif" width="29" height="1" alt=""></td>
 <td>
 <img src="images/spacer.gif" width="5" height="1" alt=""></td>
 <td>
 <img src="images/spacer.gif" width="2" height="1" alt=""></td>
 <td>
 <img src="images/spacer.gif" width="3" height="1" alt=""></td>
 <td>
 <img src="images/spacer.gif" width="3" height="1" alt=""></td>
 <td>
 <img src="images/spacer.gif" width="6" height="1" alt=""></td>
 <td>
 <img src="images/spacer.gif" width="11" height="1" alt=""></td>
 <td>
 <img src="images/spacer.gif" width="10" height="1" alt=""></td>
 <td>
 <img src="images/spacer.gif" width="12" height="1" alt=""></td>
 <td>
 <img src="images/spacer.gif" width="2" height="1" alt=""></td>
 <td>
 <img src="images/spacer.gif" width="57" height="1" alt=""></td>
 <td>
 <img src="images/spacer.gif" width="554" height="1" alt=""></td>
 <td>
 <img src="images/spacer.gif" width="182" height="1" alt=""></td>
 <td>
 <img src="images/spacer.gif" width="62" height="1" alt=""></td>
 <td>
 <img src="images/spacer.gif" width="7" height="1" alt=""></td>
 <td></td>
 </tr>
</table>

</div>
</body>
</html>
    Wäre super, wenn mir jemand helfen kann, denn ich weiß echt nicht mehr weiter
    MfG
    Bernie
     
  3. 11. Oktober 2006
    AW: Tabellenlayout verzogen!

    erstmal ^^ tabellen naja egal,

    wäre kugl wenn du dich ma per pm meldest, dann mir die index mit bildern schickst, weil dann köntne ich mir das ma genauer anschaun, ohne bilder direkt ist das pups
     
  4. 11. Oktober 2006
    AW: Tabellenlayout verzogen!

    was mir da mal als erstes auffällt:

    Doctype?! schonmal was davon gehört?
    manchmal hilf schon das bisschen html um die seite richtig anzuzeigen...

    desweiteren...
    in Photoshop gesliced?
    sieht jedenfalls so aus... meine Meinung: vollkommender Müll... komplett falsch angegangen...

    selber schreiben ist angebracht:

    mache ein tabellengrundgerüst, das so aussieht (rot)(kurz mal in paint skizziert):
    Bild=down!

    links in der spalte iss dann deine navi (gelb) wieder als tabelle gemacht.
    jede zeile der tabelle beinhaltet einen abschnitt vom bild der navi.. und zwar komplett von links nach rechts... nicht so ein kleinzeugs...
    jedes bild sollte dann eben noch einen link darstellen...
     
  5. 11. Oktober 2006
    AW: Tabellenlayout verzogen!

    Timer ich kann dir nicht ganz rechtgeben Ich slice viel mit Photoshop, wenn man richtig slicet, also erst das grobe layout, dann die einzelnen spalten nochma slicet geht es wunder bar, meine kudnen haben nie gemeckert ( aber nur wenn ich zu faul für css bin^^ )
     
  6. 11. Oktober 2006
    AW: Tabellenlayout verzogen!

    mhh... ich slice nie mit photoshop... (benutze es auch nie... gimp reicht vollkommen...)
    mache alles per hand und habe NIE solche "unschönheiten"

    ergo: photoshop kann doch nicht alles...

    und... css... tja... iss natürlich vieeel schöner...stimmt...
     
  7. 11. Oktober 2006
    AW: Tabellenlayout verzogen!

    Das Puffer in der Navi fehlt. Deswegen verzieht sich das ganze. Typischer Anfaengerfehler. Musst ein Bild in den Background einer td setzen, damit die nachkommt!
     
  8. 11. Oktober 2006
    AW: Tabellenlayout verzogen!

    Das mit den Bilder im Background hab ich schon versucht... funktioniert leider auch nicht...
    .
    .
    .
    Ja, man kann über Tabellen streiten, aber es muss eine Lösung geben, denn Opera kann es ja auch anzeigen. Also wär super, wenn jemand noch was weiß...
    xionics: hab dir mal geschrieben.

    für alle andern: ihr könnts euch auch mal "live" angucken, unter http://www.johnnyonthespot.de/p_live.php

    MfG
    Bernie
     
  9. 11. Oktober 2006
    AW: Tabellenlayout verzogen!


    nicht nur das, außerdem muss er die navi bilder auch nach oben ausrichten, sonst rutschen die unkoordiniert mit

    aber ich habe schon pm kontakt mit ihm, er soll mir das design ma in jpg schicken , dann slice ich das ma richtig :]
     
  10. 12. Oktober 2006
    AW: Tabellenlayout verzogen!

    Gut, nach oben ausgerichtet war es ja
    Aber ist ja jetzt egal, hast es mir ja nue gesliced und in Zukunft weiß ich ja, was ich anders machen muss!
    Danke an alle für die Hilfe

    MfG
    bernie
     
  11. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.