Menüidee für ein Inhaltsverzeichnis

Hallo,

ich möchte für meine Seite ein einfaches Menü basteln und brauche dazu eure Hilfe. Eine Idee hab ich schon: 1. http://don1909.lima-city.de/Test/Bild1.jpg; 2. http://don1909.lima-city.de/Test/Bild2.jpg; 3. http://don1909.lima-city.de/Test/Bild3.jpg
Wenn ihr euch die Bilder angesehen habt, dann seht ihr ca. wie ich mir das Vorstelle. Ich möchte das mit mouse over kreieren und das sollte dann bei Speilberichten, Galerie und Statistiken passieren. Um zu vertiefen: http://www.tcf-jugendabteilung.de.vu. Würdet ihr das gut finden? Ich bräuchte auch hilfe um das umzusetzten, da ich bissher nur einmal ein Menü mit großer hilfe gebaut hab und ich das sehr schwer fand, hoffe ich auf ein leichten html code mit ein wenig css bei diesem!?

lg Daniel[/url]

jojo87

schau dir für wegen des Dropdowns mal das hier an:
http://www.htmldog.com/articles/suckerfish/dropdowns/

Gruß,
Jojo

sejuma

Oder dieses, das Prinzip ist das gleiche: http://www.drweb.de/leseproben/klappmenu.shtml

donfey

Danke euch beiden, ich werde mich jetzt mal damit beschäftigen. Also beim drüberschauen ist es auf jeden Fall das, was ich benötige
lg Daniel

infernalshade

Aber ein guter Tip: Bitte nicht FrontPage

donfey

Hallo,

ich wollte nochmal auf das Menü zurückkommen...
Bald fängt doch die neue Saison an und da soll die Homepage auch wieder fit sein.
Ich habe mich mal an das Menü von sejuma herangewagt. Es ist ja im Prinzip nichts schwieriges dran, jedoch habe ich das Problem, dass es im IE net funktioniert, obwohl es funktionieren soll:

Zitat

Den IE vergessen ist vermutlich gößter Wunsch fast aller CSS-Designer. Damit uns die Darstellungseigenheiten der Microsoft-Browser beim standardbasierten Konstruieren unseres Ausklappmenus nicht weiter in die Quere kommen sortieren wir sie mit Conditional Comments aus. Der folgende Code-Block kommt in den <head>, den IE müssen wir dann für dieses Projekt nicht weiter spezialbehandeln.




Alles anzeigen

Also beim Mozilla-Firefox funktionierts mal wieder ausgezeichnet Warum nicht auch beim IE, bitte um Hilfe!

ps.: Menü ist nur ein Test! Design, Breite & Höhe bzw. Anpassung müssen natürlich gemacht werden.

Menü http://don1909.lima-city.de/Test/startseite.htm

MfG
Daniel F.

yeti66

donfey,

hier einmal ein Ansatz als tabellenloses Layout:

HTML

