Navigation

[Nissi]

Servus,
ich bin noch ein Neuling im CSS/HTML Bereich ;)
Ich versuche gerade eine kleine Test-Webseite zu starten, dafür bräuchte ich aber noch Hilfe.
MeinFilm - Home (= Das Menü )
Das Menü sollte nun aber so wie das untere Bild aussehen. Also das der Weiße und der Blaue Hintergrund größer sind. Wie bekomme ich das gebacken ?

( Das ist der CSS-Code vom Menü )

/*Navigation*/
#menu
{
font: bold 11px arial;
width: 1100px;
height: 30px;
line-height: 30px;
background-color: #414141;
text-align: center;
margin-top: 0;
text-align: center;
margin-top: 75px;
}

#menu li
{
float: left;
display: inline;
height: 30px;
border-right: 1px solid #6d6d6d;
border-top-width: 15px;
}

#menu a
{
display: block;
text-decoration: none;
color: #a0a0a0;
margin-left: 12px;
margin-right: 12px;
padding: center;
}

#menu a:hover
{
color: #ffffff;
}

#index #navIndex a,
#komödie #navKomödie a,
#drama #navDrama a,
#fantasie #navFantasie a,
#action #navAction a,
#thriller #navThriller a,
#krimi #navKrimi a,
#sciencefiction #navScience-Fiction a,
#horror #navHorror a,
#comedy #navComedy a,
#kindertv #navKinder-TV a
{
background-color: #00acfd;
color: #000000;
height: 30px;
display: block;
}

#bummel
{
border-right: none;
}


/*Beispiele*/

#box
{
height: 200px;
width: 100px;
border: 1px solid black;
}

gr. chris

PS. mir ist bei dem Menü ein kleiner Fehler unterlaufen, deshalb spinnt es ein bisschen auf der Webseite rum, ich werde es aber wsl morgen beheben.

 

[prm]

So?

#menu li
{
float: left;
list-style: none;
height: 40px;
}

#menu a
{
text-decoration: none;
color: #a0a0a0;
margin-left: 12px;
margin-right: 12px;
height: 40px;
display: block;
}

 

[Nissi]

Servus,
ich sag dir morgen bescheid, ob es ging :)

gr. chris

 

[Nissi]

Servus,
das mit dem blauen Hintergrund hat jetzt wunderbar geklappt :)

Nun haben sich aber zwei neue Fragen ergeben :
1. Meine Menüpunkte liegen obwohl ich "text-align:center" benutze nicht immer zentriert. Sobald ich draufklicke, verschiebt sich der Menüpunkt ein bisschen nach rechts.
2. Wie bekomme ich diese Trennwände zwischen die Menüpunkte ? Wenn ich "border-right: 1px" dann habe ich nämlich am Ende einen Rand zu viel :/

Das Rote sollen die Trennwände sein, welche ich meine. Man sieht hier auch gut, dass der angeklickte Menüpunkt nicht zentriert liegt.

gr. chris

 

[Elroy]

2. Wie bekomme ich diese Trennwände zwischen die Menüpunkte ? Wenn ich "border-right: 1px" dann habe ich nämlich am Ende einen Rand zu viel :/

Hallo.

Dann gib deinem letzten Menüpunkt eine class und entferne den Rand den du zu viel hast mit CSS.

Gruss
Elroy

 

[neuroleptika]

zu 2.
Die aktiven li a (#index #navIndex a, #komödie #navKomödie a, usw) haben display: block und width:90%;.
Die anderen bleiben auf Inline Level. Wirf width für die links ganz raus und gebe #menu a display: block. Zentrieren kannst du ohne width mit horizontalen padding (ebenfalls für #menu a).

 

[Nissi]

Servus,
also ich hab das nun mit den "border-right" versucht. Danach wollte ich meinem letzten Menüpunkt eine eigenen id geben. Welche ich wiederrum "border-right: none" gebe und somit der Border eig. aufgehoben werden sollte. Leider hat dies nicht funktioniert. Es hat sich gar nichts getan.

Ich hab das width rausgemacht und dafür bei "#menu a display: block" gemacht. Das mit dem padding hab ich leider nicht ganz verstanden. Wie bekomme ich da alles zentriert hin ? Mit "padding: center" ist es ja nicht getan, dadurch verschiebt sich ja alles ;)

www.moderndesigns.bplaced.net ( nochmal zum nachschauen ;) )

gr. chris

 

[rapid10]

padding: center gibt es nicht.
Und mach die border nicht bei <a> sondern bei <li> hin...

 

[neuroleptika]

Das mit dem padding hab ich leider nicht ganz verstanden. Wie bekomme ich da alles zentriert hin ? Mit "padding: center" ist es ja nicht getan, dadurch verschiebt sich ja alles ;)

Anstelle von margin-right und margin-left für #men a:

padding-left:12px;
padding-right:12px;

margin ist der Außenabstand, padding der Innenabstand.

Das div .bummel muß wider raus. Das ist an der Stelle nicht erlaubt.
Du kannst die Klasse li geben.
z.B

<li id="navKinder-TV" class="last-li"><a href="#">KINDER-TV</a></li>

#menu .last-li {
border: none;
}

 

[Nissi]

Servus,
also ich hab es nun geschafft, dass der letzte Strich weg ist ;)
Desweiteren habe ich auch noch ein paar weitere Feinheiten erledigt.
Aber natürlich haben sich auch wieder neue Fragen gestellt, welche ich nicht lösen konnte, da ich daran schon ein paar Tage dran tüftle. Ich werde sie wsl morgen hier stellen.

gr. chris

 

[Nissi]

Servus,
also nun stelle ich die paar neuen Fragen.
1. Wie schaffe ich es, dass meine Webseite ( Header+Hauptbereich+Footer ) mindestens 100% hoch ist ?
2. Bei mir ist der Footer länger als der Hauptbereich, die Navi aber wieder kürzer ... obwohl alle die gleiche Breite "width" haben :/ and was liegt das ? ( schaut euch kurz meine Webseite an, dann erkennt ihr auf einen Blick mein Problem. Schaut im Notfall den footer an ... )
3. Ist mein Code aktzeptabel oder ist er schrott weil er dumm gecodet ist ?

gr

 

[Nissi]

*push* this thread

 

[mermshaus]

Zu 1: The Man in Blue > footerStickAlt: A more robust method of positioning a footer
Zu 2: Am Padding. Tatsächliche Breite = width + padding + border-width (mindestens die drei)
Zu 3: The W3C Markup Validation Service : title-Element steht nicht in head, ein h3 schließst du mit h1 … Alles in allem aber ganz okay.