Zwei HTML/CSS Fragen

SimonK91

Lieutenant
Dabei seit
März 2012
Beiträge
838
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

Cadet 3rd Year
Dabei seit
März 2013
Beiträge
35
Zu deiner 1. Frage das sollte doch einfach mit JavaScript gehen:

Code:
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 ;)

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

RalphS

Lt. Commander
Dabei seit
Feb. 2015
Beiträge
1.304
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.
 
S

Sparki2002

Gast
@Cave Johnson
Mit ein bisschen css sieht es auch nicht mehr wie springen aus:
CSS:
scroll-behavior: smooth;
PS: In html5 benutzt man id und nicht mehr name
 

Tourgott

Lt. Commander
Dabei seit
Aug. 2009
Beiträge
1.224
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

Lieutenant
Ersteller dieses Themas
Dabei seit
März 2012
Beiträge
838
@Cave Johnson
Mit ein bisschen css sieht es auch nicht mehr wie springen aus:
CSS:
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...?
 

SimonK91

Lieutenant
Ersteller dieses Themas
Dabei seit
März 2012
Beiträge
838
Top