Theme FoldOut 2025 mit 2 Templates veröffentlicht / published

[Gert]

Hallo,

ein neues Theme mit 2 Templates steht zum Download bereit: FoldOut 2025

Viel Spass - Gert

=====================================================

Hello,

a new theme with 2 templates is available for download: FoldOut 2025

Have fun - Gert

=====================================================

Demo & Download: https://www.ge-webdesign.de/cmsimpletem ... 25_Gallery

Screenshot:

[Gonzo Gates]

Hallo Gert,

schick gemacht, aber die 'FoldOut'-Menüs überschneiden sich mit dem Hauptmenü, aus dem sie aufgerufen werden um 2 - 3 Pixel (Mit FF und Edge gecheckt). Wenn ich die Navigation rechts haben möchte, dann müsste ich ein wenig Gehirnschmalz aufwenden. Ich kenne das von deinem Template (ka mehr welches, vielleicht SimpleStyle 2018 2col), das ich für meine Site genommen habe, aber hier müsste danN 'foldout' im Stylsheet auf links umgebogen werden.

Bei der Demo 'FoldOut 2025 Gallery' fehlt im Satz 'Da kann es dan durchaus mal vorkommen, dass die erste Zeile noch am Ende der 1. Spalte steht, und die zweite Zeile am Anfang der 2. Spalte.' ein 'N'.

Ich finde das Template trotzdem gut

Apopo Galerie: Ich finde meine Galerie, die ich mit deinem FotoPro auf http://dorilaraukft.bplaced.net/sites/C ... ys_Galerie eingebunden habe immer noch ziehmlich kuul. Ist aber so umgebaut, dass da nichts mehr mit 'responsive' ist Vor 40 Jahren wollte ich mir übrigens einen Willys MB kaufen und restaurieren, aber mit einem Azubi Gehalt von 350 DM war das nicht möglich. Mit BW, Abi nachholen und studieren war der Fall dann auch irgendwann gegessen

Vielen Dank

Gruß
Gonzo

[Gert]

Bei der Demo 'FoldOut 2025 Gallery' fehlt ... ein 'N'.

Jetzt nicht mehr - Danke

... aber die 'FoldOut'-Menüs überschneiden sich mit dem Hauptmenü, aus dem sie aufgerufen werden um 2 - 3 Pixel (Mit FF und Edge gecheckt).

Das ist Absicht. Bei den meisten Foldout Menüs überschneiden sich die Ebenen noch mehr. Niemand traut sich, das pixelgenau zu machen, denn wenn nur 1px Platz dazwischen ist, kommt man mit der Maus nicht mehr hin, man fliegt raus.

Vor 40 Jahren wollte ich mir übrigens einen Willys MB kaufen und restaurieren, aber mit einem Azubi Gehalt von 350 DM war das nicht möglich.

Da wo ich herkomme hätte es noch andere Probleme gegeben. Da hätte man mit viel guten Beziehungen vielleicht einen bei der NVA ausrangierten GAZ bekommen können:

https://img.kleinanzeigen.de/api/v1/pro ... =$_59.AUTO

Benzin hat damals 1,50 Ostmark gekostet, aber bei einem durchschnittlichen Verdienst von 600 - 800 Ostmark war das dann auch nicht das Wunschauto

Gert

[Gert]

... aber hier müsste dann 'foldout' im Stylsheet auf links umgebogen werden.

Das sollte kein Problem sein, einfach die entsprechenden margins negativ machen, nachschauen und dann "schieben":

https://www.ge-webdesign.de/demotpl/?Te ... ue_rechts

Beim obersten Menüpunkt (MenuLevels Demo) kannst Du es durchtesten bis ML4, da hört das foldout dann auf,

Gert

[Gonzo Gates]

Hallo Gert,

klasse gemacht und so einfach. Ich habe es mir stressiger vorgestellt.

Und: Wer braucht mehr als 4 ML, wenn er Subsites hat???

Danke und Gruß
Gonzo

[Gonzo Gates]

Hallo Gert, (Korrektur: ich habe eben est gemerkt, dass ich deinen Name falsch geschrieben habe)

ich muss da nochmal auf deine Argumentation bzgl. 'pixelgenau' beim 'FoldOut Menü' zurück kommen.

