Vorheriges Thema: Nächstes Thema: |
Autor |
Nachricht |
mori Gast
|
Verfasst am: 27.03.2005 00:06:33 Titel: CSS Problem in horizontaler Navigation |
|
|
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
|
Verfasst am: 27.03.2005 01:28:58 Titel: |
|
|
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 |
|
|
admin Site Admin
Anmeldungsdatum: 16.01.2005 Beiträge: 323 Wohnort: Berlin
|
Verfasst am: 27.03.2005 11:54:42 Titel: |
|
|
... 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 |
|
|
mori Gast
|
Verfasst am: 27.03.2005 13:03:22 Titel: |
|
|
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
|
Verfasst am: 27.03.2005 17:56:39 Titel: |
|
|
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 |
|
|
|
|
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.
|
|
|