Tab-Slider-Box mit <dl>

philosapiens · #1 (**permalink**) 10.11.2009, 10:00

Hi,

gerne möchte ich eine "Tab-Slider-Box" semantisch vernünftig darstellen aber in einer bestimmten Form präsentieren.

Optisch sollte es so aussehen wie im unteren Teil "Tagesabläufe im unteren Teil der Reisen" gezeigt: idealseiten.de | Testseite für kug

Der Quelltext sollte jedoch so wie dort sein: idealseiten.de | Testseite für kug

Ginge das überhaupt mit CSS soweit zu realisieren?

Gerne würde ich die Anzeige bis auf den JavaScript-Slider so schon mit CSS erstellt haben. Da müßte man sicherlich sehr viel mit absoluter Positionierung arbeiten. Gerne würde ich auch die Größenangaben in "em" beibehalten.

Hat einer Ideen dazu? Mir fehlt irgendwie der vernünftige Ansatz. Oder ist eine <dl> - Liste ohnehin nicht die richtige Wahl?

andir · #2 (**permalink**) 11.11.2009, 11:47

Dass es grundsätzlich geht, zeigt folgendes Beispiel:

HTML-Code:

<!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>slidertabs</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="" />
<style type="text/css"><!--
* {
    margin: 0;
    padding: 0;
}

dl {
    width: 40em;
    border: 1px solid #ccc;
    position: relative;
    height: auto;
}
dl dd {
    width: 90%;
    padding: 0em 1em 1em 1em;
    margin-top: 3em;
    background-color: #fff;
    z-index: 0;
}

dl dt {
position: absolute;
top: 1em;
height: 1.5em;
line-height: 1.5em;
width: 30%;
background-color: red;
}
dl dt.one {
left: 1em;
}
dl dt.two {
left: 14em;
}
dl dt.three {
left: 28em;
}
dl dt.one + dd {
position: absolute;
display:block;
padding-bottom: 10em;
}

dl dt.two+dd {
position: absolute;
display:none;
}
dl dt.three+dd{
position: absolute;
display:none;
}
dl dt.one:visited + dd, dl dt.one:focus + dd, dl dt.one:active + dd,  dl dt.two:focus + dd, dl dt.two:visited + dd, dl dt.two:active + dd,  dl dt.three:focus + dd, dl dt.three:visited + dd, dl dt.three:active + dd   {
display: block;
z-index: 3;
}







 --></style>
</head>

<body>
<dl class="tabs">
 <dt class="one"><a href="#">1. Tag - Sonntag</a></dt>
 <dd>Anfang 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sed lacus.<img class="pic-left" src="pic/kug/warszawa_markt.jpg" width="321" height="210" title="Altstädter Markt" alt="Foto vom Altstädter Markt" />Pellentesque lacus. Mauris ac libero. Nam tellus ipsum, volutpat in, vehicula vel, lacinia vitae, augue. Vestibulum enim nunc, porttitor sed, molestie sed, adipiscing sed, mauris. Proin augue. Phasellus venenatis metus at tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin felis. Suspendisse adipiscing velit sit amet sem tempor feugiat.</dd>
 <dt class="two"><a href="#">2. Tag - Montag</a></dt>
 <dd>Anfang 2 Aliquam at sem. Vestibulum fermentum. Donec rhoncus, turpis in molestie aliquam, arcu sem lobortis ante, ac condimentum nulla urna in justo. Nulla urna risus, hendrerit vitae, porttitor sed, vestibulum at, orci. Pellentesque et nisi. Sed dictum libero eu sapien. Aliquam erat volutpat. Aliquam non neque. Pellentesque sed dolor. Pellentesque ut nisi.<br />

 Proin sodales nibh vel velit. Etiam enim nunc, commodo vel, varius eget, volutpat ut, quam. Mauris quis urna. Morbi a augue. Mauris urna libero, posuere eget, pellentesque id, feugiat vel, arcu. Nullam quam mauris, varius et, vehicula at, pharetra id, tellus. Ut ac orci et nulla facilisis mollis. Phasellus mauris. Morbi quam. Proin bibendum felis sed est. Fusce urna. Cras imperdiet sollicitudin nunc. Praesent aliquet mauris et elit. Ende</dd>
 <dt class="three"><a href="#">3. Tag - Dienstag</a></dt>
 <dd>Anfang 3 Pellentesque a ante sit amet arcu imperdiet congue. Morbi justo augue, pulvinar nec, pharetra fermentum, elementum sed, justo. Morbi vel sem. Pellentesque pharetra massa non leo aliquet consectetur. Nulla tincidunt. Fusce eget ligula a <em>ipsum adipiscing gravida</em>. Nullam cursus nibh non lectus. Sed eget enim. Donec sit amet odio. Morbi vel erat. Vestibulum ante ipsum primis in faucibus orci. Morbi placerat faucibus tortor. Maecenas lorem urna, gravida sed, blandit id, pulvinar ac, sem. Vestibulum faucibus tempus leo. Morbi tincidunt euismod mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.<br />
Curabitur commodo augue id mauris. Maecenas sagittis accumsan nunc. Pellentesque lectus enim, consectetur quis, aliquam quis, molestie sed, ante. Ut sed libero. Integer a nulla vitae erat aliquet fringilla. Pellentesque habitant morbi congue ut, euismod a, malesuada a, ante. <em>Etiam</em> odio quam, lobortis bibendum, hendrerit fringilla, diam. Nullam pede neque, pellentesque ut, egestas ut, facilisis ut, leo. Quisque hendrerit, elit et placerat consequat, nibh tortor pellentesque quam, vel bibendum quam purus ut massa. Nullam ante. Sed <em>dapibus erat</em> sed enim. Donec rhoncus. Ende</dd>

</dl>

</body>
</html>

Ich fürchte aber für eine Dauerhaftigkeit der Effekte ist Javascript erforderlich

EvT · #3 (**permalink**) 11.11.2009, 12:35

Zitat:

Zitat von andir

Ich fürchte aber für eine Dauerhaftigkeit der Effekte ist Javascript erforderlich

Nicht unbedingt, derzeit sind Ansätze über die CSS 3 :target-Pseudoklasse stark in der Diskussion.

Daniel Glazman war bereits im Jahr 2003 der aktuellen Entwicklung weit voraus und stellte ein funktionierendes Beispiel des Effektes vor: CSS-only tabs, a :target demo , das problemlos angepasst werden kann.

Gute Artikel mit weiteren Einsatzmöglichkeiten und guten Erklärungen der Methodik sind:
Pseudoklasse :target in CSS-3
Using CSS3’s :target pseudo-class to Make a Slideshow

Die :target Pseudokasse wird in den folgenden Browsern unterstützt:
Mozilla 1.4+ (z. B. Firefox 0.9+, Netscape 7), Safari 1.0, OmniWeb 4.5, Konqueror, Opera 9.5+

Das große Ärgernis aus Redmond kann selbst in seiner aktuellsten 8er-Version target nicht. Es sind aber Umsetzungen über Expressions und auch über Javascript im Web zu finden, die für IE die fehlende Funktionalität nachliefern.

philosapiens · #4 (**permalink**) 11.11.2009, 13:12

Hi,

supi andir! Vielen Dank für diese prima Umsetzung. Genau so meinte ich es. Das mit dem display:none und den + kannte ich so noch nicht. Aber so kann man es ohne JavaScript vernüftig angezeigt bekommen und eben "nur über JavaScript aninmieren lassen. Das halte ich für den schöneren Weg auch in puntko Barrierefreiheit.

Auch Danke Dir EvT für die weiterführenden Zukunftsgedanken in Richtung CSS3.

andir · #5 (**permalink**) 11.11.2009, 13:21

@philosapiens: Hat mich selbst interessiert

@Evt: Tolle Links, danke Dir!

Edit:

@Philosoapiens: Hier gibt es einen Weg, wie man dem IE mittels Expressions :target beibringen kann:

http://samuli.hakoniemi.net/blog/an-...-pseudo-class/

EvT · #6 (**permalink**) 12.11.2009, 09:51

Andir, danke dafür, dass du dir die Mühe gemacht hast, den Expressions-Link herauszusuchen. Ich kannte zwar die Site, hatte sie aber nicht als Favorit abgespeichert - was ich nun aber nachgeholt habe.

.

Seit gestern habe ich mir nochmals alle möglichen Seiten zum Thema durchgearbeitet und bin wirklich erstaunt, was mit :target alles machbar ist und bereits gemacht wird: Ich fand Slideshows, Austausch der Headergrafik auf Klick, Lightboxen, Hervorhebung von ganzen (Text-)Passagen beim Anklicken von Seitenankern, ein Quiz, ... der Phantasie scheinen da keine Grenzen gesetzt zu sein.

Das Glanzman-Beispiel habe ich als Testcase für IE per CC um die Expressions aus der von dir verlinkten Seite erweitert und ausgebaut - und siehe da - es geht in IE 6 und IE 7. Die 5er Version habe ich nicht getestet. Problematisch ist IE 8, da Microsoft Expressions aus dieser Version (im Strict-Modus?) herausgenommen hat und ich IE 8 nicht in den IE-7-Modus zwingen möchte. Da andererseits ja aber nur die Werte für display ausgetauscht werden müssen, denke ich, dass ein Minimal-Javascript den selben Dienst leistet.

Meine Aversion gegen Script-Lösungen stelle ich in diesem Fall nach hinten, denn die bisherigen Lightboxen usw. funktionieren ja auch nur mit Javascript.

Zusammenfassend halte ich :target für eine sehr interessante Geschichte, die auch schon praktisch eingesetzt wird. Spannend wird es nun, ihre Begrenzungen herauszufinden.

andir · #7 (**permalink**) 12.11.2009, 10:37

Ich habe gestern auch ein wenig rumgespielt und :target in mein Probetemplate eingebaut. Funktioniert ausser im IE sehr gut

und die sehen es eben wie immer (was im meinem speziellen Fall Sprunglinks insite angeht)

Ich habe beim Surfen zu diesem Thema auch noch das smoothscrolling JS entdeckt, was sich mit :target schön kombinieren läßt.
Dabei handelt es sich um die "Visualisierung" für den Nutzer, dass er auf der gleichen Seite bleibt (Sprunglink) und nicht auf eine andere Seite gelenkt wird.

Funktioniert ebenfalls hervorragend und ist insoweit unobstrusive, als dass der Nutzer ohne JS die "gewohnte" direkte Sprunganwahl bekommt (Browserfenster scrollt nicht, sondern springt eben dahin) Für mich ein Stück mehr Barrierearmut, da bessere Nutzerorientierung. Da ich auf vielen meiner Seiten InSite-Links habe, werde ich es vermutlich demnächst auch im Echteinsatz verwenden.

Improving the usability of within-page links - Opera Developer Community

EvT · #8 (**permalink**) 12.11.2009, 11:10

An CSS habe ich immer vermisst, dass es keine vernünftige Methode gibt, Inhalte selbst dann permanent eingeblendet zu halten, wenn Aktionen außerhalb des Elementbereichs stattfinden. Hovern mit seinen zack da - zack weg ist mir oft zu heftig und meist keine gute Alternative hierzu.

Wenn nun durch den Einsatz von :target Einblendungen/Änderungen permanent - analog "onclick" - realisierbar sind, werde ich das mehr als gerne umsetzen. Deshalb werde ich mir nun sehr interessiert deinen Link zu Gemüte führen und bin gespannt, was aus der ganzen Geschichte wird. Danke erstmal

.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
ich habe totale Schwerigkeiten mit Absolute und Relative Positionierung?!?	damonster	CSS	12	27.08.2008 15:56
ps design (slices), php (dynamischer inhalt), css gestaltung	schleepy	CSS	19	02.06.2006 22:46
Kniffliges Layout mit float	Roadrunnerle	CSS	6	14.03.2006 11:26
#boxes a:hover.info: 2.posting mit css !!!	marioN	CSS	5	25.01.2004 17:04
#box a:hover .info: css-layout: ie6.0/win, moz.1ie5.0/mac,	marioN	CSS	2	19.01.2004 17:17