Navigation

Jan · 16.01.2006, 18:05

Hallo,

ich habe mir mal was geholt um meine navigation ein bisschen zu verschönern:

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
  <title>navigation</title>
  <link href="../style/stylesheet2.css" rel="stylesheet" type="text/css">
</head>
<body style="height: 50px;" "width: 97px;">
<table style="text-align: left; width: 100px; background-color: rgb(168, 196, 232);" border="1" cellpadding="2" cellspacing="2">    <tr>
      <td><ul id="Navigation"><li><a href="../../body/startseite/startseite.html" target="Hauptframe">Home</a></li></td>   </tr>
    <tr>      <td><ul id="Navigation"><li><a href="../../body/bilder/bilder.html" target="Hauptframe">Bilder</a>
      <ul>
        <li><a href="../../body/bilder/bilder.html#Klassenfoto" target="Hauptframe">Klassenfoto</a></li>
        <li><a href="../../body/bilder/bilder.html#Theater Auff&uuml;hrung" target="Hauptframe">Theater Auff&uuml;hrung</a></li>
.....

Code:

p {
color: rgb(0, 0, 153); font-family: Andale Sans,Comic Sans MS,Verdana,Arial,Comic Sans MS,Verdana,Arial; font-size: 35px;
}

h1 {
color: rgb(0, 0, 153);
font-family: Andale Sans,Comic Sans MS,Verdana,Arial; font-size: 60px;
}

font {
color: rgb(0, 0, 153);
font-family: Andale Sans,Comic Sans MS,Verdana,Arial; font-size: 25px;
}

a {
color: rgb(0, 0, 153);
font-family: Andale Sans,Comic Sans MS,Verdana,Arial; font-size: 100%;
}

font2 {
text-decoration: underline;
color: rgb(0, 0, 153);
font-family: Andale Sans,Comic Sans MS,Verdana,Arial; font-size: 28px;
font-weight : bold;
}

font3 {
color: rgb(0, 0, 153);
font-family: Andale Sans,Comic Sans MS,Verdana,Arial; font-size: 28px;
font-weight : bold;
}

body {
background-color: rgb(232, 240, 249);
/*margin-top: 12px;*/
alink="#000089";
link="#000089";
vlink="#990099";
font: normal 100.01% Andale Sans,Comic Sans MS,Verdana,Arial;
color: rgb(0, 0, 153);
}

td  { background-color: rgb(185, 206, 236); height: 35px;
}

  ul#Navigation {
    margin: 0; padding: 0;
    text-align: center;
  }

  ul#Navigation li {
    list-style: none;
    float: left;  /* ohne width - nach CSS 2.1 erlaubt */
    position: relative;
    margin: 0.0em; padding: 0;
  }
  * html ul#Navigation li {  /* Korrektur fuer den IE */
    margin-bottom: 0.0em;
  }

  ul#Navigation li ul {
    margin: 0; padding: 0;
    position: absolute;
    top: 0.0em; left: 0.0em;
    display: none;  /* Unternavigation ausblenden */
  }
  * html ul#Navigation li ul {  /* Korrektur fuer IE 5.x */
    left: 0.0em;
    lef\t: 0.0em;
  }
  ul#Navigation li:hover ul {
    display: block;  /* Unternavigation in modernen Browsern einblenden */
  }
  ul#Navigation li ul li {
    float: inline;
    display: block;
    margin-left: 0.5em;
  }

  ul#Navigation a, ul#Navigation span {
    display: block;
    width: 6.4em;  /* Breite den in li enthaltenen Elementen zuweisen */
    padding: 0.2em 1em;
    text-decoration: none; font-weight: bold;
    border: 1px solid black;
    border-left-color: white; border-top-color: white;
    color: rgb(0, 0, 153); background-color: rgb(232, 240, 249);
  }
  * html ul#Navigation a, * html ul#Navigation span {
    width: 8.6em;   /* Breite nach altem MS-Boxmodell fÃ¼r IE 5.x */
    w\idth: 6.4em;  /* korrekte Breite fuer den IE 6 im standardkompatiblen Modus */
  }
  ul#Navigation a:hover, ul#Navigation span, li a#aktuell {
    border-color: white;
    border-left-color: black; border-top-color: black;
    color: rgb(0, 0, 153); background-color: rgb(232, 240, 249);
  }
  li a#aktuell {  /* aktuelle Rubrik kennzeichnen */
    color: rgb(0, 0, 153); background-color: rgb(232, 240, 249);
  }
  ul#Navigation li ul span {  /* aktuelle Unterseite kennzeichnen */
    background-color: rgb(232, 240, 249);
  }

Es klappt soweit auch alles nur wenn ich bei Bilder mit der maus drüber fahre erscheint das unterverzeichniss unter den anderen schaltflächen. Kann ich die zeile so modifizieren das sie sich dem untermenü anpasst?

didi · 16.01.2006, 21:53

Hi,

Zitat:

float: inline;

Was das denn?
float-inline kommt aus Js

Zitat:

und das??? Oh Oh da wartet Arbeit auf dich

hast du die seite schon on..dann gib mal einen Link .
.
.
.

Jan · 16.01.2006, 22:34

Zitat:

Zitat von didi

Hi,

Zitat:

float: inline;

Was das denn?
float-inline kommt aus Js

Zitat:

und das??? Oh Oh da wartet Arbeit auf dich

Warum? Was ist falsch?

Zitat:

Zitat von didi

hast du die seite schon on..dann gib mal einen Link .
.

Nein hab ich noch nicht. Liegt nur lokal vor.

Jann Hendrik · 17.01.2006, 07:53

link zum lesen zu float:

http://css4you.de/float.html

generell ist die Seite auch gut für CSS-Fragen.

warum packst du die style-Angaben in den HTML-Bereich?
du hast doch im CSS schon einen style für body definiert?

mr1st · 17.01.2006, 15:29

Zitat:

Zitat von jan88

Zitat:

Zitat von didi

Hi,

Zitat:

float: inline;

Was das denn?
float-inline kommt aus Js

Zitat:

und das??? Oh Oh da wartet Arbeit auf dich

Warum? Was ist falsch?

Wenn, dann so hier:

Code:

<body style="height: 50px; width: 97px;">...</body>

also

Code:

<tag style="key: value; key: value; ...">...</tag>

Oder sowieso in die externe CSS-Datei, wie Jann Hendrik bereits erwähnt hat.

Ben · 17.01.2006, 17:07

float: inline ...

Entweder float:left/right oder display:inline ..
Was willsten jetzt haben?

Bookworm · 18.01.2006, 13:17

Ansonsten wäre es echt gut, das mal vor Augen zu haben. Anhand vom Quelltext allein kann man sich das nur bedingt vorstellen.

Jan · 18.01.2006, 14:25

Zitat:

Zitat von Bookworm

Ansonsten wäre es echt gut, das mal vor Augen zu haben. Anhand vom Quelltext allein kann man sich das nur bedingt vorstellen.

Okay habs mal hochgeladen.
Hier
wenn man auf Bilder geht erscheint das Menü unterhalb der anderen Schaltflächen. Hätte halt gerne, das sich in dem Fall, dass der Benutzer mit der Maus über diese Schaltfläche fährt diese Zeile automatisch vergrößert so dass sich das Untermenü vollständig zeigen kann.

pichfl · 27.01.2006, 21:40

allein für die tabelle sollte man dich treten.

(nicht böse gemeint)
nimme einfach eine <ul> - was spräche dagegen.

dann kannst du das so begrenzen:
in der css:
li.menuitem .subitem{ display:block; height:0; width:0; overflow:hidden; }
und für hover:
li.menuitem:hover .subitem{ height:auto; width:auto; overflow:inherit; }

HTML-Code:

<ul>
   <li class="menuitem">
      <h2>Menüpunkt</h2>
      <ul class="subitem">
         <li>Unterpunkt</li>
         <li>Unterpunkt</li>
      </ul>
   </li>
   <li class="menuitem">
      <h2>Menüpunkt</h2>
      <ul class="subitem">
         <li>Unterpunkt</li>
         <li>Unterpunkt</li>
      </ul>
   </li>
</ul>

nachteil:
für dien IE brauchst du ein script, dass den :hover für list-items nachrüstet.
ein solches beschreibt das alistapart-tut "suckerfish dropdowns" (http://alistapart.com)

greez

$traight-$hoota · 28.01.2006, 15:53

Zitat:

Zitat von pichfl

li.menuitem .subitem{ display:block; height:0; width:0; overflow:hidden; }

schreib doch einfach

li.menuitem .subitem{ display:none; }

Jan · 28.01.2006, 16:40

Zitat:

Zitat von pichfl

allein für die tabelle sollte man dich treten.

(nicht böse gemeint)
nimme einfach eine <ul> - was spräche dagegen.

dann kannst du das so begrenzen:
in der css:
li.menuitem .subitem{ display:block; height:0; width:0; overflow:hidden; }
und für hover:
li.menuitem:hover .subitem{ height:auto; width:auto; overflow:inherit; }

HTML-Code:

<ul>
   <li class="menuitem">
      <h2>Menüpunkt</h2>
      <ul class="subitem">
         <li>Unterpunkt</li>
         <li>Unterpunkt</li>
      </ul>
   </li>
   <li class="menuitem">
      <h2>Menüpunkt</h2>
      <ul class="subitem">
         <li>Unterpunkt</li>
         <li>Unterpunkt</li>
      </ul>
   </li>
</ul>

nachteil:
für dien IE brauchst du ein script, dass den :hover für list-items nachrüstet.
ein solches beschreibt das alistapart-tut "suckerfish dropdowns" (http://alistapart.com)

greez

Danke geht super. Aber wie kann ich die Punkte vor der liste noch wegnehmen?

und wie ist das mit dem IE?

//edit:
und noch eine Frage. Wie kann ich unter-ubntermenüs erstellen?

Lars · 28.01.2006, 17:22

Code:

li {
    list-style-image: none;
}

Ob verschachtelte Listen valid sind, weiß ich nicht. Gehen dürfte es aber.

HTML-Code:

<ul>
  <li>
    <ul>
      [...]
    </ul>
  </li>
</ul>

Jan · 28.01.2006, 17:34

Zitat:

Zitat von Lars

Code:

li {
    list-style-image: none;
}

das scheint leider nicht zu gehen. Bei mir (FF 1.0.7) sind die Punkte leider immernoch.

Zitat:

Zitat von Lars

Ob verschachtelte Listen valid sind, weiß ich nicht. Gehen dürfte es aber.

HTML-Code:

<ul>
  <li>
    <ul>
      [...]
    </ul>
  </li>
</ul>

nein scheint nicht ganz so einfach zu gehen. So habe ich es auch versucht bin aber gescheitert

Lars · 28.01.2006, 17:36

Sorry, es muss natürlich

Code:

ul {
    list-style-image: none;
}

heißen, also ul anstatt von li.

Jan · 28.01.2006, 17:52

Zitat:

dann kannst du das so begrenzen:
in der css:
li.menuitem .subitem{ display:block; height:0; width:0; overflow:hidden; }
und für hover:
li.menuitem:hover .subitem{ height:auto; width:auto; overflow:inherit; }

genau das steht bei mir in der css. und deine erweiterung halt. aber die punkte gehen nicht weg. scheinen wohl die masern zu sein. werd mal zum arzt gehen

//edit:
Noch ein problem hat sich ergeben. Wenn ich einmal auf ein untermenüe gefahren bin verändert sich die höhe der zeile dauerhaft.

Jan · 29.01.2006, 11:36

Hier mal ein bild damit ihr euch ein bild machen könnt von meinem Problem.

Wie ihr seht ist dort das untermenü umgebrochen. Und die punkte sind immernoch da. was man leider nicht sieht ist das wenn man über ein untermenü gefahren ist die göße sich verändert.

17.01.2006, 07:53	Nach oben #4
Jann Hendrik Projektleiter Registriert seit: 02.12.2004 Ort: Wildeshausen Beiträge: 2.212	link zum lesen zu float: http://css4you.de/float.html generell ist die Seite auch gut für CSS-Fragen. warum packst du die style-Angaben in den HTML-Bereich? du hast doch im CSS schon einen style für body definiert? __________________ Umfragen: bitte beachten: Vorschläge für künftige Umfragen Woher weißt du vom developers-guide? Wenn du dich in ein interessantes Thema eingearbeitet hast, dann lass andere daran teilhaben! Schreibe ein Tutorial und beschreibe, wie es geht, was nicht klappt, wo man aufpassen muss usw. Danke!

17.01.2006, 17:07	Nach oben #6
Ben Erfahrener Benutzer Registriert seit: 02.12.2004 Ort: Remagen Beiträge: 4.619	float: inline ... Entweder float:left/right oder display:inline .. Was willsten jetzt haben? __________________ Mehr TuS Koblenz geht nicht ... Aktuell ... - Neue Gegner für die TuS: 1.FC Nürnberg - 5 neue Gegner 2008/09 - Informationsveranstaltung für Mitglieder - Förderkasse füllt sich - B-Jugend Rheinlandpokalfinale terminiert - A-Jugend I gewinnt Rheinlandpokal

18.01.2006, 13:17	Nach oben #7
Bookworm n00b -.- Registriert seit: 10.11.2005 Beiträge: 318	Ansonsten wäre es echt gut, das mal vor Augen zu haben. Anhand vom Quelltext allein kann man sich das nur bedingt vorstellen. __________________ Alle wollen doch nur mein Bestes. Aber sie werden es nicht kriegen!

27.01.2006, 21:40	Nach oben #9
pichfl CSS-Spinner Registriert seit: 27.08.2005 Ort: Kissing Beiträge: 46	allein für die tabelle sollte man dich treten. (nicht böse gemeint) nimme einfach eine <ul> - was spräche dagegen. dann kannst du das so begrenzen: in der css: li.menuitem .subitem{ display:block; height:0; width:0; overflow:hidden; } und für hover: li.menuitem:hover .subitem{ height:auto; width:auto; overflow:inherit; } HTML-Code: <ul> <li class="menuitem"> <h2>Menüpunkt</h2> <ul class="subitem"> <li>Unterpunkt</li> <li>Unterpunkt</li> </ul> </li> <li class="menuitem"> <h2>Menüpunkt</h2> <ul class="subitem"> <li>Unterpunkt</li> <li>Unterpunkt</li> </ul> </li> </ul> nachteil: für dien IE brauchst du ein script, dass den :hover für list-items nachrüstet. ein solches beschreibt das alistapart-tut "suckerfish dropdowns" (http://alistapart.com) greez Geändert von pichfl (27.01.2006 um 21:53 Uhr).

28.01.2006, 17:22	Nach oben #12
Lars me pro ok? Registriert seit: 07.09.2005 Ort: Pulheim bei Köln Beiträge: 964	Code: li { list-style-image: none; } Ob verschachtelte Listen valid sind, weiß ich nicht. Gehen dürfte es aber. HTML-Code: <ul> <li> <ul> [...] </ul> </li> </ul> __________________ Gedanken aus Draht stricken einen Zaun.

28.01.2006, 17:36	Nach oben #14
Lars me pro ok? Registriert seit: 07.09.2005 Ort: Pulheim bei Köln Beiträge: 964	Sorry, es muss natürlich Code: ul { list-style-image: none; } heißen, also ul anstatt von li. __________________ Gedanken aus Draht stricken einen Zaun.