Sidr
PSD-Tutorials.de

Bei Klick ins Menü soll sich der Inhalt ändern

Dieses Thema im Forum "(X)HTML & CSS" wurde erstellt von d3mueller, 31.03.2012.

  1. d3mueller

    d3mueller PC-Freak :D

    Dabei seit:
    22.03.2012
    Beiträge:
    297
    Geschlecht:
    männlich
    Ort:
    Deutschland
    Software:
    Adobe Collection, GIMP
    Bei Klick ins Menü soll sich der Inhalt ändern
    Hi, also ich habe noch ein Problem/Anliegen ^^.
    Also ich habe eine index.html Seite erstellt für einen Schwimmverein in meinem Dorf^^. Hier mal meine beiden Dateien:

    index.html
    Code (Text):
    1.  
    2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    3. <html xmlns="http://www.w3.org/1999/xhtml">
    4. <head>
    5. <link rel="stylesheet" href="style.css" type="text/css" />
    6. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    7. <title>Test</title>
    8. </head>
    9.  
    10. <body>
    11. <header>
    12.   <div class="logo">&nbsp;</div></header>
    13. <nav>
    14. <table border="0" cellspacing="0">
    15.   <tr>
    16.     <th width="100px" class="navigation ecke1"><a href="#">News</a></th>
    17.     <th width="100px" class="navigation"><a href="#">Trainingszeiten</a></th>
    18.     <th width="100px" class="navigation"><a href="#">Team</a></th>
    19.     <th width="100px" class="navigation"><a href="#">Bilder</a></th>
    20.     <th width="100px" class="navigation ecke2"><a href="#">Termine</a></th>
    21.   </tr>
    22. </table>
    23.  
    24. </nav>
    25. <div id="container" class="content">
    26. <h1> My Heading <span class="dreieck"></span><span class="dreieck2"></span> </h1>  Hallo
    27. <br /><br /><br />
    28. <br /><br /><br />
    29. <br /><br /><br />
    30. <br /><br /><br />
    31. <br /><br /><br />
    32. <br /><br /><br />
    33. <br /><br /><br />test
    34. </div>
    35. <footer>
    36.  
    37. </body>
    38. </html>
    39.  
    40.  
    style.css
    Code (Text):
    1.  
    2. /* CSS Document */
    3. /* ---------------------------------Logo----------------------------------------------*/
    4. .logo {
    5.     background-image: url('Bilder/Logo.png');
    6.     background-repeat: no-repeat;
    7.     background-position: center center;
    8.     height:300px;
    9. }
    10. /* ---------------------------------Logo Ende----------------------------------------------*/
    11.  
    12. /* -----------------------------------Menue--------------------------------------------*/
    13. table {
    14.     margin: auto;
    15.     width: 60%;
    16.     min-width:960px;
    17. }
    18.  
    19. .navigation {
    20.     height: 5´40px;
    21.     background: #1e5799;
    22.     background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */
    23.     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
    24.     background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
    25.     background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Opera11.10+ */
    26.     color: #fff;
    27.     font-size: 28px;
    28.     font-weight: bold;
    29.     text-shadow: 0 0 6px black;
    30.  
    31.     -moz-box-shadow: 0 0 5px #666, inset 0 0 5px #ddd;
    32.     -webkit-box-shadow-: 0 0 5px #666, inset 0 0 5px #ddd;
    33.     box-shadow: 0 0 15px #333, inset 0 0 1px #333;
    34.     -webkit-transition: all .5s ease;
    35.     -moz-transition: all .8s ease;
    36.     -o-transition: all .8s ease;
    37.     transition: all .8s ease;
    38. }
    39.  
    40. .navigation:hover {
    41.     background: #1e5799;
    42. }
    43. th.ecke1 {
    44.     -webkit-border-top-left-radius: 6px;
    45.     -webkit-border-bottom-left-radius: 6px;
    46.     -moz-border-radius-topleft: 6px;
    47.     -moz-border-radius-bottomleft: 6px;
    48.     border-top-left-radius: 6px;
    49.     border-bottom-left-radius: 6px;
    50. }
    51. th.ecke2 {
    52.     -webkit-border-top-right-radius: 6px;
    53.     -webkit-border-bottom-right-radius: 6px;
    54.     -moz-border-radius-topright: 6px;
    55.     -moz-border-radius-bottomright: 6px;
    56.     border-top-right-radius: 6px;
    57.     border-bottom-right-radius: 6px;
    58. } /* Die ganz linken und rechten Ecken müssen rund werden */
    59.  
    60. th a {
    61.     display:block;
    62.     width:100%;
    63.     text-decoration:none;
    64.     color: white;
    65. }
    66.  
    67. /* -----------------------------------Menue Ende--------------------------------------------*/
    68. /* -----------------------------------Content Anfang--------------------------------------------*/
    69.  
    70.  
    71.     #container {  
    72.         background: #666;  
    73.         margin: auto;
    74.         margin-top: 15px;
    75.         width: 930px;  
    76.         padding-top: 30px;
    77.         padding-left: 15px;
    78.         -webkit-border-radius: 6px;
    79.         -moz-border-radius: 6px;
    80.         border-radius: 6px;
    81.         background: #fff;
    82.         -moz-box-shadow: 0 0 5px #666, inset 0 0 40px #ddd;
    83.         -webkit-box-shadow: 0 0 5px #666, inset 0 0 40px #ddd;
    84.         box-shadow: 0 0 5px #666, inset 0 0 40px #ddd;  
    85.         border-top: 10px solid black;
    86.         }  
    87.      
    88.     h1 {  
    89.          background: #e3e3e3;  
    90.          background: -moz-linear-gradient(top, #e3e3e3, #c8c8c8);  
    91.          background: -webkit-gradient(linear, left top, left bottombottom, from(#e3e3e3), to(#c8c8c8));  
    92.          padding: 10px 20px;  
    93.          margin-left: -37px;  
    94.          margin-top: -35px;  
    95.          position: relative;  
    96.          width: 102.1%;  
    97.          -moz-box-shadow: 1px 1px 3px #292929;  
    98.          -webkit-box-shadow: 1px 1px 3px #292929;  
    99.          box-shadow: 1px 1px 3px #292929;  
    100.          color: #454545;  
    101.          text-shadow: 0 1px 0 white;  
    102.     -webkit-border-top-left-radius: 6px;
    103.     -webkit-border-top-right-radius: 6px;
    104.     -moz-border-radius-topleft: 6px;
    105.     -moz-border-radius-topright: 6px;
    106.     border-top-left-radius: 6px;
    107.     border-top-right-radius: 6px;
    108.     }  
    109.      
    110.     .dreieck {  
    111.          width: 0; height: 0;
    112.          top: 104%;  
    113.          line-height: 0;  
    114.          border-top: 10px solid #c8c8c8;  
    115.          border-left: 20px solid transparent;
    116.          position: absolute;
    117.          left: 0;  
    118.            
    119.     }  
    120.     .dreieck2 {  
    121.           width: 0; height: 0;
    122.          top: 104%;  
    123.          line-height: 0;  
    124.          border-top: 10px solid #c8c8c8;  
    125.          border-right: 20px solid transparent;
    126.          position: absolute;
    127.          right: 0;  
    128.            
    129.     }  
    130.    
    131.  
    132.  
    Jetzt dachte ich, es wäre cool, wenn man einfach auf einen Punkt im Menü geht, und der Inhalt wird im Contentbereich eingeblendet, sprich die opacity wird von 0 auf 1 erweitert bei einem Div, dass bereits in der index.html steht. (und so was dann halt bei jedem Menüpunkt)

    Aber ich weiß nicht, wie ich das umsetzen kann. Oder ob man das überhaupt nur mit purem CSS machen kann?

    Wäre echt super nett, wenn jemand mir helfen könnte, bin noch ein Anfänger :D

    PS: Noch ne Frage nebenbei: Beim Menü der Hover-Effekt, das ging nur, wenn ich ne normale Farbe genommen habe. Bei einem Farbverlauf kam keine animation. Ist das normal?

     
    #1      
  2. MyBad

    MyBad localhorst

    Dabei seit:
    18.12.2006
    Beiträge:
    1.962
    Geschlecht:
    männlich
    Bei Klick ins Menü soll sich der Inhalt ändern
    AW: Bei Klick ins Menü soll sich der Inhalt ändern

    Hi! Bevor du sich an solche "Spielereien" machst, solltest du dich zuvor mal lieber noch etwas mit HTML befassen. Dein Quelltext ist nämlich murx.

    - du nutzt HTML5 Elemente, hast aber den XHTML Doctype angegeben
    - deine Navigation ist eine Tabelle. Listenelemente sind hier aber angebracht. Stichwort: "Semantik"
    - wozu dienen die vielen <br />-Tags? Abstände werden mit "padding" oder "margin" Werten im CSS vergeben.
    - da ist aber noch einiges mehr.

    Du solltest dich also wirklich ersteinmal mit dB Grundlagen befassen. Dann kannst du dich an Effekte und sonstige Spielereien wagen.

     
    Zuletzt bearbeitet: 31.03.2012
    #2      
  3. d3mueller

    d3mueller PC-Freak :D

    Dabei seit:
    22.03.2012
    Beiträge:
    297
    Geschlecht:
    männlich
    Ort:
    Deutschland
    Software:
    Adobe Collection, GIMP
    Bei Klick ins Menü soll sich der Inhalt ändern
    AW: Bei Klick ins Menü soll sich der Inhalt ändern

    Hi

    1. Was macht das für einen unterschied? Geht doch bisher alles

    2. Hab ich probiert mit tabellen komme ich zu einem schöneren ergebnis. Bei listen geht vieles nicht

    3. Sry, aber so blöd bin selbst ich nicht. Das solte nur ein testimhalt sein! Um die box kurzfristig göet zu machen. Da veränder ich doch nichts im css!

    Lg
    Dennis

     
    #3      
  4. MyBad

    MyBad localhorst

    Dabei seit:
    18.12.2006
    Beiträge:
    1.962
    Geschlecht:
    männlich
    Bei Klick ins Menü soll sich der Inhalt ändern
    AW: Bei Klick ins Menü soll sich der Inhalt ändern

    1. Das kann bei einigen Browsern zu Fehldarstellungen führen.
    2. Mit Listen bekommt man ebenfalls eine schöne Darstellung hin. Das geht per CSS sehr schön.
    3. Habe ich dir auch nicht unterstellen wollen. Deshalb die Frage. Aber wenn ich so einen Quelltext hier vorfinde, kann man durchaus von Anfänger- oder Unwissen ausgehen.


    Wenn du aber nicht dazu lernen willst und der Meinung bist du kannst schon alles, helfe ich nun bei deinem eigentlichen Problem weiter:
    Schau dir am besten mal das JQuery Framework an. Damit ist es ganz einfach bei mouseover Inhalte / Elemente ein- oder auszublenden.

     
    Zuletzt bearbeitet: 31.03.2012
    #4      
  5. vincitore

    vincitore Aktives Mitglied

    Dabei seit:
    22.01.2005
    Beiträge:
    616
    Geschlecht:
    männlich
    Ort:
    Darmstadt
    Software:
    Adobe CC, Coda 2, Cinema 4D R13 Student
    Kameratyp:
    Canon EOS 5D Mark III
    Bei Klick ins Menü soll sich der Inhalt ändern
    AW: Bei Klick ins Menü soll sich der Inhalt ändern

    zu 1.: ich würde sagen Glück gehabt. Das Argument (funktioniert doch alles) zieht nicht ganz... Das ist wie wenn du mit jemandem Englisch sprichst und zwischendurch deutsche Wörter einfügst... die erste Person kann vielleicht beides und versteht dich, die zweite nicht oder interpretiert es falsch...
    Die Dokumententyp-Deklaration ist nicht ohne Grund da.
    Mein Tipp: Nimm <!DOCTYPE html>

    zu 2.: Alles eine Sache der CSS-Datei. Du zweckentfremdest hier Tabellen! Man nimmt ja auch nicht einen <p>-Tag und gestaltet ihn per CSS zu einer Überschrift, sondern nimmt <h1> usw. Die Übersichtlichkeit deines Codes und deine Suchmaschine freut sich!


    jetzt zu deiner eigentlichen Frage :) http://www.andrekind.de/ZenGarden/ da ist dein Problem nur mit css umgesetzt

    gib mir ein paar Minuten dann erklär ich dir das hier anhand deines Beispiels

     
    #5      
  6. cebito

    cebito undefined

    242
    Dabei seit:
    08.03.2008
    Beiträge:
    8.190
    Geschlecht:
    männlich
    Ort:
    Dresden
    Software:
    PS7, Kopf
    Kameratyp:
    zum durchgucken
    Bei Klick ins Menü soll sich der Inhalt ändern
    AW: Bei Klick ins Menü soll sich der Inhalt ändern

    Bei älteren Dieselmotoren kann man auch Schnaps oder sonstwas in den Tank kippen und die laufen damit - macht man es deshalb? Einen neueren mach ich damit allerdings platt. Im Übrigen ist der HTML5 Doctype doch viel einfacher.

    Sicherlich, schau dir mal die CSS-Eigenschaft display an... http://www.css4you.de/display.html Du kannst jedem Element die Eigenschaften von Tabellen, Tabellenzellen etc. geben. Dann kriegst auch deine Darstellung wie du sie haben willst, allerdings mit semantisch sinnvollen und korrekten Elementen.

    Dafür gibt es jede Menge Tools im Netz um sinnvollen Platzhaltertext zu bekommen... https://www.google.de/search?q=lorem ipsum generator

     
    Zuletzt bearbeitet: 31.03.2012
    #6      
  7. d3mueller

    d3mueller PC-Freak :D

    Dabei seit:
    22.03.2012
    Beiträge:
    297
    Geschlecht:
    männlich
    Ort:
    Deutschland
    Software:
    Adobe Collection, GIMP
    Bei Klick ins Menü soll sich der Inhalt ändern
    AW: Bei Klick ins Menü soll sich der Inhalt ändern

    Hi, natürlich will was dazu lernen, und ich weiß selbstverständlich noch lang nicht alles. Aber das kann man mir auch netter beibringen ;)


    Ja okay, hast recht :D Hat Dreamweaver halt automatisch am Anfang eingefügt, deshalb.

    Zu den Tabellen: Du hast ja Recht, aber bisher blick ich das noch nicht so ganz, z.B. wenn ich da einen Hintergrund um ein Listenelement (li) mache, ist der zu klein, und ich kann ihn iwie nicht per Höhe verändern. Deshalb :)
    Aber ich lasse mich sehr gerne belehren^^

    Das mit dem Link sieht cool aus. Wäre nett, wnen du mir das zeigst :).

    Ja, auch du hast Recht^^

    Mit Lorem Ipsum.. da bin ich meistens halt zu faul für, weil so <br> einzufügen geht halt schneller manchmal. Ist ja nur kurz zum probieren.
    Aber ich werd mir jetzt mal angewöhnen, Lorem ipsum.. zu nehmen ;)
    Danke

     
    #7      
  8. vincitore

    vincitore Aktives Mitglied

    Dabei seit:
    22.01.2005
    Beiträge:
    616
    Geschlecht:
    männlich
    Ort:
    Darmstadt
    Software:
    Adobe CC, Coda 2, Cinema 4D R13 Student
    Kameratyp:
    Canon EOS 5D Mark III
    Bei Klick ins Menü soll sich der Inhalt ändern
    AW: Bei Klick ins Menü soll sich der Inhalt ändern

    So gut dann leg ich mal los
    Vorab noch eine wichtige Info: Lies es dir gut durch und versuch es zu verstehen! Einfaches Copy&Paste wird dich nicht weiterbringen!

    (Erklärungen der einzelnen CODE Blöcke sind immer NACH dem einzelnen Block)

    so also erst einmal das Gerüst
    Code (Text):
    1.  
    2. <!DOCTYPE html>
    3. <html lang="de">
    4. <head>
    5.     <meta charset="utf-8">
    6.     <title>[...]</title>
    7.     <link rel="stylesheet" type="text/css" href="style.css" />
    8. </head>
    9. <body>
    10. [...]
    11. </body>
    12. </html>
    13.  
    Ich denke mal dazu muss ich wenig sagen :)

    Gut kommen wir zur Navigation, die hattest du bisher mit einer Tabelle realisiert, wie schon oben gesagt, ist das nicht die optimale Lösung. Besser ist es so:
    HTML:
    Code (Text):
    1.  
    2.     <nav>
    3.         <ul id="navigation">
    4.             <li><a href="#News">News</a></li>
    5.             <li><a href="#Trainingszeiten">Trainingszeiten</a></li>
    6.             <li><a href="#Team">Team</a></li>
    7.             <li><a href="#Bilder">Bilder</a></li>
    8.             <li><a href="#Termine">Termine</a></li>
    9.         </ul>
    10.     </nav>
    11.  
    Ich denke mal auch hier sollten nicht all zu viele Fragen auftauchen.
    Die Liste bekommt die ID Navigation und die Links sind mit den später angelegten DIVs verknüpft.

    Soweit so gut, im Moment sieht es ja noch nicht so aus wie du es gerne hättest, dazu brauchen ein paar Zeilen im CSS Dokument:

    Code (Text):
    1.  
    2. nav {
    3.     margin: auto;
    4.     width: 60%;
    5.     min-width:960px;
    6. }
    7.  
    Hier wird die Navigation mittig ausgerichtet und die Breite definiert.


    Code (Text):
    1.  
    2. #navigation { /*Leiste mit aberundeten Ecken*/
    3.     list-style: none; /*entfernen des Listenaussehens*/
    4.     /*Ecken und Schatten*/
    5.     -webkit-border-radius:6px 6px 6px 6px;
    6.        -moz-border-radius:6px 6px 6px 6px;
    7.             border-radius:6px 6px 6px 6px;
    8.     -webkit-box-shadow: 0 0 5px #666, inset 0 0 5px #ddd;
    9.        -moz-box-shadow: 0 0 5px #666, inset 0 0 5px #ddd;
    10.             box-shadow: 0 0 5px #666, inset 0 0 5px #ddd;
    11.     /*Hintergrund*/
    12.     background: #1e5799; /* Fallback */
    13.     background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */
    14.     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
    15.     background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
    16.     background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Opera 11.10+ */
    17.     background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* IE10+ */
    18.     background: linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */
    19.     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
    20. }
    21.  
    selbsterklärend (siehe Kommentare innerhalb des CODEs)


    Code (Text):
    1.  
    2. #navigation li{/*Navigationselemente (einzeilige Liste)*/
    3.     padding: 5px 10px 5px 10px;
    4.     display: inline-block;
    5.     height: 30px;
    6.     font-size: 28px;
    7.     font-weight: bold;
    8.     text-shadow: 0 0 6px black;
    9. }
    10.  
    display: inline-block; Listenpunkte ohne Zeilenumbruch


    Code (Text):
    1.  
    2. #navigation li:hover {
    3.     background: #7db9e8; /* Fallback */
    4.     background: -moz-linear-gradient(top, #7db9e8 0%, #207cca 49%, #2989d8 50%, #1e5799 100%); /* FF3.6+ */
    5.     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7db9e8), color-stop(49%,#207cca), color-stop(50%,#2989d8), color-stop(100%,#1e5799)); /* Chrome,Safari4+ */
    6.     background: -webkit-linear-gradient(top, #7db9e8 0%,#207cca 49%,#2989d8 50%,#1e5799 100%); /* Chrome10+,Safari5.1+ */
    7.     background: -o-linear-gradient(top, #7db9e8 0%,#207cca 49%,#2989d8 50%,#1e5799 100%); /* Opera 11.10+ */
    8.     background: -ms-linear-gradient(top, #7db9e8 0%,#207cca 49%,#2989d8 50%,#1e5799 100%); /* IE10+ */
    9.     background: linear-gradient(top, #7db9e8 0%,#207cca 49%,#2989d8 50%,#1e5799 100%); /* W3C */
    10.     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7db9e8', endColorstr='#1e5799',GradientType=0 ); /* IE6-9 */
    11. }
    12.  
    Hover-Effekt


    Code (Text):
    1.  
    2. nav a {
    3.     display:block;
    4.     text-decoration:none;
    5.     color: white;
    6. }
    7.  
    sollte bekannt sein

    So damit hätten wir schon mal die Liste so wies sein sollte :p

    Dann kommen wir jetzt mal zum Content:
    Zuerst einmal der grobe html-Aufbau:
    Code (Text):
    1.  
    2.     <section id="container">
    3.         <div id="News">[…]</div>
    4.         <div id="Trainingszeiten">[…]</div>
    5.         <div id="Team">[…]</div>
    6.         <div id="Bilder">[…]</div>
    7.         <div id="Termine">[…]</div>
    8.     </section>
    9.  
    Die einzelnen Divs bekommen eine einzigartige ID, damit über die Navigation darauf zugegriffen werden kann.

    Hier ein kleiner Hinweis am Rande: IDs sind immer nur ein mal in einem Dokument zu vergeben, CLASSes können auch mehrmals vorhanden sein.

    Im Moment werden die DIVs noch alle angezeigt, was jetzt per CSS geändert wird:
    Code (Text):
    1.  
    2. #container {
    3.     margin: auto;
    4.     width: 60%;
    5.     min-width:960px;
    6.     margin-top: 15px;
    7.     background-color: #ccc;
    8.     -webkit-border-radius: 6px;
    9.        -moz-border-radius: 6px;
    10.             border-radius: 6px;
    11.     -webkit-box-shadow: 0 0 5px #666, inset 0 0 40px #ddd;
    12.        -moz-box-shadow: 0 0 5px #666, inset 0 0 40px #ddd;
    13.             box-shadow: 0 0 5px #666, inset 0 0 40px #ddd;
    14.     border-top: 10px solid black;
    15. }
    16.  
    Positionierung+Gestaltung aus deinem Ausgangspost


    Code (Text):
    1.  
    2. #container div {
    3.     padding: 10px;
    4.     display: none;
    5. }
    6.  
    Ausblenden aller DIVs


    Code (Text):
    1.  
    2. #container div:target {
    3.     display: block;
    4. }
    5.  
    Einblenden des gewünschten DIVs

    So viel Spaß damit. Falls noch Fragen offen sein sollten, einfach schreiben!

    Edit: Dein h1-style usw. kannst du natürlich wieder einbauen

     
    Zuletzt bearbeitet: 31.03.2012
    #8      
  9. d3mueller

    d3mueller PC-Freak :D

    Dabei seit:
    22.03.2012
    Beiträge:
    297
    Geschlecht:
    männlich
    Ort:
    Deutschland
    Software:
    Adobe Collection, GIMP
    Bei Klick ins Menü soll sich der Inhalt ändern
    AW: Bei Klick ins Menü soll sich der Inhalt ändern

    Wow. Vielen Dank für deine Mühe :daumenhoch:
    Stimmt, so ist es echt viel übersichtlicher^^ und einfacher, da habt ihr recht.(Und das Menü sieht sogar noch besser aus als vorher, finde ich)
    Habe auch alles soweit verstanden, denke ich.
    Eine Frage noch: Wenn man jetzt die transition reinpackt, müsste die doch eigentlich hier hin, oder?
    Code (Text):
    1. #container div {
    2. padding: 10px;
    3. display: none;
    4. -moz-transition: all 1s ease;
    5.  }
    Natürlich auch für die anderen Browser, aber nur als Beispiel. Weil hier steht ja der Wert display:none und beim nächsten display:block;
    aber es geht nicht.
    Wenn du mir da noch helfen könntest, wäre es perfekt :)
    Bei der Liste habe ich es geschafft (auch wenn es nur geht, wenn ich beim Hover ne normale BG-Farbe nehme, und keinen Farbverlauf. Liegt denke ich, aber an CSS, weil es geht iwie nicht anders)

    Echt nochmal Vielen Danke

    Lg
    Dennis

     
    #9      
  10. vincitore

    vincitore Aktives Mitglied

    Dabei seit:
    22.01.2005
    Beiträge:
    616
    Geschlecht:
    männlich
    Ort:
    Darmstadt
    Software:
    Adobe CC, Coda 2, Cinema 4D R13 Student
    Kameratyp:
    Canon EOS 5D Mark III
    Bei Klick ins Menü soll sich der Inhalt ändern
    AW: Bei Klick ins Menü soll sich der Inhalt ändern

    Hm also bei mir hat das mit der Liste auch mit dem Verlauf funktioniert?!

    Transition und display funktionieren zusammen nicht.
    Ein anderer Weg wäre halt über opacity zu gehen, dann müsstest du aber position: absolut machen und die divs übereinander legen

     
    #10      
  11. d3mueller

    d3mueller PC-Freak :D

    Dabei seit:
    22.03.2012
    Beiträge:
    297
    Geschlecht:
    männlich
    Ort:
    Deutschland
    Software:
    Adobe Collection, GIMP
    Bei Klick ins Menü soll sich der Inhalt ändern
    AW: Bei Klick ins Menü soll sich der Inhalt ändern

    hi,
    komisch, aber ich habe mal den Code so wie du ihn geschrieben hast kopiert, aber bei mir kam keine Animation. :( Aber mein Browser ist aktuell.

    Okay, habe es mal versucht, und es funktioniert sogar :). Ist das vom Code her soweit okay?
    Code (Text):
    1.  
    2. #container div {
    3.     margin: auto;
    4.     border: 1px solid black;
    5.     width:960px;
    6.     position:absolute;
    7.     opacity: 0;
    8.     -moz-transition: opacity .5s linear;
    9.     -o-transition: opacity .5s linear;
    10.     transition: opacity .5s linear;
    11.     -webkit-transition: opacity .5s linear;
    12. }
    13.  
    14. #container div:target {
    15.     opacity: 1;
    16. }
    17.  
    Lg
    Dennis
    PS: Kann man das jetzt noch so machen, dass ein anderes Div als "Start-div" festgelegt wird? Weil sonst ist da am Anfang ja einfach nichts. Muss nicht sein, aber wenn das machbar wäre... :)

    EDIT2: Also bisher geht es ja einigermaßen. Aber ich wollte wie in meinem Anfangspost das Menü in so ein umgestyltes <h1> Element packen. Habe es im style.css definiert und im index.html eingefügt und es geht alles. Mit Text funktioniert es wunderbar. Aber wenn ich nun den <nav> Bereich (also da, wo das Menü ist) dort einfüge sieht es komisch aus:
    [​IMG]
    Und es geht nicht anders. Habe versucht, die Höhe zu ändern, das padding etc. Ich bekomms nicht hin :(



    Beim meinem ursprünglichen Code mit der Tabelle als Menü geht es komischerweise perfekt, ohne Probleme:
    [​IMG]

    Was kann ich da machen? Hier die beiden Dateien (so aufgebaut wie von vincitore geschrieben, nur mit ner Animation für die DIVs und halt dem h1 Element.

    index.html
    Code (Text):
    1.  
    2. <!DOCTYPE html>
    3. <html lang="de">
    4. <head>
    5.     <meta charset="utf-8">
    6.     <title>[...]</title>
    7.     <link rel="stylesheet" type="text/css" href="style.css" />
    8. </head>
    9. <body>
    10.  
    11.    
    12.  
    13. <section id="container">
    14.  
    15.         <div id="News">
    16.        <h1>
    17.         <nav>
    18.         <ul id="navigation">
    19.             <li><a href="#News">News</a></li>
    20.             <li><a href="#Trainingszeiten">Trainingszeiten</a></li>
    21.             <li><a href="#Team">Team</a></li>
    22.             <li><a href="#Bilder">Bilder</a></li>
    23.             <li><a href="#Termine">Termine</a></li>
    24.         </ul>
    25. </nav><span class="dreieck"></span><span class="dreieck2"></span>
    26.       </h1>
    27.         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ac tempus quam. Quisque dictum posuere arcu. In suscipit accumsan cursus. Ut est nibh, dapibus a sodales nec, tristique a velit. Ut condimentum, quam vel semper sagittis, urna massa ultrices lectus, eu sollicitudin arcu sapien ut lectus. Donec sollicitudin, erat lobortis dictum fermentum, nulla purus lobortis risus, quis sodales purus erat vel nisi. Mauris auctor, augue in sodales convallis, justo metus sodales lorem, at iaculis tellus urna vitae mauris. Integer luctus eleifend suscipit. Suspendisse sagittis justo et mi venenatis ultricies. Nunc lacinia quam vel erat pellentesque bibendum.
    28. </p><p>
    29. Ut a sapien ac sem faucibus euismod tempor eget nulla. Vivamus nulla est, accumsan sed tristique et, scelerisque eu augue. In hac habitasse platea dictumst. Vivamus feugiat interdum nulla sit amet pharetra. Suspendisse convallis tempus leo ac gravida. Duis tristique, lectus eu adipiscing egestas, nulla neque auctor nibh, sodales elementum neque arcu at lacus. Mauris ultrices pretium enim vitae fringilla. Nulla at diam neque.
    30. </p><p>
    31. Phasellus condimentum ante sed massa malesuada eu iaculis sem ornare. Ut tempus velit ac ante ullamcorper ultricies. Nam mauris libero, malesuada aliquam tincidunt a, sollicitudin ac diam. Nunc interdum porttitor nunc sit amet venenatis. Quisque luctus faucibus placerat. Nullam iaculis lacus ac elit consectetur pretium. Pellentesque laoreet, mi eget luctus vestibulum, risus mi commodo ante, at feugiat metus libero vel est. Nunc non justo est. Nulla venenatis porta ultrices. In lacinia venenatis massa, at tincidunt orci consectetur laoreet. Sed fermentum felis eget dui facilisis nec hendrerit ipsum consectetur. Suspendisse potenti. Nulla commodo, velit ac cursus commodo, elit neque tincidunt urna, eget mollis nunc tellus vel quam.
    32. </p><p>
    33. Cras sem turpis, aliquet eu condimentum ac, pharetra ac nunc. Sed aliquam tristique lacinia. Vestibulum quis sem odio. Aenean ac mi eget metus pharetra semper et egestas arcu. Nulla a dui id erat viverra bibendum vitae in risus. Proin ac rutrum diam. Mauris dolor massa, ullamcorper at vehicula sed, sodales ac nunc. Duis quis sem tortor. Pellentesque accumsan lectus id quam molestie facilisis. Praesent eleifend nibh aliquam nibh imperdiet vel interdum ligula varius. Donec eu risus eget nisl viverra faucibus non vitae nunc. Vivamus convallis nisl in nibh sodales eget pharetra risus feugiat. Aliquam vulputate arcu faucibus dolor ullamcorper pellentesque. Curabitur scelerisque massa at ligula consequat commodo. Fusce ligula lorem, dignissim eu blandit sit amet, ultrices quis nisi. Pellentesque quis turpis nulla.
    34. </p><p>
    35. Phasellus ante nunc, euismod et porta at, aliquam quis nisl. Donec eget libero convallis elit iaculis tristique. Aliquam erat volutpat. Suspendisse urna odio, facilisis ac aliquet nec, egestas in nulla. Suspendisse sed lorem dui, vitae laoreet risus. Mauris volutpat tristique laoreet. Morbi eleifend sem vitae lectus placerat bibendum. Curabitur gravida sollicitudin purus quis placerat. Vestibulum viverra, nisl sit amet dignissim porttitor, nisi enim aliquam leo, ac volutpat nulla arcu sed leo. Mauris sit amet bibendum libero. Duis volutpat augue in lacus bibendum eleifend ultrices risus laoreet. Aenean nisi tortor, convallis volutpat pretium at, aliquam et urna. Morbi posuere, dui non pretium semper, tortor nunc mattis ligula, vel venenatis velit tortor in elit. Nam quis rhoncus mauris. </p>
    36.         </div>
    37.         <div id="Trainingszeiten">2</div>
    38.         <div id="Team">3</div>
    39.         <div id="Bilder">4</div>
    40.         <div id="Termine">5</div>
    41.     </section>
    42. </body>
    43. </html>
    44.  
    style.css
    Code (Text):
    1.  
    2. @charset "utf-8";
    3. /* CSS Document */
    4.  
    5.  
    6. nav {
    7.     margin: auto;
    8.     width:960px;
    9. }
    10.  
    11. #navigation { /*Leiste mit aberundeten Ecken*/
    12.     list-style: none; /*entfernen des Listenaussehens*/
    13.     /*Ecken und Schatten*/
    14. -webkit-border-top-left-radius: 2px;
    15. -webkit-border-top-right-radius: 2px;
    16. -moz-border-radius-topleft: 2px;
    17. -moz-border-radius-topright: 2px;
    18. border-top-left-radius: 2px;
    19. border-top-right-radius: 2px;
    20.     -webkit-box-shadow: 0 0 5px #666, inset 0 0 5px #ddd;
    21.        -moz-box-shadow: 0 0 5px #666, inset 0 0 5px #ddd;
    22.             box-shadow: 0 0 5px #666, inset 0 0 5px #ddd;
    23.     /*Hintergrund*/
    24.     background: #1e5799; /* Fallback */
    25.     background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */
    26.     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
    27.     background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
    28.     background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Opera 11.10+ */
    29.     background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* IE10+ */
    30.     background: linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */
    31.     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
    32. }
    33.  
    34. #navigation li{/*Navigationselemente (einzeilige Liste)*/
    35.     padding: 5px 10px 5px 10px;
    36.     display: inline-block;
    37.     height: 30px;
    38.     font-size: 28px;
    39.     font-weight: bold;
    40.     text-shadow: 0 0 6px black;
    41. }
    42.  
    43. #navigation li:hover {
    44.     background: #7db9e8; /* Fallback */
    45.     background: -moz-linear-gradient(top, #7db9e8 0%, #207cca 49%, #2989d8 50%, #1e5799 100%); /* FF3.6+ */
    46.     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7db9e8), color-stop(49%,#207cca), color-stop(50%,#2989d8), color-stop(100%,#1e5799)); /* Chrome,Safari4+ */
    47.     background: -webkit-linear-gradient(top, #7db9e8 0%,#207cca 49%,#2989d8 50%,#1e5799 100%); /* Chrome10+,Safari5.1+ */
    48.     background: -o-linear-gradient(top, #7db9e8 0%,#207cca 49%,#2989d8 50%,#1e5799 100%); /* Opera 11.10+ */
    49.     background: -ms-linear-gradient(top, #7db9e8 0%,#207cca 49%,#2989d8 50%,#1e5799 100%); /* IE10+ */
    50.     background: linear-gradient(top, #7db9e8 0%,#207cca 49%,#2989d8 50%,#1e5799 100%); /* W3C */
    51.     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7db9e8', endColorstr='#1e5799',GradientType=0 ); /* IE6-9 */
    52. }
    53.  
    54.  
    55. nav a {
    56.     display:block;
    57.     text-decoration:none;
    58.     color: white;
    59. }
    60.  
    61. #container {
    62.     margin: auto;
    63.     width:960px;
    64.     margin-top: 15px;
    65.     background-color: #ccc;
    66.     -webkit-border-radius: 6px;
    67.        -moz-border-radius: 6px;
    68.             border-radius: 6px;
    69.     -webkit-box-shadow: 0 0 5px #666, inset 0 0 40px #ddd;
    70.        -moz-box-shadow: 0 0 5px #666, inset 0 0 40px #ddd;
    71.             box-shadow: 0 0 5px #666, inset 0 0 40px #ddd;
    72.     border-top: 10px solid black;
    73. }
    74.  
    75. #container div {
    76.     margin: auto;
    77.     border: 1px solid black;
    78.     width:960px;
    79.     position:absolute;
    80.     opacity: 0;
    81.     -moz-transition: opacity .5s linear;
    82.     -o-transition: opacity .5s linear;
    83.     transition: opacity .5s linear;
    84.     -webkit-transition: opacity .5s linear;
    85. }
    86.  
    87. #container div:target {
    88.     opacity: 1;
    89. }
    90.  
    91.  
    92.     h1 {  
    93.          background: #e3e3e3;  
    94.          background: -moz-linear-gradient(top, #e3e3e3, #c8c8c8);  
    95.          background: -o-linear-gradient(top, #e3e3e3, #c8c8c8);  
    96.          background: -webkit-gradient(linear, left top, left bottom, from(#e3e3e3), to(#c8c8c8));  
    97.          padding: 10px 20px;  
    98.          margin-left: -21px;  
    99.          margin-top: -5px;  
    100.          position: relative;  
    101.          width: 962px;  
    102.          -moz-box-shadow: 1px 1px 3px #292929;  
    103.          -webkit-box-shadow: 1px 1px 3px #292929;  
    104.          box-shadow: 1px 1px 3px #292929;  
    105.          color: #454545;  
    106.          text-shadow: 0 1px 0 white;  
    107.     -webkit-border-top-left-radius: 6px;
    108.     -webkit-border-top-right-radius: 6px;
    109.     -moz-border-radius-topleft: 6px;
    110.     -moz-border-radius-topright: 6px;
    111.     border-top-left-radius: 6px;
    112.     border-top-right-radius: 6px;
    113.     }  
    114.      
    115.     .dreieck {  
    116.          width: 0; height: 0;
    117.          top: 104%;  
    118.          line-height: 0;  
    119.          border-top: 10px solid #c8c8c8;  
    120.          border-left: 20px solid transparent;
    121.          position: absolute;
    122.          left: 0;  
    123.            
    124.     }  
    125.     .dreieck2 {  
    126.           width: 0; height: 0;
    127.          top: 104%;  
    128.          line-height: 0;  
    129.          border-top: 10px solid #c8c8c8;  
    130.          border-right: 20px solid transparent;
    131.          position: absolute;
    132.          right: 0;  
    133.            
    134.     }  
    135.  
    PS: Bevor jemand fragt: Ich weiß, dass wenn man auf etwas anderes als News klickt, das Menü verschwindet. Ich würd das dann in jedem div einbauen, dann geht das wieder :) Ne andere Methode fällt mir nicht ein

    Schon mal danke für eure Hilfe

     
    Zuletzt bearbeitet: 01.04.2012
    #11      
  12. vincitore

    vincitore Aktives Mitglied

    Dabei seit:
    22.01.2005
    Beiträge:
    616
    Geschlecht:
    männlich
    Ort:
    Darmstadt
    Software:
    Adobe CC, Coda 2, Cinema 4D R13 Student
    Kameratyp:
    Canon EOS 5D Mark III
    Bei Klick ins Menü soll sich der Inhalt ändern
    AW: Bei Klick ins Menü soll sich der Inhalt ändern

    Also auf die schnelle haette ich gesagt, margin-Top:0; und margin-bottom: 0; bei dem nav-Tag

    Falls das nicht hilft, gucke ich es mir an sobald ich aus dem Zug raus bin.

     
    #12      
  13. d3mueller

    d3mueller PC-Freak :D

    Dabei seit:
    22.03.2012
    Beiträge:
    297
    Geschlecht:
    männlich
    Ort:
    Deutschland
    Software:
    Adobe Collection, GIMP
    Bei Klick ins Menü soll sich der Inhalt ändern
    AW: Bei Klick ins Menü soll sich der Inhalt ändern

    Hi,
    Ne hilft leider nichts.

    thx, dass dus dir nochmal anschaust :daumenhoch:

     
    Zuletzt bearbeitet: 01.04.2012
    #13      
  14. vincitore

    vincitore Aktives Mitglied

    Dabei seit:
    22.01.2005
    Beiträge:
    616
    Geschlecht:
    männlich
    Ort:
    Darmstadt
    Software:
    Adobe CC, Coda 2, Cinema 4D R13 Student
    Kameratyp:
    Canon EOS 5D Mark III
    Bei Klick ins Menü soll sich der Inhalt ändern
    AW: Bei Klick ins Menü soll sich der Inhalt ändern

    gib dem #navigation margin:0; dann geht's

    http://www.andrekind.de/d3mueller/test.html#News

    Edit: Warum nimmst du eigentlich das Menü mit in die divs? mach es lieber so wie bei mir im Link

     
    Zuletzt bearbeitet: 01.04.2012
    #14      
  15. d3mueller

    d3mueller PC-Freak :D

    Dabei seit:
    22.03.2012
    Beiträge:
    297
    Geschlecht:
    männlich
    Ort:
    Deutschland
    Software:
    Adobe Collection, GIMP
    Bei Klick ins Menü soll sich der Inhalt ändern
    AW: Bei Klick ins Menü soll sich der Inhalt ändern

    Cool es geht jetzt.

    Ja, so geht das auch^^. Ist glaub besser. Wusste nur nicht wie.

    danke :daumenhoch:

    EDIT:
    Jetzt halt noch 2 Sachen:
    1. Wie oben schon gesagt, kann man einen Standard-Div haben, der am Anfang eingeblendet ist?

    2. Kann man das so machen, dass der Browser nicht immer zu dem Menü Div dann springt? Weil durch das href="#news" denkt er ja, er soll zum news div scrollen. Geht das überhaupt? Habe schon versucht, das href durch name zu erstetzen, aber das ging dann gar nicht

     
    Zuletzt bearbeitet: 01.04.2012
    #15      
Drupal Programmierung