Navigation erstellen

[Windassel]

Hi,

ich bräuchte mal Hilfe bei der Erstellung einer Navigation.

Meine Navigation ist insgesamt 860px breit. Ich habe 7 Registerkarten die sich genau über diese 860 px erstrecken sollen. Die Registerkarten sollten nach oben und nach unten hin den selben Abstand haben. (Wie groß der ist hab ich ka, nur ein paar px.)

Dann möchte ich, dass die Registerkarten immer dieselbe länge haben und alle Registerkarten immer an die darauffolgende anreihen. Also nicht das dazwischen Platz ist.

 ul#navigation_main_container /*Die Ganze Navigation*/  
                         {  
                         margin: 0px;  
                         padding: 5px;  
                         width: 860px;  
                         height: 40px;  
                         float: left;  
                         background-color: black;  
                         }  
  
                         ul#navigation_main_container li /* Die Spalten*/  
                         {  
                         display: inline;  
                         padding: 2px;  
                         margin: 2em;  
  
  
  
                         }  
  
                         ul#navigation_main_container a  /*Die Spalten*/  
                         {  
                         color: black; background-color: white;  
                         font-size: 1.5em;  
  
                         }  
  
                         ul#navigation_main_container a:hover  /*Rollover-effekt*/  
                         {  
                         color: white; background-color: gray  
  

Bis jetzt sieht es bei mir so aus. Den Unterschied zwischen px und em versteh ich auch nicht. :D mit em kann ich die größe verändern aber nicht mit px. Nun gut. Sieht wohl noch alles etwas wirr aus. Wenn Ihr aber wisst was ich meine und mir ein wenig helfen könnt, dann wäre ich Euch sehr verbunden. :) Arbeite derweil an meiner Vorstellung.

[Encoder]

Du musst halt den Tabs auch eine feste Breite geben. 860 : 7 ergibt aber nichts schönes.
margin darfst du den Spalten nicht geben, wenigstens keinen links / rechts. Sonst ist natürlich Platz dazwischen.

Was em genau machst müsstest du nachschauen, das steht bei Selfhtml. Hat irgendwas mit relativen Angaben zu tun. Aber für deine Pixel ist es nicht geeignet, da bleib bei px.

[Matthias Apsel]

Om nah hoo pez nyeetz, Encoder!

Was em genau machst müsstest du nachschauen, das steht bei Selfhtml.

zum Beispiel im Wiki.

Matthias

[Malcolm Beck´s]

مرحبا

Meine Navigation ist insgesamt 860px breit. Ich habe 7 Registerkarten die sich genau über diese 860 px erstrecken sollen.

Mit display:table; kriegt man das gewünschte Verhalten mit wenigen Zeilen hin. So sieht es dann aus.

mfg

[Windassel]

مرحبا

Meine Navigation ist insgesamt 860px breit. Ich habe 7 Registerkarten die sich genau über diese 860 px erstrecken sollen.

Mit display:table; kriegt man das gewünschte Verhalten mit wenigen Zeilen hin. So sieht es dann aus.

mfg

danke *_*

[Windassel]

مرحبا

Meine Navigation ist insgesamt 860px breit. Ich habe 7 Registerkarten die sich genau über diese 860 px erstrecken sollen.

Mit display:table; kriegt man das gewünschte Verhalten mit wenigen Zeilen hin. So sieht es dann aus.

mfg

ul#navigation_main_container  
                         {  
                         padding: 0px;  
                         margin: 0px;  
                         background-color: black;  
  
  
                         }  
  
                         ul#navigation_main_container  
                         {  
                         width:860px;  
                         display:table;  
                         }  
  
                         ul#navigation_main_container li /*Spalten*/  
                         {  
                         display: table-cell;  
                         border: 0.5px solid grey;  
                         }  
  
                         ul#navigation_main_container a /*Schrift*/  
                         {  
                         color: white;  
                         }  
  
                         ul#navigation_main_container a:hover /*Rollover-effekt*/  
                         {  
                         background-color: grey;  
  
                         }

also bist jetzt habe ich das so. Würde nur noch gerne die Schrift verändern und wenn ich mit der Maus drüber fahre, soll sich die farbe vom ganzen kästchen verändern und nicht nur der hintergrund von der schrift. Bin als am rumprobieren

[Malcolm Beck´s]

مرحبا

Würde nur noch gerne die Schrift verändern und wenn ich mit der Maus drüber fahre, soll sich die farbe vom ganzen kästchen verändern und nicht nur der hintergrund von der schrift.

Dazu brauchst du nur die Links (die <a>-Elemente in deinem HTML) richtig formatieren. Versuch's mal mit:

ul#navigation_main_container a  /*Die Spalten*/  
                         {  
                         color: black; background-color: white;  
                         font-size: 1.5em;  
  
                             display:block;  
  
                         }

mfg

[Windassel]

مرحبا

Würde nur noch gerne die Schrift verändern und wenn ich mit der Maus drüber fahre, soll sich die farbe vom ganzen kästchen verändern und nicht nur der hintergrund von der schrift.

Dazu brauchst du nur die Links (die <a>-Elemente in deinem HTML) richtig formatieren. Versuch's mal mit:

ul#navigation_main_container a  /Die Spalten/

{
                         color: black; background-color: white;
                         font-size: 1.5em;

display:block;

}

>   
> mfg  
  
und wie mach ich das wenn ich die registerkarte hervorheben will, wenn sich da gerade jemand drauf befindet? hab da irgendwas im internet mit a: visited etc. gesehen. bin gerade dran

[Malcolm Beck´s]

مرحبا

und wie mach ich das wenn ich die registerkarte hervorheben will, wenn sich da gerade jemand drauf befindet? hab da irgendwas im internet mit a: visited etc. gesehen. bin gerade dran

Bei der Aktiven Seite einfach den Link entfernen.

<ul>  
  <li><a href="#">Seite 1</a></li>  
  <li><a href="#">Seite 2</a></li>  
  <li><span>Aktive Seite 3</span></li>  
</ul>

Und dem <span>-Element noch die Eigenaschaften von a zuweisen.

ul#navigation_main_container span, /* Diese Zeile hinzufügen */  
ul#navigation_main_container a  
                         {  
                         color: black; background-color: white;  
                         font-size: 1.5em;  
  
                             display:block;  
  
                         }

mfg

[Windassel]

مرحبا

und wie mach ich das wenn ich die registerkarte hervorheben will, wenn sich da gerade jemand drauf befindet? hab da irgendwas im internet mit a: visited etc. gesehen. bin gerade dran

Bei der Aktiven Seite einfach den Link entfernen.

<ul>

<li><a href="#">Seite 1</a></li>
  <li><a href="#">Seite 2</a></li>
  <li><span>Aktive Seite 3</span></li>
</ul>

>   
> Und dem `<span>`{:.language-html}-Element noch die Eigenaschaften von a zuweisen.  
>   
> ~~~css

ul#navigation_main_container span, /* Diese Zeile hinzufügen */  

> ul#navigation_main_container a  
>                          {  
>                          color: black; background-color: white;  
>                          font-size: 1.5em;  
>   
>                              display:block;  
>   
>                          }

mfg

hm, irgendwie will das nicht

ul#navigation_main_container span,  
                         ul#navigation_main_container a /*Schrift*/  
                         {  
                         color: white; background-color: #ADADAD;  
                         font-size: 24px;  
                         text-decoration: none;  
                         display: block;  
  
                         }

<ul id="navigation_main_container"> <!-- Navigation Anfang -->  
                                     <li><span>Tag1</span></li>  
                                     <li><a href="Tag2.html">Tag&nbsp;2</a></li>  
                                     <li><a href="Tag3.html">Tag&nbsp;3</a></li>  
                                     <li><a href="Tag4.html">Tag&nbsp;4</a></li>  
                                     <li><a href="Tag5.html">Tag&nbsp;5</a></li>  
                                     <li><a href="Bilder.html">Bilder&nbsp</a></li>  
                                 </ul>  <!-- Navigation Ende -->

hab ich irgendwo was falsch eingetragen? :/

[Malcolm Beck´s]

مرحبا

Bitte zitiere Sinnvoll. Am besten nur das, wozu du eine frage hast.

hm, irgendwie will das nicht

Was will nicht? Was erwartest du, was passiert statt dessen? Du musst schon etwas konkreter werden. Ideal wäre neben einer genauen Problembeschreibung ein Online-Beispiel.

hab ich irgendwo was falsch eingetragen? :/

Keine Ahnung. Ich weiss ja nicht, was genau du erwartest, und was statt dessen passiert.

mfg

[Gunnar Bittersmann]

@@Malcolm Beck´s:

nuqneH

مرحبا

und wie mach ich das wenn ich die registerkarte hervorheben will, wenn sich da gerade jemand drauf befindet? hab da irgendwas im internet mit a: visited etc. gesehen. bin gerade dran

Bei der Aktiven Seite einfach den Link entfernen.

Was auch heißen kann: Einfach das @href-Attribut entfernen, a-Element lassen (was programmatisch einfacher ist).

<ul>  
  <li><a href="#">Seite 1</a></li>  
  <li><a href="#">Seite 2</a></li>  
  <li><a>Aktive Seite 3</a></li>  
</ul>

'#navigation_main_container a' bekommt die Styles für alle Menüeinträge, '#navigation_main_container a[href]' die für die Links.

ul#navigation_main_container span,
ul#navigation_main_container a

Die Selektoren sind überspezifiziert, das 'ul' vor '#navigation_main_container' braucht niemand.

Qapla'

[Malcolm Beck´s]

مرحبا

Was auch heißen kann: Einfach das @href-Attribut entfernen, a-Element lassen (was programmatisch einfacher ist).

Und dann über die Attribut-Selektoren stylen? Richtungsweisend wäre es ja zweifels ohne, aber can i use?

'#navigation_main_container a' bekommt die Styles für alle Menüeinträge, '#navigation_main_container a[href]' die für die Links.

Hat sich gerade beantwortet ;)

Die Selektoren sind überspezifiziert, das 'ul' vor '#navigation_main_container' braucht niemand.

Stimmt, Danke für die korrektur.

mfg