zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Problem der überlagernden DIVs

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 12.06.2011, 12:10
Gerrit
neuer user
Thread-Ersteller
 
Registriert seit: 29.04.2008
Beiträge: 52
gerrit87 befindet sich auf einem aufstrebenden Ast
Standard 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">&nbsp;</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">
&nbsp; 
</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">
&nbsp; 
</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("&lt;span&gt;&lt;/span&gt;"); //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>
Und hier CSS:
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;
}
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 12.06.2011, 12:20
Standardkatze
XHTMLforum-Kenner
 
Registriert seit: 06.02.2007
Beiträge: 1.820
gato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nett
Standard

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.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 28.06.2011, 12:22
Gerrit
neuer user
Thread-Ersteller
 
Registriert seit: 29.04.2008
Beiträge: 52
gerrit87 befindet sich auf einem aufstrebenden Ast
Standard

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">
Ich habe nun herausgefunden, dass es an der Overflow-Eigenschaft des Divs liegt. setze ich diese nun aber auf visible, wird mir mein dreispaltiges Layout darunter auseinander genommen, woran kann das liegen?

Geändert von gerrit87 (28.06.2011 um 13:46 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 28.06.2011, 14:22
Benutzer
neuer user
 
Registriert seit: 09.07.2010
Ort: Neuss
Beiträge: 76
test_nick sorgt für eine eindrucksvolle Atmosphäre
Standard

Es wäre eine Online-Demo zu empfehlen. Dann wirst du sicherlich auch mehr Antworten bekommen
Mit Zitat antworten
  #5 (permalink)  
Alt 29.06.2011, 14:25
Gerrit
neuer user
Thread-Ersteller
 
Registriert seit: 29.04.2008
Beiträge: 52
gerrit87 befindet sich auf einem aufstrebenden Ast
Standard

So, hier der Link: Startseite - Karnvel-Verband Niedersachsen e.V.

Danke schonmal!
Mit Zitat antworten
  #6 (permalink)  
Alt 29.06.2011, 14:47
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

overflow:hidden für .block macht das, wofür es gedacht ist: Es schneidet Überstehendes ab. Deshalb siehst du nichts von deinem Klappmenü.
Mit Zitat antworten
  #7 (permalink)  
Alt 29.06.2011, 14:50
Gerrit
neuer user
Thread-Ersteller
 
Registriert seit: 29.04.2008
Beiträge: 52
gerrit87 befindet sich auf einem aufstrebenden Ast
Standard

Hallo, danke für den Hinweis, aber wenn ich das deaktiviere, dann wird mir der mittlere DIV verschoben/verschwindet, woran liegt das?
Mit Zitat antworten
  #8 (permalink)  
Alt 29.06.2011, 14:55
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Ich sehe keine Veränderung auf deiner Seite.
Mit Zitat antworten
  #9 (permalink)  
Alt 30.06.2011, 12:42
Gerrit
neuer user
Thread-Ersteller
 
Registriert seit: 29.04.2008
Beiträge: 52
gerrit87 befindet sich auf einem aufstrebenden Ast
Standard

Hallo,

Ich habe nun die .block geändert. Nun ergeben sich für mich zwei Fragen:
Wo kommt
  1. der rote Balken in der Navigation her und,
  2. warum ist der div main höher alf left und right?
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 30.06.2011, 14:10
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

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.

Geändert von fricca (30.06.2011 um 14:34 Uhr) Grund: Deutsche Sprache, schwere Sprache.
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 18:43 Uhr.