HTML <DIV> Container Aufbau

[mustermen]

Ne sorry, ich verstehs nicht. Willst du das ober Menü weiter unterteilen also z.B. Moding unterteilen in cases, waku oder wohin soll die subnavi hinführen?

 

[gstarr]

So wie die Navigation aktuell aufgebau ist, alles richtig!!

Nur vom aussehen sollte diese wie auf dem Bild sein, hier schaue es dir mal bitte an.
Bilder sagen mehr als tausende Worte^^

Sry wenn ich mich nicht fachgerecht ausdrücken kann.

 

[mustermen]

Achso, ok sag mir bloß wer alles eine subnavigation bekommt und welche punkte ich dort reinschreiben muss, also z.B.
1.Index
1.a) start
1.b) home
2.projects
3. gallery
3.a)Fotos
4.toturials
4.a) modiing
4.b) Kabel verlegen
...... usw.

ach ja und sag mir bitte wie breit, hoch und welche padding und margin werte deine menu nochmal haben soll!

 

[gstarr]

Die Punkte werde ich nach und nach dann erweitern, aber erstmal sollte die Navi so aussehen:

1. Index

2. Projects
a) Aktuelle Projekte
b) Projekte 2010

3. Gallery
a) Aktuelle Fotos
b) Fotos 2010

4. Tutorials
a) Lackierung
b) Kabel Sleeve
c) Plexi Gravur
d) Overcklocking

5. Reviews
a) Hardware
b) Perepherie
c) Software

6. Partner

7. Contact

*EDIT*
Oh habe dein Kommentar bezüglich der Größe überlesen.

Menu:
width: 765px; height:38px; padding-left: 13.5px;

Submenu:
width: 765px; height 22px; padding-left: 13.5px;

Wie schauts aus? kommst du zu recht?

 

[mustermen]

Wow geschafft, man war das ne frikel Arbeit!

Hier das CSS:

* {
	padding: 0;
	margin: 0;	
}
#menu{
	padding-left: 50px;
	height: 40px; 
	width: 730px;
	background-color:#999;
}
#menu ul{
	list-style: none;
}
#menu ul li { /*Hier kannst du die roten striche verändern!*/
	float: left;
	position: relative;
	font-size: 24px;
	color: #F00;
	line-height: 40px;
	font-weight: bolder;
}
#menu ul li a { /*Hier kannst du die Schrift des menu verändern!*/
	margin: 4px 0 0 0;
	width: 70px;
	height: 34px;
	display: block;
	background:#333;
	text-align: center;
	text-decoration: none;
	font: bold 14px/34px Arial, Helvetica, sans-serif;
	color: #FFF;
}
#menu ul li a:hover {
	background: #F00;
}

#menu ul li ul {/* Unternavigation ausblenden */
	width: 500px; /*Dieser wert muss größer sein als die länge alle subnavigations punkte zusammen*/
	height: 40px;
    position: absolute;
    top: 38px; 
    display: none;  
}
#menu ul li:hover ul {/* Unternavigation einblenden */
    display: block;  
}
#menu ul li .subnavigation li, #menu ul li .subnavigation li a {
	font: 14px/20px Arial, Helvetica, sans-serif;
	width: auto;
	color: #000;
	display: inline;
	text-decoration: none;
	background: #FFF;
	padding: 1px 0px;
	margin-top: 18px; /*hiermit veränderst du den oberen Abstand zu dem hauptmenü. Achtung beim verändern unbedingt die height von #menu ul li ul mit verändern!*/
}
#menu ul li .subnavigation li {
	color: #F00;/*Das sind die roten Doppelpfeile*/
}
#menu ul li .subnavigation li a:hover { /*Das passiert wen man auf die subnavigation geht*/
	color: #F00;
	text-decoration: underline;	
}

Hier das HTML menu:

<div id="menu">
    	<ul>
        	<li><a href="#">Index</a></li>
            <li>|</li>
         	<li><a href="#">Projects</a>
            	<ul class="subnavigation">
                	<li>»</li>
                	<li><a href="#">Aktuelle Projekte</a></li>
                    <li>»</li>
                    <li><a href="#">Projekte 2010</a></li>
                </ul>
     		</li>
         	<li>|</li>
            <li><a href="#">Toturials</a>
            	<ul class="subnavigation">
                	<li>»</li>
                	<li><a href="#">Lackierung</a></li>
                    <li>»</li>
                    <li><a href="#">Kabel Sleeve</a></li>
                    <li>»</li>
                    <li><a href="#">Plexi Gravur</a></li>
                    <li>»</li>
                    <li><a href="#">Overcklocking</a></li>
                </ul>
            </li>
            <li>|</li>
            <li><a href="#">Gallery</a>
            	<ul class="subnavigation">
                	<li>»</li>
                	<li><a href="#">Aktuelle Fotos</a></li>
                    <li>»</li>
                    <li><a href="#">Fotos 2010</a></li>
                </ul>
       		</li>
          	<li>|</li>
            <li><a href="#">Reviews</a>
            	<ul class="subnavigation">
                	<li>»</li>
                	<li><a href="#">Hardware</a></li>
                    <li>»</li>
                    <li><a href="#">Perepherie</a></li>
                    <li>»</li>
                    <li><a href="#">Software</a></li>
                </ul>
            </li>
            <li>|</li>
            <li><a href="#">Partner</a></li>
            <li>|</li>
            <li><a href="#">Contact</a></li>
   	  </ul>
	</div>

