Anker-Navigationspunkt mittig setzen

[Manisch]

Moin,

es geht um folgende Seite:
Meine erste Website

Hat hier jemand eine Idee, wie ich den Sprungpunkt nach klicken auf einen Ankerlink mittig setzen kann?
So ist der Standard ja praktisch x0 y0.

Ich hatte überlegt, was mit margin oder padding zu machen, aber das bringt nichts mehr, wenn sich die Monitorgröße ändert...


Vielen Dank vorab.

 

[Space Vampire]

Das hat nicht das geringste mit der Monitorgröße zu tun, sondern ausschließlich mit der größe des Browserfensters! Noch genauer, mit dessen Viewport.
Das ist keine Spitzfindigkeit sondern ein extrem wichtiger Unterschied in der Betrachtungsweise des "Problems".

Du könntest deine einzelnen "Seiten" (falls nicht schon geschehen. Ich habe mir deinen Code nicht angeschaut) mit Wrappern (z.B. einem <div>) umgeben deren Breite du auf den jeweiligen Viewport des Seitenbesuchers ausrichtest. Den Viewport kannst du beispielsweise mit jQuery auslesen. Wenn der Anker dann links im Wrapper sitzt und der Inhalt mittig ausgerichtet ist, hast du den Efekt, den du haben willst.

DAS hilft vielleicht. Ansonsten mal mit genannten Schlagworten googlen.

 

[Manisch]

Ich würde sagen jein, weil ein größerer Monitor meistens auch einen größeren Viewport bedeutet. Aber wie auch immer.

Durch den speziellen Aufbau der Seite denke ich nicht, dass das funktioniert. Es sind 6 kleinere div-container zu den einzelnen "Unterseiten", die durch einen großen zusammengehalten werden.
Erklärender ist das vermutlich, wenn sich jemand den Code der Seite doch noch mal anguckt.

 

[Space Vampire]

Ich würde sagen jein, weil ein größerer Monitor meistens auch einen größeren Viewport bedeutet. Aber wie auch immer.

Es ist und bleibt ein Fehler in der Denkweise! Die Größe des Monitors hat beim Webdesign keine Rolle zu spielen, weil
- großer Monitor ist nicht zwangsläufig gleich große Auflösung eingestellt
- nicht von Fullscreennutzung ausgegangen werden kann
- das visuelle Ausgabegerät keine für dich berechenbare Variable darstellt

Durch den speziellen Aufbau der Seite denke ich nicht, dass das funktioniert. Es sind 6 kleinere div-container zu den einzelnen "Unterseiten", die durch einen großen zusammengehalten werden.
Erklärender ist das vermutlich, wenn sich jemand den Code der Seite doch noch mal anguckt.

Der "spezielle Aufbau" bringt doch genau die Grundvoraussetzungen mit, die ich in meinem Lösungsvorschlag angeführt habe.

 

[Manisch]

Nö, kein Denkfehler. Der Unterschied ist mir durchaus bewusst, dir gefällt nur meine Wortwahl in dem Punkt nicht. So wie der Physiklehrer, der meint, es heißt Glühlampe und nicht Glühbirne.

Aber dann erklär mir doch bitte einmal genauer, wie ich das anstellen soll (Ich finde Foren sind für Dialog da, nicht um gesagt zu bekommen "Google es").
Wenn ich die Ermittlung der Fenstergröße via jQuery einbaue, wie stelle ich das dann im Bezug auf den Ankerpunkt ein?

 

[XraYSoLo]

Weist ziemlich viele Fehler auf...

--> http://validator.w3.org/check?uri=http%3A%2F%2Fmanisch.comze.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

Nils aka XraYSoLo

 

[threadi]

Das ist der HTML5-Doctype:
8 The HTML syntax &mdash; HTML 5.1 Nightly
was der Validator und die meisten Browser auch als solchen erkennen:
[Invalid] Markup Validation of http://manisch.comze.com/ - W3C Markup Validator

 

[Tronjer]

Wenn ich die Ermittlung der Fenstergröße via jQuery einbaue, wie stelle ich das dann im Bezug auf den Ankerpunkt ein?

Du kannst in jQuery mit position(), offset(), top(), bottom(), height(), width(), etc., Größe und Position jedes HTML-Blockelements ermitteln und natürlich auch neu zuweisen. Die Funktionen werden in der API Doku leicht verständlich erläutert.

jQuery API Documentation

Darüber hinaus lohnt googeln bei Standardfragen eigentlich immer. In 90% der Fälle findet sich ein brauchbarer Lösungsansatz bei Stackoverflow.

 

[Manisch]

Ich werde da noch nicht ganz schlau draus.

Wo packe ich das Script denn hin, auch in den Head-Berich, oder in dem Fall in den jeweiligen div?

Und wie muss ich die Funktion auf diesen Fall umwandeln?
offset() klingt für mich erstmal am sinnvollsten.

$(function(){    
$(window).offset(function(){        
$("div.classname").text("inner Height = " + $(window).height());
 });
 });

Was wird aus .text?
Was wird aus inner Height bzw. .height??



Was die Fehler angeht, die Validator ausfindig gemacht hat: Eigentlich hatte ich das mit den p-tags schon korrigiert. Da muss sich wieder irgendwas falsch vermischt haben :/
Um die anderen würde ich mich gerne zum Abschluss kümmern.


Und was Google angeht: An sich bin ich da gerne dabei und habe mir auch schon viel selber rausgesucht. Aber es hilft im Gegenzug keinen, wenn er bei Google lauter Foreneinträge aufgelistet findet, in denen die Antwort auch nur unkonkret "Google" lautet. Auch das ist aber ein anderes Thema und OT.

 

[XraYSoLo]

Das ist der HTML5-Doctype:
8 The HTML syntax — HTML 5.1 Nightly
was der Validator und die meisten Browser auch als solchen erkennen:
[Invalid] Markup Validation of [url]http://manisch.comze.com/ - W3C Markup Validator[/url]

Habs dann selber gefunden und auskorrigiert ;-).

Nils aka XraYSoLo

 

[Tronjer]

Wo packe ich das Script denn hin, auch in den Head-Berich, oder in dem Fall in den jeweiligen div?

Du könntest es in ein

$(document). ready(function() {
});

einbetten. In dem Fall ist es egal wo. Anderenfalls würde ich es an den Fuß der Seite setzen.

Was wird aus .text?
Was wird aus inner Height bzw. .height??

Speichere den Rückgabewert von Funktionen in Variablen und lass dir diese in der Konsole ausgeben.

var foo = $("div.classname").height();
var bar = $("div.classname").text();
console.log(foo);
console.log(bar);

 

[Manisch]

Speichere den Rückgabewert von Funktionen in Variablen und lass dir diese in der Konsole ausgeben.

var foo = $("div.classname").height();
var bar = $("div.classname").text();
console.log(foo);
console.log(bar);

Ich muss leider noch mal "...und dann?" fragen.

 

[Tronjer]

Ich weiß nicht, was du mit Ankerpunkt meinst und eigentlich bezwecken willst. Die genannten Methoden ermöglichen es, Breite, Höhe und zB. die obere linke Ecke eines Containers dynamisch zu ermitteln. Mit diesen Koordinaten lassen sich Funktionen bauen, wie bsw.: ( (Höhe Browserwindow - Höhe Div) / 2). Das Ergebnis als margin-top dem Div zugewiesen sollte eine vertikale Zentrierung bewirken.

 

[Manisch]

Nach etwas knobeln würde ich jetzt ganz gerne ein "dynamisches" padding-left verwenden.

Wenn ich im Moment einen Wert in % eingebe, dann ist das in Relation zum Wrapper, wenn ich mich nicht irre. Deswegen tut sich da nichts beim (!) verkleinern des Viewports.
Meine Frage wäre jetzt, ob mir jemand anhand eines konkreten Beispieles schreiben kann, welches Script ich einbauen muss, um die Viewportgröße zu ermitteln, und wie ich diesen Wert dann via CSS als Padding einem div zuordne.
Es sollte dann in etwa sein: padding-left: 6% *vom Viewport*

 

[threadi]

Nein, Prozentwerte sind in Relation zu einem umgebenden Element, welches eine feste Breite haben muss. Hat es keine feste Breite, müsste es ebenfalls eine flexible Breite aber in Relation zu einem darüberliegenden Element sein. Halt immer im DOM weiter nach oben.

Abgesehen davon macht so etwas in Bezug auf den Viewport nur Sinn, wenn man ein flexibles Layout hat.

 

[Manisch]

Nein, Prozentwerte sind in Relation zu einem umgebenden Element, welches eine feste Breite haben muss.

Was der "wrapper" wäre, den ich div#content genannt habe, der eine feste Breite hat. Bei auto und 100% ordnet er die einzelnen Content-Bereiche untereinander und nicht nebeneinander an.

Abgesehen davon macht so etwas in Bezug auf den Viewport nur Sinn, wenn man ein flexibles Layout hat.

Es soll ja auch ansatzweise flexibel sein. Nicht unbedingt so flexibel, dass es für mobile Geräte reicht.


Hättest du ansonsten eine konkrete Alternative?
Der Umgang mit dem jQuery-Script ist mir immer noch ein Rätsel. Ich bräuchte da stumpf jemanden, der es mir einsätz. Wenn ich es dann sehe, kann ich es auch verstehen.

 

[Tronjer]

Der Umgang mit dem jQuery-Script ist mir immer noch ein Rätsel. Ich bräuchte da stumpf jemanden, der es mir einsätz. Wenn ich es dann sehe, kann ich es auch verstehen.

Die Grundlagen zu erwerben kann dir hier niemand abnehmen. Hier ist ein interaktives Tutorial, welches sich an einem Sonntagnachmittag durcharbeiten lässt.

Code School - Try jQuery