Float box design + script fehler suche.

[Sempervivum]

OK, das finde ich aber nicht auf der Seite wieder, die Du online hast. Aber ich vermute mal, Du meinst, dass sich das sichtbare beim H1, nämlich die Schrift nicht verändert. Deren Größe wird jedoch durch font-size bestimmt. Mit den Breitenangabe änderst Du nur die Abmessungen des Elementes, nicht der Schrift darin. D. h. das, was ich hier mit einem hellblauen Rand markiert habe:

 

[Andrin.Spitzer]

OK, das finde ich aber nicht auf der Seite wieder, die Du online hast. Aber ich vermute mal, Du meinst, dass sich das sichtbare beim H1, nämlich die Schrift nicht verändert. Deren Größe wird jedoch durch font-size bestimmt. Mit den Breitenangabe änderst Du nur die Abmessungen des Elementes, nicht der Schrift darin. D. h. das, was ich hier mit einem hellblauen Rand markiert habe:
Anhang anzeigen 66338

Musste auch die cookies löschen das ich es sehen konnte.

Hay. Das sehe ich auch so aber mein problem ist das wen ich den code so habe (schreib fom handy daher kein original code)

<main>
<h1>wen ich diesem h1 tag die selben 50 css werte gebe als width und max width</h1>

<div class="content">ist das nicht die selbe vreite wie wenn ich den n 1:1 selben code also width und max width diesem div gib</div>
</main>

 

[Sempervivum]

Du hast da mehrere verschiedene Angaben, die sich auf angezeigte Breite auswirken: width, max-width und padding. width und max-width bestimmen die Breite ohne Padding. Beim Hintergrund ist jedoch das Padding eingeschlossen. Setze ich padding, width und max-width gleich, sind auch die sichtbaren Container gleich:

In deiner Originalversion ist jedoch fast alles unterschiedlich, deshalb unterscheidet sich die sichtbare Breite der Container.

 

[Andrin.Spitzer]

Du hast da mehrere verschiedene Angaben, die sich auf angezeigte Breite auswirken: width, max-width und padding. width und max-width bestimmen die Breite ohne Padding. Beim Hintergrund ist jedoch das Padding eingeschlossen. Setze ich padding, width und max-width gleich, sind auch die sichtbaren Container gleich:
Anhang anzeigen 66339
In deiner Originalversion ist jedoch fast alles unterschiedlich, deshalb unterscheidet sich die sichtbare Breite der Container.

Achso das wusste ich ned.

Könntest du mir den code wie du es angepasst zeigen?

 

[Sempervivum]

Gern:

h1 {
    text-align: center;
    padding: 2em;
    width: 30em;
    /* max-width: 60%; */
    font-family: Bahnschrift SemiBold;
    font-size: 1em;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.5em;
    mix-blend-mode: screen;
    margin: 0em auto;
    background-color: rgba(255,255,255,1.00);
    border: 2px solid red;
}

.content {
    margin: 4em auto;
    padding: 2em;
    width: 30em;
    /* max-width: 80%; */
    background-color: whitesmoke;
    border: 2px solid red;
}

 

[Andrin.Spitzer]

Gern:

h1 {
    text-align: center;
    padding: 2em;
    width: 30em;
    /* max-width: 60%; */
    font-family: Bahnschrift SemiBold;
    font-size: 1em;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.5em;
    mix-blend-mode: screen;
    margin: 0em auto;
    background-color: rgba(255,255,255,1.00);
    border: 2px solid red;
}

.content {
    margin: 4em auto;
    padding: 2em;
    width: 30em;
    /* max-width: 80%; */
    background-color: whitesmoke;
    border: 2px solid red;
}

Danke schön.

Wie findest du den code so? Was könnte ich besser machen?

 

[Andrin.Spitzer]

Was würdest du machen um die ganze seite noch responsive zumachen.

 

[Andrin.Spitzer]

Hay. Komme gut Dank deiner hilfe voran.
Allerdings kamm mir die frage wie ich den Text der navbar responsive machen kann. Habe mit % und vh probiert jedoch endet das bicht gut verallem bei grossen monitoren

 

[Sempervivum]

I. allg. sind eher die kleinen Monitore das Problem, weil dann die Navbar horizontal nicht mehr hinein passt. Bei großem Browserfenster erkenne ich bei dir keine Probleme, die einzelnen Punkte werden auch nicht unnötig auseinander gezogen. Beschreibe doch mal, wo Du die Probleme siehst.
Was kleine Bildschirme, vor allem beim Handy betrifft, so ist es eine bewährte Praxis, die Nav zu verbergen und nur ein Hamburger-Symbol anzuzeigen. Tippt man darauf, öffnet sich die Nav. Versuche, dich darüber zu informieren.

 

[Andrin.Spitzer]

I. allg. sind eher die kleinen Monitore das Problem, weil dann die Navbar horizontal nicht mehr hinein passt. Bei großem Browserfenster erkenne ich bei dir keine Probleme, die einzelnen Punkte werden auch nicht unnötig auseinander gezogen. Beschreibe doch mal, wo Du die Probleme siehst.
Was kleine Bildschirme, vor allem beim Handy betrifft, so ist es eine bewährte Praxis, die Nav zu verbergen und nur ein Hamburger-Symbol anzuzeigen. Tippt man darauf, öffnet sich die Nav. Versuche, dich darüber zu informieren.

Hay. Ich meine das wen ich mit vw oder prozent arbeiten würde wäre der text zu gross. So ist es bei grossen monitoren kein problem das stimmt.

Ich habe mich da etwas infomiert und bereits ne idee ausgedacht, deine meinung würde mich interessieren.

Ich stelle mir vor das die nav bar selbst bleibt der text jedoch durch so ein burger ersetzt wird.

Wen ich ihn antippe giptves ein popup menu mit den buttons das sich nach betötigen wider schliesst.