Position relativ füllt nicht bis zum rand

coldstone28

Mitglied
Hallo,

wenn ich mein div container mit position:relative positioniere habe ich immer einen kleinen aussenabstand. Wie einen rahmen.
Ist das immer so, bei "relative" oder muss man da noch was angeben??
so als wenn ich margin-left:5px; angeben würde.
 

basti1012

Erfahrenes Mitglied
ne das ist eigentlich nicht so. Kannst du mal einen Link geben oder deinen Code ? Ich denke mal das du da irgendwo einen padding hast oder sonst was, aber das kann man erst genau sagen wenn man das sehen tut
 

coldstone28

Mitglied
Hier meine html:

HTML:
<!DOCTYPE html>
<html>
      <head>
         <title>Schwarzmeerregion</title>
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
         <link rel="stylesheet" type="text/css"  href="css/style.css" />
      </head>
      
      <body>
          <header>
          <div id="logo"></div>
          </header>
          
          <div id="content">
              content
          </div>
          
          <footer>
          </footer>
    </body>
</html>

und hier die CSS dazu:

CSS:
body {
font-family: 'Poppins', sans-serif;
background: url(../images/background.png) no-repeat;
}
/*head_bereich*/
header {
    background-color: #000000;
    position: relative;
    top: -5;
    left: 0;
    right: 0;
    width: 100%;
    height: 100px;
}
#logo {
    position: relative;
    background:url(../images/head.png) center no-repeat;
    height: 100px;
}
/*content_bereich*/
#content {
    position: relative;
    background-color: aqua;
    opacity: 0.5;
    top: 0;
    left:0px;
    width: 100%;
    height: 800px;
}

/* media queries mobile*/
@media only screen and (max-width:480px) {
    header {
        
    }
}   

/* media queries tablet*/
@media only screen and (min-width:481px) and (max-width:800px) {
    header {
        
    }
}

/* media queries HD*/
@media only screen and (min-width:801px) and (max-width:1280px) {
    header {
        
    }
}

Habe mal einen screenshot der seite angehängt, damit man es besser sehen kann.
 

Anhänge

  • site.jpg
    site.jpg
    416,6 KB · Aufrufe: 4

basti1012

Erfahrenes Mitglied
gebe mal in deiner Css ganz oben das mit ein
Code:
*{
  margin:0;
  padding:0;
}

Ich weiß ja nicht was du da genau vor hast ,doch deine ganze positions angaben brauch man eigentlich nicht.Das kann man auch anders regeln. Deine positions angaben könnten dir später noch probleme machen.
 

coldstone28

Mitglied
gebe mal in deiner Css ganz oben das mit ein
Code:
*{
  margin:0;
  padding:0;
}

Ich weiß ja nicht was du da genau vor hast ,doch deine ganze positions angaben brauch man eigentlich nicht.Das kann man auch anders regeln. Deine positions angaben könnten dir später noch probleme machen.

Super, das wars.
Hatte margin und padding direkt in meinem header tag drinne. Das war der Fehler.
Wollte das die container sich alle an das Elternelement richten. Und ohne position angabe hat es auch geklappt.

Vielen dank