[CSS] Frage zu Image Menu

[malikah]

Hi.

Hab folgendes Problem, ich wollte mir eine Navigation mit Image Menu (mootools effect) basteln:

siehe hier Alle nötigen Files sind unten, unter downloads in der Zip enthalten.

Ich hab das soweit alles zum laufen bekommen, jedoch hab ich noch das Problem, dass meine Page 762px breit ist, die Navi aber nur 500px und irgendwie lässt sich das nicht wirklich strecken.
Hab das in der ImageMenu.css bissel angeändert und angepasst:

#imageMenu ul li a {
        ...
	width: 125px;
}

Jedoch hab ich nun das Problem, sobald ich mit der Maus über die Navi fahre, schrumpfts wieder zusammen auf 500px .
Ich blick da irgendwie nicht ganz durch, und daher wollte ich mal um Hilfe bitten falls sich da jemand besser auskennt, bin für jede Hilfe dankbar da ich langsam irre werde und nicht den Fehler finde. Denke auch nicht das es mit dem oben genannten Code wirklich getan ist, bzw. gemacht wird.

Falls ich noch was nachreichen soll, bitte bescheid geben!

Inhalt meiner CSS Datei:

#imageMenu {
	position: relative;
	width: 762px;
	height: 20px;
	overflow: hidden;
}

#imageMenu ul {
	list-style: none;
	margin: 0px;
	display: block;
	height: 100px;
	width: 1524px;
	
	}
#imageMenu ul li {
	float: left;
}

#imageMenu ul li a {
	text-indent: -5000px;
	background:#FFFFFF none repeat scroll 0%;
	border-right: 2px solid #fff;
	cursor:pointer;
	display:block;
	overflow:hidden;
	width: 125px;
	height: 20px;
}

#imageMenu ul li.landscapes a {
	background: url(../img/images/landscapes.jpg) no-repeat scroll 0%;
}

#imageMenu ul li.people a {
	background: url(../img/images/people.jpg) no-repeat scroll 0%;
}

#imageMenu ul li.nature a {
	background: url(../img/images/nature.jpg) no-repeat scroll 0%;
}

#imageMenu ul li.urban a {
	background: url(../img/images/urban.jpg) no-repeat scroll 0%;
}

#imageMenu ul li.abstract a {
	background: url(../img/images/abstract.jpg) no-repeat scroll 0%;
	width: 250px;
}

.clear {
	clear: both;
}

Danke !

 

[PW-toXic]

ehrlich gesagt versteh ich dein Problem nicht wirklich

 

[malikah]

Wenn auf die oben gepostete Seite gehst, siehst du unter example nen Bsp.
So, hab den Code soweit übernommen, aber bekomm es von den Proportionen her nicht auf meine Seite angepasst.
Hab ne Breite von 762px, das Menu hat aber eine Breite von 500 und meine Frage ist, wie ändere ich diese?!
Habs provisorisch in der CSS Datei unter...

#imageMenu ul li a {
...
width: 125px;
}

...soweit hinbekommen, dass die Fläche komplett genutzt wird.
Jedoch zieht sich das Menu wieder zusammen (auf 500px anstatt wie volle Breite wieder zu nutzen) und es entsteht ein Lücke am rechten Rand wenn ich mit der Maus drüber gehe.

 

[PW-toXic]

ja das gleiche hattest du vorher auch schon gesagt

whatever

5*125 = 625
768 > 625

wenn du möchtest, dass es ganz am anfang und nach dem mouse over gleich aussieht musst du bei
#imageMenu ul li.abstract a
das width: 310px rauslöschen.

Aber das ist eigentlich unnötig solange du als width bei
#imageMenu ul li a
eine width von MINDESTENS 786/5 = 158 angibst

alles darunter ist natürlich falsch.


http://pw-toxic.de/ hier kannst du dir auch eine weitere Anwendung von dieser mootools navbar ansehn

 

[malikah]

thx hat geklappt, wobei es 152px sind da ich ja ne Breite von 762px hab.
Hab jetzt noch die #imageMenu ul angepasst mit:

width: 1524px;
	height: 10px;

und jetzt siehts endlich so aus wie ich es wollte.

danke nochmal !