Opacity richtig definieren ?

    hi liebe community :)


    ich habe folgendes Problem :


    also ich habe div container -> Head , control und inhalt
    den "control" div habe ich im head-container verschachtelt (wegen vertikaler einblende der Links).
    mit ein abstand von ein paar pixeln kommt der inhalt-container ...soweit zu gut , alles funktioniert, jedoch gefiel mir das design nicht .
    Also beschloß ich im css für den inhalt ein "opacity" zu definieren . Als ich mir das dann anzeigen ließ gefiel es mir ganz gut ...aber dann kam auch leider
    das Problem :
    die vertikale navileiste ließ sich zwar immer noch einblenden jedoch hinter dem Inhalt-container ! somit war das Link-auswählen unmöglich :(


    Hab dann versucht header/control zsm mit inhalt-div in einen weiteren container zu verschachteln und den mit "opacity" zu definieren ... anschließend funktionerte auch wieder die einblende der navileiste...nur der haken -> der header ist nun logischerweiße auch leicht transparent ,und das stört :D weiß jmd wie man das beheben kann ? ^^

    Hallo und willkommen im Forum! :)

    Puh..so richtig weis ich nicht worauf du hinauswillst :D
    Wäre für mich (uns) vllt hilfreich wenn wir etwas "zu sehen" bekommen. (Bild oder einen Link) und/oder du postest deinen Code mal hier im Forum.
    Ich glaube an der Stelle musst du mit z-indexen arbeiten.

    CSS
    nav
{
position:relative; /* Standart ist "static" --> dabei funktioniert z-index meines wissens nach nicht */
z-index: 2; /* je größer der z-index umso "näher" wäre der Bereich am Betrachter. Hoffe du verstehst wie ich das meine  */
}
    Zitat von Phip S.

    willkommen im Forum!

    Danke :)


    Ich weiß meine beschreibungen sind nich wirklich immer die besten ^^


    ich versuchs mal mit code zu beschreiben :)


    Code
    <div id="aussen"><div id="opacity"><div id="head" >
<div id="control">
    <ul id="Navigation">    <li style="padding-left:25px;"><a href="#Beispiel">Startseite</a></li>
    <li><a href="media.html">Media</a>    <ul>        <li><a href="mediamovies.html">1.1</a></li>        <li><a href="mediagames.html">1.2</a></li>        <li><a href="#Beispiel">1.3</a></li>    </ul>    </li>
    <li><a href="knowhow.html">2</a>      <ul>        <li><a href="'#Beispiel">2.1</a></li>        <li><a href="knowhowhistory.html">2.2</a></li>        <li><a href="knowhowfacts.html">2.3</a></li>        <li><a href="#Beispiel">2.4</a></li>        <li><a href="#Beispiel">2.5</a></li>        <li><a href="#Beispiel">2.6</a></li>      </ul>    </li>    <li><a href="qurantaene.html">3</a></li>
    <li><a href="#ll.html">4</a>    <ul>        <li><a href="#Beispiel">4.1</a></li>        <li><a href="#Beispiel">4.2</a></li>        <li><a href="#Beispiel">4.3</a></li>        <li><a href="#Beispiel">4.4</a></li>        <li><a href="#Beispiel">4.5</a></li>      </ul> </li>
      <li><a href="station.html">Station</a></li>  </ul>      </div></div><div id="inhalt">
</div> </div>



    den container "opacity" habe ich später eingefügt damit die einblendung der links wieder funktioniert, jedoch musste ich in den auch den header reinverschachteln ^^




    vorher hatte ich noch im inhalt "opacity" definiert ..aber das funktionierte ja nicht :(


    darum :


    Code
    #opacity {    width:800px;    height:auto;    background-color:transparent;    opacity:0.85;}



    meinst du wenn ich z-index benutze muss ich nicht mehr den container (der ja leider auch meine navi transparent macht X( ) opacity benutzen ? :)
    müsste ich den dann bei "control" einfügen ?
    ich weiß mit mir ist es kompliziert ^^


    //Edit : bei mir war der code aber in der vorschau noch untereinander Oo

    nochmal ne kleine erläuterung ür den z-index:


    stell dir mal ein 3 Dimensionales Koordinatensystem vor, welchs du von der vorderseite betrachtest, dann hast du genau 3 Achsen (x - Horizontale, y - Vertikale, z - Tiefe)
    der z-index beschreibt die z-Achse und wenn du das ganze von vorne betrachtest, sieht man die veränderung eines objektes nicht wirklich, nur, dass man sozusagen festlegt, welches objekt vor welchem ist


    Zitat von Phip S.

    je größer der z-index umso "näher" wäre der Bereich am Betrachter


    das näher steht in ", da eine website eigentlich nur 2 Dimensionen hat und man sie auch nur von der vorderseite betrachten kann
    also wenn du einen objekt z.B. den z-index von 1000 gibst und alle anderen objekte haben einen nidrigeren, dann ist das eine objekt immer vor allen anderen objekten


    ich hoffe du verstehst es :)

    ah ok danke für die ausführliche Beschreibung :)
    ich versuchs gleich mal aus :)


    //Edit : habs versucht , leider klappt sich die navileiste immer noch hinter dem inhalt auf :(

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden