:: Buchempfehlung ::

langwebdesign · #1 23.07.2006, 18:02:17

Hallo zusammen,

ich würder gerne meine Navigation mit einer Liste erstellen und mit CSS formatieren.

Hab aber noch nicht soviel mit CSS gemacht will aber nicht mehr mit Tabellen an das Problem ran.

so sollte das dann mal ausschauen

Hier mein Code, CSS kommt später noch in extra Datei:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">

<head>
<style type="text/css">

li.off1 {
   list-style-position: inside;
   width: 200px;
   height: 25px;
   border-width: 1px;
   border-style: solid;
   border-color: #e1819c;
   font-family: Verdana, Helvetica, sans-serif;
   color: #ffffff;
   text-align: left;
   font-size: 8pt;
   list-style-image: url(MainNavDot800000.jpg);
   background-color: #800000;
}

li.on1 { 
   list-style-position: inside;
   width: 200px;
   height: 25px;
   border-width: 1px;
   border-style: solid;
   border-color: #e1819c;
   font-family: Verdana, Helvetica, sans-serif;
   color: #ffffff;
   text-align: left;
   font-size: 8pt;
   list-style-image: url(MainNavDotBA0033.jpg);
   background-color: #BA0033;
}

li.off2 {
   list-style-position: inside;
   width: 100%;
   height: 25px;
   border-width: 1px;
   border-style: solid;
   border-color: #e1819c;
   font-family: Verdana, Helvetica, sans-serif;
   color: #ffffff;
   text-align: left;
   font-size: 8pt;
   list-style-type: none;
   background-color: #800000;
}

li.on2 { 
   list-style-position: inside;
   width: 100%;
   height: 25px;
   border-width: 1px;
   border-style: solid;
   border-color: #e1819c;
   font-family: Verdana, Helvetica, sans-serif;
   color: #ffffff;
   text-align: left;
   font-size: 8pt;
   list-style-type: none;
   background-color: #BA0033;
}

</style>
</head>

<body bgcolor="#800000">

<ul>
	<li class="off1">Startseite</li>
	<li class="off1">Aktuelles</li>
	<li class="on1">Verein</li>
	<ul>
	<li class="on2">A-Jugend</li>
	<li class="off2">AH-Manschaft</li>
        </ul>
	<li class="off1">Tabelle</li>
	<li class="off1">Kontakt</li>
	<li class="off1"><a href="nav.htm">Impressum</a></li>
</ul>

</body>

</html>

Ist das überhaupt möglich?
Was mach ich falsch?
Was sollte man beachten um in den verschiedenen Browsern ein gleiches Resultat zu erhalten?
Bis jetzt schauts im IE noch schlimmer aus als im Firefox.

Ich hoffe Ihr habt ein paar Tipps für mich.

Danke
Stephan

Andes · #2 23.07.2006, 18:26:25

Warum willst du dies unbedingt mit List-Elementen machen? Mit div-Boxen wird es wesentlich einfacher und die unterschiedlichen Browser machen dabei auch nicht solche Probleme wie die List-Elemente.
Das vorgestellte Viereck kannst du durch Background-Image erstellen und den Text mit text-indent einrücken. Dem Background musst du über background-position eine Position zuweisen und mit background-repeat verhindern, dass er wiederholt wird.

langwebdesign · #3 23.07.2006, 18:38:45

Aber mit div bau ich ja blos die Tabellen nach und das sollte man ja eigentlich sein lassen, oder?

Mein Weg glaub ich ist schon ok aber die Umsetzung ist halt so ein Ding.

So schauts im IE aus
Und so schauts im Firefox

Wobeis im Firefox schon recht gut ausschaut nur die Zweite Ebene zieht er über die gesamte Fensterbreite. Das Müsste man aber hinbekommen wenn man im <ul> die Breite defieniert.

Bringt mich aber leider nicht weiter.
Trotzdem Danke.

Andes · #4 23.07.2006, 18:50:14

Was für eine Tabelle und was soll man sein lassen?
Bei einer Navigation würde ich eine div-Box als Container erstellen, den ich dann beliebig positionieren kann ohne dass sich dabei die einzelnen Links ändern.
In den kommen dann halt die Links.

Das könnte so aussehen. Bei dem Beispiel sind die Untermenüs nicht berücksichtigt, aber diese kann man auf die gleiche Weise definieren.

Code:


a.test {
	display:block;
	width:200px;
	height:20px;
	background-image:url(bild.jpg); <!-- ca. 12 x 12 Pixel //-->
	background-position:5px 1px;
	background-repeat:no-repeat;
	font-size:10pt;
	text-decoration:none;
}
a.test:link { color:#0A0D92; }
a.test:visited { color:#0A0D92; }
a.test:hover { 
	color:red; 
	background-image:url(bild_c.jpg); <!-- ca. 12 x 12 Pixel //-->
	background-position:5px 1px;
	background-repeat:no-repeat;
}
a.test:active { color:#0A0D92; }
div.test { width:200px; background-color:#FCE8C7; text-indent:25px; border-bottom:1px solid #990000; }

.rahmen { width:200px; border:1px solid #990000; }



<div class="rahmen">
<div class="test"><a class="test" href="#">Test 1</a></div>
<div class="test"><a class="test" href="#">Test 2</a></div>
</div>

langwebdesign · #5 23.07.2006, 19:03:25

Hi

ich hab damit gemeint das ich eine Tabellenstruktur mit div containern nachbaue. Hab mal wo gelesen das man beim umsteigen von Tabellen auf CSS Design aufpassen sollte die Tabellenstruktur nicht mit div Containern nachzubauen.

Aber dein Ansatz ist doch nicht schlecht.
Werd mir das dann mal genauer anschauen.

Danke
Ciao

:: Buchempfehlung ::

:: Anbieterverzeichnis ::

Globale Branchen

Informieren Sie sich über ausgewählte Unternehmen im Anbieterverzeichnis von SELFPHP

:: Newsletter ::

Abonnieren Sie hier den kostenlosen SELFPHP Newsletter!