mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Fr 29.03.2024 14:32 Benutzername: Passwort: Auto-Login

Thema: akkordeon effekt vom 13.06.2012


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> akkordeon effekt
Seite: 1, 2  Weiter
Autor Nachricht
Michiaol
Threadersteller

Dabei seit: 30.04.2012
Ort: Brambelberg
Alter: 33
Geschlecht: Männlich
Verfasst Mi 13.06.2012 13:09
Titel

akkordeon effekt

Antworten mit Zitat Zum Seitenanfang

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 * Keine Ahnung... *
  View user's profile Private Nachricht senden
Alex

Dabei seit: 28.11.2005
Ort: Dortmund
Alter: 37
Geschlecht: Männlich
Verfasst Mi 13.06.2012 13:26
Titel

Antworten mit Zitat Zum Seitenanfang

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.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
Michiaol
Threadersteller

Dabei seit: 30.04.2012
Ort: Brambelberg
Alter: 33
Geschlecht: Männlich
Verfasst Mi 13.06.2012 14:04
Titel

Antworten mit Zitat Zum Seitenanfang

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;

}

------------------------------------------------------------------------------------------------------------------------------------
  View user's profile Private Nachricht senden
Michiaol
Threadersteller

Dabei seit: 30.04.2012
Ort: Brambelberg
Alter: 33
Geschlecht: Männlich
Verfasst Mi 13.06.2012 16:27
Titel

Antworten mit Zitat Zum Seitenanfang

ich habe jetzt herausgefunden wieso es nicht ging, sobald ich das doctype aus meiner html datei lösche, geht jetzt alles. Lächel


<!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 *Schnief*


Zuletzt bearbeitet von Michiaol am Mi 13.06.2012 16:33, insgesamt 2-mal bearbeitet
  View user's profile Private Nachricht senden
SimonDerDude

Dabei seit: 15.01.2010
Ort: error: undefined
Alter: 35
Geschlecht: Männlich
Verfasst Mi 13.06.2012 19:31
Titel

Antworten mit Zitat Zum Seitenanfang

Das Problem ist immer der Mensch * Ööhm... ja? *
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Alex

Dabei seit: 28.11.2005
Ort: Dortmund
Alter: 37
Geschlecht: Männlich
Verfasst Do 14.06.2012 10:49
Titel

Antworten mit Zitat Zum Seitenanfang

Michiaol hat geschrieben:
ich habe jetzt herausgefunden wieso es nicht ging, sobald ich das doctype aus meiner html datei lösche, geht jetzt alles. Lächel


<!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 *Schnief*


Falsch, unter den Umständen macht dein HTML Probleme.

Validier mal deinen Code ( http://validator.w3.org/ ) und lass um gotteswillen den doctype drin!
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Michiaol
Threadersteller

Dabei seit: 30.04.2012
Ort: Brambelberg
Alter: 33
Geschlecht: Männlich
Verfasst Do 14.06.2012 16:37
Titel

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden
Alex

Dabei seit: 28.11.2005
Ort: Dortmund
Alter: 37
Geschlecht: Männlich
Verfasst Do 14.06.2012 18:28
Titel

Antworten mit Zitat Zum Seitenanfang

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!
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
 
Ä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
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2  Weiter
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.