• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Div anordnung funktioniert nicht

F

FcG-clan

Neues Mitglied
hallo ich habe ien kleines problem und wusst nicht wie ich genau danach suchen soll hoffe ihr könnt mir helfen.

ich habe ne css erstellt und diese mit diesem befehl eingebunden

<link href="_style.css" rel="stylesheet" type="text/css" />

die css sieht folgendermaßen aus ( die farben sind nur zur orientierung )

body {
width: 100%;
height: 100%;
background-color: #000000;
font-family: "Arial";
font-size: 12px;
color: #ffffff;
margin: 0px;
}

#info {
background-color: #ff0000;
width: 20%;
height: 10%;
margin-top: 0%;
margin-left: 0%;
z-index: 1;
position: absolute;

}

#banner {
background-color: #0066cc;
width: 80%;
height: 10%;
margin-top: 0%;
margin-left: 20%;
z-index: 1;
position: absolute;

}

#tasten {
background-color: #003300;
width: 20%;
height: 90%;
margin-top: 10%;
margin-left: 0%;
z-index: 1;
position: absolute;

}

#anzeige {
background-color: #000999;
width: 80%;
height: 90%;
margin-top: 10%;
margin-left: 20%;
z-index: 1;
position: absolute;

}


mein html teil dazu sieht so aus

<body>
<div id="info">test</div>
<div id="banner">test</div>
<div id="tasten">test</div>
<div id="anzeige">test</div>
</body>

warum bekomme ich zwischen den beiden boxen oben und den beiden unten einen schwarzen balken der fast 8-10 % ausmacht
ich bin am verzweifeln
 
Hallo,

"position: absolute" für so ein Layout ungeeignet. Wenn du das benutzt müssen die Abstände und Größen natürlich dazu passen, was bei dir leider nicht der Fall ist.

Das sind typische Anfängerfehler, wenn versucht wird, ein Tabellenlayout mit anderen Mitteln nachzubauen. Das hat mit aktuellem HTML / CSS nichts zu tun.

Auch das "width: 100%" und "height: 100%" des body-Elements wird dir noch um die Ohren fliegen, wenn du die Seite erst mal mit Inhalt füllst und / oder mit anderen Fenstergrößen betrachtest.

Insgesamt solltest du dich mehr mit den Grundlagen vom aktuellem HTML / CSS beschäftigen.

Gruss

MrMurphy
 
die beiden 100% werte hate ich nur zum test drin habe ich vergessen wieder raus zu nehmen.

das die angaben nicht stimmen merke ich ja weil es nicht passt. was soll ich denn machen damit ich auf 100% flächendeckung komme?

warum sollte position: absolute nicht für diesen fall zutreffen ich will doch das es genau an dieser stelle ist und nciht abhängig ist von anderen boxen wie z.b. bei float
 
Hallo,

wie soll die Seite denn auf Smartphones und Tablets, auch hochkant, angezeigt werden? Dann wird der zukünftige Inhalt ja wahrscheinlich nicht mehr ins Fenster passen.

Alte, aber aktuelle und bewährte Regel: Bei Webseiten sollte die Höhe der einzelnen Container immer von deren Inhalt abhängen, nicht von der Fensterhöhe.

Von daher ist der Wunsch, ein Fenster komplett auszufüllen, in der Regel unsinnig.

Erstellen kannst du so ein Layout am besten klassisch mit float.

Der HTML-Code

Code: 
<body>
   <main role="main">
      <div>
         <p>div 1</p>
      </div>
      <div>
         <p>div 2</p>
      </div>
      <div>
         <p>div 3</p>
      </div>
      <div>
         <p>div 4</p>
      </div>
   </main>
</body>

und das zugehörige CSS

Code: 
header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
  display: block;
}
* {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html {
  font-size: 100%;  /* Die Einheit rem greift auf die Angabe in html zurück, nicht auf body */
  line-height: 1.3;  /* line-height wird ohne Einheit angegeben */
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
body {
  width: 100%;
  color: black;
  background-color: white;
  padding: 0;
  margin: 0;
}
main:before,
main:after {
   content: "";
   display: table;
}
main:after {
   clear: both;
}
html {
   height: 100%;
   border: 3px solid green;
}
body {
   height: 100%;
   border: 3px solid red;
}
main {
   height: 100%;
   border: 3px solid orange;
}
div:nth-child(1),
div:nth-child(2) {
   width: 50%;
   height: 20%;
   border: 3px solid blue;
   float: left;
}
div:nth-child(3),
div:nth-child(4) {
   width: 50%;
   height: 80%;
   border: 3px solid blue;
   float: left;
}

Die height-Angaben der div-Container (im Beispiel 20% und 80%) kannst du natürlich noch anpassen, hauptsache sie ergeben zusammen 100%.

Gruss

MrMurphy
 
Zuletzt bearbeitet:
hey das hilft mir ein ganzes stück weiter,
habs mal eben verbaut und betrachtet,

vielen dank für deine mühe
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben