|
|||
Menü - aktuelle Seite - Formatierung
Hallo,
ich habe mir schon die Finger wundgegoogelt und komme einfach nicht weiter. Vielleicht könnt ihr mir ja helfen: Ich möchte ein Menü, das mir die jeweils aktuelle Seite farblich hervorgehoben anzeigt. Das klappt auch, aber ich schaffe es nicht, die anderen Seiten entsprechend darzustellen. Das Menü ist als Tabelle aufgebaut, was auch so bleiben muss. Die Formatierung der Zellen funktioniert, aber alles, was mit Text zu tun hat, wird ignoriert. Kein Zentrieren, keine Textfarbe, kein Garnix. Die CSS-Datei: #navigation { display:block; margin-left: auto; margin-right: auto; text-align: center; background-color: #aafdab; color: black; border-style:ridge; border-width:0px; padding:0px; text-decoration: none;} #seite1 #navigation a.seite1, #seite2 #navigation a.seite2, #seite3 #navigation a.seite3, #seite4 #navigation a.seite4, #seite5 #navigation a.seite5, #seite6 #navigation a.seite6 {display:block; text-align:center; background-color: #0f8902; color: black; font-weight: bold; font-size: 22px;} und die Tabelle für das Menü: <body id="seite1"> <div id="navigation"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="5%" bgcolor="white"> </td> <td width="90%"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="16.6%"><a class="seite1" href="seite1.html">Seite 1</a></td> <td width="16.6%"><a class="seite2" href="seite2.html">Seite 2</a></td> <td width="16.6%"><a class="seite3" href="seite3.html">Seite 3</a></td> <td width="16.6%"><a class="seite4" href="seite4.html">Seite 4</a></td> <td width="16.6%"><a class="seite5" href="seite5.html">Seite 5</a></td> <td width="16.6%"><a class="seite6" href="seite6.html">Seite 6</a></td></td> </tr> </table> </td> <td width="5%" bgcolor="white"></td> </tr> </table> </div> </body> Ich bin mit meinem Latein (genauer mit meinem CSS) am Ende. Viele Grüße und Danke |
Sponsored Links |
|
|||
Ich hatte den Doctype vergessen, da hast du mich auf die richtige Spur gebracht. Die CSS-Datei habe ich auch etwas aufgeräumt. Zentrieren funktioniert jetzt in allen Zellen, aber ich bekomme das Unterstreichen der Hyperlinks und die blaue Linkfarbe nicht raus. Das sollte doch mit text-decoration: none funktionieren ...
Hier die aktuelle CSS-Datei: #navigation {display:block; text-align:center; background-color: #aafdab; color: black; font-weight: bold; font-size: 22px; text-decoration: none;} #seite1 #navigation a.seite1, #seite2 #navigation a.seite2, #seite3 #navigation a.seite3, #seite4 #navigation a.seite4, #seite5 #navigation a.seite5, #seite6 #navigation a.seite6 {display:block; text-align:center; background-color: #0f8902; color: white; font-weight: bold; font-size: 22px;} und das eigentliche Menü: <!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" lang="de"> <head> <link href="screen.css" rel="stylesheet" type="text/css" media="all"> </head> <body id="seite1"> <div id="navigation"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="5%" bgcolor="white"> </td> <td width="90%"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="16.6%"><a class="seite1" href="seite1.html">Seite 1</a></td> <td width="16.6%"><a class="seite2" href="seite2.html">Seite 2</a></td> <td width="16.6%"><a class="seite3" href="seite3.html">Seite 3</a></td> <td width="16.6%"><a class="seite4" href="seite4.html">Seite 4</a></td> <td width="16.6%"><a class="seite5" href="seite5.html">Seite 5</a></td> <td width="16.6%"><a class="seite6" href="seite6.html">Seite 6</a></td></td> </tr> </table> </td> <td width="5%" bgcolor="white"></td> </tr> </table> </div> </body> Danke erstmal bis hierhin |
|
|||
Falls du dich dazu durchringen kannst, ein semantisch sinnvolles Menü zu erstellen, orientiere dich an tutorials wie diesem. Eine Tabelle ist kein Menü und sollte deshalb auch nicht dafür verwendet werden
|
|
|||
Ich versteh nicht mal ganz was du willst.
Soll der Text an den linken Rand der Box rutschen, damit er genau unter der Überschrift ist? Allerdings befindet sich die keine Überschrift in deinem Code... |
|
|||
Zitat:
nein, der Text in den einzelnen Zellen der Tabelle sollte zentriert sein, aber er nahm keine Formatierung an. Die Links sahen aus wie die Windows-Standard-Links: blau, unterstrichen und klebten am linken Rand der Zelle. Inzwischen klappt es aber. Zwar immer noch als Tabelle, aber die CSS-Datei habe ich komplett umgestrickt: a.menu { display:block; text-align:center; width: auto; padding:10px; text-decoration: none;} a.menu:link { color:black; font-size: 16px; font-weight: bold; background-color:#aafdab; } a.menu:visited { color:black; font-size: 16px; font-weight: bold; background-color:#aafdab; } a.menu:hover { color:black; font-size: 16px; font-weight: bold; background-color:#0f8902; } a.menu.current { color:black; font-size: 16px; font-weight: bold; background-color:#0f8902; color: white;} Die Klasse "menu.current" wandert dann auf den einzelnen Seiten durchs Menü nach unten. Keine Ahnung, ob das regelkonform ist, aber mir gefällt die Lösung (Ja, das Menü als Tabelle zu erstellen, ist veraltet, ich weiß.) <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="16.6%"><a class="menu current" href="seite1.html">Seite1</a></td> <td width="16.6%"><a class="menu" href="seite2.html">Seite 2</a></td> <td width="16.6%"><a class="menu" href="seite3.html">Seite 3</a></td> <td width="16.6%"><a class="menu" href="seite4.html">Seite 4</a></td> <td width="16.6%"><a class="menu" href="seite5">Seite 5</a></td> <td width="16.6%"><a class="menu" href="seite6.html">Seite 6</a></td></td> </tr> </table> Danke für eure Hilfe. Geändert von Koenigsspringer (03.08.2015 um 18:28 Uhr) |
|
|||
Wieso machst du es dann als Tabelle? Es ist nicht nur veraltet, es ist auch noch dazu falsch. Falls du in Suchmaschinen gut gefunden werden willst solltest du es ohne Tabellen umsetzen
|
Sponsored Links |
|
|||
Zitat:
ich weiß, das klingt jetzt ein wenig schräg, aber ich möchte über Suchmaschinen nicht gefunden werden. Also, es schadet natürlich nicht, und ich wehre mich nicht dagegen, bei Google ganz oben gelistet zu werden, aber das ist nicht mein primäres Ziel. Ich dachte mir, ich versuche es mal mit Inhalt. Nicht, dass das der Grund für meine Tabellenentscheidung gewesen wäre, aber es ist auch kein Grund, auf ein CSS-Menü umzusteigen. Obwohl es grundsätzlich sinnvoll wäre, falls die Optik mal mit wenigen Mausklicks komplett umgestrickt werden soll, das gebe ich ja zu. Viele Grüße |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
FAQ -- Häufig gestellte Fragen und häufig gegebene Antworten | mazzo | CSS | 10 | 05.04.2012 18:32 |
Auf jeder seite individuelle Hintergründe im Menü ... | max_pla3 | CSS | 8 | 09.12.2011 12:10 |
Link in Zelle andere Formatierung als bei restlicher Seite | css_rulez | CSS | 4 | 16.11.2008 20:27 |
Problem mit Menü... | Zero-X | CSS | 18 | 12.07.2006 18:52 |
Menü in Seite einbinden | Anonymous | CSS | 2 | 21.07.2003 12:13 |