Margin Padding Boxen (Nav + Content)

[Andrin.Spitzer]

und kann man das ändern der hintergrund farbe so ändern das es sich beim scrollen an der höhe "orrientiert" wie weit der change fortgeschritten ist so das es immer an der gleichen stelle egal ob beim rauf oder runterscrollen wider beginnt zu ändern?

 

[Sempervivum]

rechts gibt es dann so einen ekligen Abstand

Dann zentrierst Du am besten die Logos:

.item-transparent {
    flex: 1;
    margin-top: 0em;
    margin-bottom: 2em;
    margin-left: 20%;
    margin-right: 20%;
    padding: 2em;
    display: flex;
    align-items: center;
    justify-content: center;
}

kann man das ändern der hintergrund farbe so ändern das es sich beim scrollen an der höhe "orrientiert" wie weit der change fortgeschritten ist so das es immer an der gleichen stelle egal ob beim rauf oder runterscrollen wider beginnt zu ändern?

Das ist schon jetzt der Fall, denn der Schwellenwert ist für Hoch- und Runterscrollen gleich:deltaScrollPos = 10;
Dass man den Eindruck hat, dass die Farbänderung beim Hochscrollen später beginnt liegt am Fading, dadurch verzögert sich der Farbwechsel.

 

[Andrin.Spitzer]

Perfekt danke.

 

[Andrin.Spitzer]

Hay.

Ich habe Probleme mit der Platzierung von 3 Buttons.

Alle drei sind beim Kontakt Formular, die ersten beiden sind in der weißen boxen. Ich möchte das beide gleich breit sind und sich der breite der box anpassen sowie stets zentriert sind.

der letzte Button sollte unter der gerade erwähnten box sein und die selbe Breite haben.



Ungefair so

Hier Könnt ihr die Aktuelle situaion sehen so wie auf den code zugreifen.
Website

PS: Was kann ich machen das meine Website als Sicher Gilted?

 

[Sempervivum]

Auch in diesem Fall ist Flex dein Freund:

 

[Andrin.Spitzer]

Hay das sieht sehr gut aus.

 

[Andrin.Spitzer]

Wie bekomme ich nun noch den Submit button schön unter die anderen.

 

[MrMurphy]

Ich schlage mal den Gong, weil du dir dein Webseiten-Leben unnötig schwer machst.

Du doktorst immer im Kleinen rum. Dadurch ist dein Quelltext insgesamt Schrott (geworden). So wie der Quelltext aktuell ist kannst du den Button nicht "schön" (was immer du darunter auch genau verstehst) unter den anderen anordnen.

Zunächst solltest du deinen Quelltext also nach den aktuellen HTML-Regeln erstellen und das CSS danach gewaltig aufräumen.

Du solltest auch deine Klassennamen (class=...) passend ändern. Klassennamen wie "flex-item" schaffen nur Verwirrung, da flex üblicherweise mehrfach auf einer Webseite vorkommt.

Zudem verwendest du keine h1-Überschrift und nur h2-Überschriften. Das deutet darauf hin, dass du Überschriften nicht nach den HTML-Regeln verwendest, sondern nach der Darstellung (Größe) im Browser. Dadurch ist dein Quelltext sachlich falsch.

Das die Schrift bei schmaleren Fenstern teilweise kleiner wird ist benutzerunfreundlich und für seriöse Webseiten ein absolutes "No-Go".

Auch das br-Element ist veraltet und sollte nicht mehr verwendet werden. Abstände werden mit CSS-erzeugt. Siehe zum Beispiel bei

Mozilla

Und so weiter.

 

[Andrin.Spitzer]

Ich schlage mal den Gong, weil du dir dein Webseiten-Leben unnötig schwer machst.

Du doktorst immer im Kleinen rum. Dadurch ist dein Quelltext insgesamt Schrott (geworden). So wie der Quelltext aktuell ist kannst du den Button nicht "schön" (was immer du darunter auch genau verstehst) unter den anderen anordnen.

Zunächst solltest du deinen Quelltext also nach den aktuellen HTML-Regeln erstellen und das CSS danach gewaltig aufräumen.

Du solltest auch deine Klassennamen (class=...) passend ändern. Klassennamen wie "flex-item" schaffen nur Verwirrung, da flex üblicherweise mehrfach auf einer Webseite vorkommt.

Zudem verwendest du keine h1-Überschrift und nur h2-Überschriften. Das deutet darauf hin, dass du Überschriften nicht nach den HTML-Regeln verwendest, sondern nach der Darstellung (Größe) im Browser. Dadurch ist dein Quelltext sachlich falsch.

Das die Schrift bei schmaleren Fenstern teilweise kleiner wird ist benutzerunfreundlich und für seriöse Webseiten ein absolutes "No-Go".

Auch das br-Element ist veraltet und sollte nicht mehr verwendet werden. Abstände werden mit CSS-erzeugt. Siehe zum Beispiel bei

Mozilla

Und so weiter.

Hay.

Ich wollte mich für die kritik an meinem code bedanken.
Ich werde diesen überarbeiten.

Wen ich es richtig verstehe sind folgende Punkte extrem schlecht:

H1 falsch verwendet
Class bezeichnung unübersichtlich
A elemente statt p
A für buttons missbraucht
Schrift sollte grösse behalten
Br entfernen
Js und php in externe datei

Und dan sollte das besser aussehen?.

 

[MrMurphy]

Und dan sollte das besser aussehen?.

Ja, nach allen Verbesserungen.

H1 falsch verwendet

Ich sehe überhaupt keine h1-Überschrift.

A elemente statt p

Wo habe ich das geschrieben? Eher umgekehrt. a-Elemente nur wenn sie auch eine Verlinkungen enthalten.

A für buttons missbraucht

Habe ich auch nicht geschrieben. Optisch kann ein a-Element natürlich als Button dargestellt werden.

Schrift sollte grösse behalten

Ja. Und die Größe soll gut lesbar sein.

Br entfernen

Ja, auf deiner Seite sind alle überflüssig.

Js und php in externe datei

Davon habe ich auch nichts geschrieben. Das ist eher Ansichtssache.

Zudem hast du überlesen

Und so weiter.

Das was ich aufgeschrieben habe sind nur einige Beispiele. Es gibt noch viel mehr Verbesserungsbedarf, auch um die Seite benutzerfreundlicher zu machen.