mitlaufende Menüleiste

Avoir · 28.09.2009

hallo kennt ihr mich noch?
Ich habe ihr vor 2 Monaten mal gepostet da ich eine Sehr aufwändige Fläsch Seite programmieren wollt. Ihr sagtet, junge ohne jegliche Kenntnisse Wirt das nix! Also habe ich mir eine Schulungs DVD gekaut, so untern Motto jetzt bauen wir mal eine Webseite ^^
Die Webseite von mir habe ich ohne Program geschrieben alles mit einen Editor ?SuperEdi? war anstrengen aber das kam dabei heraus;
www.michaelgroen.de
So da es sich um eine Photopag handelt habe ich mich entschlossen immer am Anfang ein großes Bild zu haben, das ist gewollt, man muss zwar immer runter scrollen aber das ist ok für mich. Ich habe auch das Menü oben nun verändert das es nimmer billig in einen grauen Kasten steht nun ist es nur unterstrichen und macht doch alles etwas lockerer? viele kennen glaub noch die ersten Anfänge meiner Seite?

Zum Anliegen:
Ich möchte ganz gerne dass das Menü sobald man nach unten scrollt immer oben am Fensterrand mit herunter kommt. Das wen man wieder ganz nach oben scrollt es wieder an seinen Ursprungs Ort kommt. Das Problem ist so, das auf dieser Seite Gallerie sehr fiele Bilder reinkommen und dann wer es doch pragtisch auch ohne weiteres zu zwitschen ohne erst wieder ganz nach oben zu scrollen.
Also, wie stelle ich das an, das das Menü sich dynamisch mit bewegt?

P.S.
Wie ihr ja schon wist bin ich Legastheniker, habe dehn Text in Word korrigiert damit ihr ihn wenigstens ein wenig lesen könnt, glaube aber so ein oder zwei Schreibfehler noch drinne sind , so verzeiht mir dies.

sokie · 28.09.2009

AW: mitlaufende Menüleiste

Das sieht ja schonmal ganz gut aus

dem div #navigation musst du zusätzlich im css ein position: fixed; geben und per top: yy px; und left: xx px; positionieren.
Damit das auch passend zum #main_container geschieht bekommt der die eigenschaft position: relative;
Damit wäre das für die modernen Browser per css zu lösen, die älteren wie IE6 werden die leiste nicht 'fixed' darstellen. Musst du mal sehen, ob du für diese Spezialfälle ein javascript bemühst (oder es da eben so lässt).

kyle66 · 28.09.2009

AW: mitlaufende Menüleiste

Unternehmensgründung schreibt man übrigens zusammen.

Avoir · 28.09.2009

AW: mitlaufende Menüleiste

Hi
Danke für dehn hinweis Unternehmensgründung, ob ich das mit dem Lebenslauf so drin stehen lasse weis ich nicht, ich habe auch 4 Ausbildungen gemacht und sowie so ist mein Leben nicht grade Musterhaft. Naja aber ich habe es geändert Danke @.

Ich habe überhabt keine Ahnung was ich wie und wo was reinschreiben muss *schäm*
Das ist das was im CSS Steht:

#main-container {
width: 675px;
margin: 40px auto 20px auto;
}

#navigation {
clear: right;
border: 1px solid #000;
margin-top: 40px;
margin-bottom: 1px;
padding: 5px 10px 5px 0px;
background: url("images/navi_bg0.png") bottom left repeat-x;
}

#navigation a {
padding: 5px 10px;
color: #ffffff;
text-decoration: none;
}

#navigation a:hover {
background: url("images/navi_bg1.png") bottom left repeat-x;
}

#navigation ul li {
display: inline;
}

Und wo muss nun was hin?
Helf mall bitte, muss das alles auch nur im screen.css geschrieben werden sondern auch in dehn *.php Dateien?

Lg
michael

P.s.
Meine statistig sagt (zeitfenster 7 Tage);

Firefox 173x = 73,00 %
Internet Explorer 55x = 23,21 %
Opera 5x = 2,11 %
Chrome 2x = 0,84 %
Camino 1x = 0,42 %
Safari 1x = 0,42 %

Browser-Version ( Internet Explorer ):

8.0 31x = 56,36 %
6.0 13x = 23,64 %
7.0 9 x = 16,36 %
5.5 2 x = 3,64 %

also 43,64% aller Internet Explorer besucher haben einen Älteren Explorer als 8.0 ^^ fieleicht solte man da eine lüsung vinden :rolleyes:

Avoir · 29.09.2009

AW: mitlaufende Menüleiste

kan mir jemand den nun helfen wie genau ich wo und was reinschreiben mus damit das mit dehm MEnü hinhaut?

lg

SineTempore · 29.09.2009

AW: mitlaufende Menüleiste

du willst doch, dass das menü am anfang, vorm scrollen unterm header ist und beim scrollen dann, sozusagen, oben hängen bleibt, oder?
Das ist so allerdings mit CSS nicht machbar, da mit position: fixed der entsprechende div immer an der gleichen position zur links oberen bildschirmecke bleibt.
=> er wandert zwar mit, allerdings wandert er nicht zuerst nach oben und bleibt da hängen. er bleibt immer an der gleichen stelle.
man könnte es wahrscheinlich mit JS lösen ... allerdings wüsste ich jetzt auch nicht wie

Avoir · 29.09.2009

AW: mitlaufende Menüleiste

JS also. oha... wirt auch alles komplexer... *gröbel*

Chriss1987 · 29.09.2009

AW: mitlaufende Menüleiste

SineTempore schrieb:
du willst doch, dass das menü am anfang, vorm scrollen unterm header ist und beim scrollen dann, sozusagen, oben hängen bleibt, oder?
Das ist so allerdings mit CSS nicht machbar, da mit position: fixed der entsprechende div immer an der gleichen position zur links oberen bildschirmecke bleibt.
=> er wandert zwar mit, allerdings wandert er nicht zuerst nach oben und bleibt da hängen. er bleibt immer an der gleichen stelle.
man könnte es wahrscheinlich mit JS lösen ... allerdings wüsste ich jetzt auch nicht wie

Hi,

du kannst mit JS die Scrollposition abfragen, wenn diese z.B. einen Bestimmten Bereich überschreitet, ändert man das position-Attribut von relative auf fixed, so bleibt das Menü beim runterscrollen am oberen Rand kleben!

(nen Beispiel kommt nachher evtl noch

)

Schöne Grüße aus dem Sauerland!
Chriss

Avoir · 29.09.2009

AW: mitlaufende Menüleiste

jau, beispiel und genaue anweisung wo ich was reinschreiben mus, ihr dürft nicht fergessen das es das erste mall ist das ich eine HP mache und 0.002% erfahrung habe ^^

lg

SineTempore · 29.09.2009

AW: mitlaufende Menüleiste

SELFHTML: Stylesheets / CSS-Formate definieren
SELFHTML: JavaScript / Einführung in JavaScript

Hier mal ein paar Artikel die dir hoffentlich weiterhelfen. Sie beziehen sich eigentlich alle auf Fragen die du hier gestellt hast.

Grüße
ST

Avoir · 29.09.2009

AW: mitlaufende Menüleiste

ehm--- *rot-wert*

jau danke zihe ich mir gleich mall rein ^^

Chriss1987 · 30.09.2009

AW: mitlaufende Menüleiste

Hi,

hab mal grad schnell ein Script zusammengebastelt:

Code:

// Quelle: http://www.signalwerk.de/web-code-library/javascript/scroll-position-ermitteln
// ermittelt die aktuelle Scrollposition
function get_scroll_position()
    {
        var scroll_x = 0, scroll_y = 0;
        if (typeof( window.pageYOffset ) == 'number')
            { // Netscape
                scroll_y = window.pageYOffset; scroll_x = window.pageXOffset;
            }
        else if (document.body && (document.body.scrollLeft || document.body.scrollTop))
            { // DOM
                scroll_y = document.body.scrollTop; scroll_x = document.body.scrollLeft;
            }
        else if (document.documentElement && (document.documentElement.scrollLeft || document.documentElement.scrollTop))
            { // IE6
                scroll_y = document.documentElement.scrollTop; scroll_x = document.documentElement.scrollLeft;
            }
        return scroll_y;
    }

// prüft die Scrollposition des Fensters
function position_fenster()
    {
        position = get_scroll_position();
        // wenn die Scrollposition größer als die Position deiner Navigationsleise ist (hab mal grob gemessen, sollten 166px sein)
        if (position > 166)
            {
                // ändern des CSS-Atributes "position" auf "fixed"
                document.getElementById('navigation').style.position = "fixed";
                // bei den anderen beiden Attributen bin ich mir nicht sicher, funtionieren zwar, aber geben in der Fehlerkonsole einen Fehler zurück //// EDIT: Fehler gefunden: nicht "0" sondern "0px"
                document.getElementById('navigation').style.top = "0px";
                document.getElementById('navigation').style.marginTop = "0px";
            }
        // wenn die Scrollposition kleiner als die Position deiner Navigationsleise ist
        else if (position <= 166)
            {
                // ändern des CSS-Atributes "position" auf "relative"
                document.getElementById('navigation').style.position = "relative";
                // Standartwerte wieder herstellen (hier ist wieder ein Fehler dirn, siehe oben) //// EDIT: Fehler gefunden: nicht "0" sondern "0px"
                document.getElementById('navigation').style.top = "0px";
                document.getElementById('navigation').style.marginTop = "40px";
            }
    }

// Intervallstarten und die Funktion "position_fenster()" aufrufen (Intervallangabe in Millisekunden)
var aktiv = window.setInterval("position_fenster()", 100);

musst du nurnoch als .js-Datei speichern und im Head einbinden:

HTML:

<script type="text/javascript" src="test.js"></script>

Hoffe, das hilft dir iwie weiter?

Schöne Grüße aus dem Sauerland und gute Nacht!
Chriss

EDIT #3: Schau mal in deiner style.css in Zeile 196, da stimmt was nicht mit den öffnenden und schließenden geschweiften Klammern!

EDIT #4: Wenn du die Breite der Menüleiste beibehalten möchtest, dann schreibe in der style.css die Weite der Navigation mit rein (width: 670px

EDIT #5: deine css sollte dann so aussehen, dann gibt es auch keine Fehlermeldungen mehr:

Code:

* {
	margin: 0px;
	padding: 0px;
}

body {
	font-family: "Trebuchet MS", "Bitstream Vera Sans", "Helvetica", sans-serif;
	font-size: 10pt;
	background: #000000 url("images/main_bg2.png") top center repeat-y;
	color: white;
}



a {
	color: #1b65c8;
}

a:hover {
	color: #e41000;
}
 
em  {
	color: #e41000;
}

hh  {
	color: #007836;
}

h1,h2,h3,h4,h5,h6 {
	color: #e41000;
	border-bottom: 1px dotted #e41000;
	font-family: "Palatino Linotype", "Palatino", "URW Palladio L", serif;
	margin-bottom: 5px;
}

h1 { font-size: 180%; }
h2 { font-size: 125%; }
h3 { font-size: 100%; }

img {
	
}

p {
	line-height: 140%;
	text-align: justify;
	margin-bottom: 15px;
}

table thead th, table thead td {
	background: #e3e3e3;
	color: #000000;
	text-align: left;
}

table th, table td {
	border-bottom: 1px solid black;
	text-align: left;
	padding: 2px 5px;
}


#main-container {
	width: 675px;
	margin: 40px auto 20px auto;
}

#branding p {
	font-size: 80%;
	text-align: right;
	float: right;
}

#navigation {
	clear: right;
	border: 1px solid #000;
	margin-top: 40px;
	margin-bottom: 1px;
	padding: 5px 10px 5px 0px;
	background: url("images/navi_bg0.png") bottom left repeat-x;
    width: 670px;
}

#navigation a {
	padding: 5px 10px;
	color: #ffffff;
	text-decoration: none;
}

#navigation a:hover {
	background: url("images/navi_bg1.png") bottom left repeat-x;
}

#navigation ul li {
	display: inline;
}

#inhalt {
	margin-top: 20px;
}

#inhalt-haupt {
	width: 420px;
	float: left;
	padding-right: 15px;
	border-right: 1px dotted #999999; 
	margin-bottom: 10px;
}

#inhalt-haupt2 {
	width: 675px;
	float: left;
	padding-right: 15px; 
	margin-bottom: 10px;
}

#inhalt-sub {
	width: 225px;
	float: right;
}

#inhalt-haupt .portrait-foto {
	float: left;
	margin: 0px 10px 0px 0px;
	padding: 5px;
	border: 1px dotted #999999;

}

#inhalt-sub #navigation-sub ul li {
	list-style-type: none;
	list-style-image: url("images/li_image.png");
	margin-left: 20px;
}

#inhalt-sub #navigation-sub ul {
	margin: 15px 0px;
}

#navigation-sub img{
	

float: left;
margin: 5px 5px 5px 5px;	
	
	
	
}

#fusszeile {
	clear: both;
	border-top: 1px solid black;
	padding-top: 10px;
}

#fusszeile .bottom-right {
	float: right;
}

/* Galerie */

			#inhalt-haupt .galerie-foto {
				height: 90px;
				width: 117px;
				float: left;
				padding: 4px;
				margin: 5px;
				border: 1px solid #aaaaaa;
				background: #e3e3e3;
			}

			#inhalt-haupt .galerie-foto img {
				border: 1px solid gray;
			}

			#inhalt-haupt .galerie-foto a:hover img {
				border: 1px solid white;
			}

			#inhalt-haupt table {
				width: 100%;
			}
			#inhalt-haupt table th,#inhalt-haupt table td { 
				vertical-align: top;
				text-align: left;
			}

			#inhalt-haupt input, #inhalt-haupt textarea {
				padding: 2px 2px 0px 2px;
				margin: 3px 3px 0px 3px;
				background: #e3e3e3;
				border: 1px solid #aaa;
            }
            
            #inhalt-haupt table td {
				border: none;
			}

/* ERROR & SUCCESS */

			.error {
				color: red;
			}
			.success {
				color: green;
			}

Avoir · 30.09.2009

AW: mitlaufende Menüleiste

Ha hhaaa HHAAMMAA!!

bist mein helt für heute arbend zu mindes ^^

ich habe das mall online gestelt, es ferhält sich alerdings noch ein wenig komisch, schau selbs mal bitte^^

höhe stimt nicht und es ferändert sich in der breite beim runter scrollen

Michael Groen

lg
micha

Chriss1987 · 30.09.2009

AW: mitlaufende Menüleiste

naja, habe den Code grade noch 5x editiert, nimm den neusten und dann passt das auch

Schöne Grüße aus dem Sauerland!
Chriss

Edit: siehste, jetzt passt die Position

Achja, die Breite in der CSS-Datei solltest du noch hinzufügen!

Edit: (ja, ich weis, viele Edits, aber Doppelpost sind unschön

) Du kannst einfach die CSS-Datei, die ich weiter oben gepostet hab kopieren, ist deine Originale, nur wurde die Breite hinzugefügt und ein Fehler mit den Klammern ausgebessert! Bei dem Javascript kannst du eigentlich die Kommentare (außer vielleicht die Quelle ganz oben) löschen!

Avoir · 30.09.2009

AW: mitlaufende Menüleiste

ja hamma,

danke euch!!
ich habe noch folgendes geändert:

document.getElementById('navigation').style.top = "1px";
document.getElementById('navigation').style.marginTop = "0px";

und

#navigation {
clear: right;
border: 1px solid #000;
margin-top: 40px;
margin-bottom: 1px;
padding: 5px 10px 5px 0px;
background: url("images/navi_bg0.png") bottom left repeat-x;
width: 665px;

es könte aber alerdings noch ein tick nach lings, nicht wah?

Avoir · 30.09.2009

AW: mitlaufende Menüleiste

hmm aufm localhoster sah es so aus, jetz past es mördermäzig!!!

danke euch, endlich mall jemand der mir dieses kniflieges ding gelöst hat!

so ist das doch auch wesenlich besser odeR?

lg
michael

SineTempore · 30.09.2009

AW: mitlaufende Menüleiste

nimm in dem javascript als schwellwert mal 134. das müsste dann genau passen

Avoir · 30.09.2009

AW: mitlaufende Menüleiste

ehm *dicke-Backen-machen*

schwellwert *gröbel*
ist es des:

if (position <= 166)
else if (position <= 166)

oder des:

var aktiv = window.setInterval("position_fenster()", 100);

lg
micha

SineTempore · 30.09.2009

AW: mitlaufende Menüleiste

ersteres

Chriss1987 · 30.09.2009

AW: mitlaufende Menüleiste

Guten Morgen,

was mir grad noch auffällt ist, dass wenn das Menü gefixed wird, der Content der Seite sich um die Höhe des Menüs nach oben verschiebt. Wenn du das verhindern möchtest, dann müsstest du nur einen Div vor das Menü setzten, mit Höhe 0px oder 1px und dieses Div, sobald das Menü "abgedockt" wird auf die Höhe des Menüs ändern.

Schöne Grüße aus dem Sauerland!
Chriss