[ÜBUNG] HTML / CSS und Firefox/IE/Opera

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

  • [ÜBUNG] HTML / CSS und Firefox/IE/Opera

    Hallo,
    hier mal eine kleine Aufgabe zum Lösen:
    Ein CSS Basierendes Layout, welches im Firefox/Opera ordnungsgemäß ausgegeben wird. Jetzt soll der Code so angepasst werden, dass der Internet Explorer dieses Layout genauso ausgibt.

    Verwendet werden darf:
    CSS / HTML / Conditional Comments

    Viel Spaß

    Folgender Code:
    index.htm

    Quellcode

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    3. <html>
    4. <head>
    5. <title>Überschrift</title>
    6. <style type="text/css">
    7. @import url('.design/style.css');
    8. @import url('.design/layout.css');
    9. </style>
    10. </head>
    11. <body>
    12. <div align="center" class="wrapper">
    13. <div class="main">
    14. <table cellpadding="0px" cellspacing="0px" border="0" id="maintable">
    15. <tr>
    16. <td colspan="2" id="topline">&nbsp;</td>
    17. </tr>
    18. <tr>
    19. <td id="logoleft">&nbsp;</td>
    20. <td id="logoright">&nbsp;</td>
    21. </tr>
    22. <tr>
    23. <td colspan="2" id="middleline">&nbsp;</td>
    24. </tr>
    25. <tr>
    26. <td id="content">&nbsp;</td>
    27. <td id="navigation">&nbsp;</td>
    28. </tr>
    29. <tr>
    30. <td colspan="2" id="bottomline">&nbsp;</td>
    31. </tr>
    32. </table>
    33. </div>
    34. </div>
    35. </body>
    36. </html>
    Alles anzeigen
    .design/style.css

    Quellcode

    1. html, body {
    2. background: #DAE2E3;
    3. font-family: Arial, Helvetica, sans-serif; font-size : 12px;
    4. height: 100%; width: 100%; margin: 0px; padding: 0px;
    5. }
    6. table {
    7. border: 0px #000000 solid;
    8. }
    9. a {
    10. color: #000000; text-decoration: none;
    11. }
    12. a:hover {
    13. color: #000000; text-decoration: underline;
    14. }
    Alles anzeigen
    .design/layout.css

    Quellcode

    1. .wrapper {
    2. border: 0px #000000 solid;
    3. background: #DAE2E3;
    4. width: 100%; height: 100%;
    5. display: block;
    6. }
    7. div.main {
    8. border: 1px #336699 solid;
    9. border-width: 0px 1px;
    10. width: 750px; height: 100%;
    11. display: block; text-align: left;
    12. padding: 0px;
    13. }
    14. #maintable {
    15. background: #ffffff; height: 100%; width: 100%;
    16. }
    18. #logoleft {
    19. background-image:url('.design/left.jpg');
    20. width: 600px; line-height: 150px; height: 150px;
    21. }
    22. #logoright {
    23. background-image:url('.design/right.jpg');
    24. width: 150px; line-height: 150px; height: 150px;
    25. }
    26. #navigation {
    27. width: 150px;
    28. }
    29. #content {
    30. width: 600px;
    31. }
    33. #topline {
    34. background: #336699; line-height: 20px; height: 20px;
    35. }
    36. #middleline {
    37. background: #336699; line-height: 5px; height: 5px;
    38. }
    39. #bottomline {
    40. background: #336699; line-height: 15px; height: 15px;
    41. }
    Alles anzeigen