<!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>
<meta http-equiv="Content-Language" content="de" />
<meta name="GENERATOR" content="Microsoft FrontPage 5.0" />
<meta name="ProgId" content="FrontPage.Editor.Document" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>TC Freisenbruch 02</title>
<style type="text/css">
<!--
html, body {margin:0;padding:0}
body {font: 76% arial, sans-serif;text-align:center}
#header {height:175px;}
#container {text-align:left;width:1030px;margin:0 auto;background-color:#009933;}
#navi {	float:left;width:200px; text-align:center; padding-left:10px;}
#content {float:right;width:790px;background-color:#CCCCCC; margin:10px;}
#footer {clear:both;background: #006600;color: #FFF;padding:2px; text-align:center;}
p{ padding-right:20px; padding-left:20px;}
img{ border:none;}
#middle { margin-bottom:14px;}
#menu {width: 200px;margin:10px 0;}
#menu ul {list-style: none; width:200px; margin:0; padding:0;}
#menu a, #menu h2 {font: bold 11px/16px arial, helvetica, sans-serif;display: block;border-width: 1px;border-style: solid;border-color: #ccc #888 #555 #bbb;margin: 0;padding: 2px 3px;}
#menu h2 {color: #FF8635;background: #96D12C;text-transform: uppercase;}
#menu a {color: #000;background: #efefef;text-decoration: none;}
#menu a:hover {color: #a00;background: #fff;}
#menu li {position: relative;}
#menu ul ul ul {position: absolute;top: 0;left: 100%;width: 100%;}
#menu ul ul ul, div#menu ul ul li:hover ul ul {display: none;}
#menu ul ul li:hover ul, div#menu ul ul ul li:hover ul {display: block;}
<!--
[if IE]> #menu ul li {float: left;width: 100%;}
<![endif]
-->
<!--
[if lt IE 7]> body {behavior: url(csshover.htc);font-size: 100%;}
#menu ul li a {heigth: 1%;}
<![endif]
-->
-->
</style>
</head>
<body>
<div id="container">
  <div id="header">[img]Banner.gif[/img][img]tcf_Vereinswappen.jpg[/img]</div>
  <div id="wrapper">
    <div id="content">



Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
  </div>
  <div id="navi">
    <div id="menu">
      <ul>
        [*]
          <h2>Inhaltsverzeichnis</h2>
          <ul>
            [*][url='#']Home[/url]
            [*][url='#']Statistiken[/url]
              <ul>
                [*][url='#']A-Jugend[/url]
                [*][url='#']B-Jugend[/url]
                [*][url='#']C-Jugend[/url]
                [*][url='#']D-Jugend[/url]
              [/list]

            [*][url='#']Spielberichte[/url] 
          [/list]

      [/list]
    </div>
  </div></div>
  <div id="footer">



Dein footer</p>
  </div>
</div>
</body>
</html>

Alles anzeigen

Leider ist für IE5.5 und IE6 noch Nacharbeit zu erbringen. Grundsätzlich solltest Du jedoch auf ein Tabellenlayout verzichten.

sowievorher

Hey yeti66,

warum sollte ich auf ein Tabellenlayout verzichten, im prinzip ist es doch eh egal, wenn ich die Farben und Größe der Tabelle verändere, sieht es doch nu trotzdem gut aus und funktioniert (zumindest beim Mozilla).
Mr ging es nur darum, warum oder bzw. wie ich es hinbekomme, dass es auch im IE 6 &7 angezeigt wird...

lg Daniel F.

Thonixx

Tabellen und -layoute sind veraltet und nach altem Standard. Steig um auf Divs etc...

driver

was dir firefox so lieblos hingeworfen hat, könnte man ausführlich auch mit
"internetfreundlicher" bezeichnen. zum einen is des thema barrierefreiheit
momentan recht im kommen. bezieht sich vorallem drauf, dass menschen
mit behinderungen (z.b. blinde) ne seite mit tabellenlayouts nicht so gut
"betrachten"² können.

zum anderen fällts suchmaschinen leichter ne seite mit divcontainern zu
durchsuchen als mit tabellen.

²: für blinde gibts programme, die ihnen die seiten "vorlesen". dabei werden
tabellen als komplettes objekt betrachtet.

Thonixx

Gut erklärt.
Dein Menü würd ich mit Divs machen, damit das ne runde Sache wird...

driver

menü mit divs ? wird des net weng ne suppe ?

also ich würds bei der liste lassen....

Thonixx

Oh.. Hmmm das geht ja net gut. Ja Liste ist schon nicht schlecht... Hab zuwenig überlegt, sry..

donfey

ich habe das Menü jetzt erstmal so gelassen, da ich mich nicht so gut auskenne um das mit div zu verändern. Danach geschaut um zu wissen wie hatte ich auch keine Zeit... Das Menü läuft jetzt nunmal im Mozilla so wie ich es will, doch jetzt würde ich auch gern das es im Ie läuft... Kennt sich jemand damit aus?
lg Daniel

Thonixx

Hast du nen Link?

driver

* firefox

manchmal hilft es nicht immer einfach nur zu schreiben.
manchmal solltest auch dein hirn einschalten...
lies doch mal den ersten post zu der ganzen sache...

Thonixx

sorry ich sag nix mehr falsches hier. reg dich ab.. is ja auch spät und ich dachte das wär vllt mal on mit der lösung von ihm oda so..

driver

Zitat

ich habe das Menü jetzt erstmal so gelassen

welche änderung ? naja, egal. achte einfach mal drauf. in letzter
zeit kommen nämlich öfter mal etwas lieblose oder unnötige antworten...

Tags