Auf Thema antworten 2026

Beitrag

<blockquote data-quote="bubu306" data-source="post: 999372" data-attributes="member: 205430">AW: CSS Layout im IEHallo zusammen, jetzt hab ich alles noch mal von neuem gemacht,damit wir/ich mehr Ordnung in den Code bekommen.Leider wird der DIV footer im IE unter dem Header angezeigt anstelle unten ganz unten....im FOX und Safari ohne problem.<img src="/styles/default/xenforo/smilies/uhm.gif"&nbsp; class="smilie" loading="lazy" alt=":(" title="Frown&nbsp; &nbsp; :(" data-shortname=":(" /><img src="/styles/default/xenforo/smilies/uhm.gif"&nbsp; class="smilie" loading="lazy" alt=":(" title="Frown&nbsp; &nbsp; :(" data-shortname=":(" />Könnte Ihr mir sagen wo ran das liegen könnte ?HTML Code[CODE]&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;&lt;head&gt;&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=UTF-8&quot; /&gt;&lt;title&gt;now title&lt;/title&gt;&lt;link href=&quot;css/stylesheet.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; /&gt;&lt;style type=&quot;text/css&quot;&gt;&lt;!--.Stil1 {&nbsp; &nbsp; color: #D3031C}.Stil2 {color: #004595}.Stil3 {color: #000000; }.Stil4 {&nbsp; &nbsp; color: #000000;&nbsp; &nbsp; font-size: 12px;}.Stil5 {&nbsp; &nbsp; font-size: 12px}.Stil6 {font-size: 10px}--&gt;&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;div id=&quot;wrapper&quot;&gt;&nbsp; &lt;div id=&quot;header&quot;&gt;&lt;/div&gt;&nbsp; &lt;div id=&quot;navi&quot;&gt;&nbsp; &nbsp; &lt;p&gt;&amp;nbsp;&lt;/p&gt;&nbsp; &nbsp; &lt;div id=&quot;bild1&quot;&gt;&nbsp; &nbsp; &nbsp; &lt;div align=&quot;right&quot;&gt;&lt;img src=&quot;images/1.png&quot; alt=&quot;&quot; width=&quot;72&quot; height=&quot;72&quot; /&gt;&lt;/div&gt;&nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &lt;div id=&quot;bild2&quot;&gt;&nbsp; &nbsp; &nbsp; &lt;div align=&quot;right&quot;&gt;&lt;img src=&quot;images/2.png&quot; alt=&quot;&quot; width=&quot;72&quot; height=&quot;72&quot; /&gt;&lt;/div&gt;&nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &lt;div id=&quot;bild3&quot;&gt;&nbsp; &nbsp; &nbsp; &lt;div align=&quot;right&quot;&gt;&lt;img src=&quot;images/3.png&quot; alt=&quot;&quot; width=&quot;73&quot; height=&quot;73&quot; /&gt;&lt;/div&gt;&nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &lt;p&gt;&amp;nbsp;&lt;/p&gt;&nbsp; &lt;/div&gt;&nbsp; &lt;div id=&quot;main&quot;&gt;&nbsp; &nbsp; &lt;div id=&quot;field1&quot;&gt;&lt;/div&gt;&nbsp; &nbsp; &lt;div id=&quot;field2&quot;&gt;&nbsp; &nbsp; &nbsp; &lt;h2 class=&quot;Stil1&quot;&gt;title1&lt;/h2&gt;&nbsp; &nbsp; &nbsp; &lt;h3 class=&quot;Stil2&quot;&gt;date&lt;/h3&gt;&nbsp; &nbsp; &nbsp; &lt;h5 class=&quot;Stil3 Stil5&quot;&gt;text&lt;br /&gt;&nbsp; &nbsp; &nbsp; &nbsp; text&lt;br /&gt;&nbsp; &nbsp; &nbsp; text&lt;/h5&gt;&nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &lt;div id=&quot;field3&quot;&gt;&nbsp; &nbsp; &nbsp; &lt;h5 class=&quot;Stil2&quot;&gt;Das Team:&lt;/h5&gt;&nbsp; &nbsp; &nbsp; &lt;p class=&quot;Stil4&quot;&gt;&lt;span class=&quot;Stil1&quot;&gt;text&lt;/span&gt;&lt;br /&gt;&nbsp; &nbsp; &nbsp; &nbsp; text&lt;br /&gt;&nbsp; &nbsp; &nbsp; &nbsp; text&lt;br /&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;br /&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;br /&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;span class=&quot;Stil1&quot;&gt;text&lt;/span&gt;&lt;br /&gt;&nbsp; &nbsp; &nbsp; &nbsp; text&lt;br /&gt;&nbsp; &nbsp; &nbsp;&nbsp; text&lt;br /&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;br /&gt;&nbsp; &nbsp; &nbsp; &lt;/p&gt;&nbsp; &nbsp; &nbsp; &lt;p class=&quot;Stil4&quot;&gt;&lt;br /&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;span class=&quot;Stil1&quot;&gt;text&lt;/span&gt;&lt;br /&gt;&nbsp; &nbsp; &nbsp; &nbsp; text&lt;br /&gt;&nbsp; &nbsp; &nbsp; text&lt;/p&gt;&nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &lt;div class=&quot;Stil2&quot; id=&quot;field4&quot;&gt;&nbsp; &nbsp; &nbsp; &lt;h5&gt;text&lt;/h5&gt;&nbsp; &nbsp; &nbsp; &lt;table width=&quot;437&quot; height=&quot;120&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;tr&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td width=&quot;13&quot; align=&quot;left&quot;&gt;&lt;img src=&quot;images/quadrat_red.png&quot; width=&quot;10&quot; height=&quot;10&quot; /&gt;&lt;/td&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td width=&quot;414&quot;&gt;&lt;span class=&quot;Stil4&quot;&gt;text&lt;/span&gt;&lt;/td&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;/tr&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;tr&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td align=&quot;left&quot;&gt;&lt;img src=&quot;images/quadrat_red.png&quot; alt=&quot;&quot; width=&quot;10&quot; height=&quot;10&quot; /&gt;&lt;/td&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td&gt;&lt;span class=&quot;Stil4&quot;&gt;text&lt;/span&gt;&lt;/td&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;/tr&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;tr&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td&gt;&amp;nbsp;&lt;/td&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td&gt;&lt;span class=&quot;Stil4&quot;&gt;text&lt;/span&gt;&lt;/td&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;/tr&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;tr&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td align=&quot;left&quot;&gt;&lt;img src=&quot;images/quadrat_red.png&quot; alt=&quot;&quot; width=&quot;10&quot; height=&quot;10&quot; /&gt;&lt;/td&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td&gt;&lt;span class=&quot;Stil4&quot;&gt;text&lt;/span&gt;&lt;/td&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;/tr&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;tr&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td align=&quot;left&quot;&gt;&lt;img src=&quot;images/quadrat_red.png&quot; alt=&quot;&quot; width=&quot;10&quot; height=&quot;10&quot; /&gt;&lt;/td&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td&gt;&lt;span class=&quot;Stil4&quot;&gt;text&lt;/span&gt;&lt;/td&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;/tr&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;tr&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td align=&quot;left&quot; class=&quot;Stil4&quot;&gt;&amp;nbsp;&lt;/td&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td class=&quot;Stil4&quot;&gt;&amp;nbsp;&lt;/td&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;/tr&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;tr&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td align=&quot;left&quot; class=&quot;Stil4&quot;&gt;&amp;nbsp;&lt;/td&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td class=&quot;Stil4&quot;&gt;&amp;nbsp;&lt;/td&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;/tr&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;tr&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td colspan=&quot;2&quot; align=&quot;left&quot; class=&quot;Stil2&quot;&gt;&lt;h5&gt;text&lt;/h5&gt;&lt;/td&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;/tr&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;tr&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td colspan=&quot;2&quot; align=&quot;left&quot; class=&quot;Stil4&quot;&gt;Text&lt;br /&gt;&lt;/td&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;/tr&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;tr&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td colspan=&quot;2&quot; align=&quot;left&quot; class=&quot;Stil4&quot;&gt;&lt;/td&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;/tr&gt;&nbsp; &nbsp; &nbsp; &lt;/table&gt;&nbsp; &nbsp; &nbsp; &lt;p class=&quot;Stil4&quot;&gt;&amp;nbsp;&lt;/p&gt;&nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &lt;div id=&quot;footer&quot;&gt;&nbsp; &nbsp; &nbsp; &lt;div id=&quot;button&quot;&gt;&lt;img src=&quot;images/2button.png&quot; width=&quot;123&quot; height=&quot;50&quot; align=&quot;top&quot; /&gt;&lt;/p&gt;&nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &lt;div id=&quot;flyer&quot;&gt;&lt;a href=&quot;Flyer.pdf&quot;&gt;&lt;img src=&quot;images/1button.png&quot; width=&quot;123&quot; height=&quot;50&quot; border=0/&gt;&lt;/a&gt;&lt;/div&gt;&nbsp; &nbsp; &nbsp; &lt;div id=&quot;sponsor&quot;&gt;&lt;a href=&quot;page2.html&quot;&gt;&lt;img src=&quot;images/2button.png&quot; width=&quot;123&quot; height=&quot;50&quot; border=&quot;0&quot; href=&quot;page2.html&quot; /&gt;&lt;/a&gt;&lt;/div&gt;&nbsp; &nbsp; &nbsp; &lt;div class=&quot;Stil6&quot; id=&quot;datum&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;div align=&quot;center&quot;&gt;ab 01.01.2009&lt;/div&gt;&nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &lt;p&gt;&amp;nbsp;&lt;/p&gt;&nbsp; &nbsp; &lt;/div&gt;&nbsp; &lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;[/CODE]CSS Code[CODE]@charset &quot;UTF-8&quot;;body {&nbsp; &nbsp; margin: 0;&nbsp; &nbsp; padding: 0;&nbsp; &nbsp; font-family: Verdana, Arial, Helvetica, sans-serif;}#wrapper {&nbsp; &nbsp; height: 860px;&nbsp; &nbsp; width: 1000px;&nbsp; &nbsp; margin-right: auto;&nbsp; &nbsp; margin-left: auto;&nbsp; &nbsp; border-right-width: 1px;&nbsp; &nbsp; border-bottom-width: 1px;&nbsp; &nbsp; border-left-width: 1px;&nbsp; &nbsp; border-right-style: solid;&nbsp; &nbsp; border-bottom-style: solid;&nbsp; &nbsp; border-left-style: solid;&nbsp; &nbsp; border-right-color: #CCCCCC;&nbsp; &nbsp; border-bottom-color: #CCCCCC;&nbsp; &nbsp; border-left-color: #CCCCCC;}#header {&nbsp; &nbsp; height: 100px;&nbsp; &nbsp; background-image: url(../images/header.png);}#navi {&nbsp; &nbsp; background-color: #004595;&nbsp; &nbsp; height: 760px;&nbsp; &nbsp; width: 150px;&nbsp; &nbsp; float: left;}#main {&nbsp; &nbsp; float: right;&nbsp; &nbsp; width: 850px;}#field1 {&nbsp; &nbsp; background-image: url(../images/die3_button.png);&nbsp; &nbsp; background-repeat: no-repeat;&nbsp; &nbsp; float: left;&nbsp; &nbsp; height: 300px;&nbsp; &nbsp; width: 350px;&nbsp; &nbsp; background-position: 10px;}#field2 {&nbsp; &nbsp; float: right;&nbsp; &nbsp; height: auto;&nbsp; &nbsp; width: 480px;&nbsp; &nbsp; padding-top: 80px;}#field3 {&nbsp; &nbsp; float: left;&nbsp; &nbsp; height: 300px;&nbsp; &nbsp; width: 350px;&nbsp; &nbsp; clear: left;&nbsp; &nbsp; padding-left: 20px;}#field4 {&nbsp; &nbsp; float: right;&nbsp; &nbsp; height: 150px;&nbsp; &nbsp; width: 480px;&nbsp; &nbsp; clear: right;}#datum {&nbsp; &nbsp; margin-left: 25px;&nbsp; &nbsp; margin-right: 710px;}#back_button {&nbsp; &nbsp; background-color: #FF0000;&nbsp; &nbsp; float: right;&nbsp; &nbsp; margin-right: 200px;}#footer {&nbsp; &nbsp; height: 140px;&nbsp; &nbsp; float: left;&nbsp; &nbsp; clear: right;&nbsp; &nbsp; width: 850px;&nbsp; &nbsp; background-image: url(../images/logo.gif);&nbsp; &nbsp; background-position: right;&nbsp; &nbsp; background-repeat: no-repeat;}#text {&nbsp; &nbsp; float: left;&nbsp; &nbsp; width: 250px;&nbsp; &nbsp; padding-left: 20px;}#bild3 {&nbsp; &nbsp; background-color: #D3031C;}#bild2 {&nbsp; &nbsp; background-color: #D3031C;&nbsp; &nbsp; margin-top: 18px;&nbsp; &nbsp; margin-bottom: 18px;}#bild1 {&nbsp; &nbsp; background-color: #D3031C;&nbsp; &nbsp; margin-top: 310px;}#banner1 {&nbsp; &nbsp; float: left;&nbsp; &nbsp; padding-left: 20px;&nbsp; &nbsp; padding-top: 50px;}#banner2 {&nbsp; &nbsp; float: right;&nbsp; &nbsp; padding-top: 50px;&nbsp; &nbsp; padding-right: 250px;}#banner3 {&nbsp; &nbsp; padding-top: 50px;&nbsp; &nbsp; padding-left: 260px;}[/CODE]</blockquote>

[QUOTE="bubu306, post: 999372, member: 205430"] [b]AW: CSS Layout im IE[/b] Hallo zusammen, jetzt hab ich alles noch mal von neuem gemacht, damit wir/ich mehr Ordnung in den Code bekommen. Leider wird der DIV footer im IE unter dem Header angezeigt anstelle unten ganz unten....im FOX und Safari ohne problem.:(:( Könnte Ihr mir sagen wo ran das liegen könnte ? HTML Code [CODE]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>now title</title> <link href="css/stylesheet.css" rel="stylesheet" type="text/css" /> <style type="text/css">  </style> </head> <body> <div id="wrapper"> <div id="header"></div> <div id="navi">   <div id="bild1"> <div align="right"><img src="images/1.png" alt="" width="72" height="72" /></div> </div> <div id="bild2"> <div align="right"><img src="images/2.png" alt="" width="72" height="72" /></div> </div> <div id="bild3"> <div align="right"><img src="images/3.png" alt="" width="73" height="73" /></div> </div>   </div> <div id="main"> <div id="field1"></div> <div id="field2"> <h2 class="Stil1">title1</h2> <h3 class="Stil2">date</h3> <h5 class="Stil3 Stil5">text text text</h5> </div> <div id="field3"> <h5 class="Stil2">Das Team:</h5> text text text text text text text text text </div> <div class="Stil2" id="field4"> <h5>text</h5> <table width="437" height="120"> <tr> <td width="13" align="left"><img src="images/quadrat_red.png" width="10" height="10" /></td> <td width="414">text</td> </tr> <tr> <td align="left"><img src="images/quadrat_red.png" alt="" width="10" height="10" /></td> <td>text</td> </tr> <tr> <td> </td> <td>text</td> </tr> <tr> <td align="left"><img src="images/quadrat_red.png" alt="" width="10" height="10" /></td> <td>text</td> </tr> <tr> <td align="left"><img src="images/quadrat_red.png" alt="" width="10" height="10" /></td> <td>text</td> </tr> <tr> <td align="left" class="Stil4"> </td> <td class="Stil4"> </td> </tr> <tr> <td align="left" class="Stil4"> </td> <td class="Stil4"> </td> </tr> <tr> <td colspan="2" align="left" class="Stil2"><h5>text</h5></td> </tr> <tr> <td colspan="2" align="left" class="Stil4">Text </td> </tr> <tr> <td colspan="2" align="left" class="Stil4"></td> </tr> </table>   </div> <div id="footer"> <div id="button"><img src="images/2button.png" width="123" height="50" align="top" /> </div> <div id="flyer"><a href="Flyer.pdf"><img src="images/1button.png" width="123" height="50" border=0/></a></div> <div id="sponsor"><a href="page2.html"><img src="images/2button.png" width="123" height="50" border="0" href="page2.html" /></a></div> <div class="Stil6" id="datum"> <div align="center">ab 01.01.2009</div> </div>   </div> </div> </div> </body> </html> [/CODE] CSS Code [CODE]@charset "UTF-8"; body { margin: 0; padding: 0; font-family: Verdana, Arial, Helvetica, sans-serif; } #wrapper { height: 860px; width: 1000px; margin-right: auto; margin-left: auto; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-right-color: #CCCCCC; border-bottom-color: #CCCCCC; border-left-color: #CCCCCC; } #header { height: 100px; background-image: url(../images/header.png); } #navi { background-color: #004595; height: 760px; width: 150px; float: left; } #main { float: right; width: 850px; } #field1 { background-image: url(../images/die3_button.png); background-repeat: no-repeat; float: left; height: 300px; width: 350px; background-position: 10px; } #field2 { float: right; height: auto; width: 480px; padding-top: 80px; } #field3 { float: left; height: 300px; width: 350px; clear: left; padding-left: 20px; } #field4 { float: right; height: 150px; width: 480px; clear: right; } #datum { margin-left: 25px; margin-right: 710px; } #back_button { background-color: #FF0000; float: right; margin-right: 200px; } #footer { height: 140px; float: left; clear: right; width: 850px; background-image: url(../images/logo.gif); background-position: right; background-repeat: no-repeat; } #text { float: left; width: 250px; padding-left: 20px; } #bild3 { background-color: #D3031C; } #bild2 { background-color: #D3031C; margin-top: 18px; margin-bottom: 18px; } #bild1 { background-color: #D3031C; margin-top: 310px; } #banner1 { float: left; padding-left: 20px; padding-top: 50px; } #banner2 { float: right; padding-top: 50px; padding-right: 250px; } #banner3 { padding-top: 50px; padding-left: 260px; } [/CODE] [/QUOTE]

Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.

Authentifizierung

Wenn ▲ = 7, ▼ = 3, ◇ = 2 und die Summe von ▲ und ▼ durch ◇ geteilt wird, was ist das Ergebnis?