"display: none" greift auf unerwünschte objekte!

Remmidami · 11 Dezember 2010

Hallo Freunde,

kämpfe jetzt nun seit Stunden mit einem Problem. Ich habe folgenden Aufbau mit eindeutigen IDs:

HTML:

<div id="navi">
...
</div>
...
<div id="slider">
   <ul id="sliderContent">
      <li class="sliderImage">
      ...
      </li>
   </ul>
</div>

CSS:

Code:

#navi{
    height:40px;
}
.sliderImage {
   float: left;
   position: relative;
   display: none; <------------
}

Jetzt ist es so, dass das "display: none" meine Navi ausblendet! Wie ist das möglich???

DarkDragon193 · 11 Dezember 2010

Nach diesem Code ist nichts falsch. Allerdings hast du mehr oder auch weniger Code weggelassen. So können wir dir nicht helfen.

Remmidami · 12 Dezember 2010

Sorry, wollte nicht zu viel irrelevanten Kram posten. Aber wenns hilft:

HTML:

<head>
<link type="text/css" rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="js/s3Slider.js"></script>

        <script type="text/javascript">
            $(function() {
                $("div#slider").s3Slider({
                    timeOut: 5000
                });
            });
</script>
<head>
<body>
<div id="navi">
        <ul id="nav-buttons">
            <li class="link1"><a class="current" href="#"></a></li>
            <li class="link2"><a href="#"></a></li>
            <li class="link3"><a href="#"></a></li>
        </ul>
</div>
<div id="slider">
       <ul id="sliderContent">
            <li class="sliderImage">
               <img src="img1.png" alt="img1" />
               <span>text</span>
            </li>
            <li class="sliderImage">
               <img src="img2.png" alt="img2" />
               <span>text</span>
            </li>
            <div class="clear sliderImage"></div>
       </ul>
</div>
</body>

CSS:

Code:

/* NAVIGATION */
#navi{
    height:40px;
}
ul#nav-buttons li{
    float:left;
    list-style:none;
    margin:0;
}
ul#nav-buttons li a{
    background:url(navigation.png) 0 0 no-repeat;
    float:left;
    height:40px;
    overflow:hidden;
}
ul#nav-buttons li.link1 a{
    background-position:0 0;
    width:73px;
}
ul#nav-buttons li.link1 a:hover{
    background-position:0 -40px;
}
ul#nav-buttons li.link1 a.current{
    background-position:0 -80px;
}
ul#nav-buttons li.link2 a{
    background-position:-73px 0;
    width:148px;
}
ul#nav-buttons li.link2 a:hover{
    background-position:-73px -40px;
}
ul#nav-buttons li.link2 a.current{
    background-position:-73px -80px;
}
ul#nav-buttons li.link3 a{
    background-position:-221px 0;
    width:159px;
}
ul#nav-buttons li.link3 a:hover{
    background-position:-221px -40px;
}
ul#nav-buttons li.link3 a.current{
    background-position:-221px -80px;
}
/* SLIDER */
ul#sliderContent, li#sliderContent, img#sliderContent {
list-style: none;
margin: 0; padding: 0;
}

#slider {
   width: 300px;
   height: 300px;
   position: relative;
   overflow: hidden;
}

#sliderContent {
   width: 300px;
   position: absolute;
   top: 0;
   margin-left: 0;
}

.sliderImage {
   float: left;
   position: relative;
   display: none; <------ hier das was die [U]Navi[/U] ausblendet!
}

.sliderImage span {
   position: absolute;
   padding: 10px 13px;
   width: 276px;
   background-color: #000;
   filter: alpha(opacity=70);
   -moz-opacity: 0.7;
   -khtml-opacity: 0.7;
   opacity: 0.7;
   color: #fff;
   display: none;
   left: 0;
   bottom: 0;
}
.clear {
   clear: both;
}

Also die Navi habe ich mittels Sprites erstellt deshalb der viele Code und sie funktioniert ansich einwandfrei. Der Slider ist eine javascript app und funktioniert ebenfalls tadelos. Das "display: none" im .sliderImage verbessert wesentlich den Bilderwechsel, verursacht aber gleichzeitig, dass die Navi verschwindet!

Bin jetzt nicht der ober Profi, aber ein ID-Selector dürfte doch eigentlich keine Eigenschaft einer fremden Klasse erben, oder??

struppi · 12 Dezember 2010

Remmidami schrieb:
Sorry, wollte nicht zu viel irrelevanten Kram posten. Aber wenns hilft:

Helfen tut alles, was hilft dein Problem nachvollziehbar zu verstehen. Was aber selbst mit diesem Code nicht klappt. Du hast ein leere Liste, was soll da angezeigt werden? Wenn die Liste Inhalt hat, wird sie auch angezeigt.

Timmer · 12 Dezember 2010

Kannst du uns mal einen Link geben, damit wir das Problem besser nachvollziehen können?

threadi · 12 Dezember 2010

Deinem HTML-Code fehlt ein Doctype und Du hast hier etwas falsch geschrieben:

Code:

</script>
<head>

Dort fehlt ein das head beendender Strich:

Code:

</script>
<[COLOR="red"]/[/COLOR]head>

Remmidami · 13 Dezember 2010

Ok Freunde, hier der vollständige Code:

HTML:

<!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" xml:lang="de" lang="de">

<head>
    <title>titel</title>

    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <meta name="keywords" content="" />

    <link type="text/css" rel="stylesheet" href="css/style.css" />
    <link type="text/css" rel="stylesheet" href="css/s3Slider.css" />


        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
        <script type="text/javascript" src="js/s3Slider.js"></script>

        <script type="text/javascript">
            $(function() {
                $("div#slider").s3Slider({
                    timeOut: 5000
                });
            });

            $(document).ready(function(){
                $("li").removeClass("javascriptDisabled");
                $("li").addClass("sliderImage");
            });
        </script>


</head>

<body>
<div id="content">
    <div id="logo">
    <a href="index.html">
    <img src="img/logo.png" alt="" border="0"></a>
    </div>
    <div id="navi">
        <ul id="nav-buttons">
            <li class="link1"><a class="current" href="#"></a></li>
            <li class="link2"><a href="#"></a></li>
            <li class="link3"><a href="#"></a></li>
            <li class="link4"><a href="#"></a></li>
            <li class="link5"><a href="#"></a></li>
            <li class="link6"><a href="#"></a></li>
            <li class="link7"><a href="#"></a></li>
        </ul>
    </div>
    <div id="trailer">
        <object data="trailer/trailer.swf" type="application/x-shockwave-flash" width="1000" height="420">
            <param name="movie" value="trailer/trailer.swf">
            <param name="quality" value="high">
            <param name="wmode" value="transparent">
        </object>
    </div>
    <div id="content_low">
        <div id="cl1"><h2>Aktuelle Zumba-Kurse</h2>
            <div class="maske"></div>
  <div id="slider">
   <ul id="sliderContent">

    <li class="sliderImage">
        <img src="bild1.png" alt="bild1" />
        <span>text</span>
    </li>

    <li class="sliderImage">
        <img src="bild2.png" alt="bild2" />
        <span>text</span>
    </li>

    <li class="javascriptDisabled">
        <img src="bild1.png" alt="bild1" />
        <span>text</span>
    </li>

      <div class="clear sliderImage"></div>
   </ul>
</div>
        </div>
        <div id="cl2"></div>
        <div id="cl3"></div>
    </div>
</div>
</body>
</html>

CSS1:

Code:

#content {
    width:1100px;
    margin: 0px auto;
}
#logo {
    margin-left: 40px;
}
/* NAVIGATION */
#navi{
    height:40px;
}
ul#nav-buttons li{
    float:left;
    list-style:none;
    margin:0;
}
ul#nav-buttons li a{
    background:url(../img/navigation.png) 0 0 no-repeat;
    float:left;
    height:40px;
    overflow:hidden;
}
ul#nav-buttons li.link1 a{
    background-position:0 0;
    width:73px;
}
ul#nav-buttons li.link1 a:hover{
    background-position:0 -40px;
}
ul#nav-buttons li.link1 a.current{
    background-position:0 -80px;
}
ul#nav-buttons li.link2 a{
    background-position:-73px 0;
    width:148px;
}
ul#nav-buttons li.link2 a:hover{
    background-position:-73px -40px;
}
ul#nav-buttons li.link2 a.current{
    background-position:-73px -80px;
}
ul#nav-buttons li.link3 a{
    background-position:-221px 0;
    width:159px;
}
ul#nav-buttons li.link3 a:hover{
    background-position:-221px -40px;
}
ul#nav-buttons li.link3 a.current{
    background-position:-221px -80px;
}
ul#nav-buttons li.link4 a{
    background-position:-380px 0;
    width:187px;
}
ul#nav-buttons li.link4 a:hover{
    background-position:-380px -40px;
}
ul#nav-buttons li.link4 a.current{
    background-position:-380px -80px;
}
ul#nav-buttons li.link5 a{
    background-position:-567px 0;
    width:158px;
}
ul#nav-buttons li.link5 a:hover{
    background-position:-567px -40px;
}
ul#nav-buttons li.link5 a.current{
    background-position:-567px -80px;
}
ul#nav-buttons li.link6 a{
    background-position:-725px 0;
    width:152px;
}
ul#nav-buttons li.link6 a:hover{
    background-position:-725px -40px;
}
ul#nav-buttons li.link6 a.current{
    background-position:-725px -80px;
}
ul#nav-buttons li.link7 a{
    background-position:-877px 0;
    width:123px;
}
ul#nav-buttons li.link7 a:hover{
    background-position:-877px -40px;
}
ul#nav-buttons li.link7 a.current{
    background-position:-877px -80px;
}
/* NAVIGATION ENDE */
#trailer{
    background:url(../trailer/trailer.png) 0 0 no-repeat;
    height:420px;
    margin-top: 15px;
    margin-left: 40px;
}
#content_low{
    height:500px;
    width:1000px;
    margin-top: 15px;
    margin-left: 40px;
    background-color: #3A3A3A;
}
#cl1{
    position: relative;
    height:400px;
    width:300px;
    margin-top: 15px;
    margin-left: 0px;
    background-color: #ffffff;
    float:left;
}
#cl2{
    position: relative;
    height:400px;
    width:300px;
    margin-top: 15px;
    margin-left: 50px;
    background-color: #ffffff;
    float:left;
}
#cl3{
    position: relative;
    height:400px;
    width:300px;
    margin-top: 15px;
    margin-left: 50px;
    background-color: #ffffff;
    float: left;
}

CSS2:

Code:

body {
font-family: helvetica, arial, sans-serif;
font-size: 11px;
}

ul#sliderContent, li#sliderContent, img#sliderContent {
list-style: none;
margin: 0; padding: 0;
}

#slider {
   width: 300px; /* important to be same as image width */
   height: 300px; /* important to be same as image height */
   position: relative; /* important */
   overflow: hidden; /* important */
}

#sliderContent {
   width: 300px;
   position: absolute;
   top: 0;
   margin-left: 0;
}

.sliderImage {
   float: left;
   position: relative;
   display: none; <----------- SORGENKIND
}

.sliderImage span {
   position: absolute;
   padding: 10px 13px;
   width: 276px;
   background-color: #000;
   filter: alpha(opacity=70);
   -moz-opacity: 0.7;
   -khtml-opacity: 0.7;
   opacity: 0.7;
   color: #fff;
   display: none;
   left: 0;
   bottom: 0;
}
.maske{
    height: 300px;
    width: 300px;
    background: url(../img/cl1/maske.png);
    position: absolute;
    z-index:9999;
}

.clear {
   clear: both;
}

.javascriptDisabled {
   float: left;
   position: relative;
}

.javascriptDisabled span {
   position: absolute;
   padding: 10px 13px;
   width: 226px;
   background-color: #000;
   filter: alpha(opacity=70);
   -moz-opacity: 0.7;
   -khtml-opacity: 0.7;
   opacity: 0.7;
   color: #fff;
   left: 0;
   bottom: 0;
}

Ich fasse nochmal kurz zusammen:

Navi besteht aus Sprites, funktioniert tadelos. Slider ist Javagescriptet und funzt ebenso, auch ohne display:none; im .sliderImage. Jedoch verbessert dieser deutlich die Performance des Bilderwechsels - leider lässt er aber auch die Navigaton verschwinden!

mermshaus · 13 Dezember 2010

Du fügst per JavaScript jedem <li>-Element die Klasse .sliderImage hinzu.

Code:

$("li").addClass("sliderImage");

Remmidami · 13 Dezember 2010

Du bist der Boss! Habs jetzt so abgeändert:

Code:

$("#slider li").addClass("sliderImage");

Vielen Dank!

"display: none" greift auf unerwünschte objekte!

Remmidami

Neues Mitglied

DarkDragon193

Neues Mitglied

Remmidami

Neues Mitglied

struppi

Guest

Timmer

Mitglied

threadi

Moderator

Remmidami

Neues Mitglied

mermshaus

Senior HTML'ler

Remmidami

Neues Mitglied

Neueste Beiträge