✔ Probleme bei Positionierung der horizontalen Navigation mit CSS im Div

melodei · 27. März 2005

Vielleicht hat jemand einen Tipp, ich weiß einfach nicht weiter.
Ich möchte versuchen (zur Übung), eine Seite Bauen, die
soweit wie möglich barrierefrei gestaltet ist. Nach meinen Informationen
soll möglichst auf Tabellen verzichtet werden. Bisher gelingt es mir
aber noch nicht. Meine Navigation soll horizontal verlaufen,
klarer wird es an diesem Beispiel.

http://www.klaus-j-fuchs.de/test/start1.html

(Apropo, es ist bisher nur im Internet Explorer sauber zu sehen)

Das Problem ist aber, hier habe ich es noch mit Tabelle gelöst.
Sobald ich es aber nur mit einer Ebene versuche, ohne Tabelle zu lösen ?!
die Positionierung nicht mehr.

http://www.klaus-j-fuchs.de/test/start.html

Habt ihr eine Idee, ich bin etwas ratlos.

Danke

Der CSS Quelltext:

Code:

*Linbereich fuer Hauptnavigation*/ 
 
 
 
.hola{ 
display:block; 
font-family: Verdana, Arial, Helvetica, sans-serif; 
font-size: 12px; 
text-decoration: none; 
background-color: #597288; 
padding-top:3px; 
padding-bottom:3px; 
width: 95px; 
text-align: center; 
padding-right: 0px; 
padding-left: 0px} 
 
 
a.hola:link { 
font-family: Verdana, Arial, Helvetica, sans-serif; 
font-size: 12px; 
color: #212B34; 
text-decoration: underline; 
background-color: #597288; 
 
} 
 
a.hola:visited { 
font-family: Verdana, Arial, Helvetica, sans-serif; 
font-size: 12px; 
color: #B3AD84; 
text-decoration: none; 
background-color: #597288; 
} 
 
a.hola:hover { 
font-family: Verdana, Arial, Helvetica, sans-serif; 
font-size: 12px; 
color: #576D93; 
text-decoration: none; 
background-color: #38475F; 
} 
 
a.hola:active { 
font-family: Verdana, Arial, Helvetica, sans-serif; 
font-size: 12px; 
color: #D0D5DD; 
background-color: #516282; 
	 text-decoration: none; 
} 
 
 
 
/*Linkbereich ende*/ 
 
/*Hier wird die Ebene festgelegt*/ 
 
 
 
#nav{ 
position: relative; 
visibility: visible; 
z-index: auto; 
left: 50px; 
top: 132px; 
height:20px; 
width: 795px; 
background-color: #597288; 
color: #8DA0AF; 
text-align: right; 
 
}

Trice · 27. März 2005

Versuchs mal mit

----------------------------------------
float:left oder
float:right

und beim letzten button

clear:left oder
clear:right
----------------------------------------

Ich habs zwar nicht getestet,
sollte aber funktionieren.

Gumbo · 27. März 2005

Schau dir mal folgende Seiten an:

melodei · 27. März 2005

Also der Verweis zu den Artikeln über horizontale Navigationen
mit Listen, war echt gut. Vielen Dank noch einmal. Allerdings habe ich
es aber bisher noch nicht für Netscape und Opera hinbekommen.
Bei Netscape wird in der Hauptnavigation die Hintergrundfarbe nicht voll
ausgeführt. Opera kann mit den Listen nicht umgehen alles wir auseinander-
gerissen.

Irgendwo steckt noch der Fehlerteufel, nur wo?

http://www.klaus-j-fuchs.de/test/start3.html

Code:

/*Linbereich Hauptnavigation*/
 
 
#navo ul
{
		position: absolute;
		sibility: visible;
		z-index: auto;
		padding-left: 0px;
		margin-top:161px;
		margin-left: 50px;
		background-color: #597288;
		height:12px;
		color: #D7DAE1;
		text-align: right;
		float: right;
		width: 795px;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 12px;
}
#navo ul li { display: inline; }
#navo ul li a
{
		padding: 0.2em 1em;
		background-color: #597288;
		color: #C7CCD3;
		text-decoration: none;
		float: right;
		border-right: 1px solid #C5C8D1;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 12px;
		letter-spacing: 1px;
}
#navo ul li a:hover
{
		background-color: #4F6586;
		color: #9DA2B3;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 12px;
		letter-spacing: 1px;
}
 
/*Linkbereich ende*/
 
 
Im HTML: 
 
<div id="navo">
<ul id="navlist2">
	<li ><a href="#" class="but" onclick="top.focus()" tabindex="4">Profil</a></li>
	<li><a href="#" class="but" onclick="top.focus()" tabindex="5">Projekte</a>
	</li>
	<li><a href="#" class="but" onclick="top.focus()" tabindex="6">Galerie</a></li>
	<li><a href="#" class="but" onclick="top.focus()" tabindex="7">Aktuelles</a></li>
	<li><a href="#" class="but" onclick="top.focus()" tabindex="8">Kunden</a></li>
	<li><a href="#" class="but" onclick="top.focus()" tabindex="9">Kontakt</a></li>
	<li><a href="#" class="but" onclick="top.focus()" tabindex="10">Impressum</a></li>
</ul>
</div>

Quaese · 28. März 2005

Hi,

willst du den Hintergrund der Navigation komplett füllen, solltest du #navo ul eine passende Höhe
(20 Pixel) zuweisen.

Das zerrissene im Opera entsteht durch die absolute Positionierung. Vielleicht solltest du ein
zentrales Element definieren, in dem du deine Strukturkomponenten (Header, Navigation, Inhalt)
anordnest. In diesem zentriert angeordneten Container kannst du die erforderlichen Elemente mit
float ausrichten - die absolute Positionierung würde damit entfallen.

Ich habe dein Dokument mal entsprechend überarbeitet.

HTML:

<?xml version="1.0" encoding="iso-8859-1"?>
<!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">
<title>www.tutorials.de</title>
<meta name="author" content="Quaese" />
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
</head>
<style type="text/css">
  <!--
body {
  background-color: #223344;
  margin-top: 0px;
  margin-left: 0px;
  text-align: center;
  scrollbar-base-color:#8DA0AF;
  scrollbar-3d-light-color:#8899aa;
  scrollbar-arrow-color:#8DA0AF;
  scrollbar-darkshadow-color:#112233;
  scrollbar-face-color:#5D7082;
  scrollbar-highlight-color:#000000;
  scrollbar-shadow-color:#445566;
  scrollbar-track-color:#354656;}

#mainDiv{ 
  width: 795px;
  margin: 35px auto;
  text-align: left;}

/*Linkbereich Switsch Schrift veraendern*/
#switsch ul{
  margin: 0;
  padding: 0;
  background-color: #8DA0AF;
  color: #C8C4A6;
  text-align: right;
  float: right;
  width: 209px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 9px;}

#switsch ul li { display: inline; }

#switsch ul li a{
  padding: 0.1em 1em;
  background-color: #637E98;
  color: #C8C4A6;
  text-decoration: none;
  float: right;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 9px;}

#switsch ul li a:hover{
  background-color: #369;
  color: #F2F2F4;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 9px;}

/*Linkbereich Standard*/
a:link {
  font-family:Verdana, Arial, Helvetica, sans-serif;
  font-size: 9px;
  color: #C8C4A6;
  text-decoration: none;}
a:visited {
  font-family:Verdana, Arial, Helvetica, sans-serif;
  font-size: 9px;
  color: #857E54;
  text-decoration: none;}

a:hover {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 9px;
  color: #C8C4A6;
  text-decoration: none;}

a:active {
  font-family:Verdana, Arial, Helvetica, sans-serif;
  font-size: 9px;
  color: #B58351;
  text-decoration: none;}

/*Linbereich Hauptnavigation*/
#navo ul{
  padding: 0;
  margin: 1px 0 0 0;
  background-color: #597288;
  height:20px;
  color: #D7DAE1;
  text-align: right;
  float: right;
  width: 795px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 12px;}

#navo ul li { display: inline; }

#navo ul li a{
  padding: 0.2em 1em;
  background-color: #597288;
  color: #C7CCD3;
  text-decoration: none;
  float: right;
  border-right: 1px solid #C5C8D1;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 12px;
  letter-spacing: 1px;}

#navo ul li a:hover{
  background-color: #4F6586;
  color: #9DA2B3;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 12px;
  letter-spacing: 1px;}
/*Linkbereich ende*/

/*Kopfbereich Logo*/
#kopf{
  clear: both;
  height: 110px;
  width: 795px;
  background-color: #4A5E71;
  text-align: right;}

/*Hauptnavigation Ebenen*/
#inhalt{
  clear: both;
  height: 413px;
  overflow: auto;
  background-color: #8DA0AF;}

/*tabellen*/
.zoomtab { width: 100%;}
 //-->
</style>
<body>
<!-- Zentrales Element -->
<div id="mainDiv">

  <div id="switsch">
    <ul id="navlist1">
      <li><a href="#" class="but" onclick="top.focus()" tabindex="1" class="zoom">Text (-)</a></li>
      <li><a href="#" class="but" onclick="top.focus()" tabindex="2" class="zoom">Text(standard)</a></li>
      <li><a href="#" class="but" onclick="top.focus()" tabindex="3" class="zoom">Text (+)</a></li>
    </ul>
  </div>

  <div id="kopf"><img src="images/logos/logo.jpg" alt="logo" name="logo" width="190" height="110" border="0" align="bottom" id="logo" /></div>

  <div id="navo">
    <ul id="navlist2">
      <li ><a href="#" class="but" onclick="top.focus()" tabindex="4">Profil</a></li>
      <li><a href="#" class="but" onclick="top.focus()" tabindex="5">Projekte</a>
	    </li>
      <li><a href="#" class="but" onclick="top.focus()" tabindex="6">Galerie</a></li>
      <li><a href="#" class="but" onclick="top.focus()" tabindex="7">Aktuelles</a></li>
      <li><a href="#" class="but" onclick="top.focus()" tabindex="8">Kunden</a></li>
      <li><a href="#" class="but" onclick="top.focus()" tabindex="9">Kontakt</a></li>
      <li><a href="#" class="but" onclick="top.focus()" tabindex="10">Impressum</a></li>
    </ul>
  </div>

  <div id="inhalt">&nbsp;</div>
</div>
</body>
</html>

Vielleicht kannst du ja was damit anfangen.

Ciao
Quaese

melodei · 29. März 2005

Hallo Quaese,

vielen Dank für deine Vorschläge, dass mit der Höhenangabe war richtig, ich hatte da tatsächlich zuwenig angegeben. Nach der Veränderung der Höhe, wurde der Navigationsbalken in Netscape vernünftig dargestellt. Danach habe ich deinen Scriptvorschlag einmal ausprobiert, bin aber auf Probleme gestoßen, es hatte leider auf Opera keine positiven Auswirkungen. Dabei fand ich die Idee zuerst ganz gut, alles noch einmal mit einem Div zu stabilisieren.
In Netscape 6.2.2 wurde jetzt die obere Navigation (Schriftgrößen) zerrissen. In Netscape 7.2 ging das, dafür gab es wiederum einen fetten Scrollbalken, den ich aber im Body, mit " overflow:hidden;" bereinigen konnte.

Für Opera, meine Vermutung ist, dass Opera mit dieser horizontalen Listenlösung nicht klarkommt. Ich habe im Netz nach Anmerkungen zu eventuellen Problemen die Opera haben könnte gesucht, aber bisher nichts gefunden.

Bis dann
;-)

Quaese · 29. März 2005

Hi,

ich habe mir das Ganze nochmals angesehen.

Hab es jetzt so modifiziert, dass bei mir im Netscape 6.2.2, Netscape 7.1, Opera 6.06, Opera 7.54,
Firefox 1.0, IE 5.0, IE 5.5 und IE 6 funktioniert. Im Opera 6.2.2 ist ein kleiner Abstand zwischen
Switch-Bereich und Header. Ist aber akzeptabel.

Ich gebe dir nochmals den kompletten Quellcode.

HTML:

<?xml version="1.0" encoding="iso-8859-1"?>
<!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">
<title>www.tutorials.de</title>
<meta name="author" content="Quaese" />
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
</head>
<style type="text/css">
  <!--
body {
  background-color: #223344;
  margin-top: 0px;
  margin-left: 0px;
  text-align: center;
  scrollbar-base-color:#8DA0AF;
  scrollbar-3d-light-color:#8899aa;
  scrollbar-arrow-color:#8DA0AF;
  scrollbar-darkshadow-color:#112233;
  scrollbar-face-color:#5D7082;
  scrollbar-highlight-color:#000000;
  scrollbar-shadow-color:#445566;
  scrollbar-track-color:#354656;}

#mainDiv{
  width: 795px;
  margin: 35px auto;
  text-align: left;}
#switsch{ height: 14px;  /* Höhe angeben (wg. Netscape 6.x) */}
/*Linkbereich Switsch Schrift veraendern*/
#switsch ul{
  margin: 0;
  padding: 0;
  color: #C8C4A6;
  text-align: right;
  float: right;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 9px;
  list-style: none;}

#switsch ul li { display: inline;}

#switsch ul li a{
  padding: 0.1em 1em;
  background-color: #637E98;
  color: #C8C4A6;
  text-decoration: none;
  display: block;  /* Als Blockelement definiert (wg. Opera)*/
  width: 60px;     /* Breite angeben (wg. Opera) */
  float: right;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 9px;}
#switsch ul li a.long{ width: 95px; /* Klasse für Text(standard)-Link */}

#switsch ul li a:hover{
  background-color: #369;
  color: #F2F2F4;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 9px;}

/*Linkbereich Standard*/
a:link {
  font-family:Verdana, Arial, Helvetica, sans-serif;
  font-size: 9px;
  color: #C8C4A6;
  text-decoration: none;}
a:visited {
  font-family:Verdana, Arial, Helvetica, sans-serif;
  font-size: 9px;
  color: #857E54;
  text-decoration: none;}

a:hover {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 9px;
  color: #C8C4A6;
  text-decoration: none;}

a:active {
  font-family:Verdana, Arial, Helvetica, sans-serif;
  font-size: 9px;
  color: #B58351;
  text-decoration: none;}

/*Linbereich Hauptnavigation*/
#navo ul{
  padding: 0;
  margin: 1px 0 0 0;
  background-color: #597288;
  height: 19px;
  color: #D7DAE1;
  text-align: right;
  float: right;
  width: 795px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 12px;}

#navo ul li { display: inline; }

#navo ul li a{
  padding: 0.2em 1em;
  background-color: #597288;
  color: #C7CCD3;
  text-decoration: none;
  display: block;  /* Als Blockelement definiert (wg. Opera)*/
  width: 70px;     /* Breite angeben (wg. Opera) */
  float: right;
  border-right: 1px solid #C5C8D1;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 12px;
  letter-spacing: 1px;}

#navo ul li a:hover{
  background-color: #4F6586;
  color: #9DA2B3;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 12px;
  letter-spacing: 1px;}
/*Linkbereich ende*/

/*Kopfbereich Logo*/
#kopf{
  clear: both;
  height: 110px;
  width: 795px;
  background-color: #4A5E71;
  text-align: right;}

/*Hauptnavigation Ebenen*/
#inhalt{
  clear: both;
  height: 413px;
  overflow: auto;
  background-color: #8DA0AF;}

/*tabellen*/
.zoomtab { width: 100%;}
 //-->
</style>
<body>
<!-- Zentrales Element -->
<div id="mainDiv">

  <div id="switsch">
    <ul id="navlist1">
      <li><a href="#" class="but" onclick="top.focus()" tabindex="1" class="zoom">Text (-)</a></li>
      <li><a href="#" class="long" onclick="top.focus()" tabindex="2" class="zoom">Text(standard)</a></li>
      <li><a href="#" class="but" onclick="top.focus()" tabindex="3" class="zoom">Text (+)</a></li>
    </ul>
  </div>

  <div id="kopf"><img src="images/logos/logo.jpg" alt="logo" name="logo" width="190" height="110" border="0" align="bottom" id="logo" /></div>

  <div id="navo">
    <ul id="navlist2">
      <li ><a href="#" class="but" onclick="top.focus()" tabindex="4">Profil</a></li>
      <li><a href="#" class="but" onclick="top.focus()" tabindex="5">Projekte</a>
	    </li>
      <li><a href="#" class="but" onclick="top.focus()" tabindex="6">Galerie</a></li>
      <li><a href="#" class="but" onclick="top.focus()" tabindex="7">Aktuelles</a></li>
      <li><a href="#" class="but" onclick="top.focus()" tabindex="8">Kunden</a></li>
      <li><a href="#" class="but" onclick="top.focus()" tabindex="9">Kontakt</a></li>
      <li><a href="#" class="but" onclick="top.focus()" tabindex="10">Impressum</a></li>
    </ul>
  </div>

  <div id="inhalt">&nbsp;</div>
</div>
</body>
</html>

Ciao
Quaese

melodei · 29. März 2005

Hallo Quaese,

alle Achtung, ich lerne und staune ;-)

Es funktioniert sogar in Opera 4.01.

http://www.klaus-j-fuchs.de/test/test.html

Also braucht Opera noch zusätzlich "display: block" und width aber
wozu wird a.long gebraucht?

Code:

#switsch ul li a.long{ width: 95px; /* Klasse für Text(standard)-Link */}

Hier hattest du Class="zoom" geschrieben. Was wird damit definiert, oder ist die doppelte Class Bezeichnung eher aus Zufall entstanden?

Code:

 <div id="switsch">	<ul class="long" id="navlist1">
	 <li><a href="#" class="but" onclick="top.focus()" tabindex="1" class="zoom">Text (-)</a></li>
	 <li><a href="#" class="long" onclick="top.focus()" tabindex="2" class="zoom">Text(standard)</a></li>
	 <li><a href="#" class="but" onclick="top.focus()" tabindex="3" class="zoom">Text (+)</a></li>
	</ul>
</div>

Nochmals vielen Dank, also kann ich die Lösung mit horizontalen Listen auch für
Opera anbieten. (super)

Ciao
Klaus

✔ Probleme bei Positionierung der horizontalen Navigation mit CSS im Div

melodei

Grünschnabel

Trice

Mitglied

Gumbo

Erfahrenes Mitglied

melodei

Grünschnabel

Quaese

Moderator

melodei

Grünschnabel

Quaese

Moderator

melodei

Grünschnabel

Neue Beiträge