![]() |
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
|
|
Ausnahme Poster ![]() Gruppe: User Beiträge: 147 Mitglied seit: 14.07.2003 Wohnort: Schwäbisch Gmünd Mitglieds-Nr.: 947 ![]() |
Hi Worgan,
nett, dass du dein komplettes CSS hier eingestellt hast. Ehrlich gesagt, ich hab gar nicht die Zeit mir das alles anzuschauen. IE interpretiert kein min-height, richtig! Lösungsvorschlag: Aufbau mit DIV-Containern: Headerbereich Contentbereich mit gewünschter Höhe/Breite, darin Menü mit float: left und einem Container für den eigentlichen Seiteninhalt mit margin-left: Menübreite welcher sich dann rechts vom Menü anordnet. Danach Footerbereich. Der Contentbereich ist somit immer gleich hoch für Menü und Inhalt, das Menü ist immer Links und der Inhalt rechts daneben fließt nicht unter ein zu kurzes Menü. Willst du noch eine andere Hintergrundfarbe für das Menü, definierst du den kompletten Contentbereich mit dieser Farbe und den Bereich, der den eigentlichen Inhalt darstellt mit dessen Hintergrundfarbe. So müsste das ganze kompatibel zu alle Browsern funktionieren. |
|
|
![]() ![]() |
![]() |
Vereinfachte Darstellung | Aktuelles Datum: 09.07.2025 - 5:17 |