Unerkärlicher weißer rand

Stef

Hey,

habe heute mal zum test eine kleine HTML-Seite erstellt mit CSS3. Nun mein Problem:

rechts des ganzen bildes uns der texte ist ein weißer rand (https://jsfiddle.net/fsetm9ko/). Warum ist der da ?

Und was mir in der bearbeitung an Problemen bereitet hat war, dass trotz hinzufügen von 0 margin und 0padding , dass der header, footer und navigation abstand von oben & unten hatten versteh ich nicht. Villt weiß hier jemand warum?

Habe dies zwar mit display:table behoben aber ob das die richtige vorgehensweise ist ?

Anbei meine Dateien:

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Landpage</title>

    <link rel="stylesheet" href="index.css">
</head>
<body>

        <header id="page_intro">
            <nav id="navigation">
                <ul>

                    <li><a href="#" class="aktiviert">Home</a></li>
                    <li><a href="#">Bilder</a></li>
                    <li><a href="#">Bücher</a></li>
                    <li><a href="#">Kontakt</a></li>
                </ul>
            </nav>
                <article id="titel">
                    <h1>Landpage</h1>
                    <a id="erfahre_mehr" href="#">Mehr erfahren...</a> 
                </article>
        </header>

        <section>
            <article class="text">
                <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.   


Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.   


Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.   


Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.   


Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.   


At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur


                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.   


Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.   


Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.   


Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.   


Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.   


At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur


                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.   


Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.   


Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.   


Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.   


Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.   


At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur


                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.   


Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.   


Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.   


Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.   


Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.   


At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
                </p>
            </article>
        </section>



    <footer>
        <ul id="footer_list">
            <li><a href="#">Impressum</a></li>
            <li><a href="#">Haftung</a></li>
            <li><a href="#">Neue Bücher</a></li>
        </ul>
    </footer>


</body>
</html>

Alles anzeigen

Code

html, body{
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;

}


/* Bild */
header#page_intro{
    width: 100%;
    height: 100%;
    margin: auto;
    background: url(https://static.pexels.com/photos/115045/pexels-photo-115045.jpeg) no-repeat 50% 50% ;
    background-size: cover;
    display: table;
    top: 0;
}


/* Navigation */


nav#navigation{
    //background-color: aqua;


    width: 100%;
    text-align: center;

}


ul{
    display: block;
    width: 100%;
    height: 100%;

}


li{
    display: inline-block;
    padding: 10px 20px;
}


a{
    text-decoration: none;
    font-size: 16pt;
    color: black;
    font-weight: 600;
    padding: 10px;

    transition: all 0.5s;
}


a:hover{
    color: blue;
    border-bottom: 4px solid orange;
}


a.aktiviert{
    border-bottom: 4px solid orange;
    color: blue;
}


/* Titel + Button (Mehr erfahren)*/


article#titel{
    margin: 15% 0%;
    vertical-align: middle;
    text-align: center;
}


h1{
    font-size: 340%;;
    color: #FFF;
}


a#erfahre_mehr{

    color: black;
    border: 2px solid black;
    border-radius: 15%;
    font-weight: 900;
    transition: all 1.5s;
}


a#erfahre_mehr:hover{
    border: 2px solid orange;
    color: blue;
    background-color: rgba(50, 41, 140, 0.1);
}


article.text{
    margin: 2%;
}


.text p{
    line-height: 200%;
    font-size: 14pt;
}


footer{
    width: 100%;
    display: table;
    text-align: center;
    background-color: black;
}


ul#footer_list{
    width: 100%;    
}


#footer_list a{
    color: white;
    display: block;
}


#footer_list a:hover{
    color: aqua;
    border-bottom: 2px dotted green;
}

Alles anzeigen

Gruß Stef

EDIT:

habe die width von der nav von 100% auf 95% geändert. Nun ist der weiße rand weg, aber warum is das so ? Die normale seite hat doch ne width von 100%.

Wenn man aber den Bildschirm jetzt verkleinert kommt wieder der weiße abstand neben.

MrMurphy

Hallo

Du baust dir zunächst im header und im footer mit "display: table;" Probleme und versuchst die dann mit ungeeigneten Mitteln zu reparieren.

"display: table;" ist nicht für Layouts, wie du sie offensichtlich erreichen willst, gedacht.

Zudem solltest du dein CSS aufräumen und nur behalten, was auch erforderlich ist.

Auch die unsinnige und überflüssige Verwendung von width- und insbesondere height-Angaben führt nur zu zusätzichen Problemen. Also weglassen und nur dort verwenden, wo die erforderlich sind. height-Angaben sind fast immer überflüssig.

Verwende für das Layout grundsätzlich Flexbox, das ist schließlich extra dafür entwickelt worden.

Gruss

MrMurphy

Stef

Hey,

so viele fehler. Wow. Ich habe mein css nochmal teilsweise neu geschrieben. Jetzt funktioniert die seite bisher so wie ich es haben will. Dies auch ohne flexbox. Aber ich denk wenn ich anstatt des textes unten so ein 2 spalten, bzw 3 spalten layout machen möchte brauch ich es. Werde ich mir mal anschauen und testen.

Kann man das aktuelle CSS stehen lassen so oder würdest du noch was ändern ?

Code

html, body{
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;

}








/* Bild */
header#page_intro{
    width: 100%;
    height: 100%;

    background: url(https://static.pexels.com/photos/115045/pexels-photo-115045.jpeg) no-repeat 100% ;
    background-size: cover;

}




/* Navigation */




#navigation{

    text-align: center;
    padding: 0.01%;
}




#navigation ul{
    list-style-type: none;
}




#navigation li{
    display: inline-block;
    margin-right:  5%;
}




#navigation a{
    color: black;
    font-size: 16pt;
    text-decoration: none;
    display: block;
    font-weight: 900;
    border-bottom: 4px solid gray;

    transition: all 0.5s;
}








#navigation a:hover{
    color: blue;
    border-bottom: 4px solid orange;
}




#navigation li a#aktiviert{
    color: blue;
    border-bottom: 4px solid orange;
}




/* Titel + Button (Mehr erfahren)*/




article#titel{
    text-align: center;
    margin-top: 12%;
}




#titel h1{
    font-size: 42pt;
}




#titel a#erfahre_mehr{
    text-decoration: none;
    color: white;
    font-size: 16pt;
    font-weight: 900;
    border: 2px solid green;
    padding: 0.4%;
    border-radius: 20%;
    transition: all 1.5s;
}




#titel a#erfahre_mehr:hover{
    border: 2px solid orange;
    color: blue;
    background-color: rgba(50, 41, 140, 0.1);
}








/*Text*/
article.text{
    margin: 2%;
}




.text p{
    line-height: 200%;
    font-size: 14pt;
}




/*footer*/




footer{
    text-align: center;
    background-color: black;
    padding: 0.01%;
}




footer ul#footer_list{
    list-style-type: none;
}




footer ul#footer_list li{
    display: inline-block;
    margin-right:  5%;
}




footer ul#footer_list a{
    color: white;
    text-decoration: none;
    font-size: 14pt;
}




footer ul#footer_list a:hover{
    color: aqua;
    border-bottom: 2px dotted green;
}




/*Menu button*/
 a.menubutton img{
    width: 13%;
    position: absolute;
    left:0;
    display: none;
}

Alles anzeigen

Gruß Stef

Stef

Bzw. wie würdest du es mit flexbox machen ?

djheke

Hier mal ein Float-Layout.

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Float-Layout</title>
<style>


* {
 margin:0;
 padding:0;
 text-decoration:none;
 list-style:none;
 box-sizing:border-box;
}


body {
 padding-top:180px;
}


main:before {
 content:"";
 display:block;
 background:url(bg.jpg) no-repeat 0 0 ;
 background-size:cover;
 width:100%;
 height:200px;
 overflow:hidden;
}


header {
 position:fixed;
 left: 0;
 top: 0;
 right:0;
 min-height: 180px;
 background-color: #fff;
}
 
 
#logo {
 width:144px;
 height:159px;
 padding:10px;
 float: left;
}
 
nav {
 text-align:center;
 padding-top:75px;
}
 
nav a {
 font-size: 1.5rem;
 padding:0 20px;
 color:#a33;
 text-shadow: 1px 1px 0px #E37588;
}
 
nav a:hover {
 text-shadow:1px  1px 0px #000;
 color: #7D7D7D;
}


 
main {
 text-align: center;
}
 
section {
 float:left;
 width:50%;
 padding:20px;
}
 
h1 {
 font-size: 60px;
 color: #5A5A5A;
 text-shadow: 1px  1px 0px #fff;
}
 
h3, p {
 padding:10px;
}
footer {
 clear:both;
 background-color: #f3f3f3;
 padding: 20px;
}
 
@media all and (max-width: 800px) {
  section { float:none; width:100%; }
  nav { padding-top:0;}
  nav a { display:block;}

}


</style>
</head>
<body>
<header>
<img id="logo" src="rblogo.png" alt="logo">
<nav>
<a href="#">Startseite</a>
<a href="#">Leistungen</a>
<a href="#">Entw&uuml;rfe</a>
<a href="#">Referenzen</a>
<a href="#">Kontakt</a>
<a href="#">Impressum</a>
</nav>
</header>
 
<main> 
<h1>Sie wollen eine neue Homepage?</h1>
<p>Wir sind für Sie da und setzen Ihr W&uuml;nsche gerne um!</p>
<section>
  <h3>Webdesign aus der Oberpfalz</h3>
  <p>Wir bieten Ihnen gut strukturierte, &uuml;bersichtliche und suchmaschinenfreundliche<br /> Webseiten an.
  Die Designs erstelle und gestalte ich individuell für jeden<br />einzelnen Auftrag.
  Somit ist die jede Seite  auf Ihren Auftraggeber zugeschnitten. <br />
  </p>
  <h3>Entw&uuml;rfe</h3>
  <p>
      Meine erstellten Designs sind keine Fertigvorlagen, sondern f&uuml;r jedes <br />
      meiner Projekte individuell erstellt worden. Sollten Sie schon ein Logo <br />
      haben, wird  dies natürlich bei der Farbauswahl des Designs  <br />
      mit ber&uuml;cksichtigt.
  </p>
</section>
 
<section>
     <h3>Design und Programmierung</h3>
     <p>
     Da ich gut mit einem Programmierer zusammenarbeite,<br  />
     sparen Sie sich den Weg daf&uuml;r und erhalten so <br />
     eine komplette designte und programmierte Website, <br />
     so gut wie aus einer Hand.
     </p>
</section>
</main>
 
<footer>
    <p>&copy; 2017 Rebecca Bauer</p>
</footer>
</body>
</html>

Alles anzeigen

- - - Aktualisiert - - -

Stef

Hi,

vielen Dank für die Mühe. Sieht auch recht gut aus

Tags