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/

3 Antworten

Vom Fragesteller als hilfreich ausgezeichnet

threadi

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, Internet, HTML

27.10.2018, 15:08

Bei mir ist da kein weißer Rand zu sehen. Mit welchem Browser arbeitest Du?

Woher ich das weiß:Berufserfahrung – mit dem Internet verbunden seit 1993

DzenanJupic

Fragesteller

27.10.2018, 15:11

Chrome auf dem PC und Chrome plus Samsung Internet auf dem Handy. Du musst dafür unten die scrollleiste nach rechts schieben.

threadi

27.10.2018, 15:15

@DzenanJupic

Ah, jetzt seh ichs. Das liegt daran, dass Du #Logo um 2% von links aus verschiebst. Wenn der Inhalt nur einen Abstand von links haben soll, arbeite eher mit padding.

Btw. ist der HTML-Code ziemlich kaputt. Ein <li> muss von <ul> umgeben sein, nicht von <span>.

DzenanJupic

Fragesteller

27.10.2018, 15:20

@threadi

Danke! Und ja ich weiß, dass es eigentlich so gehört aber ich habe die Erfahrung gemacht, dass einige Sachen im style Tag leichter um zu setzen sind, wenn ich die Listen-punkte direkt in die Container schreibe. Aber noch einmal vielen Dank.

threadi

27.10.2018, 15:22

@DzenanJupic

Das ist eine schlechte Erfahrung, da täuschst Du dich gewaltig. Ich würde dir raten bei gültigen HTML-Regeln zu bleiben und nichts selbst zu erfinden.

ch62718ris

27.10.2018, 15:51

Also ich arbeite mit Firefox und da ist kein weißer Rand da.

Die Programme die WEB - Seiten erstellen arbeiten oft so wie Du beschreibst.

Damit man sieht das seine Zeilen wirklich alle bündig sind. Da arbeiten fast alle Browser anders. Der eine verkleinert Frames bis sie passen, der andere schmeidet einfach ab etc.

Woher ich das weiß:Berufserfahrung

medmonk

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer

28.10.2018, 00:26

Kann jemand mir sagen, was ich falsch gemacht habe?

In deinem Markup ist so einiges falsch. Daher grundsätzlich das Markup und CSS zwischendurch validieren und anschließend angezeigte Fehler beheben.

Des weiteren nach dem DRY-Konzept (Don't repeat yourself) vorgehen solltest. In deinem Fall meine ich vor allem die wiederholte Navigation im Markup. Es reicht wenn du diese einmal anlegst und alles weitere mithilfe von CSS und Media Queries steuerst. Hier nur mal ein kleines Beispiel für den Aufbau deiner Hauptnavigation:

<nav class="navbar" role="navigation">
  <div class="navbar-brand">
   <a class="logo" href="/"><h1>Dzenan Jupic</h1></a>
   <!-- toggle-control comes here! -->
  </div>
  <div class="navbar-collapsed">
   <ul class="menu-primary">
    <li><a class="menu-primary__item" href="/">Home</a></li>
    <li><a class="menu-primary__item" href="#">Shop</a></li>
    <li><a class="menu-primary__item" href="#">Downloads</a></li>
    <li><a class="menu-primary__item" href="#">Konto</a></li>
   </ul>
  </div>
 </nav>

Navigation und vergleichbare Elemente eh am besten ausgelagert und bei Bedarf serverseitig mithilfe von PHP oder ähnlichem inkludiert werden. Der große Vorteil daran ist, das Navigation und Co. an einer zentralen Stelle verwaltet werden können. Davon mal ab, man so bei der Entwicklung auch so einiges an Schreibarbeit erspart.

Anstatt mit IDs eher mit Klassen arbeiten solltest, da Klassen im Gegensatz zu IDs wiederverwendet und erweitert werden können. Auch das erspart dir wieder einiges an Schreibarbeit und hilft dir zum Teil dabei, dein CSS übersichtlich zuhalten. Interessant wird das ganze vor allem dann, wenn anstatt CSS mit einem CSS Preprocessor wie Sass/SCSS, Less oder Stylus gearbeitet wird. Das aber nur "by the way".

Last but not least, "Social Media Gedöns" eigentlich nichts in Hauptnavigation zu suchen hat. Mach dir Gedanken wo und wie du es besser unterbringen kannst. Beispielsweise das Ganze in den Footer packst oder "Fratzenbuch" und Co. in einem sekundären "Menü" unterbringst.

LG medmonk

Woher ich das weiß:Berufserfahrung

Ähnliche Fragen

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

Grid mit Tailwind CSS und 1fr?

Seit längerem beschäftige ich mich mal wieder mit Tailwind CSS und stoße gleich am Anfang auf ein eigentlich simples Problem, für was ich aber keine einfach Lösung finde.

Ich versuche ein einfaches Layout zu erstellen, welches als Grundgerüst ein Grid hat, bei dem der Header und Footer eine explizite Höhe haben und der Main-Bereich flexibel ist. Das Layout sollte auch bei wenig Inhalt immer 100vh haben, so dass der Footer immer unten ist.

Mit reinem CSS wäre das einfach so lösbar:

CSS

.grid {
 min-height: 100vh;
 display: grid;
 grid-template-columns: 1fr; 
 grid-template-rows: 5rem 1fr 7rem;
}

HTML

<div class="grid">
 <header>Header</header>
 <main>Main</main>
 <footer>Footer</footer>
</div>

Mit TailwindCSS bekomme ich das irgendwie nicht hin – zumindest nicht ohne Custom-CSS. Ich kann mir aber kaum vorstellen, dass sich dies nicht auch mit dem vorhandenen Set realisieren lässt.

Hat hier jemand eine Idee, wie ich das mit TailwindCSS am einfachsten umsetze?

...zur Frage

Rand beim footer loswerden?

Hallo, ich habe einen footer auf meiner Website programmiert, aber das Problem ist das er sowohl an den Seiten als auch unten einen Rand hat, den ich nicht haben will.

Wie löse ich das?

PS:Der footer ist der schwarze balken

...zur Frage

css Rand entfernen

hey leute, ich beschäftige mich seit kurzem mit dem designen von webseiten und habe immer das problem dass ich wenn ich meine ganze seite mit css formatieren will so wie hier:

<body>
<div id="default">
<h1>Inhalt</h1>
</div>
</body>

dann bleibt immer ein weißer rand oben, unten, rechts und links von meinen in css definiertten hintergrundbild

bitte nicht die methode mit 'margin' vorschlagen die funktoniert nicht...

danke für hilfreiche antworten ;)

...zur Frage

Css div Container weissen Rand los werden?

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

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

...zur Frage

Wie bekomme ich bei wordpress den weißen Rand über dem Header weg?

Mal wieder eine Wordpress Frage an der ich nur verzweifle Ich habe eine Wordpress-seite erstellt (twenty eleven Theme) und habe dann das Hintergrundbild geändert, jetzt wo der weiße Hintergrund weg ist wird ein dünner weißer Strich über dem Header Bild Sichtbar. Wie bekomme ich diesen idiotischen Rand, bzw. Strich weg. Wieso ist so ein hässlicher Strich überhaupt im Theme vorgegeben. :D Es ist wirklich dringend und ich bedanke mich für jede Antwort.

Wenn ich was im Stylesheet css ändern muss dann gleich vorweg die Frage dazu:

Wo finde ich bestimmte Stellen im Stylesheet, mit dem Auge suchen geht nicht weil es zu lang ist und cmd F bringt auch nix weil dann nur die stellen gesucht werden die gerade sichtbar sind, aber nicht die stellen für die man runter scrollen muss.

Gruß

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

Wie kann man ein festes Bild über einem div oder header in css anzeigen lassen ohne, dass es sich in diesem Container befindet?

Hallo,

ich bin aktuell dabei meine eigene kleine Website mit HTML und CSS zu gestalten und bin auf ein Problem gestoßen. Ich möchte mein Logo über einem Header oder Div anzeigen wie es unten auf dem Bild auch gezeigt ist. Ich habe versucht das Bild in den Container zu verschieben und dann versucht es mit den Display Typen flex und grid zu positionieren. Leider wird entweder das Bild an eine falsche stelle verschoben oder meine Links werden falsch positioniert (Siehe Bild 2). Hat jemand eventuell eine Lösung wie ich das mache ohne das Bild in den Container zu verschieben oder das Bild obwohl es in dem Container ist statisch zu positionieren, ohne dass es von den Positionen der Links beeinflusst wird.

...zur Frage

Wie findet ihr meine Website über gesunde Ernährung?

Ich will verschiedene Dinge ausprobieren, unteranderem eine eigene Website erstellen. Es geht in der Website darum, sich gesünder ernähren. Die Webseite bietet verschiedene Rezepte, erklärt verschiedenen Ernährungsformen und gibt einem Tipps für die Ernährungsumstellung.

Ich würde mich über Tipps von euch freuen, was ihr schlecht findet oder euch nervt. Vor allem das Handy Format gefällt mir nicht so richtig.
Die Domain wird natürlich geändert, wenn die Webseite fertig ist, dann verschwindet auch die Werbung vom Website Baukasten (Wix).

Die Webseite ist noch nicht ganz fertig, ich würde mich trotzdem aber schon mal über Feedback freuen.

https://snoahei.wixsite.com/thehealthyme

...zur Frage

Html/Css Navigationleiste weiter nach links verschieben

Moin :-);

folgendes Problem: Ich habe eine Navigationsleiste erstellt und diese in den Header gepackt. Nun will ich diese mit Hilfe des Befehls float: left, nach lins an den Rand drücken, doch dort bleiben immer ca 20px Platz.. Nach rechts ist es kein Problem. Dort geht die Leiste bis zum Rand.

Ich muss dazu sagen, dass ich ein Neuling in diesem Gebiet bin und bitte daher es soweit wie es geht einfach "für dumme" zu erklären :D

Danke schon mal im Vorraus :-)

...zur Frage

Instagram- weißer Rand?

Findet Ihr Bilder schöner mit einem weißen Rand darum oder ohne diesen weißen Rand ?

...zur Frage

picsart weißen rand von einem bild?

also ich sehe immer bilder die links und rechts einen weißen rand haben. wie bekomme ich das hin??? mit picsart bestimmt aber wie???

dAnkeschön=)

p:s: ich meine NICHT ein bild wo ein weißer etwas urchsichtiger streifen in der mitte des bildes ist und da was drauf steht

...zur Frage

HTML Quill WYSIWYG, wie Designe ich es richtig?

Der Bereich zum editieren springt immer nach unten, schuld daran ist ein Skript teil, nämich

<script src="https://cdn.quilljs.com/1.0.0/quill.js"></script>
<script>
   var editor = new Quill('#editor', {
    modules: { toolbar: '#toolbar' },
    theme: 'snow'
   });
  </script>

-----------------------------------------------------------------------------

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
   <style>
    body{
      margin: 0cm;
      padding: 0cm;
      font-size: 16px;
    }
    p {
      font-size: 16px;
    }
    header{
      margin: 0cm;
      padding: 0cm;
      width: 100%;
      position: relative;
      background-color: palevioletred;
    }
    footer{
      margin: 0cm;
      padding: 0cm;
      width: 100%;
      background-color: palevioletred;
    }
    #sidebar{
      margin: 0cm;
      padding: 0cm;
      float: left;
      min-height:100vh ;
      overflow-x: hidden;
      width: 150px;
      background-color: aliceblue;
      overflow-y: scroll;
      -ms-overflow-style: none; 
      scrollbar-width: none; /* Firefox */
    }
    #sidebar::-webkit-scrollbar {
      display: none;
    }
    #rechts{
      margin: 0cm;
      padding: 0cm;
      width: 100%;
       
      min-height: 100vh;
      background-color: azure;
    }
  </style>
  <link href="https://cdn.quilljs.com/1.0.0/quill.snow.css" rel="stylesheet">
</head>
<body>
  <header>a</header>
  <div id="sidebar">
    <p>Bereich1</p>
    <p>Bereich2</p>
    <p>Bereich3</p>
    <p>Bereich4</p>
    <p>Bereich5</p>
    <p>Bereich6</p>
    <p>Bereich7</p>
    <p>Bereich8</p>
    <p>Bereich9</p>
  </div>
   
<div id="rechts">
  <div id="toolbar">
  <button class="ql-bold">Bold</button>
  <button class="ql-italic">Italic</button>
    </div>
   <div id="editor">
    <p>Hello World!</p>
  </div>
</div>
   
  <script src="https://cdn.quilljs.com/1.0.0/quill.js"></script>
  <script>
   var editor = new Quill('#editor', {
    modules: { toolbar: '#toolbar' },
    theme: 'snow'
   });
  </script>
  <footer>a</footer>
</body>
</html>

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen