Einträge in MenueZeile werden falsch herum dargestellt
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
antworten
beginne
beispiel
billard
code
dank
design
format
hausrat
http
kochen
problem
quellcode
ratgeber
struktur
tabelle
url
wissen
zeile
zitat
-
Habe im Netz nichts dazu gefunden.
Im oberen BildschirmBereich meiner HP befindet sich eine MenueZeile mit 7 bzw. 8 MenuePunkten:
http://www.peterswelt.mynetcologne.de/index_ratgeber.html
In der page source view Zeile 59 bis 68.
Funktioniert alles wie es soll, die Punkte stehen nebeneinander und werden in der format.css via hover beim drüberfahren mit der Maus entsprechend (highlight) dargestellt.
___
Jetzt möchte ich aber jeden MenuePunkt in der jeweiligen SeitenFarbe beim drüberfahren darstellen.
Also habe ich in der format.css für jeden MenuePunkt eine eigene Beschreibung mit der entsprechenden Farbe definiert.
Jetzt muss ich natürlich jedem MenuePunkt in der HTML-Datei das korrespondierende Menue in der format.css voranstellen.
http://www.peterswelt.mynetcologne.de/index.html
In der page source view Zeile 53 bis 74.
Auch das funktioniert gut, ABER jetzt steht der letzte MenuePunkt als erster in der MenueZeile.
Wie ihr seht habe ich die MenuePunkte herumgedreht (letzter zuerst) um sie in der richtigen Reihenfolge darzustellen.
Was mache ich armseliger HP-Betreiber falsch?
Beitrag zuletzt geändert: 20.4.2016 20:28:03 von mukerbude -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
<table id="menu_grau" align="right" border="0" cellpadding="0" cellspacing="0"></table>
align=right sorgt dafür, dass es ganz rechts dargestellt wird.
Dann kommt dein nächtes Element, welches auch so weit rechts wie möglich dargestellt wird, also links von dem davorgehenden.
align=left und schon stimmt die Reihenfolge wieder.
Nur musst du dann das gesamte Menü wieder nach rechts verschieben.
Was hältst du eigentlich davon von einem Tabellendesign auf div umzusteigen? Das erleichtert vieles. -
Hallo Peter alias mukerbude,
deine Bemühungen, eine gut aussehende und inhaltsreiche Website zu gestalten in allen Ehren, aber sobald ich einen Blick in den Quellcode werfe, überkommt mich das kalte Grausen. Und zwar nicht nur, weil du teilweise extrem veraltete Techniken nutzt (Tabellen als generelles Mittel zur Anordnung auf der Seite), du benutzt sie auch beinahe durchgängig fehlerhaft.
Dadurch ist es sehr schwierig, ein Problem allein zu betrachten und zu beheben. -
test42test schrieb:
Danke für Deine Tipps, werde ich mir beide genauer ansehen.
...Was hältst du eigentlich davon von einem Tabellendesign auf div umzusteigen? Das erleichtert vieles.
@mein-wunschname,
Du magst ja recht haben, aber ohne konkreten Rat bringt mich das leider nicht weiter.
Beitrag zuletzt geändert: 20.4.2016 23:00:10 von mukerbude -
Es fällt mir schwer, Dinge die man vielfach Im Intrnet findet hier noch einmal zu wiederholen. Ein Beispiel für eine einfache Tabelle:
<table> <tr> <td>Inhalt</td> </tr> </table>
Übersetzt heißt das:
Beginne Tabelle Beginne Zeile Beginne Zelle - Inhalt- Beende Zelle Beende Zeile Beende Tabelle
In diesem Teil aus dem Quellcode deiner Seite
<table align="right" id="menu_gold" border="0" cellpadding="0" cellspacing="0"> <td><a href="index_zitate.html"target="_blank"> Zitate </a></td> <table align="right" id="menu_grau" border="0" cellpadding="0" cellspacing="0"> <td><a href="index_wissen.html"target="_blank"> Wissen </a></td> <table align="right" id="menu_cyan" border="0" cellpadding="0" cellspacing="0"> <td><a href="index_ratgeber.html"target="_blank"> Ratgeber </a></td> <table align="right" id="menu_rot" border="0" cellpadding="0" cellspacing="0"> <td><a href="http://www.mukerbude.de/"target="_blank"> MukerBude </a></td> <table align="right" id="menu_blau_dunkel" border="0" cellpadding="0" cellspacing="0"> <td><a href="index_kochen.html"target="_blank"> Kochen </a></td> <table align="right" id="menu_lila" border="0" cellpadding="0" cellspacing="0"> <td><a href="index_hausrat.html"target="_blank"> Hausrat </a></td> <table align="right" id="menu_blau-himmel" border="0" cellpadding="0" cellspacing="0"> <td><a href="index_billard.html"target="_blank"> Billard </a></td> </table>
- werden immerzu Tabellen eröffnet, die nie wieder geschlossen werden
- haben Tabellen nie Zeilen
Vieles ist sicher darauf zurückzuführen, dass die Benutzung von Tabellen unhandlich und unübersichtlich ist, weshalb test42test ja schon schrieb:
Was hältst du eigentlich davon von einem Tabellendesign auf div umzusteigen? Das erleichtert vieles.
Möglicherweise fährst du aber besser, wenn du von du von selbstgestrickten HTML-Seiten auf Wordpress umsteigst.
Zum Abschluss noch die halbwegs geordnete HTML-Struktur deines Menüs (korriegierter Code von oben)
<table> <tr> <td align="right" id="menu_gold" border="0" cellpadding="0" cellspacing="0"><a href="index_zitate.html" target="_blank">Zitate</a></td> <td align="right" id="menu_grau" border="0" cellpadding="0" cellspacing="0"><a href="index_wissen.html" target="_blank">Wissen</a></td> <td align="right" id="menu_cyan" border="0" cellpadding="0" cellspacing="0"><a href="index_ratgeber.html" target="_blank">Ratgeber</a></td> <td align="right" id="menu_rot" border="0" cellpadding="0" cellspacing="0"><a href="http://www.mukerbude.de/" target="_blank">Ratgeber</a></td> <td align="right" id="menu_blau_dunkel" border="0" cellpadding="0" cellspacing="0"><a href="index_kochen.html" target="_blank">Kochen</a></td> <td align="right" id="menu_lila" border="0" cellpadding="0" cellspacing="0"><a href="index_hausrat.html" target="_blank">Hausrat</a></td> <td align="right" id="menu_blau-himmel" border="0" cellpadding="0" cellspacing="0"><a href="index_billard.html" target="_blank">Billard</a></td> </tr> </table>
Beitrag zuletzt geändert: 21.4.2016 0:12:04 von mein-wunschname -
@mein-wunschname,
erst mal vielen Dank für die Mühe die Du Dir gemacht hast.
Zitat: "Es fällt mir schwer, Dinge die man vielfach Im Internet findet hier noch einmal zu wiederholen."
Das verstehe ich nicht. Es zwingt Dich doch niemand auf so banale Fragen wie meine zu antworten.
Zitat: "...sobald ich einen Blick in den Quellcode werfe, überkommt mich das kalte Grausen. Und zwar nicht nur, weil du teilweise extrem veraltete Techniken nutzt (Tabellen als generelles Mittel zur Anordnung auf der Seite)..."
Es ist schnell, läuft auf uralten Browsern (wovon mehr unterwegs sind als man glauben mag) und ist leicht zu codieren.
Zitat: "...du benutzt sie auch beinahe durchgängig fehlerhaft."
Da muss ich Dir widersprechen. Ich benutze vieles vielleicht etwas fantasievoller als stur nach Schema F, ein bischen WildWest-Programmierung macht doch Spass und wie Du zugeben musst funktionieren meine beiden Saiten doch ganz anständig.
Also sooo falsch kann das nicht sein
Nachtrag am Samstag 23.04.16 mit der Bitte um Erklärung
Darf ich erfahren weshalb Ihr mich negativ bewertet?
Beitrag zuletzt geändert: 23.4.2016 23:49:04 von mukerbude -
mein-wunschname schrieb:
Zum Abschluss noch die halbwegs geordnete HTML-Struktur deines Menüs (korriegierter Code von oben)
<table> <tr> <td align="right" id="menu_gold" border="0" cellpadding="0" cellspacing="0"><a href="index_zitate.html" target="_blank">Zitate</a></td> <td align="right" id="menu_grau" border="0" cellpadding="0" cellspacing="0"><a href="index_wissen.html" target="_blank">Wissen</a></td> <td align="right" id="menu_cyan" border="0" cellpadding="0" cellspacing="0"><a href="index_ratgeber.html" target="_blank">Ratgeber</a></td> <td align="right" id="menu_rot" border="0" cellpadding="0" cellspacing="0"><a href="http://www.mukerbude.de/" target="_blank">Ratgeber</a></td> <td align="right" id="menu_blau_dunkel" border="0" cellpadding="0" cellspacing="0"><a href="index_kochen.html" target="_blank">Kochen</a></td> <td align="right" id="menu_lila" border="0" cellpadding="0" cellspacing="0"><a href="index_hausrat.html" target="_blank">Hausrat</a></td> <td align="right" id="menu_blau-himmel" border="0" cellpadding="0" cellspacing="0"><a href="index_billard.html" target="_blank">Billard</a></td> </tr> </table>
Deine "halbwegs geordnete HTML-Struktur" stellt die MenuePunkte immer noch falsch herum also in der falschen ReihenFolge dar. Siehe AusgangsFrage.
Warum benutzt Du in Deinem Beispiel in jeder Zeile align="right" wenn keiner der Einträge rechts dargestellt wird geschwiege denn die ganze Zeile?
Danke für Aufklärung... -
peterskosmos schrieb:
Deine "halbwegs geordnete HTML-Struktur" stellt die MenuePunkte immer noch falsch herum also in der falschen ReihenFolge dar. Siehe AusgangsFrage.
Auf welcher Seite konkret? Ein kurzer Blick auf http://www.peterswelt.mynetcologne.de/
zeigt mir immer noch
<!-- Schreibt das HauptMenü in der 1. Zeile rechts--> <table align="right" id="menu_gold" border="0" cellpadding="0" cellspacing="0"><td><a href="index_zitate.html"target="_blank"> Zitate </a></td></table> <table align="right" id="menu_grau" border="0" cellpadding="0" cellspacing="0"><td><a href="index_wissen.html"target="_blank"> Wissen </a></td></table> <table align="right" id="menu_cyan" border="0" cellpadding="0" cellspacing="0"><td><a href="index_ratgeber.html"target="_blank"> Ratgeber </a></td></table> <table align="right" id="menu_rot" border="0" cellpadding="0" cellspacing="0"><td><a href="http://www.mukerbude.de/"target="_blank"> MukerBude </a></td></table> <table align="right" id="menu_blau_dunkel" border="0" cellpadding="0" cellspacing="0"><td><a href="index_kochen.html"target="_blank"> Kochen </a></td></table> <table align="right" id="menu_lila" border="0" cellpadding="0" cellspacing="0"><td><a href="index_hausrat.html"target="_blank"> Hausrat </a></td></table> <table align="right" id="menu_gruen" border="0" cellpadding="0" cellspacing="0"><td><a href="index_billard.html"target="_blank"> Billard </a></td></table> <!-- Ende der Darstellung der 1.Zeile -->
Also den alten Code.
peterskosmos schrieb:
Warum benutzt Du in Deinem Beispiel in jeder Zeile align="right" wenn keiner der Einträge rechts dargestellt wird geschwiege denn die ganze Zeile?
Danke für Aufklärung...
align="right"
habe ich nur eingefügt, weil du diese Anweisung (für <table> so drin hattest bzw. ja immer noch hast. Wenn sie dich stört, dann nimm sie raus. Sie ist in beiden Fällen überflüssig, zumindest in Bezug auf das Darstellungsproblem.
OT:Hast du dir einen 2. Account zugelegt, damit du dir selbst antworten kannst? Du hast dir, in dem du dir selbst geantwortet hast, Gulden verschafft, siehe dazu
https://www.lima-city.de/2008/help
Pkt II.B -
Oh graus, ein Tabellen Design.
Wenn man von HTML und CSS nicht viel versteht, dann kann man immer noch zu Bootstrap greifen.
Das schöne an Bootstrap ist, dass es sich fast wie ein Tabellendesign coden lässt.
Es gibt da zahlreiche Anleitungen auch in deutsch dafür. Und unter http://getbootstrap.com/getting-started/#examples-navbars findet man sogar einen Quellcode für eine Navigation.
Tabellen sollte man wirklich nur für den dafür bestimmten Inhalt nutzen, aber nie für das Design als solches, auch wenn es natürlich einfacher ist. Aber mit dem Bootstrap ist das ganze nun auch kein Problem mehr. Und du hast noch einen Vorteil. Ohne ein neues Design entwerfen zu müssen, hast du das Design dann auch gleich für die mobilen Endgeräte wie Smartphone oder Tablet auch gleich mit abgedeckt. -
@mein-wunschname,
den zweiten Account habe eingerichtet, um mit meiner Seite PetersKosmos nach Lima-City umzuziehen.
Den $ habe ich gelesen, der quasi DoppelPost soll auch nicht zur Regel werden.
@all-in1,
Bootstrap ließt sich gut an! -
mukerbude schrieb: Nachtrag am Samstag 23.04.16 mit der Bitte um ErklärungDarf ich erfahren weshalb Ihr mich negativ bewertet?
Ich vermute das hast Du einer einzigen Zeile zu verdanken:Das verstehe ich nicht. Es zwingt Dich doch niemand auf so banale Fragen wie meine zu antworten.
ist zwar richtig, aber verdammt unhöflich gegenüber einem der dir mit viel Engagement versucht hat weiterzuhelfen., -2 finde ich allerdings etwas übertrieben. Abgesehen davon kommt bei mir die von mein-wunschname erstellte Tabelle auch in der vermutlich falschen Reihenfolge:
Zitate Wissen Ratgeber Ratgeber Kochen Hausrat Billard
Hast Du das Problem mittlerweile lösen können die Seite sieht ja danach aus? Bootstrap? -
Also da du rechtsbündig angibst. Wird also von Rechts nach Links angeordnet.
Würde ich behaupten das es daran liegt. -
Auf w3schools können Sie auch die Beispiele bearbeiten und die Auswirkungen Online Live ansehen.
http://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_horizontal_black_right
Die Vorlage hab ich Ihnen angepasst. Ich hoffe es ist so gemeint :D
Die Farben dienen nur als Beispiel.
Den Quelltext auf w3schools einfügen (ersetzen) und auf "Run" klicken oder den Quelltext als HTML-Datei speichern.
<html> <head> <style> #menu ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; float:right; } #menu li { float: left; } #menu li a { display: block; color: white; text-align: center; text-decoration: none; height:20px; padding:5px; border-left:2px solid white; } #menu{ width:100%; height:30px; background-color:#111; } #menu li a:hover{ background-image: url('http://www.peterswelt.mynetcologne.de/images/bt.gif'); background-repeat:none; } a.home:hover{ background-color:blue !important; } a.billard:hover{ background-color:green !important; } a.hausrat:hover{ background-color:purple !important; } a.kochen:hover{ background-color:blue !important; } </style> </head> <body> <div id="menu"> <ul> <li><a class="home" href="#">Home</a></li> <li><a class="billard" href="#">Billard</a></li> <li><a class="hausrat" href="#">Hausrat</a></li> <li><a class="kochen" href="#">Kochen</a></li> </ul> </div> </body> </html>
Beitrag zuletzt geändert: 9.11.2016 14:45:24 von mg123 -
@mg123,
würde ich mal öfter hier vorbei schauen, hätte ich mich schon längst bedankt.
es bedankt sich -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
