|
|||
Problem der überlagernden DIVs
Hallo zusammen,
ich habe folgendes Problem: Ich habe im Header die Navigation. Wenn .level_2 aufgeklappt wird, liegt immer der Container darüber. Ich habe bereits den z-index ausprobiert, leider ohne Erfolg. Was kann ich machen? Anbei der HTML-Code: HTML-Code:
<html lang="de" xml:lang="de" xmlns="http://www.w3.org/1999/xhtml"><head> <!-- This website is powered by Contao Open Source CMS :: Licensed under GNU/LGPL Copyright ©2005-2011 by Leo Feyer :: Extensions are copyright of their respective owners Visit the project website at http://www.contao.org for more information //--> <base href="http://localhost/xxx/"> <title>Startseite - Contao Open Source CMS</title> <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"> <meta content="text/css" http-equiv="Content-Style-Type"> <meta content="text/javascript" http-equiv="Content-Script-Type"> <meta content="" name="description"> <meta content="" name="keywords"> <meta content="index,follow" name="robots"> <link media="screen" type="text/css" href="system/contao.css" rel="stylesheet"> <!--[if lte IE 7]><link rel="stylesheet" href="system/iefixes.css" type="text/css" media="screen" /><![endif]--> <link media="screen" type="text/css" href="tl_files/tinymce.css?1275651950" rel="stylesheet"> <link media="all" type="text/css" href="basic.css?1307181327" rel="stylesheet"> <link media="screen" type="text/css" href="page.css?1307794439" rel="stylesheet"> <link media="all" type="text/css" href="navigation.css?1307795948" rel="stylesheet"> <script src="plugins/mootools/mootools-core.js?1.2.5" type="text/javascript"></script> <script src="plugins/mootools/mootools-more.js?1.2.5.1" type="text/javascript"></script> <script src="./tl_files/xxx/js/jquery-1.6.1.min.js" type="text/javascript"></script> </head> <body id="top"> <div id="wrapper"> <div id="header"> <div class="inside"> <div id="headline"> <div id="logo"></div> <h1 id="header">XXX</h1> <div id="grafik"></div> </div> <!-- indexer::stop --> <div class="mod_navigation main_navigation block"> <h1>Navigation</h1> <a class="invisible" href="#skipNavigation2">Navigation überspringen</a> <ul class="level_1"> <li class="submenu sibling first"><a class="submenu sibling first" title="Über uns" href="index.php/ueber-uns.html">Über uns</a> <ul class="level_2" style="display: none;"> <li class="first"><a class="first" title="Präsidium" href="index.php/praesidium.html">Präsidium</a></li> <li class="last"><a class="last" title="Info-Broschüre" href="index.php/info-broschuere.html">Info-Broschüre</a></li> </ul> <span class=""></span></li> <li class="sibling"><a class="sibling" title="Vereine" href="index.php/vereine.html">Vereine</a></li> <li class="sibling"><a class="sibling" title="Termine" href="index.php/termine.html">Termine</a></li> <li class="sibling"><a class="sibling" title="Orden" href="index.php/orden.html">Orden</a></li> <li class="sibling"><a class="sibling" title="Narrenspiegel" href="index.php/narrenspiegel.html">Narrenspiegel</a></li> <li class="sibling last"><a class="sibling last" title="Kontakt" href="index.php/kontakt.html">Kontakt</a></li> </ul> <a class="invisible" id="skipNavigation2" name="skipNavigation2"> </a> </div> <!-- indexer::continue --> </div> </div> <div id="container"> <div id="left"> <div class="inside"> <div id="startseite" class="mod_article block"> <div class="ce_text block"> <h1>Oder gehörten die Schritte hinter ihm zu einem der</h1> <p>Er hörte leise Schritte hinter sich. Das bedeutete nichts Gutes. Wer würde ihm schon folgen, spät in der Nacht und dazu noch in dieser engen Gasse mitten im übel beleumundeten Hafenviertel? Gerade jetzt, wo er das Ding seines Lebens gedreht hatte und mit der Beute verschwinden wollte! Hatte einer seiner zahllosen Kollegen dieselbe Idee gehabt, ihn beobachtet und abgewartet, um ihn nun um die Früchte seiner Arbeit zu erleichtern?<br><br> Oder gehörten die Schritte hinter ihm zu einem der unzähligen Gesetzeshüter dieser Stadt, und die stählerne Acht um seine Handgelenke würde gleich zuschnappen? Er konnte die Aufforderung stehen zu bleiben schon hören. Gehetzt sah er sich um. Plötzlich erblickte er den schmalen Durchgang. Blitzartig drehte er sich nach rechts und verschwand zwischen den beiden Gebäuden. Beinahe wäre er dabei über den umgestürzten Mülleimer gefallen, der mitten im Weg lag.<br><br> Er versuchte, sich in der Dunkelheit seinen Weg zu ertasten und erstarrte: Anscheinend gab es keinen anderen Ausweg aus diesem kleinen Hof als den Durchgang, durch den er gekommen war. Die Schritte wurden lauter und lauter, er sah eine dunkle Gestalt um die Ecke biegen. Fieberhaft irrten seine Augen durch die nächtliche Dunkelheit und suchten einen Ausweg. War jetzt wirklich alles vorbei, waren alle Mühe und alle Vorbereitungen umsonst? Er presste sich ganz eng an die Wand hinter ihm und hoffte, der Verfolger würde ihn übersehen, als plötzlich neben ihm mit kaum wahrnehmbarem Quietschen eine Tür im nächtlichen Wind hin und her schwang. Könnte dieses der flehentlich herbeigesehnte Ausweg aus seinem Dilemma sein? Langsam bewegte er sich auf die</p> </div> </div> </div> </div> <div id="right"> <div class="inside"> </div> </div> <div id="main"> <div class="inside"> <div id="neuigkeiten" class="mod_article block"> <!-- indexer::stop --> <div class="mod_newslist block"> <h1>Neuigkeiten</h1> <div class="layout_latest block first even"> <p class="info">04.06.2011 09:29 von Gerrit Lober </p> <h2><a title="Den Artikel lesen: Jemand musste Josef K. verleumdet" href="index.php/startseite/items/jemand-musste-josef-k-verleumdet.html">Jemand musste Josef K. verleumdet</a></h2> <p class="teaser">Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules.</p> <p class="more"><a title="Den Artikel lesen: Jemand musste Josef K. verleumdet" href="index.php/startseite/items/jemand-musste-josef-k-verleumdet.html">Weiterlesen … <span class="invisible">Jemand musste Josef K. verleumdet</span></a></p> </div> <div class="layout_latest block odd"> <p class="info">04.06.2011 09:29 von Gerrit Lober </p> <h2><a title="Den Artikel lesen: Jemand musste Josef K. verleumdet" href="index.php/startseite/items/jemand-musste-josef-k-verleumdet-2.html">Jemand musste Josef K. verleumdet</a></h2> <p class="teaser">Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar custosi traductores.</p> <p class="more"><a title="Den Artikel lesen: Jemand musste Josef K. verleumdet" href="index.php/startseite/items/jemand-musste-josef-k-verleumdet-2.html">Weiterlesen … <span class="invisible">Jemand musste Josef K. verleumdet</span></a></p> </div> <div class="layout_latest block last even"> <p class="info">04.06.2011 09:29 von Gerrit Lober </p> <h2><a title="Den Artikel lesen: Jemand musste Josef K. verleumdet" href="index.php/startseite/items/jemand-musste-josef-k-verleumdet-3.html">Jemand musste Josef K. verleumdet</a></h2> <p class="teaser">Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar custosi traductores. At solmen va esser necessi far uniform grammatica,</p> <p class="more"><a title="Den Artikel lesen: Jemand musste Josef K. verleumdet" href="index.php/startseite/items/jemand-musste-josef-k-verleumdet-3.html">Weiterlesen … <span class="invisible">Jemand musste Josef K. verleumdet</span></a></p> </div> </div> <!-- indexer::continue --> </div> </div> <div id="clear"></div> </div> </div> <div id="footer"> <div class="inside"> </div> </div> <!-- indexer::stop --> <img class="invisible" alt="" src="http://localhost/xxx/cron.php"> <!-- indexer::continue --> </div> <script type="text/javascript"> $(document).ready(function(){ $("ul.level_2").parent().append("<span></span>"); //Only shows drop down trigger when js is enabled (Adds empty span tag after ul.subnav*) $("ul.level_1 li span").click(function() { //When trigger is clicked... //Following events are applied to the subnav itself (moving subnav up and down) $(this).parent().find("ul.level_2").slideDown('fast').show(); //Drop down the subnav on click $(this).parent().hover(function() { }, function(){ $(this).parent().find("ul.level_2").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up }); //Following events are applied to the trigger (Hover events for the trigger) }).hover(function() { $(this).addClass("subhover"); //On hover over, add class "subhover" }, function(){ //On Hover Out $(this).removeClass("subhover"); //On hover out, remove class "subhover" }); }); </script> </body></html> Code:
body { font-size: 100.01%; margin: 0; padding: 0; position: relative; text-align: left; } select, input, textarea { font-size: 99%; } form { margin: 0; padding: 0; } img { border: 0 none; } #left { float: left; } #right { float: right; } #main { position: relative; width: auto; } .inside { position: relative; text-align: left; } .block { overflow: hidden; } .clear, #clear { clear: both; font-size: 0.1px; height: 0.1px; line-height: 0.1px; } .invisible { display: inline; height: 0; left: -1000px; overflow: hidden; position: absolute; top: -1000px; width: 0; } .custom { display: block; text-align: left; } .custom:after { clear: both; content: "."; display: block; height: 0; visibility: hidden; } body, div, h1, h2, h3, h4, h5, h6, p, blockquote, pre, code, ol, ul, li, dl, dt, dd, table, th, td, form, fieldset, legend, input, textarea { margin: 0; padding: 0; } table { border-collapse: collapse; border-spacing: 0; } caption, th, td { text-align: left; vertical-align: top; } abbr, acronym { border-bottom: 1px dotted #666666; cursor: help; font-variant: normal; } blockquote, q { quotes: none; } fieldset, img { border: 0 none; } li { list-style-type: none; } sup { vertical-align: text-top; } sub { vertical-align: text-bottom; } del { text-decoration: line-through; } ins { text-decoration: none; } a { color: #0000FF; } :focus { outline: 0 none; } body { color: #000000; font-family: "Lucida Grande","Lucida Sans Unicode",Verdana,sans-serif; font-size: 12px; } input, button, textarea, select { font-family: inherit; font-size: 99%; font-weight: inherit; } pre, code { font-family: "Lucida Console",Monaco,monospace; font-size: 12px; } h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; } h1 { font-size: 22px; } h2 { font-size: 20px; } h3 { font-size: 18px; } table { font-size: inherit; } caption, th { font-weight: bold; } h1, h2, h3, h4, h5, h6 { margin-top: 1em; } h1, h2, h3, h4, h5, h6, p, pre, blockquote, table, ol, ul, form { margin-bottom: 12px; } div.main_navigation { margin-left: 50px; } div.main_navigation h1 { display: none; } div.main_navigation ul.level_1 { float: left; font-size: 1.1em; list-style: none outside none; width: 920px; } div.main_navigation ul.level_1 li { background-color: #E72119; float: left; margin: 0 5px 0 0; padding: 0; position: relative; } div.main_navigation ul.level_1 li a { color: #FFFFFF; display: block; float: left; padding: 5px; text-align: center; text-decoration: none; width: 122px; } div.main_navigation ul.level_1 li a.submenu { width: 107px; } div.main_navigation ul.level_1 li a:hover { background: url("level_1_hover.gif") no-repeat scroll center top transparent; } div.main_navigation ul.level_1 li span { background: url("tl_files/kvn/layout/images/arrow_right_grey.png") no-repeat scroll center center transparent; float: left; height: 26px; width: 15px; } div.main_navigation ul.level_1 li span.subhover { background-position: center bottom; cursor: pointer; } div.main_navigation ul.level_1 li ul.level_2 { background: none repeat scroll 0 0 #333333; border: 1px solid #111111; display: none; float: left; left: 0; list-style: none outside none; margin: 0; padding: 0; position: absolute; top: 35px; width: 170px; z-index: 10000; } div.main_navigation ul.level_1 li ul.level_2 li { border-bottom: 1px solid #444444; border-top: 1px solid #252525; clear: both; margin: 0; padding: 0; width: 170px; } html ul.level_1 li ul.level_2 li a { background: url("dropdown_linkbg.gif") no-repeat scroll 10px center #333333; float: left; padding-left: 20px; width: 145px; } html ul.level_1 li ul.level_2 li a:hover { background: url("dropdown_linkbg.gif") no-repeat scroll 10px center #222222; } body { margin: 0 auto; position: relative; width: 1024px; } div#wrapper { background-color: #E72119; } div#header .inside { background-color: #FFFFFF; margin-right: 140px; z-index: 1000; } div#container { z-index: 100; } div#right { width: 140px; } div#left .inside { margin-right: 25px; } div#left { background-color: #FFFFFF; width: 360px; } div#left .inside { margin-left: 50px; margin-right: 25px; } div#main { background-color: #FFFFFF; margin-left: 360px; position: relative; width: 524px; } div#main .inside { background-color: #FFFFFF; margin-right: 25px; } |
Sponsored Links |
|
|||
Da du keinen Doctype angegeben hast und der Quelltext offensichtlich nicht als XML verarbeitet wird lautet dein Problem Quirks Mode.
__________________
Über Internet Explorer 8: Noch bis 8. April 2014 wird der Internet Explorer 6 mit Sicherheitsupdates versorgt. Bereits jetzt kann dieser Browser aber vollständig durch den IE8 ersetzt werden. Ältere Betriebssysteme und Browserversionen werden von Microsoft nicht mehr unterstützt. Auch Programme, die den IE7 benötigen, sind kein Argument gegen IE8, da dieser über entsprechende Kompatibilitätsschichten verfügt. Ab sofort gilt daher der Internet Explorer 8 als vorausgesetzer Mindeststandard. |
Sponsored Links |
|
|||
Trotz des folgenden Doctypes geht es nicht:
HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Geändert von gerrit87 (28.06.2011 um 13:46 Uhr) |
|
|||
|
|
|||
overflow:hidden für .block macht das, wofür es gedacht ist: Es schneidet Überstehendes ab. Deshalb siehst du nichts von deinem Klappmenü.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
|
|||
Ich sehe keine Veränderung auf deiner Seite.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
|
|||
Hallo,
Ich habe nun die .block geändert. Nun ergeben sich für mich zwei Fragen: Wo kommt
|
Sponsored Links |
|
|||
Beides kommt daher, dass es viele ".block" auf deiner Seite gibt und overflow massenhaft Nebenwirkungen hat. Z.B. verhindert es Collapsing Margins und sorgt dafür, dass Floats eingeschlossen werden. Das fällt jetzt weg -- die Auswirkungen siehst du.
Du hattest ein Problem mit dem ".block", der auch "main_navigation" heißt. Ändere das overflow-Verhalten nur dort. Sorge außerdem dafür, dass .main-navigation seine Floats einschließt. FAQ Punkt 2. Nein, eine (mit 30px zu geringe) feste Höhe ist keine angemessene Lösung. Es ist absolut keine gute Idee, die overflow-Eigenschaft derart pauschal einzusetzen. Ich erinnere mich dunkel, dass wir darüber im Zusammenhang mit Contao schon einmal sprachen -- und hubspe es bereits versucht hat, den Entwicklern mitzuteilen. Anscheinend erfolglos.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken Geändert von fricca (30.06.2011 um 14:34 Uhr) Grund: Deutsche Sprache, schwere Sprache. |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Problem mit DIVs | PeeGee | (X)HTML | 10 | 29.09.2010 22:07 |
Problem bei Div's - zwei mal das gleiche und doch nicht ... | Niriel | CSS | 10 | 09.06.2005 18:39 |
problem mit divs | Mr.Right | CSS | 0 | 09.06.2005 18:31 |
div's und float problem ? | saphear | CSS | 1 | 17.02.2005 10:31 |