Ich habe einen Tooltip in meine Website eingebunden. Immer, wenn ich nicht weiß, was in der Seite, die ich neu erstellt habe, ist in der 'Standard neu'-Seite eine Grafik mit einem Tooltip, der 15px von der Grafik entfernt ist, eingebunden. Wenn ich mit dem Mauszeiger von der Grafik zum Tooltip hinüberwechsel, dann verschwindet er nicht. Bewege ich die Maus nur einen px aus der Grafik heraus, dann verschwindet er. Ich kann den Wert auch erhöhen und es funktioniert. Ich habe da Zeit genug.

So ist es in meinen Webseite implemntiert

Code: Select all

<div class="btn tooltip_ka">
<div><img class="grafik_ka" title="Keine Ahnung" src="../userfiles/images/question-mark.png" alt="" width="143" height="143"></div>
<div class="right">
<h3>Keine Ahnung, was hier hin soll!</h3>
<i></i></div>
</div>

und das ist das Stylesheet dazu (denk dir die meisten Kommentare weg)

Code: Select all

/*#############################################

  Tooltip fuer 'Keine Ahnung'-Bild

##############################################*/

.grafik_dehnen_ka { /* Obsolet, depricated, egal, aber ich lasse die Klasse hier drin. Weil klasse 'dor_left_border_rzpt_nohover' benutzt wurde (max-width: 44%) und jetzt Klasse 'grafik_ka' interessiert daiese Klasse keinen mehr. Grafik 'Keine Ahnung' wird in der Vorschau vertikal und horizontal bei 'dor_left_border_rzpt_nohover' zusammengedruekt. Wenn diese Klasse nicht vorhanden ist und gegen Klasse 'grafik_ka' ausgetauscht wird, dann wird die Grafik normal angezeigt. Wurde im p-Tag eingebunden */
  width: 333px; /* Wert musste groesser genacht werden, damit es passt -> KA warum */
  height: 143px;
}

.grafik_ka {display: block; background: transparent; float: left; margin-top: 0px; max-width: 100%; border: 1px solid rgba(170,170,170,1); border-radius: 0 18px 18px 0; padding: 6px; margin: 5px 15px 3px 0px; box-shadow: inset 1px 0px 3px rgba(170,170,170,1), inset 0px 1px 3px rgba(170,170,170,1), inset -1px 0px 3px rgba(170,170,170,1), inset 0px -1px 3px rgba(170,170,170,1);} /* DOR: hinzugefuegt Kopie von 'dor_left_border_rzpt_nohover'. Grafik in div-tag statt p-tag eingebunden */

.btn {
  pointer: normal;
  margin-top: 10px; /* Grafik/Tooltip nach unten schieben */
  /*margin: 0px auto; Auskommentiert wg. 'dor_left_border_rzpt_nohover'. Bild soll ja linksbuendig sein. */ 
  width: 143px!important; /* Wenn der Eintrag fehlt, dann 'rutscht' der Tooltip nach rechts */
}

.tooltip_ka { /* hier frormatierung des dargestellten textes */
    display:inline-block;
    position:relative;
    /*border-bottom:1px dotted #666;
    padding-left: 25%; /* hinzugefuegt Einzug Text */
    /*width: 75%;  hinzugefuegt, damit punkte-linie ausgedehnt wird. jetzt weden die tooltips ach angezeigt, wenn man mit der maus ueber das ausgedehnte element geht */
    text-align:left;
}

