2 div container platzieren

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

  • 2 div container platzieren

    Also ich bin absoluter Anfänger was html betrifft.
    Ich wollte ein blog-layout machen und hab dann mit photoshop und den slices ein html-dokument erstellt.
    Ich hab nun zwei der durch die slices entstanden bilder als hintergrund verwendet,wie mir geraten wurde aber dadurch wurde die ganzen bilder alle durcheinander gewürfelt.
    Ich hab keine Ahnung,wie ich nun vernünftig die zwei div dinger platziere,ohne das sich alles verschiebt..

    Im moment sieht es leider so aus..
    herz. boom. boom.
    und das sind die entsprechenden codes dazu,wie jetzt auch ist:

    HTML-Quellcode

    1. <head>
    2. <title>herz. boom. boom.</title>
    3. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    4. </head>
    5. <body bgcolor="#705d57" leftmargin="125" topmargin="0" marginwidth="0" marginheight="0">
    6. <!-- ImageReady Slices (_MG_5331.JPG) -->
    7. <table id="Tabelle_01" width="1000" height="725" border="0" cellpadding="0" cellspacing="0">
    8. <tr>
    9. <td colspan="5">
    10. <img src="herz.boom.boom._01.jpg" width="1000" height="102" alt=""></td>
    11. </tr>
    12. <tr>
    13. <td colspan="2">
    14. <img src="herz.boom.boom._02.jpg" width="405" height="93" alt=""></td>
    15. <td style=" background-image:url(herz.boom.boom._03.jpg); width="401" ; height="433" overflow=auto>
    16. <div style=" oeverflow=auto width=390; height=420; border-color:black ; border-style:solid ; border-width:0px>"
    17. dfmksdmgk.sdm<br>bbfgfhj<br>
    18. {PLACE_CONTENT}<br>
    19. </div></td>
    20. <td rowspan="3">
    21. <img src="herz.boom.boom._04.jpg" width="194" height="623" alt=""></td>
    22. </tr>
    23. <tr>
    24. <td rowspan="2">
    25. <img src="herz.boom.boom._05.jpg" width="205" height="530" alt=""></td>
    26. <td style="background-image:url(herz.boom.boom._06.jpg); width="123" height="340" overflow=auto>
    27. <div style=" oeverflow=auto width=110; height=330; border-color:black ; border-style:solid ; border-width:0px>"
    28. <left>
    29. <br>
    30. <font colore="#220404" face="times new roman,times" size="4"><strong>me<em>n</em>u</strong></font><br>
    31. <center>
    32. <a href="http://rock.my.socks.myblog.de" >
    33. <font size="1" face="arial,helvetica,sans-serif" color="#333300"><strong>startseite</strong></font><br>
    34. <font size="2">[x]</font></a><br>
    35. <a href="http://rock.my.socks.myblog.de/rock.my.socks/page/1702853"><font size="1" face="arial,helvetica,sans-serif" color="#333300"><strong>über</strong></font><br>
    36. <font size="2">[x]</font></a><br>
    37. <a href="http://rock.my.socks.myblog.de/rock.my.socks/gb"><font size="2"><font size="1" face="arial,helvetica,sans-serif" color="#333300"><strong>zum reinkritzeln</strong></font><br>[x]</font></a><br>
    38. <a href="http://www.myspace.com/230280945 " target="_blank"><font size="1" face="arial,helvetica,sans-serif" color="#333300"><strong>myspace</strong></font><br>
    39. <font size="2">[x]</font></a><br>
    40. <a href="http://rock.my.socks.myblog.de/rock.my.socks/archivebymonth"> <font size="1" face="arial,helvetica,sans-serif" color="#333300"><strong>archiv</strong></font><br><font size="2">[x]</font></a><br>
    41. <br>
    42. .<br>
    43. .<br>
    44. .<br>
    45. <br>
    46. </div></td>
    47. <td rowspan="2">
    48. <img src="herz.boom.boom._07.jpg" width="77" height="530" alt=""></td>
    49. </tr>
    50. <tr>
    51. <td>
    52. <img src="herz.boom.boom._08.jpg" width="123" height="190" alt=""></td>
    53. <td>
    54. <img src="herz.boom.boom._09.jpg" width="401" height="190" alt=""></td>
    55. </tr>
    56. </table>
    57. <!-- End ImageReady Slices -->
    58. </body>
    59. </html>
    Alles anzeigen




    Und bitte bei erklärungsversuchen wirklich so simple wie's nur geht erklären :D
    Bin wirklich gerade erst dabei mich darein zu fitzen.
  • Hi,
    am Ende der ersten div style Zeile hast Du die " nach dem > gesetzt. Das muss getauscht werden: 0px"> muss da stehen.

    Ich schau mal weiter durch ;) Melde mich dann wieder, das fiel mir nur gleich als erstes auf.

    Edit: Wenn Du mit rechtsklick auf Deine Seite klickst, und den Quelltext anzeigen lässt, werden Dir alle fehlerhaften Befehle in rot angezeigt. Ersteinmal die Zeichen ( ) < > " verbessern und ergänzen wo sie fehlen.
    Die Konstruktion der Tabellen sieht bei mir selbst ohne divs auseinander gezogen aus......
    mal schaun.... andere auch mal zu Wort kommen lass ;)

    mfg echofoxi

    Dieser Beitrag wurde bereits 3 mal editiert, zuletzt von echofoxi ()

  • ohne die divs sieht's bei mir so aus
    _MG_5331

    HTML-Quellcode

    1. <html>
    2. <head>
    3. <title>_MG_5331</title>
    4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    5. </head>
    6. <body bgcolor="#705d57" leftmargin="125" topmargin="0" marginwidth="0" marginheight="0">
    7. <!-- ImageReady Slices (_MG_5331.JPG) -->
    8. <table id="Tabelle_01" width="1000" height="725" border="0" cellpadding="0" cellspacing="0">
    9. <tr>
    10. <td colspan="5">
    11. <img src="herz.boom.boom._01.jpg" width="1000" height="102" alt=""></td>
    12. </tr>
    13. <tr>
    14. <td colspan="3">
    15. <img src="herz.boom.boom._02.jpg" width="405" height="93" alt=""></td>
    16. <td rowspan="2">
    17. <img src="herz.boom.boom._03.jpg" width="401" height="433" alt=""></td>
    18. <td rowspan="3">
    19. <img src="herz.boom.boom._04.jpg" width="194" height="623" alt=""></td>
    20. </tr>
    21. <tr>
    22. <td rowspan="2">
    23. <img src="herz.boom.boom._05.jpg" width="205" height="530" alt=""></td>
    24. <td>
    25. <img src="herz.boom.boom._06.jpg" width="123" height="340" alt=""></td>
    26. <td rowspan="2">
    27. <img src="herz.boom.boom._07.jpg" width="77" height="530" alt=""></td>
    28. </tr>
    29. <tr>
    30. <td>
    31. <img src="herz.boom.boom._08.jpg" width="123" height="190" alt=""></td>
    32. <td>
    33. <img src="herz.boom.boom._09.jpg" width="401" height="190" alt=""></td>
    34. </tr>
    35. </table>
    36. <!-- End ImageReady Slices -->
    37. </body>
    38. </html>
    Alles anzeigen


    o.o
  • Hallo joelle,

    ich weiß ja nicht, ob du nicht vielleicht inzwischen schon eine Lösung gefunden hast, aber prinzipiell soll deine Seite wohl so oder so ähnlich aussehen, oder? (Ich kanns im Moment leider nicht so richtigtesten, da der Yahoo-Server gerade nicht erreichbar ist...)

    HTML-Quellcode

    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    2. "http://www.w3.org/TR/html4/loose.dtd">
    3. <html>
    4. <head>
    5. <title>_MG_5331</title>
    6. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    7. <!-- Basisadresse fuer Links -->
    8. <base href="http://de.geocities.com/joelle.klaric/">
    9. </head>
    10. <body>
    11. <table id="Tabelle_01" cellpadding="0" cellspacing="0" width="1000">
    12. <tbody>
    13. <tr>
    14. <th colspan="5">
    15. <img alt="" src="./herz.boom.boom._01.jpg" width="1000">
    16. </th>
    17. </tr>
    18. <tr>
    19. <th colspan="3" width="405">
    20. <img src="./herz.boom.boom._02.jpg" alt="" height="93" width="405">
    21. </th>
    22. <th style="background-image: url(./herz.boom.boom._03.jpg);" rowspan="2" height="405">
    23. <div id="dfmksdmgk.sdm" style="border-style: solid; border-color: black;"><br>bbfgfhj<br>
    24. {PLACE_CONTENT}<br>
    25. </div>
    26. </th>
    27. <th width="194" rowspan="3">
    28. <img src="./herz.boom.boom._04.jpg" alt="" height="623" width="194">
    29. </th>
    30. </tr>
    31. <tr>
    32. <th rowspan="2" width="205">
    33. <img alt="" src="./herz.boom.boom._05.jpg" height="530" width="205">
    34. </th>
    35. <td style="overflow: auto; background-repeat: no-repeat; background-image: url(./herz.boom.boom._06.jpg);" width="123">
    36. <div style="border-style: solid; border-color: black; text-align: left;">
    37. <br>
    38. <font color="#220404" face="times new roman,times" size="4">
    39. <strong>me<em>n</em>u</strong>
    40. </font><br>
    41. <div style="text-align: center;">
    42. <a href="http://rock.my.socks.myblog.de">
    43. <font color="#333300" face="arial,helvetica,sans-serif" size="1"><strong>startseite</strong></font><br>
    44. <font size="2">[x]</font>
    45. </a><br>
    46. <a href="http://rock.my.socks.myblog.de/rock.my.socks/page/1702853">
    47. <font color="#333300" face="arial,helvetica,sans-serif" size="1"><strong>über</strong></font><br>
    48. <font size="2">[x]</font>
    49. </a><br>
    50. <a href="http://rock.my.socks.myblog.de/rock.my.socks/gb">
    51. <font size="2">
    52. <font color="#333300" face="arial,helvetica,sans-serif" size="1">
    53. <strong>zum reinkritzeln</strong>
    54. </font><br>[x]
    55. </font>
    56. </a><br>
    57. <a href="http://www.myspace.com/230280945%20" target="_blank">
    58. <font color="#333300" face="arial,helvetica,sans-serif" size="1">
    59. <strong>myspace</strong>
    60. </font><br>
    61. <font size="2">[x]</font>
    62. </a><br>
    63. <a href="http://rock.my.socks.myblog.de/rock.my.socks/archivebymonth">
    64. <font color="#333300" face="arial,helvetica,sans-serif" size="1">
    65. <strong>archiv</strong>
    66. </font><br>
    67. <font size="2">[x]</font>
    68. </a><br>
    69. <br>
    70. .<br>
    71. .<br>
    72. .<br>
    73. <br>
    74. </div>
    75. </div>
    76. </td>
    77. <th rowspan="2" width="77">
    78. <img src="./herz.boom.boom._07.jpg" alt="" height="530" width="77">
    79. </th>
    80. </tr>
    81. <tr>
    82. <td>
    83. <img src="./herz.boom.boom._08.jpg" alt="" height="190" width="123">
    84. </td>
    85. <td>
    86. <img src="./herz.boom.boom._09.jpg" alt="" height="190" width="401">
    87. </td>
    88. </tr>
    89. </tbody>
    90. </table>
    91. </body>
    92. </html>
    Alles anzeigen


    In deinem Code hast du ein paar CSS-Style-Tags als normale Attribute verwendet, die aber in ein style-Attribut gehören. Ansonsten sah deine Lösung doch schon ganz gut aus.

    Trotzdem überlege ich mir, ob ich nicht vielleicht konsequenter auf CSS (oder andere Stylesheets) für das Layout setzte. Die Tabelle könnte sich dann auch erübrigen, da du die Bilder oder div-Elemente mit Hintergrundbildern einfach wie gewünscht nebeneinander anordnen kannst. Dazu gibt es tausende Internet-Seiten; Selfhtml ist natürlich fast immer eine gute Anlaufstelle. Der Link führt zu einer Seite mit verschachtelten DIV-Elementen, die dir als Beispiel dienen können.

    Ich hoffe, ich konnte dir ein bisschen helfen :)

    Viele Grüße

    underattack