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

Wie erstelle ich ein Menü? *Noob bin*

H

Haynoko

Neues Mitglied
Hallo zusammen.
Ich weis, die frage muss leicht bescheuert klingen, aber ich hab leider absolut keine ahnung, wie es geht, es ist bestimmt totaler anfängerpups, aber wie gesagt... Wie erstelle ich ein Menü?
Also, ich meine jetzt so, dass im meinetwegen Linken bildschirmteil eine "Spalte" abgeteilt ist, die Quasi immer zu sehen ist und nur im rechten Bildschirmteil sich dann halt der eigentliche Seiteninhalt zeigt. Dass man dann in der linken spalte eine reihe von links hat, also das eigentliche menü, welches im rechten bildteil die Unter-seite halt aufruft, die man halt haben will
Also praktisch so:

Testleyout.jpg


Kann mir da jemand helfen? Die seite ist nur für den Privatgebrauch bestimmt als Homepage und Startseite für meinen Firefox.

Ich danke schonmal im Voraus für alle helfenden Antworten.

LG - Sascha
 
Ein Menu ist normal eine Liste. sie setzt sich folgendermaßen zusammen:

Code: 
<ul>
 <li><a href="#"> Link 1 </a></li>
 <li><a href="#"> Link 2 </a></li>
 <li><a href="#"> Link 3 </a></li>
 <li><a href="#"> Link 4 </a></li>
...
</ul>
alles weitere was mit aussehen und farbe,gestaltung zu tun hat, machst du via css.

Wenn du dein menu links neben dem inhalt haben möchtest, könntest du floaten:

Code: 
<ul id="navi">
<li><a href="#"> Link 1 </a></li>
 <li><a href="#"> Link 2 </a></li>
 <li><a href="#"> Link 3 </a></li>
 <li><a href="#"> Link 4 </a></li>
...
</ul>

<div id="main">
  <!-- Inhalt -->
</div<


css:

Code: 
#navi { float:left; border:1px solid; width:20%; height: 20em; }
#main { float:left; border:1px solid; width: 80%; height:20em; }
 
Aber Google oder andere Suchmaschinen kennst Du?
Da sollte es nicht allzu schwer sein, nachzugucken, was CSS ist, oder ein Tutorial zu finden. DAS können wir Dir nicht abnehmen :-)

HTML ist nur dazu da, Deinem Inhalt eine Bedeutung zu geben.

Für Layout und Aussehen ist allein CSS zuständig.

Um eine Website zu entwickeln, muss man HTML und CSS kennen und können. Daran führt kein Weg vorbei. D solltest Dich da unbedingt schlau machen!
Cascading Style Sheets ? Wikipedia

Bei Fragen kannst und sollst Du natürlich hier nachfragen! :-)

Viel Erfolg,
-Efchen
 
Hallo.

also...um es kürzer zu fassen, musst du dein html-dokument so aufbauen:

Code: 
doctype
<head>
<title>Dein Titel</title>

<!-- META-ANGABEN -->

[FONT=Verdana]<link rel="stylesheet" type="text/css" href="style.css" />[/FONT]
</head><body>

<!-- Inhalt -->

</body></html>
Wenn du nun soetwas wie in deiner Zecihnung haben möchtest, dann gehst du so vor:

du hast deinen Inhalt und das Menu, beides zeichnest du aus. Das m enu wie oben genannt, deinen inhalt z.b. so:

html:

header:
Code: 
<h1> Ich bin die überschrift der Seite, oder ein Banner</h1>
navi:
Code: 
<ul id="navi">
 <li><a href="#"> Link 1 </a></li>
 <li><a href="#"> Link 2 </a></li>
 <li><a href="#"> Link 3 </a></li>
 <li><a href="#"> Link 4 </a></li>
...
</ul>
und deinen Inhalt
Code: 
<h2>ich bin die zweite überschrift</h2>
<p> und ich ein Textabsatz</p>
als nächstes setzt du alles in dein dokument ein und da es sich beim inhalt um mehre elemente handelt die gruppiert werden, packst du sie in ein <div> welches wir die id "main" geben.

das ganze sieht dann so aus:

index.html
Code: 
<!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">
 <head>
 <title>Dein Titel</title>
 
 <!-- META-ANGABEN -->
 
 [FONT=Verdana]<link rel="stylesheet" type="text/css" href="style.css" />[/FONT]

 </head><body>

<h1> Ich bin die überschrift der Seite, oder ein Banner</h1>

<ul id="navi">
 <li><a href="#"> Link 1 </a></li>
 <li><a href="#"> Link 2 </a></li>
 <li><a href="#"> Link 3 </a></li>
 <li><a href="#"> Link 4 </a></li>
...
</ul>  

<div id="main">

   <h2>ich bin die zweite überschrift</h2>
   <p> und ich ein Textabsatz</p>

</div>

</body></html>
nun legst du dir eine page.css an und schreibst folgendes rein:

Code: 
* { margin:0; padding:0; }

body,html { height:100%; }

body { 
       font-size:100.01%; 
       font-family:Arial; 
       line-height:1.4em; 
       background-color: #fff; 
}


img,table { border:0; }
ul,ol,dl { list-style:none; }

h2,p { padding: 0.5em 1em; }

h1 { font-size:1em; width:40em; border:1px solid; }
h2 { font-size: 0.9em; }

#navi { width:10em; height:20em; float:left; border:1px solid; }
#navi li { font-size: 0.9em; padding:0.5em 0em 0.5em 1em; }

#main { width:30em; height:20em; float:left; border:1px solid; }
und schon hast du deine page fast fertig.. *Grinz*

Gruß
Loon3y

Anmerkung: als doctype habe ich xhtml 1.0 strict verwendet da er sehr zimperlich mit fehlern umgeht. Natürlich solltest du dich dennoch nach den verschiedenen doctypes erkundigen. Nur kopieren bringt recht wenig.

Anmerkung2: Das selbige gilt auch für Meta-Angaben und den rest vom CSS / Html.


EDIT: sry für die vielen schreibfehler, war zwischenzeitlich mal eine stunde weg ;) *g*
 
Zuletzt bearbeitet:
hab nicht viel hier gelesen, aber es ist definitiv davon abzuraten das menü vor den inhalt zu stellen. falls das menü auf der linken seite sein soll, rate ich zur dieser technik.

div#inhalt=float:right;
div#menue=flloat:left;
 
FoXMorayn schrieb:
hab nicht viel hier gelesen, aber es ist definitiv davon abzuraten das menü vor den inhalt zu stellen. falls das menü auf der linken seite sein soll, rate ich zur dieser technik.

div#inhalt=float:right;
div#menue=flloat:left;
Zum Vergrößern anklicken....

wieso? Ist es nicht sinnvoll erst die auswahl der seite darzubieten bevor man zum inhalt kommt? Nehmen wir mal an jemand kommt mit einem Vorlesebrowser an und er muss sich erstmal durch Tonnen von Content wuseln bis er bei der Navigation der Seite ist. Danach klickt er, muss wieder Tonnen von Content über sich ergehen lassen / überspringen um dann zum nächsten Menupunkt zu kommen.

Meiner Meinung nach ist es sinnvoll erst das Menu, dann den Content.

Einen Aufsatz baust du doch auch nicht anders auf, oder? Inhaltsverzeichnis -> Inhalt.
Oder eine Präsentation: Inhaltsverzeichnis -> Präsentation.


Gruß
Loon3y

btw. hier gilt nicht die StVo., sondern links vor rechts floaten! D.h. das Menu was links sein soll, kommt auch vor dem was rechts daneben steht.
 
Nein.

Foxi hat schon recht.
Gerade für Vorlesebrowser stellt man das Menü eher ans Ende der Seite.

Stell Dir vor, Du liest irgendeinen Text, der auf mehrere Seiten verteilt ist, und müsstest Dir auf jeder Seite erst wieder das umfassende Menü mit 37 Links vorlesen lassen. Du würdest die Site verlassen.

Für Vorlesebrowser macht man dann einen Link "Zum Menü" an den Anfang der Seite.
 
Efchen schrieb:
Für Vorlesebrowser macht man dann einen Link "Zum Menü" an den Anfang der Seite.
Zum Vergrößern anklicken....

Ok bei umfassenden menus muss ich mich geschlagen geben. :-) Aber bei Menus mit weniger wie 10 Punkten...halte ich es für sinnvoller das Menu an den Anfang zu stellen.

Wohl auffassungssache...aber wie willst du einen links für den Browser zum Menu machen? via anker:
<a href="#navigation" title="navigation>&nbsp;</a> ?
 
wenns nach mir geht, wird ein menü nurnoch per xml angeboten und vom browser gesondert interpretiert.
die geplanten (x)html versionen machen es im prinzip genau so. d.h. es wird extra tags für menüs geben.
bis jetzt ist die sitemap die lösung.


EDIT:
ein aufsatz hat ein inhaktsverzeichnis(sitemap) und die einzenen unterseiten, die das menü nicht enthalten.
von prinzip her ist das äquivalent dazu eine seite mit frames. menü/inhalt
 
Zuletzt bearbeitet von einem Moderator:
Loon3y schrieb:
wie willst du einen links für den Browser zum Menu machen? via anker:
<a href="#navigation" title="navigation>&nbsp;</a> ?
Zum Vergrößern anklicken....
Naja, wie sonst? Nur ein sinnvoller Text muss natürlich rein. Und vielleicht kann man für media=screen noch ein display:none einbauen. Das müsste dann ja im Vorlesebrowser vorgelesen werden.
 
Efchen schrieb:
Naja, wie sonst? Nur ein sinnvoller Text muss natürlich rein. Und vielleicht kann man für media=screen noch ein display:none einbauen. Das müsste dann ja im Vorlesebrowser vorgelesen werden.
Zum Vergrößern anklicken....

hm...komisch das ich an sowa snoch garnicht gedacht hatte.. ^^ man lernt eben nie aus..danke.
 
Efchen schrieb:
Naja, wie sonst? Nur ein sinnvoller Text muss natürlich rein. Und vielleicht kann man für media=screen noch ein display:none einbauen. Das müsste dann ja im Vorlesebrowser vorgelesen werden.
Zum Vergrößern anklicken....

hat jemand diese technik erfolgreich in verbindung mit seo im einsatz?

wenn man sich mit jaws eine webseite in einem normalen browser vorlesen lässt, ist diese technik wirkungslos.
 
Im aktuellen Jaws wird display: none; tatsächlich nicht vorgelesen.
Ich würde Skiplinks (wenn für sehende nicht nötig) mit position:absolute; aus dem Viewport schieben.
Und gegebenenfalls bei :focus / :activ an die gewünschte Stelle zurückholen.

Mit display:none habe ich keine seo-Erfahrung.
Mit der position:absolute-Variante wurden meine "unsichtbaren" Links bisher immer gefunden.

Skiplinks die nur auf einen Anker/id innerhalb des Dokumentes verweisen sind für Suchmaschinen vermutlich nicht so so wichtig.
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben