# Html Anker



## Andrin.Spitzer (2. März 2020)

Hay.

Ich habe mit hilfe der Html Anker eine Website gebaut nun habe ich das kleine Problem das der Home "tag" beim betätigen nicht gleich "wirkt"  wie beim neuladen der seite. schaut es euch am besten an dan versteht ihr was ich meine. 

https://drive.google.com/file/d/1lH4YaJ9zG9_ubuaCYkQ9V4SrNrVLzYLi/view


----------



## Jan-Frederik Stieler (3. März 2020)

Hallo,
könntest Du bitte Dein problem nochmal spezifizieren?
Bei mir macht der Anker was er soll.

Was nicht so ganz sauber funktioniert, ist der Hintergrund. Was genau für einen Effekt wolltest Du den da erreichen?

Grüße

PS: Bitte lade hier in Zukunft keine Rar Dateien hoch. Niemand öffnet komprimierte Daten aus nicht bekannten Quellen. So etwas wie Deine Seite lässt sich gut mit jsFiddle oder JSbin abbilden.


----------



## Andrin.Spitzer (9. März 2020)

Hay.

Mein Problem ist ganz einfach.
Wen ich die Website lade ist die Position der Überschrift anders als wenn ich auf der seite scrolle und anschließend den Home button nutze.

Ich möchte das wen ich den anker aktiviere die überschrift wieder genau so mietig ist wie beim neuladen der seite?

Ich habe noch eine weitere frage.

Wie muss ich meine Elemente Gestalten das sich diese der Bildschirm grösse anpasst?


https://jsfiddle.net/1ny5ajoe/


----------



## basti1012 (9. März 2020)

Du solltest mit Flexbox arbeiten
http://www.css-wiki.com/listings/flexbox.html
Dann deine px Werte wegschmeissen.
Mit Px kann man fast nix responsiv gestalten.
Man nutzt da meistens %,vw,em um die Elemente responsiv zu machen.
Auch @mediaqueries wird wichtig sein damit du dein Layout auch an Handys und Tabletts anpassen kannst


----------



## Andrin.Spitzer (9. März 2020)

ist das nicht bereits etwa das was ich bereits habe?


----------



## Sempervivum (10. März 2020)

Wenn ich den Browser nicht im Vollbild habe, kann ich da überhaupt nichts erkennen, das Layout ist total zerlegt durch zwei horizontale Scrollbalken weil die Nav und die Überschrift riesig sind.

Was die Überschrift betrifft, meinst Du dass sie horizontal oder vertikal mittig sein soll?


----------



## basti1012 (10. März 2020)

Andrin.Spitzer hat gesagt.:


> ist das nicht bereits etwa das was ich bereits habe?


Stimmt, sorry.
Trotzdem sind deine Feste Breiten  wie ul width:1400px , und so nicht zum Vorteil bei dein vorhaben.
Auch einige  deine anderen Werte zerschießen dir das ganze Layout.


----------



## Andrin.Spitzer (10. März 2020)

Sempervivum hat gesagt.:


> Wenn ich den Browser nicht im Vollbild habe, kann ich da überhaupt nichts erkennen, das Layout ist total zerlegt durch zwei horizontale Scrollbalken weil die Nav und die Überschrift riesig sind.
> 
> Was die Überschrift betrifft, meinst Du dass sie horizontal oder vertikal mittig sein soll?




Jeder content soll beim betätigen des jeweiligen buttons mittig erscheinen. Das passiert mit der überschrift abr gar nicht.


----------



## Andrin.Spitzer (10. März 2020)

Wie sollte ich bzw mitbwad für einer einheit sollte ich die grösse der pberschrift etc gestalten das dies sich ideal anpasst?


----------



## Sempervivum (10. März 2020)

> Wie sollte ich bzw mitbwad für einer einheit sollte ich die grösse der pberschrift etc gestalten das dies sich ideal anpasst?


Leider ist das bei der Schriftgröße nicht so einfach wie bei einem Container, wo man die Größe z. B. in % angeben kann. AFAIK geht es nur so, dass man mit Mediaqueries die Größe stufenweise umschaltet.


----------



## Andrin.Spitzer (10. März 2020)

Sempervivum hat gesagt.:


> Leider ist das bei der Schriftgröße nicht so einfach wie bei einem Container, wo man die Größe z. B. in % angeben kann. AFAIK geht es nur so, dass man mit Mediaqueries die Größe stufenweise umschaltet.


Könntest du mir das demonstrieren fiddle oder so?


----------



## Andrin.Spitzer (10. März 2020)

Habt ihr an sowas gedacht?


```
h1 {font-size: 5em;}

            @media screen and (max-width: 64em) {
                h1 {
                    font-size: 2.5em;
                    }
            }

            @media screen and (max-width: 50em) {
                h1 {
                    font-size: 2em;
                    }
            }

            @media screen and (max-width: 30em){
                h1 {
                    font-sitze: 1.5em;
                    }
            }
```

Habe den Code mal angepasst und hochgeladen, schaut es euch an.


Ich habe festgestellt das der div nie mittig der website ist wie könnte ich das lösen?


----------



## Sempervivum (10. März 2020)

Ja, genau so habe ich es gemeint. Wo hast Du es denn hochgeladen, ich sehe da nur den Link für jsfiddle?


----------



## Jan-Frederik Stieler (11. März 2020)

So als kleinen Tip vw oder vh kann auch für Schriftgrößen verwendet werden.


----------



## Andrin.Spitzer (11. März 2020)

Sempervivum hat gesagt.:


> Ja, genau so habe ich es gemeint. Wo hast Du es denn hochgeladen, ich sehe da nur den Link für jsfiddle?



Schau hier 
https://firmenmeisterschaft-sh.ch/


----------



## Sempervivum (11. März 2020)

Jaaa, so sieht es wesentlich besser aus! Keine horizontalen Scrollbars mehr bei schmalerem Viewport.


----------



## Andrin.Spitzer (11. März 2020)

Sempervivum hat gesagt.:


> Jaaa, so sieht es wesentlich besser aus! Keine horizontalen Scrollbars mehr bei schmalerem Viewport.



Könntest du die seite mal auf deinem smartphone anschauen und mir sagen ob bei dir die seite auch fehler haft dargestelt wird?


----------



## Sempervivum (11. März 2020)

Nein, auf meinem Smartphone sieht die Seite OK aus. Nur die Schrift in der Nav und der zweiten Box ist etwas klein.
Am besten erst Mal dieses im Head einfügen, sonst machen die mobilen Browser mit der Seite was sie wollen:

```
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
```


----------



## Andrin.Spitzer (20. März 2020)

Funktioniert Sehr gut danke. ich hätte jedoch noch eine frage. meine nav ändert beim runter scrollen die Hintergrundfarbe jedoch wen ich ganz oben ankomme bleibt es noch kurz schwarz kann ich das ändern das es wirklich wider transparent ist wen ich oben bin?


----------

