Spezielle Navigation (Html / Css)

Dieses Thema im Forum "Webmaster Hilfe / Programmierer Forum" wurde erstellt von DJ Zebo, 29.12.2012.

  1. #1 DJ Zebo, 29.12.2012
    DJ Zebo

    DJ Zebo Erfahrener Benutzer

    Dabei seit:
    13.07.2010
    Beiträge:
    268
    Zustimmungen:
    0
    Ort:
    Graz
    Wunderschönen Guten Abend.

    Ist es möglich das Menü von dieser Seite Musicbase.fm - Clubsection ohne JavaScript, also nur mit HTML & CSS, zu machen?


    MfG Zebo
     
  2. AdMan

    schau mal hier: Windows-Wartungs-Tool. Viele Probleme lassen sich damit einfach beheben. Oftmals ist der PC dann auch schneller!
    Registrieren bzw. einloggen, um diese und auch andere Anzeigen zu deaktivieren.
  3. #2 DJ Zebo, 02.01.2013
    DJ Zebo

    DJ Zebo Erfahrener Benutzer

    Dabei seit:
    13.07.2010
    Beiträge:
    268
    Zustimmungen:
    0
    Ort:
    Graz
    Ich hab es jetzt fast geschafft. Der Code sieht momentan so aus:
    HTML:
    <html>
    <head>
        <title>Titel</title>
        <style>
            body{
                margin: 0; padding: 0;
            }
    
            #layer{
                width: 75%;
                min-width: 800px;
                min-height: 200px;
                height: auto;
                background: #D5D5D5;
                margin: auto;
                display: block;
            }
    
            .eins{
                background: #000000;
                width: 198px;
                height: 40px;
                display: block;
                float: left;
                border-right: 2px gray solid;
            }
    
            .zwei{
                background: #FF0000;
                width: 75%;
                min-width: 800px;
                height: 40px;
                display: none;
                position: absolute;
                margin: auto;
                top: 40px;
                left: 12.5%;
            }
    
            .eins:hover .zwei{
                display: block;
            }
        </style>
    </head>
    
    <body>
    <div id="layer">
        <div class="eins">
            <div class="zwei"></div>
        </div>
        <div class="eins">
            <div class="zwei"></div>
        </div>
        <div class="eins">
            <div class="zwei"></div>
        </div>
        <div class="eins">
            <div class="zwei"></div>
        </div>
    
    </div>
    </body>
    </html>
    Wenn man das Fenster jetzt allerdings verkleinert und der 'layer' seine min. 800px erreicht wir die aufgeklappte Navigation weiter eingerückt.
    Wisst ihr vielleicht wie ich die Navigation immer auf die selbe Stelle bekomme?
     
  4. #3 DJ Zebo, 10.01.2013
    DJ Zebo

    DJ Zebo Erfahrener Benutzer

    Dabei seit:
    13.07.2010
    Beiträge:
    268
    Zustimmungen:
    0
    Ort:
    Graz
    Kann mir keiner weiterhelfen oder hab ich mein "Problem" falsch beschrieben?
     
  5. #4 Blaxxun, 10.01.2013
    Blaxxun

    Blaxxun aka Noisy

    Dabei seit:
    06.11.2005
    Beiträge:
    6.171
    Zustimmungen:
    0
    .eins kannst du position: relative; geben und .zwei dann mit position: absolute; zum Elternelement (also .eins) ausrichten. Wäre mal ein Versuch wert.
     
  6. #5 DJ Zebo, 14.01.2013
    DJ Zebo

    DJ Zebo Erfahrener Benutzer

    Dabei seit:
    13.07.2010
    Beiträge:
    268
    Zustimmungen:
    0
    Ort:
    Graz
    Ich hab jetzt alles mögliche durch probiert und getestet.
    Leider bekomme ich das Menü einfach nicht an den linken Rand vom layer.
    Gibt es irgendwas damit das Element die Größe vom übergeordneten Element bezieht und nicht die der Fenstergröße?
    Ich hatte vor einiger Zeit das Problem dass ich die Fenstergröße wollte aber nur die maximale Größe von einem Element ein paar Ebenen über dem Element bekommen habe.. Das Template finde ich leider nicht mehr und ich habe keinen Plan was damals "schief" lief.
     
  7. #6 Blaxxun, 14.01.2013
    Blaxxun

    Blaxxun aka Noisy

    Dabei seit:
    06.11.2005
    Beiträge:
    6.171
    Zustimmungen:
    0
    Gerne nochmal: Setz das Elternelement auf relative. Kindelemente mit position: absolute; orientieren sich dann an dem Elternelement, das relative ist.

    Ehrlich gesagt bin ich aber zu faul den Codeblock zu kopieren abzuspeichern und anzusehen. Kannst du das Dokument einmal richtig veröffentlich?
     
  8. #7 DJ Zebo, 14.01.2013
    DJ Zebo

    DJ Zebo Erfahrener Benutzer

    Dabei seit:
    13.07.2010
    Beiträge:
    268
    Zustimmungen:
    0
    Ort:
    Graz
    Ich habe das genau so probiert wie du es beschrieben hast. Damit hat es nicht funktioniert.
    Hab jetzt auch eine Lösung gefunden. Die ganze Navigation muss eine Ebene tiefer.

    Falls es jemanden interessiert:
    HTML:
    <html>
    <head>
        <title>Titel</title>
        <style>
            body{
                margin: 0; padding: 0;
            }
    
            #layer{
                width: 75%;
                min-width: 801px;
                min-height: 200px;
                height: auto;
                background: #D5D5D5;
                margin: auto;
                display: block;
            }
    
            #menu{
                width: 100%;
                min-width: 800px;
                height: 40px;
                background: #E4E4E4;
                position: relative;
            }
    
            a.eins{
                background: #000000;
                width: 198px;
                height: 40px;
                display: block;
                float: left;
                border-right: 2px gray solid;
            }
    
            .zwei{
                background: #FF0000;
                width: 100%;
                height: 40px;
                display: none;
                position: absolute;
                margin-top: 40px;
                left: 0px;
            }
    
            a.eins:hover .zwei{
                display: block;
                background: #FF0000;
                width: 100%;
                height: 40px;
                position: absolute;
                margin-top: 40px;
                left: 0px;
            }
        </style>
    </head>
    
    <body>
    <div id="layer">
        <div id="menu">
            <a href="" class="eins">
                <div class="zwei"></div>
            </a>
            <a href="" class="eins">
                <div class="zwei"></div>
            </a>
            <a href="" class="eins">
                <div class="zwei"></div>
            </a>
            <a href="" class="eins">
                <div class="zwei"></div>
            </a>
        </div>
    <br /><br /><br />
    </div>
    </body>
    </html>
    Danke für den Denkanstoß mit dem relative.

    Nur der IE macht mal wieder was er will. Die Seite wird nicht zentriert ausgerichtet und die aufgeklappte Navigation hat auch nicht die volle breite *grml*
    Und für Blaxxun noch einen Link
     
  9. AdMan

    Es ist generell erstmal empfehlenswert alle ggf. veralteten oder fehlerhaften Treiber zu scannen und auf neue zu aktualisieren. Hier kannst du einen Treiber-Scanner downloaden. Das erspart oftmals viel Ärger und hilft gegen diverse Probleme.
    Registrieren bzw. einloggen, um diese und auch andere Anzeigen zu deaktivieren.
  10. #8 Blaxxun, 14.01.2013
    Blaxxun

    Blaxxun aka Noisy

    Dabei seit:
    06.11.2005
    Beiträge:
    6.171
    Zustimmungen:
    0
    Sorry hab kein IE, kann es mir nicht angucken. Aber es muss ja auch nicht zu 100% identisch im IE aussehen, nur funktionieren sollte es.
    Ich bin mir nicht sicher wie es inzwischen ist, aber zumindest früher konnte der IE mit min-width nichts anfangen, das könnte der Grund sein, warum die Zentrierung nicht funktioniert.
     
  11. Lotus

    Lotus Erfahrener Benutzer

    Dabei seit:
    17.02.2007
    Beiträge:
    2.428
    Zustimmungen:
    0
Thema:

Spezielle Navigation (Html / Css)

Die Seite wird geladen...

Spezielle Navigation (Html / Css) - Ähnliche Themen

  1. Google maps, Navigation

    Google maps, Navigation: es gibt ein praktisches Navigationsprogramm: Google maps with gps tracker. es ist kostenlos. es lässt sich leicht installieren und mit einem...
  2. Outlook 2003 druckt HTML Mails nicht richtig

    Outlook 2003 druckt HTML Mails nicht richtig: Hallo Leute, habe das Problem, das Outlook 2003 die HTML Mails nicht richtig druckt. Der Text wird gedruckt, die hinterlegten Bilder werden nur...
  3. Win Live Mail eml+html

    Win Live Mail eml+html: Hallo, bin die NEUE hier!! Frage an EUCH meine E-Mails die ich nicht löschen will, ziehe ich in einen Extra-Ordner. seit gestern kann ich diese...
  4. Spezieller "Sicherheits"-PC

    Spezieller "Sicherheits"-PC: Guten Tag, ich möchte ein PC mit dem Internet verbinden und möglichst große Sicherheit gegen Zugriff auf diesen PC erreichen. Auf dem PC läuft...
  5. zahl von html mit c++ abfangen

    zahl von html mit c++ abfangen: soo, nun bin ich auch mal wieder da... guten abend zusammen, ich hoffe ihr könnt mir wieder einmal helfen. es geht um folgendes: gibt es eine...