Ergebnis 1 bis 5 von 5

Thema: Div Slide Interaktion

  1. #1
    HTML Newbie
    Registriert seit
    13.10.2016
    Beiträge
    1
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Div Slide Interaktion

    Hey, wäre super wenn mir jemand helfen könnte~

    Ich würde gerne ein box für tooltips anlegen (link4) welche nicht die vorherige content box (link1 - 3) schließt sondern zusätzlich aufgeht und nur gewechselt/geschlossen wird wenn ein anderes Word/(link1 - 3) angeklickt wird

    (Tooltip boxen sollten untereinander wechseln und verschwinden wenn eine andere Hauptbox aufgerufen wird.)

    Mfg

    HTML-Code:
    <style type="text/css">
    .pfor { display: none; }
    #profile { background-color: transparent; border: none; }
    
    </style>
     
    <style type="text/css">
     body {
     
    background-color: #fff;
    background-image: url();
    
    background-color:#000000;
    background-attachment: fixed;
    background-position:
    background-repeat: repeat;
    background-size: cover;
    font-family: Gabriola;
    font-variant: normal;
    font-size: 70%;
    color: #666666;
    overflow: hidden;}
     
    ::-webkit-scrollbar {
     width: 3px;
     height: 0px;
     background: ;
     }
     
     ::-webkit-scrollbar-thumb {
     background-color: black;
     -webkit-border-radius: 10px;
     border-radius: 10px;
     }
     
     
    a {color: #DADDC2; text-decoration: none; }
     
    a:hover {color: ; text-decoration: underline;
    cursor: url('http://media.tumblr.com/e7f72e808c4dbe5006b9c3a30dbc9b79/tumblr_inline_mh67vhwGnR1rdqsqf.png');}
    *{cursor: url('http://media.tumblr.com/7c3edb626c8cf9435c5c0b2d6acceffd/tumblr_inline_mh67v6xNXM1rdqsqf.png'), default;}
     
    b {color: 
    #A80000;}
    
    .abox {background-color: #ffffff; color: #000; font-size: 18px; font-family: 'Gabriola'; text-align: justify; position: absolute; width:360; height:302; left: 55; top:272; letter-spacing: .2px; line-height: 12px; padding: 3px; padding-left:10px; padding-right:10px; margin: 1px; overflow:hidden;}
    .bbox {background-color:#ffffff ; color: #000; font-size: 18px; font-family: 'Gabriola'; text-align: justify; position: absolute; top:0;left:110 ;width:100%; height:100%; letter-spacing: .2px; line-height: 12px; padding: 3px; padding-left:10px; margin: 0px; overflow:hidden;}
    .cbox {background-color: #ffffff; color: #000; font-size: 18px; font-family: 'Gabriola'; text-align: justify; position: absolute; width:360; height:151; left: 55; top:576; letter-spacing: .2px; line-height: 12px; padding: 3px; padding-left:10px; padding-right:10px; margin: 1px; overflow:hidden;}
    
    .navbar {Background-color: transparent; Position: absolute; Height: 230px; Width: 14px; Left: 260; top: 18; padding: 4px; z-index: 100;}
     
    .link1 {Position: absolute; Left: 4px; Top:10; Border: solid 2px #000; Height: 10px; Width: 10px; background-color: #ffffff;}
     
    .link2 {Position: absolute; Left: 4px; Top:70; Border: solid 2px #000; Height: 10px; Width: 10px; background-color: #ffffff;}
     
    .link3 {Position: absolute; Left: 4px; Top:130; Border: solid 2px #000; Height: 10px; Width: 10px; background-color: #ffffff;}
     
    .link4 {Position: absolute;}
    
    .link5 {Position: absolute; Left: 4px; Top:190; Border: solid 2px #000; Height: 10px; Width: 10px; background-color: #ffffff;}
     
    .link1:hover {Background-color: #ffffff;}
    .link2:hover {Background-color: #ffffff;}
    .link3:hover {Background-color: #ffffff;}
    .link4:hover {Background-color: #ffffff;}
    .link5:hover {Background-color: #ffffff;}
     
    .slide {Position: fixed; Height: 555555; Width: 555555; Top: 0px; Left: 55; Z-index: -1; Opacity: 0; transition: 0.8s; -moz-transition: 0.8s; webkit-transition: 0.8s; -o-transition: 0.8s;}
     
    .slide:target {left: 0; Opacity: 1; Z-index: 1; transition: 1.4s; -moz-transition: 0.8s; webkit-transition: 0.8s; -o-transition: 0.8s;}
    
    .slide1 {Position: fixed; Height: 555555; Width: 555555; Top: 0px; Left: 55; Z-index: -1;  Opacity: 0; transition: 0.8s; -moz-transition: 0.8s; webkit-transition: 0.8s; -o-transition: 0.8s; }
     
    .slide1:target {left: 0; Opacity: 1; Z-index: 1; transition: 1.4s; -moz-transition: 0.8s; webkit-transition: 0.8s; -o-transition: 0.8s;}
     
    #icon img { position:absolute; top: 10px; left: 20; -webkit-transition: opacity 1s ease-in-out; -moz-transition: opacity 1s ease-in-out; -o-transition: opacity 1s ease-in-out; transition: opacity 1s ease-in-out; border: 1px solid ;}
    
    
     
    #icon img.top:hover { opacity:0;}
    
    h1 { Color: #000; font-family: 'Poiret One', cursive; text-align: center; font-size:15px; Margin-top: 3px; Border-left: 15px double #AD0000 ; Border-right: 15px double #A80000; Border-bottom: 1px solid black;}
     .tooltip {
     position: relative;
     display: inline-block;
     border-bottom: 1px dashed #DA7D83;
    }
    
    .tooltip .tooltiptext {
     visibility: hidden;
     width: 160px;
     background-color: rgba(0.0);
     color: #DADDC2;
     text-align: center;
     border-radius: 6px;
     padding: 5px 0;
    
    
    
     position: absolute;
     left: 90px;
     top: -15px;
     z-index: 1;
    }
    
    .tooltip:hover .tooltiptext {
     visibility: visible;
    }
    
     
    
    </style>
    
    
     
    <div id="icon">
    <img class="bottom" src="" height="230" width="230">
    
    </div>
    
     
    
     
    <div class="navbar">
    <a class="link1" href="#1"></a>
    <a class="link2" href="#2"></a>
    <a class="link3" href="#3"></a>
    <a class="link5" href="#5"></a>
    </div></div>
     
    <div id="1" class="slide">
    <div class="abox">
    <a class="link4" href="#4">LINK Here</a>
    </div></div>
    
    <div id="2" class="slide">
    <div class="abox">
    </div></div>
     
    <div id="3" class="slide">
    <div class="abox">
    </div></div>
    
    <div id="4" class="slide1">
    <div class="cbox">
    </div></div>
    
    
    </div></div></div></div>

  2. #2
    Meister(in)
    Registriert seit
    24.02.2007
    Beiträge
    386
    Danke
    0
    Bekam 42 mal "Danke" in 42 Postings

    Standard AW: Div Slide Interaktion

    Das was du möchtest, wird sich alleine mit css nicht umsetzen lassen. Aber hier eine simple Alternative.
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Tooltipp</title>
    <style>
    
    article {
     background:#aaa;
     margin:1px 0;
     padding:0;
    }
    
    article h3 {
     margin:0;
     padding:3px;
    }
    
    article p {
     margin:0;
     padding:10px;
     background:#eee;
     display:none;
    }
    
    input {
     display:none;
    }
    
    label {
     padding:5px;
     margin:0px;
     display:inline-block;
     background:#eee;
     cursor:pointer;
    }
    input:nth-of-type(1):checked ~ article:nth-of-type(1) p,
    input:nth-of-type(2):checked ~ article:nth-of-type(2) p,
    input:nth-of-type(3):checked ~ article:nth-of-type(3) p,
    input:nth-of-type(4):checked ~ article:nth-of-type(4) p {
     display:block;
    }
    
    input:nth-of-type(1):checked ~ label:nth-of-type(1),
    input:nth-of-type(2):checked ~ label:nth-of-type(2),
    input:nth-of-type(3):checked ~ label:nth-of-type(3),
    input:nth-of-type(4):checked ~ label:nth-of-type(4) {
     background:#aaa;
    }
    </style> 
    </head>
    <body>
    
    <input type="radio" id="b1" name="auswahl"><label for="b1">Tolltip 1</label>
    <input type="radio" id="b2" name="auswahl"><label for="b2">Tolltip 2</label>
    <input type="radio" id="b3" name="auswahl"><label for="b3">Tolltip 3</label>
    <input type="radio" id="b4" name="auswahl"><label for="b4">Tolltip 4</label>
    
    
    
    <article>
    <h3>Text 1</h3>
    <p>text von Link 1</p>
    </article>
    
    <article>
    <h3>Text 2</h3>
    <p>text von Link 2</p>
    </article>
    
    <article>
    <h3>Text 3</h3>
    <p>text von Link 3</p>
    </article>
    
    <article>
    <h3>Text 4</h3>
    <p>text von Link 4</p>
    </article>
    </body>
    </html>
    Habe mal versucht dein Vorhaben mit css umzusetzen. Wenn ich es richtig verstanden habe, soll Box4 nur bein ersten Seitenaufruf einzeln aufklappen. Ansonsten nicht?

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Tooltipp</title>
    <style>
    
    article {
     background:#aaa;
     margin:1px 0;
     padding:0;
    }
    
    article h3 {
     margin:0;
     padding:3px;
    }
    
    article p {
     margin:0;
     padding:10px;
     background:#eee;
     display:block;
    }
    
    input {
     display:none;
    }
    
    label {
     padding:5px;
     margin:0px;
     display:inline-block;
     background:#eee;
     cursor:pointer;
    }
    
    input:nth-of-type(1):checked ~ label:nth-of-type(4),
    input:nth-of-type(1):checked ~ article:nth-of-type(2) p,
    input:nth-of-type(1):checked ~ article:nth-of-type(3) p,
    input:nth-of-type(1):checked ~ article:nth-of-type(4) p {
     display:none;
    }
    
    input:nth-of-type(2):checked ~ label:nth-of-type(4),
    input:nth-of-type(2):checked ~ article:nth-of-type(1) p,
    input:nth-of-type(2):checked ~ article:nth-of-type(3) p,
    input:nth-of-type(2):checked ~ article:nth-of-type(4) p {
     display:none;
    }
    
    input:nth-of-type(3):checked ~ label:nth-of-type(4),
    input:nth-of-type(3):checked ~ article:nth-of-type(1) p,
    input:nth-of-type(3):checked ~ article:nth-of-type(2) p,
    input:nth-of-type(3):checked ~ article:nth-of-type(4) p {
     display:none;
    }
    
    
    
    input:nth-of-type(5):checked ~ article:nth-of-type(1) p,
    input:nth-of-type(5):checked ~ article:nth-of-type(2) p,
    input:nth-of-type(5):checked ~ article:nth-of-type(3) p {
     display:none;
    }
    
    input:nth-of-type(5) ~ label:nth-of-type(5),
    input:nth-of-type(4) ~ article:nth-of-type(4) p {
     display:none;
    }
    
    
    input:nth-of-type(4):checked ~ article:nth-of-type(4) p,
    input:nth-of-type(5):checked ~ article:nth-of-type(4) p {
     display:block;
    }
    
    input:nth-of-type(1):checked ~ label:nth-of-type(5),
    input:nth-of-type(2):checked ~ label:nth-of-type(5),
    input:nth-of-type(3):checked ~ label:nth-of-type(5) {
     display:inline-block;
    }
    
    input:nth-of-type(1):checked ~ label:nth-of-type(1),
    input:nth-of-type(2):checked ~ label:nth-of-type(2),
    input:nth-of-type(3):checked ~ label:nth-of-type(3),
    input:nth-of-type(4):checked ~ label:nth-of-type(4),
    input:nth-of-type(5):checked ~ label:nth-of-type(5) {
     background:#aaa;
    }
    </style> 
    </head>
    <body>
    
    
    <input type="radio" id="b1" name="auswahl"><label for="b1">Tolltip 1</label>
    <input type="radio" id="b2" name="auswahl"><label for="b2">Tolltip 2</label>
    <input type="radio" id="b3" name="auswahl"><label for="b3">Tolltip 3</label>
    <input type="radio" id="b4" name="auswahl"><label for="b4">Tolltip 4</label>
    <input type="radio" id="b5" name="auswahl"><label for="b5">Tolltip 4</label>
    
    
    <article>
    <h3>Text 1</h3>
    <p>text von Link 1</p>
    </article>
    
    <article>
    <h3>Text 2</h3>
    <p>text von Link 2</p>
    </article>
    
    <article>
    <h3>Text 3</h3>
    <p>text von Link 3</p>
    </article>
    
    <article>
    <h3>Text 4</h3>
    <p>text von Link 4</p>
    </article>
    </body>
    </html>
    Geändert von djheke (15.10.2016 um 10:23 Uhr)

  3. #3
    Azubi(ne)
    Registriert seit
    05.01.2016
    Beiträge
    94
    Danke
    8
    Bekam 4 mal "Danke" in 4 Postings

    Standard AW: Div Slide Interaktion

    Hollo @djheke ,
    ich wollte nochmal fragen..
    unabhängig davon das er hier ja besondere Funktions Wünsche hatte...
    ( auch so einer der sich nicht mehr gemeldet hat - nebenbei gesagt - tzz )


    Also : warum Du es mit input type="radio" // :checked - gemacht hast -

    es funktioniert ja gut - will nix sagen -

    wollt nur wissen warum grad damit ..
    statt vielleicht mit


    .eins, .zwei , .drei , .vier
    {
    display: none;
    }

    .eins:target , .zwei:target , .drei:target , .vier:target
    {
    display: block;
    }

    <body>

    <a href=#eins> Eins Anzeigen </a>
    <a href=#zwei> ZweiAnzeigen </a> ... usw.

    <article id="eins" class="eins"> text von eins </article>
    <article id="zwei" class="zwei"> text von zwei</article>

    ................ usw -

    gemacht hast ?

    gibt es dafür einen oder mehr besondere Gründe -- ?

    Gruß modem-kind


    Geändert von modem-kind (19.10.2016 um 19:38 Uhr)

  4. #4
    Meister(in)
    Registriert seit
    24.02.2007
    Beiträge
    386
    Danke
    0
    Bekam 42 mal "Danke" in 42 Postings

    Standard AW: Div Slide Interaktion

    Weil mit :target die URL manipuliert wird und mit :checked nicht. Prinzipell geht es aber auch mit :target. Nebenbei bemerkt, ist das gewünschte Vorhaben aus meiner Sicht sowieso Sinnfrei. Und wenn er es unbedingt haben möchte, wäre wohl JQuery die bessere Wahl

  5. #5
    Azubi(ne)
    Registriert seit
    05.01.2016
    Beiträge
    94
    Danke
    8
    Bekam 4 mal "Danke" in 4 Postings

    Standard AW: Div Slide Interaktion

    Jo stimmt beides - !

    bei :target muss man zudem auch noch über den Umweg gehen
    über
    <a href="#id">hüpf dahin</a>

    aufs Element und dann eine class in dem haben das dann :target wird -
    ansonsten springt das Ziel immer an den View-top was sehr nervt -

    da ist radio checked schon besser -

    ansonsten würde ich auch zu JQuery tendieren -
    Viel mehr Möglichkeiten -
    und wers aus hat - hat eben Pech -
    allerdings sind das wenige.. die meisten User wissen gar nicht was das ist
    u wie es an u. aus geht -
    bzw. Interessiert se auch nicht -

    --
    eigentlich ist das ja sowie nicht Tooltipps
    sondern Accordion - ( was man natürlich Tooltipp nennen kann )

    Tooltipps ist >>> titel="xyz"

    und gut ist auch..
    data-blabla="Hello World"

    das lässt sich auch schön gestalten..
    über css

    was bei titel ja gar nicht geht.. Eignung daher max nur fürn <a link Zusatz Erklärung

    Oki schönen Abend Dir + Danke
    modem-kind

    PS. es kommt ja auch immer auf den Content an den man darin braucht oder will
    / Menge / Format/ierung / Bilder /+~ Größe usw.
    evtl. käme ein Modal vllt. eher besser -
    Geändert von modem-kind (19.10.2016 um 21:40 Uhr)

Ähnliche Themen

  1. Slide Toggle
    Von tschapo im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 04.09.2016, 21:18
  2. GIF-Animation steckt fest während AJAX Interaktion
    Von Teron Gerofied im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 4
    Letzter Beitrag: 04.10.2011, 16:55
  3. slide in beim start
    Von guuls im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 2
    Letzter Beitrag: 02.06.2010, 18:57
  4. page slide umschalten
    Von guuls im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 3
    Letzter Beitrag: 27.05.2010, 10:33
  5. wie bekommt man interaktion in browsergame hin
    Von Dhakra im Forum Computer - Internet Forum
    Antworten: 2
    Letzter Beitrag: 05.08.2008, 19:36

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •