Autor |
Nachricht |
Michiaol
Threadersteller
Dabei seit: 30.04.2012
Ort: Brambelberg
Alter: 33
Geschlecht:
|
Verfasst Mi 13.06.2012 13:09
Titel akkordeon effekt |
|
|
hallo,
ich möchte mir als eine navigation ein akkordeon-effekt erstellen mit hilfe des "Modernes Webdesign mit CSS"-Buches von Heiko Stiegert. leider gibt es ein problem bei der umsetzung. ich habe den code schritt für schritt gecodet aber es kommt nichts gescheides raus vor allem gibt es codes die mich bischen verwirren wie der folgende:
--------------------------------------------------------------------------------------------------------------------------------
.bookMenu #transcendingCSS p,
.bookMenu #hardboiledWebdesign p,
.bookMenu #handcraftedCSS p
{
background: url(../layout/transcending-css.jpg) top left no-repeat;
position:relative;
}
.bookMenu #hardboiledWebdesign p {
background-image: url(../layout/hardboiled-webdesign.jpg);
}
.bookMenu #handcraftedCSS p {
background-image: url (../layout/handcrafted-css.jpg);
}
--------------------------------------------------------------------------------------------------------------------------------
laut des workshops müssen je einem link 1 images zugefügt werden. warum weisst er erstens 3 links 1 image zu und dann den restlichen 2 je 1
|
|
|
|
|
Alex
Dabei seit: 28.11.2005
Ort: Dortmund
Alter: 37
Geschlecht:
|
Verfasst Mi 13.06.2012 13:26
Titel
|
|
|
Am besten packst du das ganze mal in eine HTML Seite und stellst uns den Link zur Verfügung.
Denn zum einen ohne HTML und zum anderen ohne das Buch hat hier niemand eine Vorstellung was genau da gebaut wird.
|
|
|
|
|
Anzeige
|
|
|
Michiaol
Threadersteller
Dabei seit: 30.04.2012
Ort: Brambelberg
Alter: 33
Geschlecht:
|
Verfasst Mi 13.06.2012 14:04
Titel
|
|
|
hallo,
html code:
--------------------------------------------------------------------------------------------------------------------------
<div id"main">
<div id="content">
<h1>Bookstore-Category: CSS</h1>
<ul class="bookmenu">
<li id="transcendingCSS" class="book">
<h2>
<a href="#transcendingCSS">Transcending CSS</a>
</h2>
<p><span>Autor: Andy Clarke</span></p>
</li>
<li id="hardboiledWebdesign" class="book">
<h2>
<a href="#hardboiledWebdesign">Hardboiled Webdesign</a>
</h2>
<p><span>Autor: Andy Clarke</span></p>
</li>
<li id="handcraftedCSS" class="book">
<h2>
<a href="#handcraftedCSS">Handcrafted CSS</a>
</h2>
<p><span>Autor: Andy Clarke<span></p>
</li>
</ul>
</div>
</div>
---------------------------------------------------------------------------------------------------------------------------
css code:
----------------------------------------------------------------------------------------------------------------------------------
.bookMenu :not(:target) h2 a {
background: rgb(59, 59, 59);
}
.bookMenu h2 a:hover,
.bookMenu h2 a:active,
.bookMenu h2 a:focus {
background: rgb(59, 59, 59);
}
.bookMenu :not(:target) p {
padding: 0;
margin: 0;
height: 0;
overflow: hidden;
}
.bookMenu #transcendingCSS p,
.bookMenu #hardboiledWebdesign p,
.bookMenu #handcraftedCSS p
{
background: url(../layout/transcending-css.jpg) top left no-repeat;
position:relative;
}
.bookMenu #hardboiledWebdesign p {
background-image: url(../layout/hardboiled-webdesign.jpg);
}
.bookMenu #handcraftedCSS p {
background-image: url (../layout/handcrafted-css.jpg);
}
.bookMenu p {
height: 175px;
}
.bookMenu :not(:target) p {
-moz-transition: height 1.5s ease-in;
-webkit-transition: height 1.5s ease-in;
-o-transition: height: 1.5s ease-in;
transition: height 1.5s ease-in;
}
------------------------------------------------------------------------------------------------------------------------------------
|
|
|
|
|
Michiaol
Threadersteller
Dabei seit: 30.04.2012
Ort: Brambelberg
Alter: 33
Geschlecht:
|
Verfasst Mi 13.06.2012 16:27
Titel
|
|
|
ich habe jetzt herausgefunden wieso es nicht ging, sobald ich das doctype aus meiner html datei lösche, geht jetzt alles.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
offensichtlich macht das xhtml 1.0 strict probleme
Zuletzt bearbeitet von Michiaol am Mi 13.06.2012 16:33, insgesamt 2-mal bearbeitet
|
|
|
|
|
SimonDerDude
Dabei seit: 15.01.2010
Ort: error: undefined
Alter: 35
Geschlecht:
|
Verfasst Mi 13.06.2012 19:31
Titel
|
|
|
Das Problem ist immer der Mensch
|
|
|
|
|
Alex
Dabei seit: 28.11.2005
Ort: Dortmund
Alter: 37
Geschlecht:
|
Verfasst Do 14.06.2012 10:49
Titel
|
|
|
Michiaol hat geschrieben: | ich habe jetzt herausgefunden wieso es nicht ging, sobald ich das doctype aus meiner html datei lösche, geht jetzt alles.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
offensichtlich macht das xhtml 1.0 strict probleme |
Falsch, unter den Umständen macht dein HTML Probleme.
Validier mal deinen Code ( http://validator.w3.org/ ) und lass um gotteswillen den doctype drin!
|
|
|
|
|
Michiaol
Threadersteller
Dabei seit: 30.04.2012
Ort: Brambelberg
Alter: 33
Geschlecht:
|
Verfasst Do 14.06.2012 16:37
Titel
|
|
|
hallo,
das akkordeon effekt mittels css ist schön leider funktioniert der schließmechanismus nicht. es ist nicht möglich dass alle elemente geschlossen werden, eines wird immer aktiv sein was nicht besonders schön aussieht. nach langer 2 tätiger recherche durch verschiede forums und co. habe ich festgestellt der bester weg wäre es mittels jquery zuerstellen. leider finde ich kein gescheides tutorial dass auch funktionieren würde.
hat jemand von euch ein tipp wo oder wie man ein akkordeon effekt erstellt bei dem man alle contents schließen kann.
freundliche grüße
Zuletzt bearbeitet von Michiaol am Do 14.06.2012 16:37, insgesamt 1-mal bearbeitet
|
|
|
|
|
Alex
Dabei seit: 28.11.2005
Ort: Dortmund
Alter: 37
Geschlecht:
|
Verfasst Do 14.06.2012 18:28
Titel
|
|
|
Michiaol hat geschrieben: | hallo,
das akkordeon effekt mittels css ist schön leider funktioniert der schließmechanismus nicht. es ist nicht möglich dass alle elemente geschlossen werden, eines wird immer aktiv sein was nicht besonders schön aussieht. nach langer 2 tätiger recherche durch verschiede forums und co. habe ich festgestellt der bester weg wäre es mittels jquery zuerstellen. leider finde ich kein gescheides tutorial dass auch funktionieren würde.
hat jemand von euch ein tipp wo oder wie man ein akkordeon effekt erstellt bei dem man alle contents schließen kann.
freundliche grüße |
Ließt du auch was so geschrieben wird, oder fragst du nur?
Mach erst mal dein HTML valide!
|
|
|
|
|
|
|
|
Ähnliche Themen |
Akkordeon Navigation bei App
Problem mit AS3 und Akkordeon
Dreamweaver Spry Akkordeon
akkordeon, für das letzte menü optimieren
Problem mit Jquery Akkordeon Menü
Akkordeon Widget & Browser Prob bei Kundin
|
|