HTMLWorld - HTML, CSS, JavaScript, PHP, Java, Flash und vieles mehrHTMLWorld:   Home | Impressum
 

 
 

Anzeige 
 
HTMLWorld » Forum

Thema anzeigen - CSS Problem in horizontaler Navigation

 FAQFAQ   SuchenSuchen   MitgliederlisteMitgliederliste   BenutzergruppenBenutzergruppen   RegistrierenRegistrieren 
 ProfilProfil   Einloggen, um private Nachrichten zu lesenEinloggen, um private Nachrichten zu lesen   LoginLogin 

CSS Problem in horizontaler Navigation

 

Neues Thema eröffnen   Neue Antwort erstellen    HTMLWorld Foren-Übersicht
   CSS
Vorheriges Thema:
Nächstes Thema:  
Autor Nachricht
mori
Gast





BeitragVerfasst am: 27.03.2005 00:06:33    Titel: CSS Problem in horizontaler Navigation Antworten mit Zitat

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

Das Problem ist aber, hierhabe ich es noch mit Tabelle gemacht.
Sobald ich es aber nur mit Ebene löse?!

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

Der Quelltext der CSS:

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;

}


Nach oben
Sir Quicksand
Häufiger Poster


Anmeldungsdatum: 19.01.2005
Beiträge: 304
Wohnort: Hannover

BeitragVerfasst am: 27.03.2005 01:28:58    Titel: Antworten mit Zitat

Was hast Du gegen Tabellen? Bei Frames oder iFrames verstehe ich das noch. Also ich benutze Tabellen. Vielleicht schlaut uns Jan ja auf.

Du kannst aber auch so Elemente positionieren:
Code:
<a href="news.php" target="main"><div class=menu1 style="position:absolute; top:17px; left:9px;"><b>NEWS</b> </div></a>
Nach oben
Benutzer-Profile anzeigen Private Nachricht senden Website dieses Benutzers besuchen
admin
Site Admin


Anmeldungsdatum: 16.01.2005
Beiträge: 323
Wohnort: Berlin

BeitragVerfasst am: 27.03.2005 11:54:42    Titel: Antworten mit Zitat

... dann "schlaue" ich mal:

Um (Block-)Element nebeneinander zu platzieren muss bei ebendiesen float bzw. clear verwendet werden (siehe CSS-Doku) - damit kann man dann einstellen ob sie neben oder untereinander verlaufen sollen ...

Gruss,
Jan.
Nach oben
Benutzer-Profile anzeigen Private Nachricht senden Website dieses Benutzers besuchen MSN Messenger
mori
Gast





BeitragVerfasst am: 27.03.2005 13:03:22    Titel: Antworten mit Zitat

Zu Quicksand:

Ich habe nichts gegen Tabellen, sie sollen aber für ein barrierefreies Internet hinderlich sein. Genaues weiß ich auch noch nicht, lerne es gerade .-)

Zitat:
Tabellen
Das Verwenden von Tabellen zu Layout-Zwecken birgt für den Screen-Reader-Nutzer Tücken, von denen viele Webgestalter nicht einmal etwas ahnen. Bedenken Sie, dass Blinde immer nur eine einzige Tabellenzelle erfassen können ...

...Bevor eine Braillezeile, Sprachausgabe oder eine Großschriftdarstellung in der Lage ist, die erforderlichen Daten auszugeben, müssen diese Ausgabeeinheiten mit den hierfür notwendigen Informationen versorgt werden. Die Software, welche diese Aufgabe erfüllt, nennt man Screenreader.



Ich versuche gerade über horizontale Listen "display: inline;"
und "float: left;" zu arbeiten aber das Ergebnis ist noch nicht befriedigend. Am schlimmsten sieht es in Netscape aus.

Ich probiere noch etwas weiter...
Nach oben
mori
Gast





BeitragVerfasst am: 27.03.2005 17:56:39    Titel: Antworten mit Zitat

So, ich habe es jetzt mit horizontalen Listen versucht. In Internet Explorer sieht es auch einigermaßen aus, in Netscape aber leider nicht und schon garnicht mit Opera 6.01.

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

Im CSS:

Code:


/*Linkbereich Hauptnavigation*/

#navo ul
{
      position: absolute;
   sibility: visible;
   z-index: auto;
   padding-left: 0;
   margin-top:161px;
   margin-left: 50px;
   
   height:12px;
   width: 795px;
   color: #D7DAE1;
   background-color: #597288;
   text-align: right;
   float: right;
   
   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">
  <div id="navlist2"> 
    <ul id="hola">
      <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>

Nach oben
Beiträge der letzten Zeit anzeigen:   
Neues Thema eröffnen   Neue Antwort erstellen    HTMLWorld Foren-Übersicht
   CSS
Alle Zeiten sind GMT + 1 Stunde
Seite 1 von 1

 
Gehe zu:  
Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst deine Beiträge in diesem Forum nicht bearbeiten.
Du kannst deine Beiträge in diesem Forum nicht löschen.
Du kannst an Umfragen in diesem Forum nicht mitmachen.