Webseite in der Breite verschiebbar

    Hallo zusammen,


    da ich zum ersten Mal eine Website mache bin ich totaler Anfänger und ahnungslos ;(


    Ich möchte das die Bilder, Texte usw., im Grunde genommen komplett die Webseite, bis zum Rand ausgefüllt wird, sprich ohne Rand. Wisst Ihr wie ich meine?

    Nur leider klappt das nicht so ganz.


    Ich habe folgenden Code eingegeben:

    @charset „UTF-8“;

    -* Body */

    body {

    font-family: Gotham...;

    background-color: #FFFFFFF;

    magrin-top: 0px;

    margin-right: 0px;

    margin-bottom: 0px;

    margin-left: 0px;

    font-style: normal;

    font-weight: 200;

    }

    /* Container */

    .container {

    width: 90%;

    margin-left: auto;

    margin-right: auto;

    }


    Momentan habe ich die Webseite so hochgeladen.

    http://www.blickpunkt-grafikdesign.de


    Dort kann man den Rand links und rechts bei den Parallax Bildern erkennen.


    Gebe ich jetzt aber 100% statt 90% bei „container width“ ein, gehen die Bilder bis an Rand allerdings erscheint ein Balken in der Breite mit dem man die Webseite verschieben kann und das Problem ist doch nicht gelöst X/


    Kann mir jemand helfen?


    Und bitte die Webseite bloß nicht mit dem Smartphone öffnen.

    Da wartet schon das nächste Chaos auf mich, ich bin einfach überfordert die Seite responsive zu bekommen.


    Aber sie ist ja auch noch nicht fertig 😉


    Ich danke euch schonmal für eure Hilfe, gerne dürft ihr mir auch eure Meinung dazuschreiben was ihr so von der Seite momentan haltet 😊


    LG

    Timo

    Zitat

    ein Balken in der Breite mit dem man die Webseite verschieben kann

    Ich gehe davon aus, dass Du damit die horizontale Scrollbar meinst. Der Grund dafür, dass sie auftaucht ist das CSS deines Formulars:

    Code
    .contact {
    width: 100%;
    text-align: center;
    padding-left: 25px;
    padding-right: 25px;
    padding-top: 10px;
    display: inline-block;
    margin-top: 0px;
}

    CSS ist so definiert, das paddings und margins zu der Breite, die mit width angegeben wurde, addiert werden. D. h. die Breite deines Formulars ist "100% + 50px". Weil diese die Fensterbreite überschreitet, blendet der Browser die Scrollbar ein, damit der gesamt Inhalt zugänglich ist.

    Abhilfe, indem Du bei der Definition der Breite die paddings subtrahierst:

    Code
    width: calc(100% - 50px);

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden