Ergebnis 1 bis 6 von 6
Thema: ..:: Liste oder Tabelle ::..
-
25-07-2008, 14:05 #1
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;
}
Geändert von Albu (25-07-2008 um 20:56 Uhr) Grund: Quellcode aus Zip angehängt.
-
25-07-2008, 19:07 #2
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:
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)
-
25-07-2008, 19:14 #3
AW: ..:: Liste oder Tabelle ::..
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.)
-
25-07-2008, 20:48 #4
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...
-
25-07-2008, 20:57 #5
AW: ..:: Liste oder Tabelle ::..
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.
-
25-07-2008, 22:19 #6
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)
Ähnliche Themen
-
tabelle über tabelle legen?
Von Gamer20 im Forum CSS und (X)HTMLAntworten: 12Letzter Beitrag: 02-01-2008, 15:06 -
Anzahl Zeilen von Tabellen aus Tabelle
Von Conny80 im Forum Serverseitige ProgrammierungAntworten: 31Letzter Beitrag: 04-03-2007, 06:24 -
Mit Javascript die Grösse einer Tabelle dynamisch anpassen
Von derber im Forum JavaScriptAntworten: 1Letzter Beitrag: 29-11-2006, 22:38 -
Tabelle um einen Eingabebereich erweitern
Von anfaenger im Forum JavaScriptAntworten: 3Letzter Beitrag: 15-09-2004, 14:23 -
Scrollbare Tabelle
Von ocelin im Forum AllgemeinesAntworten: 1Letzter Beitrag: 22-01-2002, 11:53
Lesezeichen