![]() |
Willkommen, Gast ( Anmelden | Registrierung )
![]() |
![]() ![]()
Beitrag
#1
|
|
looks good Gruppe: User Beiträge: 67 Mitglied seit: 18.01.2004 Wohnort: Karlsruhe Mitglieds-Nr.: 1.896 ![]() |
Hallo zusammen,
ich habe mal wieder ein Problem mit meinen DIV Boxen. Auf meiner Seite habe ich eine Box in der Größe 800 px x 600 px. Darin liegt u.a. meine Menuebox, die die gleiche Höhe haben soll wie die Hauptbox. Opera stellt mir das Ganze super dar, Firefox annehmbar und der ie kürzt mir die Box (height: auto), da er "min-height" nicht interpretiert. Gibt es hierfür eine Lösung? HTML: <!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content= "text/html; charset=iso-8859-1"> <meta name="language" content="de"> <title> Leistungen </title> <meta name="author" content="Martin"> <meta name="generator" content="Ulli Meybohms HTML EDITOR"> <link rel="stylesheet" href="Style/style_mw.css" type= "text/css"> </head> <body> <div id="hintergrund"> <table class="Haupttabelle" cellpadding="0" cellspacing= "0"> <tr height="100px"> <td colspan="4"> <img src= "../Eventtechnik/www/Grafik/puresound_logo_website_800.gif" width="780" height="102" border="0" alt=""> </td> </tr> </table> <div id="textfeld"> </div> <div id="untermenue"> <br> <br> <a href="index.html">Start</a> <a href="wir.html"> Portrait</a> <a href="angebot.html">Leistungen</a> <a href="news.html">Neues</a> <a href="links.html">Links</a> <a href="kontakt.html">Kontakt</a> <a href="agb.html"> AGB</a> <a href="mailto:info@eventtechnik-weishaupt.de"> Email <img src="../Eventtechnik/brief.gif" width="11" height="9" border="0" alt="Email"></a> <a href= "impressum.html">Impressum</a> </div> </div> </body> </html> CSS: body { background-color: #FFA500; width: 100%; height: 100%; text-align: center; margin: 0px 0px 0px 0px; } A:LINK { background-color: transparent; color: white; display: block; width: 130px; text-decoration: none; font-weight: 500; font-size: 11px; font-family: sans-serif; line-height: 14px; } A:VISITED { background-color: transparent; color: white; display: block; width: 130px; text-decoration: none; font-weight: 500; font-size: 11px; font-family: sans-serif; line-height: 14px; } A:HOVER { background-color: orange; color: black; display: block; width: 130px; text-decoration: none; font-weight: 500; font-size: 11px; font-family: sans-serif; line-height: 14px; } A:LINK.untermenue { background-color: smoke white; color: blue; display: block; text-decoration: none; font-weight: 500; font-size: 11px; font-family: sans-serif; line-height: 12px; } A:VISITED.untermenue { background-color: silver; color: blue; display: block; text-decoration: none; font-weight: 500; font-size: 11px; font-family: sans-serif; line-height: 12px; } A:HOVER.untermenue { background-color: orange; color: black; display: block; text-decoration: none; font-weight: 500; font-size: 11px; font-family: sans-serif; line-height: 12px; } p { background-color: transparent; color: black; text-decoration: none; font-weight: 500; font-size: 12px; font-family: sans-serif; line-height: 13,5px; } h1 { background-color: transparent; color: black; text-decoration: none; font-weight: 600; font-size: 14px; font-family: sans-serif; line-height: 16px; } #hintergrund { background-color: silver; z-index: 0; width: 780px; height: 100%; position: relative; margin-left: auto; margin-right: auto; margin-top: 0px; padding: 0px 0px 0px 0px; text-align: left; min-height: 600px; } #untermenue { top: 102px; left: 0px; height: auto; width: 150 px; background-color: gray; position: absolute; padding-left: 20px; min-height: 498px; } #textfeld { top: 180px; left: 160px; height: auto; width: 620px; background-color: transparent; position: absolute; } table.Haupttabelle { width: 100%; border: 0px; border-collapse: collapse; border-spacing: 0px; padding: 0px 0px 0px 0px; margin: 0px 0px 0px; } td.Menue_Leerspalte { border-collapse: separate; width: 20px; background-color: Gray; } td.Menue { border-collapse: separate; width: 130px; background-color: Gray; } td.Textfeld { background-color: silver; width: 650px: text-align: left; font: normal; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 11px; font-weight: 500; } tr.menue { background-color: gray; width: 100%; text-align: center; vertical-align: middle; } |
|
|
![]() |
![]()
Beitrag
#2
|
|
Kommt Zeit, kommt Rat, kommt Conrad! ![]() Gruppe: Mods Beiträge: 1.169 Mitglied seit: 21.11.2001 Wohnort: Altenkirchen, Westerwald Mitglieds-Nr.: 42 ![]() |
Hallo,
alles klar, das Problem ist -in Deinem Fall- wenn die Auswahlbox größer ist als der Inhalt der Content-Box, verschiebt sich der Footer-Bereich an unerwüchter Stelle. Um das zu Lösen kannst Du entweder das machen was Ede schreibt; es gibt also keine Auswahlbox, die Auswahlmöglichkeiten fließen in die Contentbox mit ein, oder die Auswahlbox bekommt mit dem Float-left noch eine feste Weite, die Contentbox ein Margin-Left die diese Weite (oder etwas mehr) entspricht. Als Beispiel die geänderte Beispielseite Deutlich zu erkennen ist der Spalt zwischen Auswahl und Content (margin-left = 1px mehr als die Weite der Auswahlbox) und, ist der Content kürzer als die Auswahlbox, wird der 'Nackte' Body bereich sichtbar (Weiß); ein Break-clear-all verhindert das 'hochrutschen' des Footer Bereichs. Wenn Content und Body gleichermaßen eingefärbt werden (und man läßt die Border weg) wird der höhenunterschied 'unsichtbar' gemacht. cu Conny |
|
|
![]() ![]() |
![]() |
Vereinfachte Darstellung | Aktuelles Datum: 09.07.2025 - 5:51 |