Tabellen frage

  • geschlossen

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Tabellen frage

    Hi zusammen,habe da ein Problem mit Tabellen :(

    Unzwar habe ich eine Tabelle erstellt und möchte neben die Tabelle ein Foto haben,OHNE dass sich die linken Tabellenzellen sich vergrößern, (siehe Bild)



    allerdings passiert bei mir folgendes:



    hoffe ihr wisst was ich meine und könnt mir helfen :(

    Dass Rote ist jetzt mal nen TestBild


    ::: EDIT :::

    So lautet momentan der Quellcode:

    PHP-Quellcode

    1. <table border="0">
    2. <colgroup>
    3. <col width="150">
    4. <col width="200">
    5. </colgroup>
    6. <tr>
    7. <th><b><div align="left"><u>Vor dem Umbau:</u></b></th>
    8. </tr>
    9. <tr>
    10. <td>Modell:</td>
    11. <td>Golf 2 GT Special</td>
    12. </tr>
    13. <tr>
    14. <td>Baujahr:</td>
    15. <td>1990</td>
    16. </tr>
    17. <tr>
    18. <td>Hubraum:</td>
    19. <td>1781 cm<sup>3</sup></td>
    20. </tr>
    21. <tr>
    22. <td>Leistung:</td>
    23. <td>66/90 (KW/PS)</td>
    24. </tr>
    25. <tr>
    26. <td>Kraftstoff:</td>
    27. <td>Benzin</td>
    28. <td><img src="Bilder\zanox.gif"></td>
    29. </tr>
    30. <tr>
    31. <td>Getriebe:</td>
    32. <td>Schaltgetriebe</td>
    33. </tr>
    34. <tr>
    35. <td>Ausstattung:</td>
    36. <td>Fire & Ice</td>
    37. </tr>
    38. <tr>
    39. <td>Sound:</td>
    40. <td>Kassettenradio</td>
    41. </tr>
    42. <tr>
    43. <td>Farbe:</td>
    44. <td>Oak Grün (von Porsche)</td>
    45. </tr>
    46. </table>
    Alles anzeigen
  • mach doch einfach noch eine Tabelle um beide Elemente herum.


    <table border="0">
    <tr>
    <td>


    <table border="0">
    <colgroup>
    <col width="150">
    <col width="200">
    </colgroup>

    <tr>
    <th><b><div align="left"><u>Vor dem Umbau:</u></b></th>

    </tr>
    <tr>
    <td>Modell:</td>
    <td>Golf 2 GT Special</td>
    </tr>
    <tr>
    <td>Baujahr:</td>
    <td>1990</td>
    </tr>
    <tr>
    <td>Hubraum:</td>
    <td>1781 cm<sup>3</sup></td>
    </tr>
    <tr>
    <td>Leistung:</td>
    <td>66/90 (KW/PS)</td>
    </tr>
    <tr>
    <td>Kraftstoff:</td>
    <td>Benzin</td>
    </tr>
    <tr>
    <td>Getriebe:</td>
    <td>Schaltgetriebe</td>
    </tr>
    <tr>
    <td>Ausstattung:</td>
    <td>Fire & Ice</td>
    </tr>
    <tr>
    <td>Sound:</td>
    <td>Kassettenradio</td>
    </tr>
    <tr>
    <td>Farbe:</td>
    <td>Oak Grün (von Porsche)</td>
    </tr>
    </table>

    </td>
    <td>
    <td valign="center">
    <img src="Bilder\zanox.gif">
    </td>
    </tr>
    </table>




    Muss natürlich angepasst werden, so würde ich das machen wenn du schon mit html arbeitest.

    Mann könnte das ganze auch schön in eine Css. Datei bringen und blub ist alles am rechten Fleck
  • Tabellen sind nicht gerade die schlauste lösung und oft total veraltet um Elemente zu positionieren.

    Hier Mein Lösungsvorschlag:

    VORSCHLAG 1:

    Du teilst deine Seite in 2 Hälften, die du mit <div> definierst. Das eine ist dein "left div" mit der Tabelle, das andere dein "right div" mit dem Picture. Die Breiten und Höhen kannst du natürlich beliebig wählen, das einzige, was hierbei zu beachten ist, ist, dass du die Elemente floaten (float ist der Textumfluss -> divs werden nebeneinander positioniert) lässt. Falls ich in Rätseln sprechen sollte :löl: hier ein Beispiel/Muster:

    <div style="width:500px;height:1000px;float:left">

    HIER DEINE TABELLE

    </div>

    <div style="width:500px;height:1000px;margin-left:500px">

    HIER DEIN PIC

    </div>

    Ich hatte leider keine Zeit das zu testen, sollte aber ziemlich sicher klappen.

    VORSCHLAG 2:

    Die zweite Lösung wäre, einfach die Tabelle wie bis jetzt zu lassen und das Bild ein wenig zu modifizieren: Du positionierst es einfach absolut in deiner Seite, indem du die Abstände zum Rand definierst. Die absolute-Positionierung bewirkt hierbei, dass sich das Bild nicht in den Textfluss einfügt, sondern unabhängig positioniert werden kann.

    Hier ein Muster:

    <img src="testpic.png" style"position:abolute;margin-left:500px;margin-top:500px">


    In diesem Fall wäre das Bild unabhängig vom Textfluss 500 Pixel vom linken und oberen Seitenrand positioniert.




    Ich hoffe ich konnte dir ein wenig weiterhelfen.
  • Ich habe mir mal deinen obigen Code "geschnappt" und mir das einmal angeschaut.;)

    Um dir das zu zeigen


    bzw. um es dir zu verdeutlichen wie es mit einer großen Grafik aussieht


    Fällt dir etwas auf?
    Richtig, die Grafik ist innerhalb der Tabelle integriert.
    Besser wäre es evtl. für die eine Tabellenzeile einen Höhenwert zu setzen (oder es so zu belassen) und die Grafik neben die Tabelle zu platzieren mittels CSS.;)


    Nur ein Denkanstoß.:)

    Edit:
    So, hier haste nun ein Beispiel.;)

    Das kann man mit Sicherheit noch "verfeinern"!

    HTML-Quellcode

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml">
    3. <head>
    4. <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    5. <meta name="generator" content="i dont know" />
    6. <title>Golf</title>
    7. <style type="text/css" media="all" />
    8. img {margin-left: 300px;
    9. margin-top: -180px;
    10. float: left}
    11. </style>
    12. </head>
    13. <body>
    14. <table width="350" border="0" cellspacing="2" cellpadding="0">
    15. <tr>
    16. <td>Modell:</td>
    17. <td>Golf 2 GT Special</td>
    18. </tr>
    19. <tr>
    20. <td>Baujahr:</td>
    21. <td>1990</td>
    22. </tr>
    23. <tr>
    24. <td>Hubraum:</td>
    25. <td>1781 cm</td>
    26. </tr>
    27. <tr>
    28. <td>Leistung:</td>
    29. <td>66/90 (KW/PS)</td>
    30. </tr>
    31. <tr>
    32. <td>Kraftstoff:</td>
    33. <td>Benzin</td>
    34. </tr>
    35. <tr>
    36. <td>Getriebe:</td>
    37. <td>Schaltgetriebe</td>
    38. </tr>
    39. <tr>
    40. <td>Ausstattung:</td>
    41. <td>Fire & Ice</td>
    42. </tr>
    43. <tr>
    44. <td>Sound:</td>
    45. <td>Kassettenradio</td>
    46. </tr>
    47. <tr>
    48. <td>Farbe:</td>
    49. <td>Oak Grün (von Porsche)</td>
    50. </tr>
    51. </table>
    52. <img src="tabgfx.jpg" alt="" height="147" width="140" border="0" />
    53. <p></p>
    54. </body>
    55. </html>
    Alles anzeigen

    Mit Border (Rahmen für Tabelle) sieht es folgendermaßen aus:


    Jetzt sieht man den Unterschied besser.;)
  • So Jungs,dass hat ja schonmal prima funktioniert nun dass nächste :D

    Nun wird mein Bild da angezeigt,wo es angezeigt werden soll,und wie bekomme ich nun folgendes hin:

    (Bild 1,2,3,4,...... sollen im großen Feld angezeigt werden,welches in meinem Fall der Platz ist,wo da jetzige Bild von iben platziert ist)



    Wäre super,wenn die 1,2,3,4,......Leiste sich bewegen würde,damit man noch mehr Bilder einfügen kann.
  • Wäre nett wenn du sagen könntest mit welchem Code, also von wem, du das jetzt genommen und realisiert hast.;)

    Zum neuen Problem von dir:
    Hmm, da wäre es vielleicht besser, wenn du die Bilder alle unten nebeneinander machst und wenn man mit der Maus über ein Bild geht sich dieses vergrößert unten aufpoppt.;)

    Ein Beispiel dazu findest du hier - einfach mit der Maus über eines der Bilder fahren.;)

    Ein Thread in dem dazugehörigen Forum bei dem das behandelt wird mittels CSS.;)

    Ist halt die Frage was jetzt leichter zu realisieren ist.:rolleyes:

    Edit:
    Habs mal probiert, es müssen aber die Bilder einmal verkleinert und einmal vergößert vorliegen!

    HTML-Quellcode

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml">
    3. <head>
    4. <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    5. <meta name="generator" content="I dont know!" />
    6. <title>Golf</title>
    7. <style type="text/css" media="all" />
    8. /* zoom image */
    9. #zoom a {
    10. float: leftt;
    11. margin: 0 0 10px 10px;
    12. border: 1px solid #000;
    13. text-indent: 10em; /* hide the link text */
    14. overflow: hidden;
    15. display: block;
    16. width: 90px; /* show only thumbnail */
    17. height: 90px;
    18. background: url(tabgfx-90x90.jpg) no-repeat top left;
    19. }
    20. #zoom a:hover {
    21. width: 140px; /* adjust size to zoomed photo */
    22. height: 147px;
    23. background-position: 0 0px; /* move the image so only the big one shows */
    24. background: url(tabgfx.jpg)
    25. }
    26. </style>
    27. </head>
    28. <body>
    29. <!-- Mouse-Over-Bild-Zoom-->
    30. <p><div id="zoom">
    31. <a href="tabgfx.jpg" alt="" height="140" width="147" border="0" /></a></div></p>
    32. </body>
    33. </html>
    Alles anzeigen

    Meine Bilder zu diesem Zweck waren:
    Als Thumbnail 90x90 und original 140x147 Pixel groß.:)
  • Du kannst die Bilder ja mit z.B. Photoshop vergrößern.;)

    Um mehrere Bidler nebeneinander zu platzieren:

    HTML-Quellcode

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml">
    3. <head>
    4. <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    5. <meta name="generator" content="I dont know!" />
    6. <title>Golf</title>
    7. <style type="text/css" media="all" />
    8. table {margin: 20px 30px 40px 50px;
    9. width: 200px;}
    10. /* zoom image */
    11. #zoom a {
    12. float: leftt;
    13. margin: 0 0 10px 10px;
    14. border: 1px solid #000;
    15. text-indent: 10em; /* hide the link text */
    16. overflow: hidden;
    17. display: block;
    18. width: 90px; /* show only thumbnail */
    19. height: 90px;
    20. background: url(tabgfx-90x90.jpg) no-repeat top left;
    21. }
    22. #zoom a:hover {
    23. width: 140px; /* adjust size to zoomed photo */
    24. height: 147px;
    25. background-position: 0 0px; /* move the image so only the big one shows */
    26. background: url(tabgfx.jpg)
    27. }
    28. #zoom1 a {
    29. float: leftt;
    30. margin: 0 0 10px 10px;
    31. border: 1px solid #000;
    32. text-indent: 10em; /* hide the link text */
    33. overflow: hidden;
    34. display: block;
    35. width: 90px; /* show only thumbnail */
    36. height: 90px;
    37. background: url(tabgfx-90x90.jpg) no-repeat top left;
    38. }
    39. #zoom1 a:hover {
    40. width: 140px; /* adjust size to zoomed photo */
    41. height: 147px;
    42. background-position: 0 0px; /* move the image so only the big one shows */
    43. background: url(tabgfx.jpg)
    44. }
    45. #zoom2 a {
    46. float: leftt;
    47. margin: 0 0 10px 10px;
    48. border: 1px solid #000;
    49. text-indent: 10em; /* hide the link text */
    50. overflow: hidden;
    51. display: block;
    52. width: 90px; /* show only thumbnail */
    53. height: 90px;
    54. background: url(tabgfx-90x90.jpg) no-repeat top left;
    55. }
    56. #zoom2 a:hover {
    57. width: 140px; /* adjust size to zoomed photo */
    58. height: 147px;
    59. background-position: 0 0px; /* move the image so only the big one shows */
    60. background: url(tabgfx.jpg)
    61. }
    62. </style>
    63. </head>
    64. <body>
    65. <!-- Mouse-Over-Bild-Zoom-->
    66. <p>
    67. <table>
    68. <tr height="200" width="200">
    69. <td id="zoom" width="200" height="100">
    70. <a href="tabgfx.jpg" alt="" height="140" width="147" border="0" ></a></td>
    71. <td id="zoom1" width="200" height="100">
    72. <a href="tabgfx.jpg" alt="" height="140" width="147" border="0" ></a></td>
    73. <td id="zoom2" width="200" height="100">
    74. <a href="tabgfx.jpg" alt="" height="140" width="147" border="0" ></a></td>
    75. </tr>
    76. </table>
    77. </body>
    78. </html>
    Alles anzeigen

    Ich habe wie man sehen kann jetzt 3 ID's angelegt mit jeweils demselben Inhalt. Du müsstest jetzt hergehen und halt die Bilder anpassen!
    Einziger Nachteil den ich feststellen musste ist, das immer die nachfolgenden Bilder auf denen man nicht mit der Maus ist etwas nach rechts verschoben werden.

    Wer einen einfacheren CSS-Code als den obigen hat bzw. weiß, der soll doch bitte mal posten und uns nicht im dunkeln stehen lassen.;)

    Edit:
    Andernfalls schau dir mal den Code hier näher an.
    Musst halt mal ein wenig ausprobieren.:D
    Solltest du es hinbekommen haben, dann lass mich am Resultat bitte teilhaben.;)

    Edit2:
    Ich habs!!!:D :D :D
    Dank des zuvor geposteten Links von mir.;)

    HTML-Quellcode

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml">
    3. <head>
    4. <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    5. <meta name="generator" content="I dont know" />
    6. <title>Golf</title>
    7. <style type="text/css" media="all" />
    8. table {margin: 20px 30px 40px 50px;
    9. width: 400px;}
    10. /* Test */
    11. .thumbnail{
    12. position: relative;
    13. z-index: 0;
    14. }
    15. .thumbnail:hover{
    16. background-color: transparent;
    17. z-index: 50;
    18. }
    19. .thumbnail span{ /*CSS for enlarged image*/
    20. position: absolute;
    21. background-color: lightyellow;
    22. padding: 5px;
    23. left: -1000px;
    24. border: 1px dashed gray;
    25. visibility: hidden;
    26. color: black;
    27. text-decoration: none;
    28. }
    29. .thumbnail span img{ /*CSS for enlarged image*/
    30. border-width: 0;
    31. padding: 2px;
    32. }
    33. .thumbnail:hover span{ /*CSS for enlarged image on hover*/
    34. visibility: visible;
    35. top: 0;
    36. left: 60px; /*position where enlarged image should offset horizontally */
    37. }
    38. </style>
    39. </head>
    40. <body>
    41. <!-- Mouse-Over-Bild-Zoom-->
    42. <p>
    43. <table height="200" width="800">
    44. <tr>
    45. <td>
    46. <a class="thumbnail" href="#thumb"><img src="tabgfx-90x90.jpg" width="90px" height="90px" border="0" /><span><img src="tabgfx.jpg" /><br />Simply beautiful.</span></a></td>
    47. <td><a class="thumbnail" href="#thumb"><img src="tabgfx-90x90.jpg" width="90px" height="90px" border="0" /><span><img src="tabgfx.jpg" /><br />Simply beautiful.</span></a></td>
    48. <td><a class="thumbnail" href="#thumb"><img src="tabgfx-90x90.jpg" width="90px" height="90px" border="0" /><span><img src="tabgfx.jpg" /><br />Simply beautiful.</span></a></td>
    49. </tr>
    50. </table>
    51. </body>
    52. </html>
    Alles anzeigen

    Die Position des anzuzeigenden großen Bildes kannst du hoffe ich mal selber noch ändern.;)
    Für weitere Bilder musst du nur den Html-Code entsprechend erweitern und natürlich die Bildnamen ändern.:)