• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

(Anfänger) Positionierung von Menüelementen gelingt nicht.

L

ladomat

Neues Mitglied
Bin ein blutiger Anfänger und habe ein Problem bei einer ganz einfachen Übungsaufgabe:

Vorweg: Das ganze läuft unter diesen Anfangszeilen:

<!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" xml:lang="de" lang="de">

(1) Habe Menüpunkte mit links mit HTML erstellt. Schema:

<div id=m2> <a href="fuehrungen/index-fuehrungen.htm">Führungen </a> </div>

(2) Dann mit CSS die Elemente nach dem Folgenden Schema positioniert (externes Stylesheet):

#m2 { position:fixed; top:180px; left:50px; width:120px; height:25px; background-color:#ccf; }

Zunächst hat das alles wunderbar funktioniert, alles schön untereinander in der richtigen Position. Da allerdings der HTML-Validator die Melung ""an attribute value specification must be an attribute value literal unless SHORTTAG YES is specified" für alle Menüelemente angezeigt hat, habe ich - mall so von meinem verständnis dieser meldung ausgehend - die ID-Bezeichnungen verändert. Das hat es auch nicht besser gemacht, aber seitdem wird die erste ID links oben in der Ecke anmgezeigt. Das war vorher nicht so und ich habe alles mögliche probiert um es wieder hinzukriegen. Ein Fehler ist mit bei den tags nicht unterlaufen, die erste Zeile habe ich schon gelöscht usw. Egal was ich mache - die erste Zeile wandert nach links oben.

Nun meine Fragen:

(1) Woran liegt das und was kann man da machen?

(2) Was heißt diese Fehlermeldung mit den Short-Tags? Wie werde ich das los, was ist die sauberste Lösung?

Als nächstes will ich das Menü als zusammengehöriges Element definieren und ihm einen Rahmen geben (damit ich Content links davon setzen kann). Dann soll das Menü mit GIF´s unterlegt werden, die dann die Hyperlinks übernehmen. Für Hinweise zu dieser Herausforderung wäre ich ebenfalls dankbar.
 
Willkommen im Forum.

Du müsstest Anführungszeichen um Attributwerte (<div id="m2" …) setzen, wenn du einen XHTML-DOCTYPE verwendest. Kann sein, dass die Fehlermeldung das meint, sie liest sich etwas eigenartig. (Edit: Ja, meint sie.)

Den DOCTYPE selbst bitte unbedingt beibehalten, um die Browser in den „richtigen“ Rendermodus zu versetzen. Infos dazu etwa hier:

- DOCTYPE-Switch und seine Auswirkungen

Für Aussagen zur Verschiebung der Positionierung wäre ein komplettes Beispiel hilfreich. Entweder als Quellcode hier im Forum oder (noch besser) irgendwo als Demoseite online.
 
Zuletzt bearbeitet:
Hallo auch,

die Meldung wurde vom "SGML-Parser" herausgegeben.

Zur Positionierung:

Das Ganze sieht dann so aus (seit den "" sind BEIDE ersten Zeilen nach oben gewandet :D)

beispiel.jpg

Der index.htm-Ausschnitt:

<div id="m2"> <a href="fuehrungen/index-fuehrungen.htm">Führungen </a> </div>

<div id="m3"> <a href="andere/stadtreisen.htm">Stadtreisen </a> </div>

<div id="m4"> <a href="andere/referenzen.htm">Referenzen </a> </div>

<div id=2"m5"> <a href="andere/medienecho.htm">Medienecho </a> </div>

<div id="m6"> <a href="andere/kontakt.htm">Kontakt </a> </div>

CSS-Stylesheet:

* { font-family:arial, "lucida console", sans-serif;}

#m2 { position:fixed; top:180px; left:50px; width:120px; height:25px; background-color:#ccf; }

#m3 { position:fixed ; top:210px; left:50px; width:120px; height:25px;
background-color:#ccf; }

#m4 { position:fixed; top:240px; left:50px; width:120px; height:25px;
background-color:#ccf; }

#m5 { position:fixed; top:270px; left:50px; width:120px; height:25px;
background-color:#ccf; }

#m6 { position:fixed; top:300px; left:50px; width:120px; height:25px;
background-color:#ccf; }

Danke übrigens!!

moz-screenshot.png
 
Ich habe mir mal erlaubt, ein wenig zu antizipieren und die Semantik zu verbessern.

HTML: 
<!DOCTYPE html>

<html lang="de">

    <head>
        <meta charset="utf-8" />
        <title>Demo</title>
        <style type="text/css">
            * {
                font-family: arial, "lucida console", sans-serif;
            }

            .menu {
                margin: 0;
                width: 120px;
                padding: 0.3em 0.3em 0;
                position: fixed;
                top: 180px;
                left: 50px;
                border: 1px solid #ccc;
            }

            .menu li {
                margin: 0 0 0.3em;
                padding: 0;
                list-style: none;
            }

            .menu li a {
                height: 25px;
                line-height: 25px;
                padding: 0 0.3em;
                background-color: #ccf;
                display: block;
            }
        </style>
    </head>

    <body>

        <ul class="menu">
            <li><a href="fuehrungen/index-fuehrungen.htm">Führungen</a></li>
            <li><a href="andere/stadtreisen.htm">Stadtreisen</a></li>
            <li><a href="andere/referenzen.htm">Referenzen</a></li>
            <li><a href="andere/medienecho.htm">Medienecho</a></li>
            <li><a href="andere/kontakt.htm">Kontakt</a></li>
        </ul>

    </body>

</html>
 
Oh je ... vielleicht sollte ich mich besser durch die abermillionen Foren fragen ... und am Ende hab ich ne SUPER-Page :D

das geht auf jeden fall in die richtige richtung! werde mir das jetzt alles mal ansehen ... und mich dann mit dem thema "bilder als links" und "hoover" befassen!

Weiterführende Frage:

Ich will die HP eines Vereins programmieren - und ENDLICH Pages erstellen lernen. Die Grafik wird nicht leicht und SEO, Barrierefreiheit und Co. werden mich wohl auch noch fuchsen, aber die Page soll auch keine Wunderwaffe werden. Die Herausforderung besteht letztlich vor allem darin, dass der Topic "Führungen" auf ein komplexes Programm verweist. Die "Führungen" gliedern sich in 4 Standorte, Ausgangspunkt soll a) eine Gesamtübersicht und b) eine Übersicht nach Standorten sein.

Da eine langjährige Mitarbeiterin die Pflege des Angebots übernimmt, soll das ganze am Ende mit einem CMS verwaltet werden, wo sie nur noch eintippt und verlinkt. Fertig.

Für vorausschauende Tips zur Umsetzung wäre ich dankbar :)
 
übrigens hatte ich das menü auch zunächst als UL definiert - aber die punkte haben mich gestört. wieso erscheinen die denn in dem von ihnen konstruierten beispiel nicht?

in meiner anleitung werden die div mit "#" angesrpochen. wieso hier mit "." ?

wie kommt es zu der unterscheidung .menu / .menu li / .menu li a?

menu spricht wohl alles an, +li die liste? - aber was bedeutet das a?

und DANKE nicht vergessen!
 
Vorweg: Wir duzen hier generell, wenn es dir nichts ausmacht. :)

Die beste Antwort zu den Nachfragen ist der Verweis auf eine CSS-Einführung, denn da geht es um Grundlagen. Siehe etwa hier im Wiki in der Quellensammlung.

Die Frage zum CMS ist sehr allgemein, was eine Antwort immer schwierig macht. Grundsätzlich sollte sich das gewünschte Verhalten mit so ziemlich jedem CMS umsetzen lassen.

Einfach mal stöbern:

- List of content management systems - Wikipedia, the free encyclopedia

(interessant ist dort vermutlich vor allem der PHP-Abschnitt, aber ein CMS in einer anderen Programmiersprache wäre je nach Fähigkeiten des Webspace natürlich auch denkbar)
 
Danke nochmal!

Habe schon eine CSS-Einführung gelesen, aber die ist leider nicht sonderlich ausführlich und umständlich geschrieben.

Zum CMS: ein möglichst einfaches, kostenfreies CMS wäre vorteilhaft - und ich kann ja schwerlich alle ausprobieren. JOOMLA ist zu groß denke ich, so viel content wird es ja gar nicht geben!
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben