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

Vertikales Menü ohne Tabelle

M

McSharkAT

Neues Mitglied
Hallo,

ich wurde von dem Leiter des Projekts an meiner Schule ''auserwählt'' die Website dafür zu erstellen. Leider habe ich noch nie selber eine gecodet, daher fällt mir das schwer.
Ich habe mir sowieso schon lange vorgenommen endlich HTML und CSS zu lernen, also passt es eigentlich eh.
Ich benutze Dreamweaver CS5 und Photoshop CS5 (noch Testversion), gefallen mir sehr gut.

Das grobe ''Grundgerüst'' steht schon, allerdings brauche ich ein vertikales Menü. Ohne Dropdown und ohne hover, vorerst einfach nur Text.
Bisher fand ich nur die Möglichkeit das mit Tabellen zu realisieren, funktioniert allerdings nicht so wie ich will (wahrscheinlich bin ich schuld :)). Ich habe auch versucht einfach das Menü als Grafik in den header zu machen, aber man kann meines Wissens nach ja keinen bestimmten Bereich mit einem Link verbinden (oder?).
Jedenfalls wäre mir das lieber, denn mit Tabellen schaut das unter anderem nicht toll aus.

Ein weiteres Problem ist, dass ich den Text in middle (meine style.css besteht aus header, middle und foot) derzeit auch mit Tabellen machen muss, da der Text sonst über das Design geht (ist an den Seiten ein wenig transparent).

Die Seite:
Start - McSharkAT (Menü im header intigriert; als Grafik)
http://mcsharkat.kilu.biz/index_tabelle.html (Menü als Tabelle)
Warum das Menü bei der Tabelle nicht funktioniert weiß ich nicht, die Links sind richtig und die Files existieren auch.

Ich hoffe ihr versteht meine Fragen/Probleme, auch wenn ich mich eventuell nicht korrekt ausdrücke (habe gerade den Text geschrieben, wurde dann gelöscht weil ich komischerweise nicht eingeloggt war. Ist jetzt also das 2. mal das ich das hier schreibe, hab teilweise schon vergessen was ich geschrieben habe (außerdem nervt mich mein Kumpel über Skype und labert irgendwas, ich kann mich nicht konzentrieren ^^).

Ich danke jetzt schon für jede Hilfe, ich brauche wirklich jede.

Lg,
McSharkAT
 
Hallo,

also
Ich benutze Dreamweaver CS5 und Photoshop CS5 (noch Testversion), gefallen mir sehr gut.
Zum Vergrößern anklicken....
Testvesion Lassen wir jetzt mal so stehen ;O).

Also das mit Tabellen ist schrot und
sowas von veraltet aber die willst ja weck bekommen.

Deine styles.css ist niedlich.
Du solltest vielleicht auch bei header, middle und foot eine WIDTH breite angeben
zb. WIDTH:1000px; und dann auch margin:0 auto; das es Zentriert ist und das center kannst dann löschen.
Breite würde ich nicht höher machen als 1000px sonst haben vielen ein Scroll in der Breite.

Das mit Menü:
Menüs sind ul li listen und zu Sicherheit noch ein div rum also:
Code: 
<div id="menue"><ul>
Code: 
[FONT=Tahoma]<li>Start</li>[/FONT]
[FONT=Tahoma]<li>Kontakt</li>[/FONT]
[FONT=Tahoma]<li>impressum</li>[/FONT]
[FONT=Tahoma]</ul></div>[/FONT]

jetzt kannst per css das schick machen und neben einander
zb. #menue ul li {float:left;}

einfach mal nach "Horizontales css Menü" suchen.

sollte fürs erste reichen und genügend neue fragen aufwerfen.

Cheffchen.
 
Cheffchen schrieb:

also Testvesion Lassen wir jetzt mal so stehen ;O).
Zum Vergrößern anklicken....

Nicht jeder kann sich Programme für insgesamt 1500€ + leisten :)

Cheffchen schrieb:

Du solltest vielleicht auch bei header, middle und foot eine WIDTH breite angeben
zb. WIDTH:1000px; und dann auch margin:0 auto; das es Zentriert ist und das center kannst dann löschen.
Breite würde ich nicht höher machen als 1000px sonst haben vielen ein Scroll in der Breite.
Zum Vergrößern anklicken....

Bei allen 3 war schon eine Breite angegeben (nämlich 1024 px, ich denke auf weniger braucht man heute nicht mehr Rücksicht nehmen). margin:0 auto; habe ich gemacht, danke :)

Cheffchen schrieb:
Das mit Menü:
Menüs sind ul li listen und zu Sicherheit noch ein div rum also:
Code: 
<div id="menue"><ul>
Code: 
[FONT=Tahoma]<li>Start</li>[/FONT]
[FONT=Tahoma]<li>Kontakt</li>[/FONT]
[FONT=Tahoma]<li>impressum</li>[/FONT]
[FONT=Tahoma]</ul></div>[/FONT]
jetzt kannst per css das schick machen und neben einander
zb. #menue ul li {float:left;}
Zum Vergrößern anklicken....

Danke, aber schaut komisch aus :O (http://mcshark.tk)
Ich hab jetzt den header als eigene Grafik und die Menüleiste als eigene Grafik gemacht, aber es scheint der Hintergrund für middle zu sein, obwohls in menue angegeben ist.
In middle ist ja bei mir unter anderem auch der Text (in einer Tabelle), kann ich die Tabelle jetzt löschen und es ist trotzdem in der Mitte?

Danke,
McSharkAT

EDIT: Ich merk gerade, dass ich echt gefailt habe.. ich brauche ein horizontales Menü :O
 
Also das mit Tabellen ist schrot und
sowas von veraltet aber die willst ja weck bekommen.

Na das finde ich nicht. Man sollte nur die Tabelle über CSS formatieren, aber sonst sehe ich für den gewünschten Zweck keinen großen Unterschied zwischen <td> und <li>. Eventuell denke ich so, weil ich mein Menü mit Tabellen gemacht habe
Dr. Rainer Rosenberger
Grüße,. Rainer
 
NetAktiv schrieb:
Na das finde ich nicht. Man sollte nur die Tabelle über CSS formatieren, aber sonst sehe ich für den gewünschten Zweck keinen großen Unterschied zwischen <td> und <li>. Eventuell denke ich so, weil ich mein Menü mit Tabellen gemacht habe
Zum Vergrößern anklicken....
Schuldige, es ist ja schön wenn mehr als einer Lösungen zeigt zu einem Problem, meistens gibt es ja nicht den einen weg.
Aber das ist echt veraltet und einfach falsch was hier erzählst und bedarf heute nun echt keiner Diskosion mehr weder Tabelle als Lyaut noch Tabelle als Menü.

@McSharkAT:
ja jetzt ist width drin, letzten noch nicht.
McSharkAT schrieb:
Bei allen 3 war schon eine Breite angegeben (nämlich 1024 px, ich denke auf weniger braucht man heute nicht mehr Rücksicht nehmen). margin:0 auto; habe ich gemacht, danke
Zum Vergrößern anklicken....
1024 ist zu breit oder meinst das iPad veraltet ist :O)
also max 1000 oder dir ist halt Horizontaler Scroll egal.

Das ul li Menü
Danke, aber schaut komisch aus
Zum Vergrößern anklicken....
das was ich in css geschrieben hatte war ja nur ein kleiner teil. @prm hat dir ja schon ein schicken link gezeigt.

Aber solltest vielleicht noch mal richtig und geordnet anfangen.
1. deine 3 divs anlegen
2. die divs per css ausrichten und positionieren, wenn es geht ohne position:absolute :O)
3. dann kannst wenn alles steht in das div fürs menü dein menü einbauen.
4. usw.

Cheffchen
 
Hallo.

Das stimmt zwar fast alles so wie es Cheffchen geschrieben hat, aber ein Layout mit div zu machen ist genau so falsch wie mit Tabellen.

Setze div nur dort ein wo es auch sinnvoll ist. Bei deinem Menü zum Beispiel ist es absolut unnötig.

Gruss
Elroy
 
Jetzt habe ich doch ein vertikales Menü gemacht, sieht meiner Meinung nach besser aus.
Ich habe übrigens auch neu begonnen, aber irgendwie lasst sich das Menü nicht in die Mitte schieben. Wenn ich in der .css background-color: #000; mache (dürfte schwarz sein laut Dreamweaver) passiert nichts (natürlich wurde gereloadet) und wenn ich ein background-image einfüge passiert auch nichts. Habe ich wo einen Fehler gemacht? Habe einen Container für die Navigation gemacht, mit float: left; bestückt (sollte das Ding eigentlich einrücken oder so oder?), dann mit margin:0 auto; (passierte auch nichts), und dann mit beiden (passierte auch nix).
Außerdem zeigt mir Dreamweaver einen Fehler für IE 6 und FF 3 bei .content in der .css an.. was ist da falsch?

Seite: http://mcshark.tk

Lg,
McSharkAT
 
Unter der eigentlichen URL Start - McSharkAT sehe ich kein Menü und folglich sehe ich auch dein Problem nicht. Unabhängig davon klingt dein Beitrag danach als würdest Du einfach so herumprobieren. Lass das lieber. Informiere dich was float macht und wofür man margin auf auto setzt (und wann es wirkt).
 
Menü ist noch nur Text, siehst du eh. Links kommen noch, erstmal mag ich, dass das in der Mitte ist und nen Hintergrundbild hat.
Funktioniert beides nicht, obwohl die Befehle dafür gesetzt sind. Ich brauche ja eben hier Hilfe, weiter will ich machen aber es geht nicht.
Wenn du in die styles.css bzw. index.html schaust, siehst du, dass z.B. ein Hintergrundbild gesetzt ist, aber es nicht angezeigt wird.
 
In deiner style.css fehlt beim Abschnitt für "#foot" ein beendendes "}", dadurch interpretieren die Browser deinen Stylesheet aber #foot nicht. Korrigiere das und deine Style-Angaben für die Klasse "navigation" wirken wieder.

Tipp: mit einer passenden Erweiterung für deinen Browser oder einen CSS-Validator hättest Du das Problem schnell und zeitnah selbst entdeckt ;-)
 
Danke, hab ich doch glatt das } vergessen :O

Ok ist jetzt wieder in einer Liste, leider lasst sich die aber nicht in die Mitte rutschen?!
 
Hallo.

Gib deinem div eine Weite und dann mit margin: 0 auto; zentireren, und zwar dem div <div class="navi">

Du scheinst allerdings noch ein wenig Probleme mit deinen Selektoren zu habe.
Du gibst deinen links ein float: left, margin: 0 auto und text-align: center.
Damit wolltest du wohl eher deine Listeneinträge oder die Liste selbst formatieren.

Hier etwas Lektüre über Selektoren und wie man sie benutzt: Selektoren - Einführung in CSS - Einführung in XHTML, CSS und Webdesign - Michael Jendryschik

Gruss
Elroy
 
Hallo.

Ich glaube ich hatte dich falsch verstanden.

Füge das in deine CSS ein:
Code: 
.navi {text-align: center;}
Und entferne das aus deiner CSS:
Code: 
.navi a {
    float: left;
    width: 150px;
    font-family: sans-serif;
    text-align: center;
    list-style-type: none;
    background-color: #36F;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    text-align: left;
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: #0C0;
}
Das ist Schrott.

Und dann lies dir bitte meinen Link durch bevor du weiter machst.

Gruss
Elroy
 
Danke für die schnelle Antwort! :)

Jetzt ist das Menü in der Mitte (also der Text), aber ich brauch das links unter dem Header (du/ihr wisst was ich meine oder?). Ich denke, dass ich das mit float: left hinbekommen würde, funktioniert nur leider nicht.
Wenn ich ''navi'' eine Breite (150px) gebe, wandert es wieder zurück ganz nach links.

PS: Deinen Link habe ich mir durchgelesen! :)
 
Hallo.

Tut mir leid, ich habe absolut keine Ahnung was du meinst.

Dein Menü war links und du wolltest es in der Mitte haben.
Jetzt ist es in der Mitte und du schreibst du brauchst es links.

Kannst du vielleicht eine Zeichnung machen? Im Moment was ich echt nicht wo du das Menü haben willst.

Gruss
Elroy
 
Wenn Du das willst, dann ist der Grundaufbau deines HTML-Codes schon mal falsch (und immer noch fehlerhaft). Du müsstest um den Kopf, das Menü und den Footer ein div legen, welches die von dir gewünschte Breite für die Seite hat. Also:

HTML: 
<div id="wrapper">
 <div id="head"></div>
 <div class="navi">
   <ul>
    ..
   </ul>
 </div>
 <div id="foot"></div>
</div>

Dadurch hast Du nun die Möglichkeit das Menü innerhalb des Bereiches der Seite linksbündig anzuordnen. Also:

Code: 
#wrapper { width: XYpx; }
.navi {
 float: left;
 width: 200px;
}

Wenn Du dann noch neben dem Menü Content haben willst (wovon ich mal ausgehe) musst Du eben diesen noch einfügen - und zwar neben dem Element mit der Klasse navi. Also:

HTML: 
<div id="wrapper">
 <div id="head"></div>
 <div class="navi">
   <ul>
    ..
   </ul>
 </div>
 <div id="content">
   Content
 </div>
 <div id="foot"></div>
</div>

CSS:
Code: 
#content { float: left; width: XYpx; }
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben