• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

..:: Liste oder Tabelle ::..

P

pockedesign

New member
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: 
<!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: 
/* 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;
}
 

Anhänge

  • layout.jpg
    layout.jpg
    81,9 KB · Aufrufe: 10
  • moz_screenshot.jpg
    moz_screenshot.jpg
    72,4 KB · Aufrufe: 7
  • ie6_screenshot.jpg
    ie6_screenshot.jpg
    70,7 KB · Aufrufe: 7
  • frage_zu_liste.zip
    1,1 KB · Aufrufe: 1
Zuletzt bearbeitet von einem Moderator:
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:
Albu schrieb:
Das ist ja fast schäubloid. An Deiner Stelle würde ich mal überlegen das Betriebssystem zu wechseln.

Dr. Albu Freud
Zum Vergrößern anklicken....

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.
 
anna55 schrieb:
[...] ich kann keine zip-Dateien öffnen.
Zum Vergrößern anklicken....

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/26808-bitte-lesen-vereinfachung-hilfestellungen.html
 
Okay, hab schon kapiert.

Hier der Quellcode...


PHP: 
<!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>
 
Zuletzt bearbeitet von einem Moderator:
Ich weiß Deine Tapferkeit zu schätzen, Albu. :icon7:

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: 
<!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>
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben