HTML + CSS Website hat weisse Seite am rand?

Wenn ihr nach links scrollt auf https://islikers-baukunst.ch/FreshHp, seht ihr einen weissen Rand aber kein visuelles Element dass das verursacht. Könnt ihr mir da helfen? Leider kann ich nicht die Website hier rein kopieren, da diese sonst zu lang wäre. Aber ich habe hier einen DropBox-Link: Zu DropBox

3 Antworten

Vom Fragesteller als hilfreich ausgezeichnet

Zwnow

22.02.2023, 20:17

Die Frage wird ja ausgiebig beantwortet. Ich möchte dir nur den Hinweis geben, dass deine Seite unbedingt ein Impressum braucht. Sonst kann es zu teuren Abmahnungen kommen.

Woher ich das weiß:Berufserfahrung – Ich bin Entwickler.

Eliox

Fragesteller

22.02.2023, 20:22

Danke. Kommt natürlich no

ch dazu

Mirko Marek

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Mediengestalter Digital und Print

01.03.2023, 14:34

Weiße Ränder können enstehen wenn die Inhalte nicht die komplette Breite des Fensters einnehmen oder margin und padding für das Body-Element nicht auf null gesetzt wurde.

Woher ich das weiß:eigene Erfahrung

Destranix

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Programmieren & Softwareentwicklung

22.02.2023, 19:34

Du hast die Breite auf 90% gesetzt, natürlich hast du dann einen Rand, da der Inhalt eben nur 90% des Elternelements einnimmt und der Rest weiß bleibt.

EDIT: Ich empfehle übrigens, sich bei einer gewerblichen Website anwaltlich beraten zu lassen. Da kann es oft leicht passieren dass man etwas falsch macht und am Ende eine Stange Geld hinblättern muss.

Eliox

Fragesteller

22.02.2023, 19:36

Das habe ich gemacht um ausprobieren ob da der Fehler liegt

Destranix

22.02.2023, 19:38

@Eliox

Es liegt am margin.

Eliox

Fragesteller

22.02.2023, 19:39

@Destranix

was kann ich daran ändern

Destranix

22.02.2023, 19:40

@Eliox

Setz ihn für jede Seite einzeln, so, wie du ihn brauzchst. Derzeit sorgt der Margin dafür, dass rechts und links 120px frei bleiben.
(Browserkonsole hilft beim visualisieren.)

Eliox

Fragesteller

22.02.2023, 19:44

@Destranix

Entschuldigung, ich kann dir nicht folgen. Was meinst du für jede Seite? Kannst du mir die Änderung am CSS schicken? Eigentlich kann ich das aber jetzt weiss ich es nicht.

Destranix

22.02.2023, 19:45

@Eliox

https://www.w3schools.com/css/css_margin.asp

Du kannst den Margin für jede Seite einzeln setzen. Du willst offenbar einen Margin für oben, aber nicht für die Seiten, wenn ich dich richtig verstehe?

Eliox

Fragesteller

22.02.2023, 19:45

@Destranix

ja genau

Destranix

22.02.2023, 19:47

@Eliox

Dann verändere den margin passend. Wenn du oben und unten einen Margin möchtest, musst du iirc nur die 120px in 0px ändern. Wenn du nur oben einen margin möchtest, dann musst du jede Seite einzeln setzen.

Eliox

Fragesteller

22.02.2023, 19:51

@Destranix

Update: Ich habe auf jedes Element jetzt eine Border gemacht. schau mal jetzt. bei den kontaktmöglichkiten liegt das problem oder?

Destranix

22.02.2023, 19:54

@Eliox

Da ist auch wieder ein margin eingestellt. Wenn dir der nicht passt, dann ändere ihn, wie es geht weißt du ja jetzt.

Wenn alle inneren Elemente dieselben Eigenschaften haben sollen kannst du im Übrigen auch mit Klassen arbeiten, und darüber die Attribute zuweisen.

(Übrigens: Wenn das mehr werden soll als eine bloße Website mit einer Seite für Kontaktinfos, dann solltest du evtl. jemanden dafür bezahlen, dass er dir die Website rechtskonform so baut, wie du das möchtest.)

Eliox

Fragesteller

22.02.2023, 19:59

@Destranix

Ja, ich kann auch schon php und javascript, werde das auch noch brauchen. Beispiel siehe https://chat.elifox.ch/

Destranix

22.02.2023, 20:02

@Eliox

Also wenn du da keine Ausbildung für hast, lass das jemand anderen machen. Dazu würde dir wahrscheinlich auch ein Anwalt raten bei einer Beratung. Denn ohne Ausbildung, wie sillst du beispielsweise garantieren, dass Daten deiner Kunden sicher sind und soetwas?
Wobei das auch wieder damit zusammenhängt, was du machen möchtest.

Eliox

Fragesteller

22.02.2023, 20:04

@Destranix

Habs grad gelöst. Ich weiss nicht ob ich das jetzt äussern sollte aber ich bin verdammte 11 Jahre alt

Destranix

22.02.2023, 20:07

@Eliox

Verstehe, soll häufiger vorkommen soetwas ;-)

Eliox

Fragesteller

22.02.2023, 20:09

@Destranix

Haha

Eliox

Fragesteller

22.02.2023, 19:38

Danke für den Tipp. Überings: Schau jetzt mal auf die Website nachdem ich width auf 100% gestellt habe

Hey Leute, Lerne derzeit CSS und bin gerade bei einem Hindernis gelandet. Irgendwie ist ein weisser Rand aussen von meinem div Container entstanden und egal mit welchen Befehl, er geht einfach nicht weg. Habe es auch schon mit margin: 0%; versucht.

Nix hat funktioniert.

Ich würde den Code gerne einfügen jedoch ist er zu lang. Wenn jemand Interesse hat mir im privat Chat zu helfen kann ich gerne den Code zuschicken.

Hat jemand anderes trotzdem eine Ahnung was das sein kann und wie ich es loswerden kann? Habe den Code bereits kontrolliert und und nix finden können.

...zur Frage

Weisser Rand rechts auf Website?

Hallo Leute!

ich habe auf meiner website tastenwichser24.de irgendwoher in der mobile ansicht einen weissen rand rechts.

Sieht fast so aus als wäre es ein passing, oder margin. Ich finde das Problem aber leider nicht. Bin auch noch Anfänger was Webdevelopment/design angeht :)

Vielleicht könntet ihr mir helfen? :)

...zur Frage

Website HTML und CSS Fehler?

Hallo,

ich soll als Hausaufgabe eine Website (nur HTML und CSS) programmieren (wir haben bis jetzt nur die Basics gemacht).

Ich habe nun die Grundstruktur in HTML so gemacht, wie ich es brauche und bin nun beim CSS Teil angekommen, welcher mir etwas Kopfschmerzen bereitet.

Ich habe mal Screenshots vom bisherigen Code eingefügt (Die Website soll laut Lehrer ganz einfach sein, das Impressum muss nur einen Beispieltext enthalten und den Code für den footer aus der Landingpage habe ich noch nicht an die anderen Seiten angepasst, da ich noch mit CSS am experimentieren war).

Falls der Code an sich besser weiterhilft, habe ich hier noch den Dropbox Link:
https://www.dropbox.com/scl/fi/fgwyg3w7m4hfqdnbl3f3n/Website.zip?rlkey=1ea3d4quzggbn8xgnk9x9gvk3&dl=0

Nun habe ich folgende Probleme/Dinge, die ich auf der Website haben möchte, aber nicht hinbekomme:

Ich möchte einen festen Header haben (wie der auf gutefrage), bei welchem die anderen Seiten mittig angeordnet sind
Der footer soll wie bei Amazon ganz unten sein und auch in einem farbigen Kasten, welcher sich über den ganzen Bildschirm zieht
Die Texte im Footer sollen einmal links(2023), mittig(impressum) und rechts(Namen) ausgerichtet sein (irgendwie konnte ich den Link zum Impressum nicht verschieben)
Die Seite muss nicht 100% responsible sein, sondern soll sich nur an verschiedene Browser anpassen (Laut Lehrer mit Hilfe von prozentualen Werten anstatt Pixeln)
Auf der Landingpage möchte ich das Hintergrundbild haben und der Text (welchen ich noch hinzufügen muss) soll erst nach dem Bild kommen, wenn man runter scrollt
Auf der Impressum Seite soll der Beispieltext zum Uhrheberrecht nicht von ganz links nach ganz rechts auf dem Bildschirm gehen, sondern nur bis zu etwa der Mitte und dann einen Zeilenumbruch (soll sich nicht verschieben, wenn ich es mit anderem Browser benutze)

Ich habe schon selbst versucht, die oben genannten Dinge irgendwie zu fixen, aber entweder klappt es nicht oder meine Website stellt sich einmal auf den Kopf. Da wir auch erst die Basics in CSS hatten, weiß ich leider nicht mehr, als das, was ich schon gemacht habe.

Es wäre sehr hilfreich, wenn mir einer, der sich damit auskennt, weiterhelfen könnte und mir erklären kann, wie ich die oben genannten Kriterien umsetzen kann.

Ich bedanke mich schonmal sehr bei euch.

Grüße Alex

...zur Frage

CSS: Wie kann ich einstellen dass wenn ich mit dem Mausrad Scrolle dass es eine Seite herunter geht?

Hallo Leute

Ich möchte dass auf meiner Website, wenn man scrollt dass es quasi eine ganze Seite herunter geht. Ich habe jetzt kein Beispiel, auf welcher Seite es so aussieht, aber wenn man auf http://www.apple.com/ geht, sieht man ja eine Slideshow, ich möchte eigentlich dassselbe machen, halt einfach vertikal und mit Scrollen. Habt ihr eine Idee. Am liebsten nur mit CSS.

Danke für die Hilfe

Ranixi

...zur Frage

Weißer Rand rechts von meiner Website?

Ich bin gerade dabei meine Website zu erstellen. Ich habe den Header und Footer jetzt fertig jedoch einen weißen Rand rechts. Kann jemand mir sagen, was ich falsch gemacht habe?

view-source:https://www.dzenanjupic.de/

...zur Frage

Scroll Schnelligkeit einzelner Elemente verändern (Website)?

Ich habe ein ELement (zB ein Div) und möchte dass dieses div langsamer nach oben scrollt als andere Elemente auf der Seite - Wir nehmen zB an ich habe 4 divs: Jedes Div soll in einer anderen Geschwindigkeit nach oben scrollen.... Wie könnte man das mit JS/CSS umsetzen? Am besten mit Erklärung - im Internet finde ich leider nur fertigen Code den ich nicht einfach so einsetzen will ohne ihn zu verstehen :)

...zur Frage

im CSS ein sticky Element auf Bildschirmhöhe?

Ich arbeite gerade an einer Website, wobei ich mit einem CSS-Grid die Bereiche header, nav, footer und main definierte. Mein nav ist dabei auf der rechten Seite des Bildschirms und nimmt 15% der Breite ein. Es sollte sticky sein, da es nur aus 4 Bildern besteht, welche immer zu sehen sein sollten. Dies habe ich schon so. Nun ist das Problem, dass wenn ich scrolle, die Bilder nach oben scrollen, anstatt dort zu bleiben. (Das nav ist so zu sagen zu lang und danach kommt einfach nur noch die Hintergrundfarbe des nav). Wie kann ich machen, dass es eigentlich 100% der Höhe des Bildschirms einnimmt und dann so bleibt?

Seite beim Öffnen

Seite beim bisschen runter scrollen (so sollte es schlussendlich beim weiterscrollen auch sein)

Seite beim noch weiterscrollen

...zur Frage

NavBar auf jeder Unterseite einbauen (Webdevelopment)?

Hallo, es gibt auf so ziemlich jeder Website Elemente, die auf fast jeder Unterseite vorkommen. Ein Beispiel dafür wäre die NavBar. Diese ist bei den meisten Websites überall. Wie bringt man aber dieses Element auf jede Unterseite? Bei jeder Unterseite den ganzen HTML, CSS und JavaScript Code reinzukopieren wäre ja sehr mühsam.

Diese Aufgabe kann man mit Framworks lösen, wie z.B. VueJS wo man Komponenten verwendet. Welche Methoden gibt es sonst noch, vielleicht sogar ganz ohne Framework?

...zur Frage

Html Sticky header funktioniert nicht?

Hallo, seit Weile arbeite ich an einer Website, für welche ich jetzt einen Header installiere. Oben ist etwas Content und danach ist eben der Header, der beim Scrollen oben am Rand bleiben soll. Das ist mein Code dazu, ich hoffe jemand kann mir helfen und danke im Vorraus.

------HTML------

<div id="header">
    <img src="bilder/Logo.png" alt="Logo Fliesen"></img>
         <div id="flexbox">
             <nav>
                 <ul class="menu">
                     <div class="flexitem" id="navFlex">
                        <li><a href="index.html">Home</a></li>
                        <li><a href="engagement.html">Unser Engagement</a></li>
                        <li><a href="contact.html">Kontakt</a></li>
                        <li><a href="about.html">Über mich</a></li>
                        <li><a href="referenzen.html">Referenzen</a></li>
                    </div>
                </ul>
            </nav>
       </div>
   <div class="social" class="flexitem"></div>
</div>

-----CSS------

#header {
    height: 80px;
    left: 0;
    right: 0;
    width: 100vw;
    border-bottom: 1px solid #DEDCD9;
    background-color: white;
    display: flex;
    overflow: hidden;
    position: sticky;
}

.sticky {
    position: fixed;
    top: 0;
    width: 100%;
}
  
  .sticky + #bsp {
    padding-top: 60px;
}

------Script-------

<script>window.onscroll = function() {stickyH()};

var navbar = document.getElementById("header");
var sticky = navbar.offsetTop;
function stickyH() {
   if (window.pageYOffset >= sticky) {
       navbar.classList.add("sticky")
        } else {
                navbar.classList.remove("sticky");
              }
            } 
</script>

...zur Frage

Element immer im Bildschirm haben mit CSS?

Hi,

ich versuche mich gerade an meiner ersten Website mit HTML und CSS.
Jetzt möchte ich gerne das eine Flexbox immer am oberen Rand des Bildschirms bleibt, aber dennoch sonst im Fluss der Seite ist, also andere Elemente nicht dahinter sind oder so. Das soll eine Art Navigationsleiste werden, die immer zu sehen ist.

Ich dachte ich hätte das schonmal gesehen, weiß jetzt aber nicht mehr wie ich das umsetzten könnte und bitte deshalb um Ratschläge von euch.

Danke im Voraus!

...zur Frage

Wie HTML Animation die aus verschiedenen Dateien besteht einbinden?

Ich habe eine interaktive HTML Animation bekommen. Dieser Ordner besteht aus vielen verschiedenen dateien. Bilder, Videos, CSS, JS. Ich möchte diese Animation nun auf meiner Website einbinden.

Ich bin ehrlich gesagt etwas überfordert. Ich weiß wie ich HTML Code einbinde etc. Aber nicht ein Content Element welches sich aus vielen verschienden Dateien zusammensetzt.

...zur Frage

Html/CSS float tag funktioniert nicht?

Hi!

Ich schreibe gerade eine Website und wollte bei CSS das Float tag anwenden (Float: right;). Als ich die Website dann neu geladen habe ist nichts passiert und das Element ist links geblieben. Ich nutze Bootstrap für die Website, hat das vielleicht was damit zu tun? Falls ihr mehr Infos braucht, schreibt gerne.

...zur Frage

Element-Inhalt abrufen?

Ich programmiere seit einiger Zeit mit HTML CSS und JS und habe mit Getboostrap eine Website erstmals geschrieben, wo mein Ziel es war dass man dort einen Key eingeben kann womit man dann auf eine weitere HTML Datei umgeleitet wird die den Namen hat. Damit meine ich das wenn man als Key hallo123 eingibt das man auf die Seite Hallo.html umgeleitet wird. Ist zwar nicht gerade so sicher aber es reicht für den Start aus. Ich habe jetzt aber das Problem das ich bei "document.getElementById()" nicht dem Inhalt aus dem Eingabe Feld erhalte wodurch man egal was man eingibt zu null.html umgeleitet wird. Weiß jemand wie ich das Behebe?

<!doctype html>
<html lang="en">


<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Mit Projekt-Key herunterladen | LSprojects</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
</head>
<style>
body {
    background-color: rgb(26, 24, 24);
    color: white;
}
.btn  {
    background-color: rgb(161, 156, 156);
    color: white;
}
</style>
<script>
    function submit() {
        let code = document.getElementById(codeinput);
        window.location = "/codes/" + code + ".html"
    }
</script>


<body>
    <div class="vertical-center horizontal-center">
        <h1>Geben sie den Key hier ein:</h1>
        <div class="input-group mb-3 dark-backround">
            <button href="submit()" onclick="submit()" class="btn btn-outline-secondary" type="button"
                id="load">Laden</button>
            <input type="text" class="form-control" placeholder="Projekt-Key" id="codeinput" aria-label=""
                aria-describedby="load">
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
        crossorigin="anonymous"></script>
</body>


</html>

...zur Frage

Mit Input Element rechnen (JavaScript)?

Ich fange gerade an, programmieren zu lernen (HTML, Js, CSS) und bin gerade dabei eine Website zu coden, die Meilen in Kilometer umrechnet. Man gibt beim Input Feld die Meilen ein und wenn man den Button Convert drückt sollen diese in Kilometern angegeben werden. Bei der Js Funktion mit dem Button kommt allerdings immer NaN (Not a Number) heraus, wenn ich mit dem Eingegeben weiterrechnen möchte. Wisst ihr wie man den String von der Eingabe zu einem Zahlenwert machen kann, sodass die Funktion damit weiterrechnen kann? Danke

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen