• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Positionierungsproblem

A

agodesign

Mitglied
Hi,

bin derzeit dabei meine Website zu erstellen und habe ein Problem mit der Positionierung von einem effekt.

hier mal ein Link.

agodesign | Webdesign & more...

also hier mein Problem:

die Seite sollte vom Content her zentriert sein, mit dem Menü hat das auch super geklappt, nun hab ich das Problem dass der Content da nicht so recht mitspielt.

habe versucht das ganze so zu lösen:


Zeile 360:
Code: 
                                var $el            = $(this),
                                param        = {
                                    width    : '500px',
                                    height    : '500px',
                                    margin: "0px auto",
                                    top        : 250 + 100 * Math.floor(i/20),
                                    left    : 200 + 100 * (i%4),
                                    opacity    : 1,
                                };

komme da jedoch nicht weiter :(

Grüße, Daniel
 
Werbung:
agodesign schrieb:
Hi,

bin derzeit dabei meine Website zu erstellen und habe ein Problem mit der Positionierung von einem effekt.

hier mal ein Link.

agodesign | Webdesign & more...

also hier mein Problem:

die Seite sollte vom Content her zentriert sein, mit dem Menü hat das auch super geklappt, nun hab ich das Problem dass der Content da nicht so recht mitspielt.

habe versucht das ganze so zu lösen:


Zeile 360:
Code: 
                                var $el            = $(this),
                                param        = {
                                    width    : '500px',
                                    height    : '500px',
                                    margin: "0px auto",
                                    top        : 250 + 100 * Math.floor(i/20),
                                    left    : 200 + 100 * (i%4),
                                    opacity    : 1,
                                };

komme da jedoch nicht weiter :(

Grüße, Daniel
Zum Vergrößern anklicken....

Leider kann ich nicht erkennen was das Problem ist. Im FF 3.6 sieht es ok aus. Eventuell seh ich den Fehler auch nicht, aber in wie fern spielt der Content da nicht mit?
 
also der effekt wenn die quadrate hinfliegen :D die bilden das content fenster erst an einer anderen position. die sollen aber auch immer zentriert sein
 
Werbung:
Also, ich denke, es hängt eher an top und left. Wenn du die veränderst (meinetwegen die 200 in eine 500 änderst), was tut sich dann?
 
Zuletzt bearbeitet:
dann ändert sich die position, des stimmt schon aber ich will ja dass es immer zentriert ist, da sind solche genauen positionsangaben nicht hilfreich :/
 
Dann leite dir die top- und left-Werte doch dynamisch über die Viewportmaße her.

Oder setze ein relativ positioniertes div-Element an die passende Stelle und füge die kleinen Kacheln dort als Kindelemente hinzu. Dann ist dieses div-Element der Bezugsrahmen für die absoluten Angaben der kleinen Kacheln.
 
Werbung:
Ich würde auch die andere Lösung vorziehen, da die rein CSS ist. Das heißt, der Browser übernimmt Dinge wie Veränderung der Fenstergröße während der Animation und so

Aber als Antwort: Such mal nach „jquery viewport width“, da findest du geeignete Methoden. Ist nicht weiter schwierig. Das wird allerdings echt knifflig, wenn jemand während der Animation die Größe des Browserfensters verändert.
 
Werbung:
Anderes Thema: Ich würde die Höhe des Bodys/Contents so beschränken, dass man nicht unten den weißen Bereich unter dem Hintergrundbild sieht, wenn man scrollt (FF 6)
 
Werbung:
Na ja, wenn du noch Hilfe brauchst, mach es uns bitte nicht so schwierig, die auch leisten zu können. Wie heißt denn etwa das jQuery-Plugin, das du da nutzt und wo kriegt man die Originalversion?
 
Also, die Koordinaten des Wrapper-Elements kriegst du beispielsweise so:

Code: 
					/*
						moves the boxes from the top to the center of the page,
						and shows the respective content item
					 */
					openItem			= function(pos, speed, easing) {
						return $.Deferred(
						function(dfd) {

                            var d_x = parseInt($('#mb_content_wrapper').css('left')),
                                d_y = parseInt($('#mb_content_wrapper').css('top'));
                                
							$mbPattern.children().each(function(i) {
								var $el			= $(this),
								param		= {
									width	: '100px',
									height	: '100px',
									top		: d_y + 100 * Math.floor(i/4),
									left	: d_x + 100 * (i%4),
									opacity	: 1
								};
										
								if (!$.browser.msie)
									param.rotate	= '0deg';
										
								$el.animate(param, speed, easing, dfd.resolve);
							});
						}
					).promise();
					};

In der mitgelieferten Demo kannst du so im CSS die Position des Wrapper-Elements verändern, und der Effekt passt weiterhin.

Für mehr Gefrickel ist mir das alles zu unübersichtlich.
 
Zuletzt bearbeitet:
Werbung:
Habe noch einen Satz hinzugefügt.

Das Beispiel ist leider ziemlich dreckig, mit der absoluten Positionierung und z-Indizes und so. Daran kann ich aber auch nichts ändern. Ich kann auch nicht wirklich beurteilen, ob sich das ohne größere Eingriffe in den Code umschreiben lässt. Mir scheint, die Autorin hat da den Quick-and-dirty-Weg gewählt, nicht unbedingt den gut verallgemeinerbaren/portierbaren.
 
Werbung:
Ich denke nicht, weil das nur bei absoluter Positionierung und Angabe von top/left in Pixeln gehen würde.

Du brauchst jedenfalls die aktuelle Position des Wrapper-Elements. Das wäre eher $('#mb_content_wrapper').position().left (bzw. top). Das liefert allerdings 0 zurück, da das Element zum Zeitpunkt der Abfrage offenbar versteckt ist oder so.

- .position() – jQuery API

Wie gesagt, es ist anscheinend eigenartig programmiert.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben