Margin Padding Boxen (Nav + Content)


Ja, jetzt sind sie da, aber untereinander. Wolltest Du sie nicht nebeneinander haben?

Jaein. Wenn du etwas raus zoomst sind sie neben einander, ich möchte das sie bei großen Bildschirm nebeneinander sind und umso kleiner die Bildschirmfläche wird umso mehr sollen untereinander sein.

Aber du siehst bestimmt das sie keine saubere linie bilden und das möchte ich ändern.
 

Sempervivum

Erfahrenes Mitglied
OK, habe ich. Das IWC-Logo hat oben sehr viel Leerraum, deshalb ist es so nach unten verrutscht. Davon abgesehen, kannst Du die Bilder mit align-items ausrichten auf start, center oder end, allerdings musst Du dazu dem Container ein display: flex; geben.
 
also so?

Code:
.item-transparent {
            flex: 1;
            margin-top: 0em;
            margin-bottom: 2em;
            margin-left: 20%;
            margin-right: 20%;
            padding: 2em;
            display: flex;
            align-items: center;
}
 
kannst du es bei dir nochmals anschauen?
bei mir ist die erste box bündig mit den anderen und rechts gibt es dann so einen ekligen Abstand. was kann ich machen?
 
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

Erfahrenes Mitglied
rechts gibt es dann so einen ekligen Abstand
Dann zentrierst Du am besten die Logos:
Code:
.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.
 
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.

Unbenannt.png

Ungefair so :D

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?
 

MrMurphy

Mitglied
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.
 
Zuletzt bearbeitet:
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?.
 
Zuletzt bearbeitet:

MrMurphy

Mitglied
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.

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

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