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>
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Meister(in)
    Registriert seit
    24.02.2007
    Beiträge
    419
    Danke
    0
    Bekam 44 mal "Danke" in 44 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 09:23 Uhr)

  3. #3
    Interessierte/r
    Registriert seit
    05.01.2016
    Beiträge
    144
    Danke
    9
    Bekam 11 mal "Danke" in 11 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 18:38 Uhr)

  4. #4
    Meister(in)
    Registriert seit
    24.02.2007
    Beiträge
    419
    Danke
    0
    Bekam 44 mal "Danke" in 44 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
    Interessierte/r
    Registriert seit
    05.01.2016
    Beiträge
    144
    Danke
    9
    Bekam 11 mal "Danke" in 11 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 20:40 Uhr)

Ähnliche Themen

  1. Slide Toggle
    Von tschapo im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 04.09.2016, 20: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, 15: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, 17:57
  4. page slide umschalten
    Von guuls im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 3
    Letzter Beitrag: 27.05.2010, 09:33
  5. wie bekommt man interaktion in browsergame hin
    Von Dhakra im Forum Computer - Internet Forum
    Antworten: 2
    Letzter Beitrag: 05.08.2008, 18:36

Stichworte

Berechtigungen

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