Achtung ich habe den Platz von toturials mit gallery vertauscht damit es zu keiner Kollesion kommt!
Ach ja bei deinem Partner Div, kannste anstatt den DIVS die klasse zugeben den <li> element geben, damit sparst du dir die divs!
Das gleiche kannst du bei include machen einfach die background grafikbei include einfügen und die position von der grafik nach oben hin versetzen und overflow auf visible stellen und ein margin-top: 1px; vergeben so sollte es klappen!

 

[gstarr]

OK habe die Navi eingebaut und etwas angepasst, sieht soweit sehr gut aus!! danke für die viel Arbeit und die Mühe.

Öhm wie meinst du die DIV's ersetzen? und bei der Grafik meinst du dann so?

background-image:url(bg_m.gif); background-repeat:no-repeat; top:1px;left:13.5px;

oder wie soll ich die einbinden? einfach als <img> tag?

ah übrigens durch das

#menu ul li a { /*Hier kannst du die Schrift des menu verändern!*/
margin: 4px 0 0 0;

sieht das menu beim mouse over nicht vertikal zentriert, also das rote.

 

[mustermen]

Um die roten Kästen sowie die roten Striche zu zentrieren mache folgendes:
#menu ul li die line-height: 38px;
#menu ul li a die margin: 2px 0 2px 0; einstellen.

den Rest erklär ich morgen!

 

[gstarr]

Ok, sieht soweit gut aus, musste noch die Schrift von den Trennbalken von 24px auf 20px ändern, damit es absolut in der mitte ist.

Was würde ich nur ohne dich machen^^

*EDIT*

Habe etwas recherchiert und selber hinbekommen mit dem Bild

#include{
width:740px;
height: 600px;
margin: 0 0 0 13.5px;
background-color: #f9f9f9;
background-image:url(bg_m.gif);
background-repeat:no-repeat;
background-position:0px 0px;
}

und das mit Partner trennlinie meinst du dann so?

.trennlinie{
width: 235px;
height: 1px;
margin: 2px 0px;
background: url(spon_trenn.gif);
}

<li class="trennlinie"></li>

Also die DIV's komplett raus.


*EDIT 2*
Was mich aktuell stört ist, die Abstände fehlen bei Subnavi zwischen den Pfeilen.
Und denke die aktive MainNavi, also die angeklickt ist, sollte dauerhaft Hintergrund in rot haben und die Subnavi dauerhaft da sein.

Aber diese Anforderungen kann man ohne Java wahrscheinlich garnicht erfüllen.
Naja wird sich zeigen, was sich da machen lässt!

Bis morgen!

 

[mustermen]

Das mit der Partner trennlinie mein ich genau so super!

die abstände bei der subnavi machst du mit padding

#menu ul li .subnavigation li {
padding-right: 2px;
}

Die aktiven kannst du eine klasse zuweisen mit einem roten background z.B.
.aktive_menu {
background: #f00;
}
.aktive_submenu {
color: #f00;
}

Das die subnavi andauernd angezeigt wird bei einem klick auf die Hauptnavigation, musst du bloß neben den hover befehl noch ein gedrückt befehl rein machen glaube der heißt aktive z. B.

#menu ul li:hover ul, #menu ul li:aktive ul {
display: block;
}

musste mal die 4 zustände von links nach gucken da gibts normal, hover, besucht und glaube angeklickt also aktive müsste das sein.

 

[gstarr]

Guten Morgen,

hey das funktioniert super mit dem

#menu ul li .subnavigation li {
padding-right: 2px;
}

Ich weiss garnicht, warum ich immer Margin nehme, daher klappte das bei mir nicht.

Und die

.aktive_menu {
background: #f00;
}
.aktive_submenu {
color: #f00;
}
#menu ul li:hover ul, #menu ul li:aktive ul {
display: block;
}

scheinen nicht zu funktionieren.

Du hast zwar das Wort active mit k geschrieben, aber es geht mit der Korrektur leider auch nicht, hmm...

 

[mustermen]

moin hast du die Klasse auch im html dokument vergeben? Also diese 2 CSS regeln
#menu ul li .aktive_menu {
background: #f00;
}
#menu ul li .subnavigation li .aktive_submenu {
color: #f00;
}

musst du jetzt ein objekt im HTML Code zuweisen also du suchst dir ein Element aus das Aktive sein soll
Für die Hauptnavigation:

<li><a href="#" class=".aktive_menu">Index</a></li>

Für das Submenu:

<li><a href="#" class=".aktive_submenu">Kabel Sleeve</a></li>

Es ist vollkommen egal ob diese beiden mit k oder c geschrieben werden, weil sie eine Klasse sind!

Das active mit c aber ist ein Zustand wie hover den man ein Element zuweisen kann!

 

[gstarr]

Ah ok, dachte du meintest das mit a:active gemeint, daher habe ich mich gewundert, aber wenn das eine gezielte klasse ist, ist es egal wie geschrieben wird, da hast du Recht.

Habe alles nochmal aktuallisiert, schaue es dir mal an
KLICK

 

[mustermen]

Das hier kannst du schon in deine Webseite anbinden damit man sieht das man auf der Index ist.
CSS:

#menu ul li .aktive_menu {
background: #f00;
}

und hier vergibt man die Klasse dem Index link!

<li><a href="#" class="aktive_menu">Index</a></li>

Für die Subnavigation guck mein Beitrag Nr 31 an!

Das die Subnavi dauerhaft zusehen ist würde ich weglassen, schade nur das ich das nicht hin bekomme das wen man in der Subnavi ist, der Oberpunkt nicht rot markiert wird.
Aber halt dich bloß nicht damit auf das ist eine Kleinigkeit die niemand stört!

 

[gstarr]

Hi,

also wenn ich das so

#menu ul li .aktive_menu {
background: #f00;
}
<li><a href="#" class="aktive_menu">Index</a></li>

Übernehme, dann ist die Hintergrundfarbe dauerhaft rot und nicht nur wenn aktiv..

habe versucht etwas zu modifizieren, durch:

#menu ul li .aktive_menu a:active {
background: #f00;
}

geht leider auch nicht

 

[mustermen]

das soll ja dauerhaft rot sein Damit man weiß Aha ich befinde mich auf der Index Seite wen ich auf Projects klicke und zur Projects.html Seite weitergeleitet werde, hinterlegst du Project mit dieser aktive CSS Regel damit der User weis aha nun bin ich auf der Project Seite!

 

[gstarr]

Die Idee ist gut, allerdings werden die Links nicht weiterleiten, sondern per PHP bzw Include inhalte, als Frame importieren, daher bleibt die Navigation immer unverändert.

:/

 

[mustermen]

Mmmh meinst du wirklich frames? Mach doch lieber statische Webeiten, wenn nicht soviele dynamische Sachen in deiner Webseite sind, würde ich alles in einer extra html Seite speichern,
projects zu projects.html, gallery zu gallery.html und so weiter ... ist doch besser und du kannst dann den Elementen in der Navigation die CSS Regel dort zuweisen.
Bist du den bald fertig mit deiner Seite?

 

[Madman1209]

Hi,

wenn ich mich in euren (übrigens toll zu lesenden) Disput nochmal einklinken darf:

TE, hör auf mustermen, benutze lieber keiner Frames sondern statische Seiten.

VG,
Mad

 

[gstarr]

Ja ist ja nicht Frame direkt, sondern include, spart mir enorm viel arbeit mit verlinken etc.

<?php
$sites['menu1'] = 'ordner/ordner2/ordner3/ordner4/menu1datei.php';
$sites['menu2'] = 'ordner/ordner2/ordner3/ordner4/menu2datei.php';
$sites['menu3'] = 'ordner/ordner2/ordner3/ordner4/menu3datei.php';

if(isset($_GET['abkürzung']) && isset($sites[$_GET['abkürzung']])) {
include $sites[$_GET['abkürzung']];
} else {
include 'ordner/ordner2/ordner3/ordner4/menu1datei.php';
}
?>

Dann werden die Seiten halt per ?abkürzung=menu1 abgerufen

statt den üblichen ../ordner/ordner2/ordner3/ordner4/menu1datei.php


@mustermen

Wir sollten die Navi so lassen, immerhin hast du es sehr sehr gut auf die Beine gestellt und erleichtert mir viel Arbeit, statt mit den Grafiken. Vielen Dank dafür nochmal!!

Kann ich wie es aktuell ist, irgendwas noch optimieren? oder überflüssige CSS Werte entfernen/zusammenfassen?

Will endlich die Homepage heute fertig stellen =)

 

[mustermen]

Kannst du mir den kompletten HTMl und CSS code schicken? Damit ich es schneller gucken kann mit meinen Add-on müsste ich sonst alles aufklappen und das dauert mir zu lange. Wenn nicht guck ich es mit dem dem Firebug von Firefox an das dauert aber länger und die Übersicht ist so blöd.