Zwei HTML/CSS Fragen

[SimonK91]

Hallo Forum,

ich habe ein paar Webprojekte vor der Brust und hätte zwei Anliegen:

1. Wie setzt man am besten die Funktion um, dass die gesamte Webseite je nach Menüpunkt zu einer bestimmten Inhaltsposition nach unten scrollt. Viele Webseiten nutzen diese Funktionalität ja mittlerweile.

2. Meine wichtigste Frage... (hoffe sehr dass jemand hier ist der mir kurzfristig helfen kann).
Ich habe ein Bootstrap Theme bei dem der Hauptbereich der Seite ein auf die Bildschirmbreite gezogenes breites Bild ist. (bei meinem FHD Monitor zb ca. 1920x700px)
Der Bildausschnitt ist in der Höhe fixiert, und streckt sich je nach Bildschirmbreite nach außen (wodurch das Bild reinzoomt, da der Bildausschnitt immer breiter gezogener wird), und auf Smartphones ist es durch die geringe Breite so gestaucht dass die Seiten vom Bild abgeschnitten werden. Hoffe das ist halbwegs verständlich.

2a) Wie optimiere ich das Bild besser, dass es auch auf Smartphones anständig dargestellt wird? Kann man da mit sowas wie @Media arbeiten, und ab einer bestimmten geringeren Auflösung einfach ein anderes Bild einsetzen?


2b) In das Bild möchte ich eine Textbox div einbinden, welches sich auch responsive je nach Bildschirmbreite einbindet. Hat auch dazu jemand einen Link wo so etwas schon mit passender CSS irgendwo schon ausprogrammiert ist?

Danke

 

[Zonk91]

Zu deiner 1. Frage das sollte doch einfach mit JavaScript gehen:

var myElement = document.getElementById("elementId");
myElement.scrollIntoView();

Zu deiner zweiten Frage kann ich dir warscheinlich ohne Angabe von mehr Details auch nicht weiterhelfen. Ich würde es warscheinlich auch mit Media-Queries versuchen. Aber auf die Idee bist du ja schon gekommen.

EDIT:
Die smooth-Variante

var myElement = document.getElementById("elementId");
myElement.scrollIntoView({block: 'start', behavior: 'smooth' });

 

[Snooty]

1. liese sich einfach mit einem Anker lösen; dann "springt" die Seite halt zu dem jeweiligen Anker und scrollt nicht:

<a href="#anker">Link</a>
...
...
...
<a name="anker">Anker</a>

Siehe https://wiki.selfhtml.org/wiki/HTML/Tutorials/Links/Seiteninterne_Verweise.

 

[RalphS]

Mal in Richtung RWD = Responsive Web Design informieren, und die Möglichkeiten von (X)HTML5 ausloten.

Dort gibt es u.a. ein <picture>-Tag, welches mehrere (Alternativ-)Quellen inline unterstützt. Wird die Seite geladen, wird nur die passsendste Ressource geholt.

Siehe dazu zB w3schools oder sonst ein HTML5-Kompendium der Wahl.

 

[Sparki2002]

@Cave Johnson
Mit ein bisschen css sieht es auch nicht mehr wie springen aus:

scroll-behavior: smooth;

PS: In html5 benutzt man id und nicht mehr name

 

[Tourgott]

Zu 2.)
Ist das von dir so beabsichtigt?
Der bessere Ansatz ist eigentlich, das Bild für mobile zu optimieren und es dann mit der in Bootstrap vorgesehenen .img-fluid Klasse mit dem Elternelement skalieren zu lassen.

 

[SimonK91]

@Cave Johnson
Mit ein bisschen css sieht es auch nicht mehr wie springen aus:

scroll-behavior: smooth;

PS: In html5 benutzt man id und nicht mehr name

Hm, wo muss ich die CSS Regel genau hinpacken? Leider wendet er das mit dem smooth noch nicht an. Hab es einfach mit in die CSS Definitionen vom Body reingepackt?...

An sich funktioniert es mit Ankern recht gut mit den Sprungmarken... kann ich dem ganzen noch einen Offset mitgeben zb Anker -50px oder sowas...?

 

[Snooty]

Einen Offset kannst du wie folgt realisieren <a ... class="offset">Anker</a>:

.offset:before {
  display: inline-block;
  content: " ";
  height: 50px;
  margin-top: -50px;
  visibility: hidden;
}

 

[SimonK91]

2b) In das Bild möchte ich eine Textbox div einbinden, welches sich auch responsive je nach Bildschirmbreite einbindet. Hat auch dazu jemand einen Link wo so etwas schon mit passender CSS irgendwo schon ausprogrammiert ist?

Hat zu dem Punkt jemand noch einen Hinweis? Ich bin da leider noch nicht weiter gekommen...