Ergebnis 1 bis 6 von 6
  1. 25-07-2008, 14:05 #1
    pockedesign
    pockedesign ist offline Jungspund
    registriert
    12-06-2008
    Ort
    Bregenz (AT)
    Beiträge
    11

    ..:: Liste oder Tabelle ::..

    Hallo!

    Wie löst Ihr solche Navigationen?

    Ich hab die nun über eine Liste gelöst. Habe allerdings Probleme im IE 6. :sad:
    Ich denke eine Liste ist für diese Navigation schon dir richtige Lösung, oder?

    Ich bin mir nicht sicher ob ich die Formatierung im CSS richtig angehe. Vielleicht könnt Ihr bei Gelegenheit drauf schauen und mir nur kurz bescheid geben ob die Richtung so passt.

    Vielen Dank!

    PS: Alle Files dazu als .zip angehängt.

    PHP-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">
    <    head>
    <    meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <    title>Unbenanntes Dokument</title>
    <    link href="scripts/style.css" rel="stylesheet" type="text/css" />


    </    head>

    <    body>

    <    div id="container" style="margin: 20px; width: 582px;">

    <    div id="product_nav">

    <    div id="product_nav_list"><h1>Produkt 1</h1>
        <    ul>
            <    li><a href="#">Artikelbezeichnung 1</a></li>
            <    li><a href="#">Artikelbezeichnung 1</a></li>
            <    li><a href="#">Artikelbezeichnung 1</a></li>
            <    li><a href="#">Artikelbezeichnung 1</a></li>
            <    li><a href="#">Artikelbezeichnung 1</a></li>
        </    ul>
    </    div> <!-- product_nav_list -->


    <    div id="product_nav_list"><h1>Produkt 2</h1>
        <    ul>
            <    li><a href="#">Artikelbezeichnung 1</a></li>
        </    ul>
    </    div> <!-- product_nav_list -->


    <    div id="product_nav_list" style="border: none;"><h1>Produkt 2</h1>
        <    ul>
            <    li><a href="#">Artikelbezeichnung 1</a></li>
        </    ul>
    </    div> <!-- product_nav_list -->    
    </    div> <!-- product_nav -->

    </    div> <!-- container -->


    </    body>
    </    html> 

    PHP-Code:
    /* CSS Document */

    * {
    margin: 0;
    padding: 0;
    }


    #product_nav {
            background-color: #b8c3d4;
            height: 15px;
    }

    #product_nav_list {
            float: left; 
            margin-left: 10px;
            padding: 0;
            border-right: 1px solid #ffffff;
    }

    #product_nav_list h1 {
            font: bold 12px Arial, Helvetica, sans-serif; 
            margin: 0;
    }

    #product_nav_list ul {
            list-style-type: none; 
            margin: 0;
            padding-top: 5px;
            padding-right: 10px;
    }

    #product_nav_list ul li a {
            display: block;
            font: normal 12px Arial, Helvetica, sans-serif;
            text-decoration: none;
            color: #55687b;
    }

    #product_nav_list ul li a:hover {
            background-color: #b8c3d4;
            color: #000000;
    } 
    Angehängte Grafiken Angehängte Grafiken
    Angehängte Dateien Angehängte Dateien
    Geändert von Albu (25-07-2008 um 20:56 Uhr) Grund: Quellcode aus Zip angehängt.
    Zitieren Zitieren
  2. 25-07-2008, 19:07 #2
    Avatar von anna55
    anna55
    anna55 ist offline Moderator
    registriert
    06-02-2006
    Ort
    Taunusstein
    Beiträge
    3.430

    AW: ..:: Liste oder Tabelle ::..

    Mir geht es so wie jeko - ich kann keine zip-Dateien öffnen (und andere hier wohl auch nicht) und poste deshalb gleich mal Albus Kommentar dazu:
    Zitat Zitat von Albu Beitrag anzeigen
    Das ist ja fast schäubloid. An Deiner Stelle würde ich mal überlegen das Betriebssystem zu wechseln.

    Dr. Albu Freud
    Allerdings sage ich etwas zu Deinem Problem, ohne Deinen Code zu kennen: Listen sind wohl das Mittel der Wahl. Bei Dropdowns mit CSS zickt der IE6 gerne. Dazu gibt es z.B. einen interessanten Workaround auf den Seiten von Stu Nicholls. Schau mal hier in den Quelltext. Sieh Dir auch andere Menüs auf seiner Seite mal an. Wie Du den Code einsetzen kannst (Rechte), steht jeweils dabei.


    .:Taunusstein - Nachrichten und Kommentare


    "Ich bin doch lieber jeden Tag glücklich als im Recht."
    (Per Anhalter durch die Galaxis)
    Zitieren Zitieren
  3. 25-07-2008, 19:14 #3
    Avatar von dkdenz
    dkdenz
    dkdenz ist offline Foren-Gott
    registriert
    13-04-2004
    Ort
    Lübeck
    Beiträge
    12.050

    AW: ..:: Liste oder Tabelle ::..

    Zitat Zitat von anna55 Beitrag anzeigen
    [...] ich kann keine zip-Dateien öffnen.
    Und ich will keine öffnen!
    Weiß ich, was da drinnen ist (mich betrifft's ja Dank Linux nicht so sehr, aber Windoofs-User schon)?
    Und außerdem ist es, meiner Ansicht nach, etwas viel verlangt.
    Du musst den Helfenden das Helfen schon so einfach wie möglich machen, ansonsten kannst Du u.U. ewig warten.

    Poste Deine Quellcode unter Beachtung dieser Empfehlung: http://forum.jswelt.de/css-x-html/26...tellungen.html (Bitte lesen! Vereinfachung von Hilfestellungen.)
    Dirk Klar - Webdesign Lübeck
    Twitter
    G+
    Zitieren Zitieren
  4. 25-07-2008, 20:48 #4
    pockedesign
    pockedesign ist offline Jungspund
    registriert
    12-06-2008
    Ort
    Bregenz (AT)
    Beiträge
    11

    AW: ..:: Liste oder Tabelle ::..

    Okay, hab schon kapiert.

    Hier der Quellcode...


    PHP-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">
    <    head>
    <    title>Dokumenttitel</title>
    <    style type="text/css">
    /*<![CDATA[*/
    * {
    margin: 0;
    padding: 0;
    }


    #product_nav {
            background-color: #b8c3d4;
            height: 15px;
    }

    #product_nav_list {
            float: left; 
            margin-left: 10px;
            padding: 0;
            border-right: 1px solid #ffffff;
    }

    #product_nav_list h1 {
            font: bold 12px Arial, Helvetica, sans-serif; 
            margin: 0;
    }

    #product_nav_list ul {
            list-style-type: none; 
            margin: 0;
            padding-top: 5px;
            padding-right: 10px;
    }

    #product_nav_list ul li a {
            display: block;
            font: normal 12px Arial, Helvetica, sans-serif;
            text-decoration: none;
            color: #55687b;
    }

    #product_nav_list ul li a:hover {
            background-color: #b8c3d4;
            color: #000000;
    }   
    /*]]>*/
    </style>
    </    head>
    <    body>
    <    div id="container" style="margin: 20px; width: 582px;">

    <    div id="product_nav">

    <    div id="product_nav_list"><h1>Produkt 1</h1>
        <    ul>
            <    li><a href="#">Artikelbezeichnung 1</a></li>
            <    li><a href="#">Artikelbezeichnung 1</a></li>
            <    li><a href="#">Artikelbezeichnung 1</a></li>
            <    li><a href="#">Artikelbezeichnung 1</a></li>
            <    li><a href="#">Artikelbezeichnung 1</a></li>
        </    ul>
    </    div> <!-- product_nav_list -->


    <    div id="product_nav_list"><h1>Produkt 2</h1>
        <    ul>
            <    li><a href="#">Artikelbezeichnung 1</a></li>
        </    ul>
    </    div> <!-- product_nav_list -->


    <    div id="product_nav_list" style="border: none;"><h1>Produkt 2</h1>
        <    ul>
            <    li><a href="#">Artikelbezeichnung 1</a></li>
        </    ul>
    </    div> <!-- product_nav_list -->    
    </    div> <!-- product_nav -->

    </    div> <!-- container -->
    </    body>
    </    html> 
    Geändert von dkdenz (26-07-2008 um 08:25 Uhr) Grund: Code-Tags hinzugefügt...
    Zitieren Zitieren
  5. 25-07-2008, 20:57 #5
    Avatar von Albu
    Albu
    Albu ist offline Foren-Gott
    registriert
    04-07-2001
    Beiträge
    13.501

    AW: ..:: Liste oder Tabelle ::..

    Zitat Zitat von pockedesign Beitrag anzeigen
    Okay, hab schon kapiert.
    Jetzt wo ich grad mal mutig war und Deine ZIP geöffnet habe, um Deinen Quellcode in Deinen Post zu pappen.
    1. Get people to play Space Taxi
    2. Sell real estates on neptun
    3. Profit!

    IE is not a browser, it is a scream.

    Outside of a dog, a book is man's best friend. Inside of a dog, it's too dark to read.
    Zitieren Zitieren
  6. 25-07-2008, 22:19 #6
    Avatar von anna55
    anna55
    anna55 ist offline Moderator
    registriert
    06-02-2006
    Ort
    Taunusstein
    Beiträge
    3.430

    AW: ..:: Liste oder Tabelle ::..

    Ich weiß Deine Tapferkeit zu schätzen, Albu.

    Zum Markup: Eine id darfst Du nur einmal vergeben.

    Edit: h1 würde ich nicht im Menü einsetzen. Hab das Ganze mal ein wenig geändert.

    PHP-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">
    <    head>
    <    title>Dokumenttitel</title>
    <    style type="text/css">
    /*<![CDATA[*/
    body {
    margin: 0;
    padding: 0;
    }

    #product_nav_list ul {
    list-style-type: none;
    margin: 0;
    padding-top: 5px;
    }

    #product_nav_list ul li{
    float:left;
    background-color: #b8c3d4;
    height: 15px;
    font: bold 12px Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    border-right: 10px solid #ffffff;
    }

    #product_nav_list ul li ul,
    #product_nav_list ul li ul li {
    display:block;
    width: 120px;
    padding:3px 0 0;
    margin:1px 0 0;
    background-color: #fff;
    }

    #product_nav_list ul li a {
    display: block;
    width:120px;
    font: normal 12px Arial, Helvetica, sans-serif;
    text-decoration: none;
    color: #55687b;
    }

    #product_nav_list ul li a:hover {
    background-color: #b8c3d4;
    color: #000000;
    }

    #container {
    margin: 20px;
    width: 582px;
    }
    /*]]>*/
    </style>
    </    head>
    <    body>
    <    div id="container">
    <    div id="product_nav_list">
        <    ul>
            <    li>Produkt 1
                    <ul>
                    <    li><a href="#">Artikelbezeichnung 1</a></li>
                    <    li><a href="#">Artikelbezeichnung 1</a></li>
                    <    li><a href="#">Artikelbezeichnung 1</a></li>
                    <    li><a href="#">Artikelbezeichnung 1</a></li>
                    <    li><a href="#">Artikelbezeichnung 1</a></li>
                </    ul>
            </    li>

            <    li>Produkt 2
                    <ul>
                    <    li><a href="#">Artikelbezeichnung 1</a></li>
                </    ul>
            </    li>

            <    li>Produkt 3
                    <ul>
                    <    li><a href="#">Artikelbezeichnung 1</a></li>
                </    ul>
            </    li>
        </    ul>
    </    div> <!-- product_nav_list -->
    </    div> <!-- container -->
    </    body>
    </    html> 
    Geändert von anna55 (26-07-2008 um 02:22 Uhr) Grund: Anzahl divs reduziert


    .:Taunusstein - Nachrichten und Kommentare


    "Ich bin doch lieber jeden Tag glücklich als im Recht."
    (Per Anhalter durch die Galaxis)
    Zitieren Zitieren
« Vorheriges Thema | Nächstes Thema »

Ähnliche Themen

  1. tabelle über tabelle legen?
    Von Gamer20 im Forum CSS und (X)HTML
    Antworten: 12
    Letzter Beitrag: 02-01-2008, 15:06
  2. Anzahl Zeilen von Tabellen aus Tabelle
    Von Conny80 im Forum Serverseitige Programmierung
    Antworten: 31
    Letzter Beitrag: 04-03-2007, 06:24
  3. Mit Javascript die Grösse einer Tabelle dynamisch anpassen
    Von derber im Forum JavaScript
    Antworten: 1
    Letzter Beitrag: 29-11-2006, 22:38
  4. Tabelle um einen Eingabebereich erweitern
    Von anfaenger im Forum JavaScript
    Antworten: 3
    Letzter Beitrag: 15-09-2004, 14:23
  5. Scrollbare Tabelle
    Von ocelin im Forum Allgemeines
    Antworten: 1
    Letzter Beitrag: 22-01-2002, 11:53

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •  

Foren-Regeln