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
Alles anzeigen
.design/style.css
Alles anzeigen
.design/layout.css
Alles anzeigen
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
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html>
- <head>
- <title>Überschrift</title>
- <style type="text/css">
- @import url('.design/style.css');
- @import url('.design/layout.css');
- </style>
- </head>
- <body>
- <div align="center" class="wrapper">
- <div class="main">
- <table cellpadding="0px" cellspacing="0px" border="0" id="maintable">
- <tr>
- <td colspan="2" id="topline"> </td>
- </tr>
- <tr>
- <td id="logoleft"> </td>
- <td id="logoright"> </td>
- </tr>
- <tr>
- <td colspan="2" id="middleline"> </td>
- </tr>
- <tr>
- <td id="content"> </td>
- <td id="navigation"> </td>
- </tr>
- <tr>
- <td colspan="2" id="bottomline"> </td>
- </tr>
- </table>
- </div>
- </div>
- </body>
- </html>
Quellcode
Quellcode
- .wrapper {
- border: 0px #000000 solid;
- background: #DAE2E3;
- width: 100%; height: 100%;
- display: block;
- }
- div.main {
- border: 1px #336699 solid;
- border-width: 0px 1px;
- width: 750px; height: 100%;
- display: block; text-align: left;
- padding: 0px;
- }
- #maintable {
- background: #ffffff; height: 100%; width: 100%;
- }
- #logoleft {
- background-image:url('.design/left.jpg');
- width: 600px; line-height: 150px; height: 150px;
- }
- #logoright {
- background-image:url('.design/right.jpg');
- width: 150px; line-height: 150px; height: 150px;
- }
- #navigation {
- width: 150px;
- }
- #content {
- width: 600px;
- }
- #topline {
- background: #336699; line-height: 20px; height: 20px;
- }
- #middleline {
- background: #336699; line-height: 5px; height: 5px;
- }
- #bottomline {
- background: #336699; line-height: 15px; height: 15px;
- }