.tooltip_ka .right { /* Tooltip Textbox */
    min-width:370px; /* tooltip breite von 200 auf 350 erhoeht. Nochmal breiter wg Aenderung 'h3' */
    max-width:250px;
    top:50%; 
    left:100%; /* tooltip nach rechts oder links verschieben. wg. groesserem dreieck hoherer wert 72% -> 73% */
    margin-left:15px; /* tooltip Abstand links von der Grafik */
    transform:translate(0, -55%); /* Wert von 50 auf 55 geaendert um Toooltip etwas nach oben zu schubsen */
    padding:10px 20px;
    color:rgba(68,68,68,1) /* #444 */;
    /*background-color:#EEEEEE;*/
    background-color:rgba(238,238,238,.85) /* #eee */;
    font-weight:normal;
    font-size:13px;
    font-variant:small-caps; /* Kleine Schriftzeichen werden gross geschrieben */
    /*border-radius:8px;*/
    border-radius: 0 33px 33px 0; /* DOR rounded corners rechts */
    position:absolute;
    z-index:99999999;
    box-sizing:border-box;
    /*border:1px solid #660066;box-shadow:0 1px 8px rgba(0,0,0,0.5);*/
    /*border:1px solid rgba(255,99,71,1); tomato;  andere farbe */
    border: 2px solid rgba(153, 51, 00, .7); /* #930 */
    /*box-shadow:0 1px 8px rgba(0,0,0,0.5);*/
    /*box-shadow: 0px 15px 10px -10px lime inset, mit positiv y-achse kann die dicke der oberen linie geaendert werden */
    /*            0px -15px 10px -10px turquoise inset;  mit negativ y-achse kann die dicke der unteren linie geaendert werden */
    box-shadow: /*6px 3px 1px 6px rgba(0,0,0,0.5); Urspruenglicher Schatten Textfeld */
                /*15px 2px 15px -15px yellow ,  unten rechts */
                /*0px -20px 20px -13px blue ,  oben */
                /*15px -2px 10px -15px lime ,  oben rechts */
                /*0px 10px 10px -10px red ;  unten */
                /* Schatten nicht oberhalb des Textfeldes */
                10px 12px 15px -15px rgba(68,68,68,0.7) ,  /*unten rechts */
                /*0px -20px 20px -13px rgba68,68,68,0.7) ,  oben */
                16px -2px 11px -15px rgba(68,68,68,0.7) , /* oben rechts */
                0px 12px 10px -10px rgba(68,68,68,0.7) ; /* unten */
    /* box-shadow: inset 0px 0px 4px rgba(153, 51, 00, 1); #930*/
    /*visibility:hidden; opacity:0; transition:opacity 0.8s; depr*/
    visibility:hidden; 
    opacity:0; 
    /*transition:opacity 4.8s;  dauert laenger bei der einblendung */
    transition:all 1.5s linear; /* von 0.8 auf 1.5s hochgedreht -> jetzt einblenden und ausblenden gleiche zeit */
}

.tooltip_ka:hover .right {
    visibility:visible; 
    opacity:1;
}

.tooltip_ka .right i { /* Das Dreieck */
    position:absolute;
    top:50%;
    right:100%;
    margin-top:-12px;
    /*width:12px;*/
    width:20px; /* position Dreieck links und rechts. bei groessenaenderung dreieck verschieben. bei hoeherem wert sieht man, dass es ein 45° gedrehtes quadrat ist */
    height:24px; /* position Dreieck */
    overflow:hidden;
}

.tooltip_ka .right i::after {
    content:'';
    position:absolute;
    /*width:12px; groesse dereieck geaendert*/
    width:20px;
    /*height:12px; groesse dereieck geaendert*/
    height:20px;
    left:0;
    top:50%;
    transform:translate(50%,-50%) rotate(-45deg); /* Das Qadrat wird links harum gedreht */
    background-color:rgba(238,238,238,1) /* #eee */;
    /*border:1px solid #660066;box-shadow:0 1px 8px rgba(0,0,0,0.5);*/
    /*border:1px solid rgba(255,99,71,1); tomato;  andere farbe */
    /*box-shadow:0 1px 8px rgba(0,0,0,0.5);*/
    border: 2px solid rgba(153, 51, 00, .85); /* #930 - inset entfernt und streuung groesser*/
    /*box-shadow: 0 1px 6px rgba(0,0,0,0.5); Urspruenglicher innerer Schatten 'Dreieck' */
    box-shadow: 0px 4px 4px 2px rgba(68,68,68,0.7); /* Schatten nur an einer Seite des Quadrates */
                /*-2px 0 6px  -6px blue,
                0px 2px 6px green,
                0 0px 0px yellow;*/
                 /*-25px 12px 15px -15px yellow ,  rechts */
                  /*0px -20px 20px -13px blue ,  unten */
                  /*25px -10px 10px -15px lime ,  links */
                  /*0px 20px 10px -10px red ;  oben */

Du kannst es auf meiner Website http://dorilaraukft.bplaced.net/sites/C ... 1_Rezepte/ auf der Homepage sehen, wie es funzt.

Ich habe von https://www.menucool.com/tooltip/css-tooltip einige Tooltips auf http://dorilaraukft.bplaced.net/sites/Tooltips/ konserviert und auch abgewandelt, damit es nicht so langweilig wird. Da fällt mir das Lied von Die Ärzte 'Langweilig' ein

Wenn das ein falscher 'Tooltip' war, dann ignoriere meinen Beitrag, aber ich finde Tooltips kuul und vielleicht ist das ein 'Tooltip' zu dem Pixeldrama, das du angesprochen hast.

Gruß
Gonzo