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

3 Div Boxen in der Mitte Problem

R

requires02

Neues Mitglied
Hey Com,

Ich habe 3 Div Boxen nebeneinander doch sie sind nicht in der Mitte positioniert. Bzw. wenn ich es mit einem Code mache wie margin:0 auto or text-align:center hat es keine Wirkung. Das zweite , die Boxen überschreiten die "Main" Box siehe Bild. Woran liegen die Probleme?

HTML-CODE:
Code: 
<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<meta lang="de">
<title> Index </title>
<link rel="stylesheet" href="test.css" type="text/css">

</head>

<body>

<div id="header">

        <ul class="navi">
        <a class="title">Test</a>
        <li><a href="#" class="active">Home</a></li>
        <li><a href="#">Contact Us</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Project</a></li>
        <li><a href="#">Forum</a></li>
        </ul>

 
</div>

<div id="main">

    <ul class="part">

    <div class="box">
    <p>HLorem 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.</p>
    </div>
 
    <div class="box2">
    <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.</p>
    </div>
 
    <div class="box3">
    <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.</p>
    </div>
 
    </ul>
 
</div>


</body>

</html>

CSS CODE:
Code: 
body {
margin:0px;
padding:0px;
background-color:#eee;
font-size:100%;
}

#header {
margin:0px;
padding:0px;
width:auto;
height:auto;
background-color:#fff;
text-align:right;
}

ul {
padding:1.5em;
margin:0;
}

.navi a {
font-family:helvetica;
color:#333;
font-weight:100;
text-decoration:none;
}

.navi li {
list-style:none;
display:inline;
}

.navi a , li {
padding:5px;
}

.navi a:hover {
color:black;
}

.navi a.title {
float:left;
color:#333;
margin:0;
padding:0;
font-weight:bold;
}

#main {
margin:0 auto;
padding:0;
width:auto;
height:auto;
text-align:center;
background-color:#222;
}

.part {
width:auto;
height:auto;
padding:5em;
background-color:#777;
margin:0 auto;
}

.box {
padding:0;
margin:0 auto;
width:auto;
height:auto;
background-color:#555;
float:left;
}

.box2 {
padding:0;
margin:0 auto;
width:auto;
height:auto;
background-color:#666;
float:left;
}

.box3 {
padding:0;
margin:0 auto;
width:auto;
height:auto;
background-color:#555;
float:left;
}

Screen des überschreiten der Boxen: Im oberen Hintergrund sieht man eine Graue Box das ist die Main box:
http://prntscr.com/70106j



Keine Funktion in der Mitte:
http://prntscr.com/7010l1
 
Hallo, vielleicht kann das helfen?!
Vorschläge für mehrspaltigen Code.

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Columns</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta name="designer" content="Juergen Koller - http://www.easy-tuts.com" />
<meta name="licence" content="Free to use" />

<!-- include css style -->
<link rel="stylesheet" type="text/css" media="screen" href="css/style.css" />

</head>

<body>

<div id="wrapper">

    <h1 style="text-align:center;">Spalten (cols) für den Inhalt</h1>
    <p style="text-align:center;"><i>Die folgenden Spalten haben eine <u>prozentuelle Breite</u> und passen sich somit jeder Seitenbreite automatisch an.</i></p>

    <hr />

    <div class="et-cols">
        <div class="et-cols2">
            <strong>2 cols</strong>
            <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.</p>
        </div>
        <div class="et-cols2">
            <strong>2 cols</strong>
            <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.</p>
        </div>
    </div>

    <hr />

    <div class="et-cols">
        <div class="et-cols3">
            <strong>3 cols</strong>
            <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.</p>
        </div>
        <div class="et-cols3">
            <strong>3 cols</strong>
            <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.</p>
        </div>
        <div class="et-cols3">
            <strong>3 cols</strong>
            <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.</p>
        </div>
    </div>

    <hr />

    <div class="et-cols">
        <div class="et-cols4">
            <strong>4 cols</strong>
            <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.</p>
        </div>
        <div class="et-cols4">
            <strong>4 cols</strong>
            <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.</p>
        </div>
        <div class="et-cols4">
            <strong>4 cols</strong>
            <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.</p>
        </div>
        <div class="et-cols4">
            <strong>4 cols</strong>
            <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.</p>
        </div>
    </div>

    <hr />

    <div class="et-cols">
        <div class="et-cols5">
            <strong>5 cols</strong>
            <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.</p>
        </div>
        <div class="et-cols5">
            <strong>5 cols</strong>
            <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.</p>
        </div>
        <div class="et-cols5">
            <strong>5 cols</strong>
            <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.</p>
        </div>
        <div class="et-cols5">
            <strong>5 cols</strong>
            <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.</p>
        </div>
        <div class="et-cols5">
            <strong>5 cols</strong>
            <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.</p>
        </div>
    </div>

    <hr />

    <div class="et-cols">
        <div class="et-cols6">
            <strong>6 cols</strong>
            <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.</p>
        </div>
        <div class="et-cols6">
            <strong>6 cols</strong>
            <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.</p>
        </div>
        <div class="et-cols6">
            <strong>6 cols</strong>
            <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.</p>
        </div>
        <div class="et-cols6">
            <strong>6 cols</strong>
            <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.</p>
        </div>
        <div class="et-cols6">
            <strong>6 cols</strong>
            <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.</p>
        </div>
        <div class="et-cols6">
            <strong>6 cols</strong>
            <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.</p>
        </div>
    </div>


</div>



</body>
</html>
Code: 
/* Designed by LernVid.com - Licenced under Creative Commons 3.0 Licence */

html {height:100%;}
body {margin:0;    padding:0;}
#wrapper {width:50%; padding:0 30px; background:#fafafa; margin:0 auto; overflow:hidden; border: 1px solid #ccc;}


/* columns for content start */
.et-cols {
    overflow:hidden;
    width:auto;
    display:inline-block;
    margin:10px 0;
}
.et-cols2 {
    float:left;
    width: 48%;   
    padding:0 1%;
}
.et-cols3 {
    float:left;
    width: 31.33%;   
    padding:0 1%;
}
.et-cols4 {
    float:left;
    width: 23%;   
    padding:0 1%;
}
.et-cols5 {
    float:left;
    width: 18%;   
    padding:0 1%;
}
.et-cols6 {
    float:left;
    width: 14.66%;   
    padding:0 1%;
}
.et-cols p {
    margin:7px 0;
}
/* columns for content end */
 
Hallo

möchte ich es lernen bzw. verstehen wie es geht
Zum Vergrößern anklicken....

Dazu mal ein paar Erklärungen:

1. Zunächst sollte der HTML-Quelltext sauber erstellt werden. Direkt innerhalb von ul-Elementen dürfen nur li-Elemente folgen, also weder das a-Element noch div-Elemente.

2. div-Elemente sind Block-Elemente. Block-Elemente nehmen in der Breite immer den ihnen zur Verfügung stehenden Platz ein. Wenn die nebeneinander dargestellt werden sollen müssen sie also in ihrer Breite begrenzt werden.

3. Wenn man CSS-Anweisungen benutzt sollte man sich auch über deren Folgen (häufig halt mehrere) informieren. Neben den eigentlich gewünschten Auswirkungen bekommt man sonst immer mal wieder ein paar unerwartete mit serviert. Die unerwarteten Auswirkungen sind aber keine Fehler sondern im HTML- und CSS-Standard festgelegt.

Beim Floaten werden die betroffenen Elemente "aus dem Fluß" genommen, wie es so schön heißt. Eine Folge davon ist, das sie nicht mehr in den sie umgebenden Elementen stehen, wenn nicht korrekt "gecleart" wird. Nebenbei schrumpfen sie in der Breite so weit zusammen wie das breiteste sich in ihnen befindende Element.

Um das zu verhindern muss an einer sinnvollen Stelle ein "clear" vergeben werden. Häufig wird dies in Form eines sogenannten "clearfix" gemacht. Das "clearfix" ist kein offizieller eindeutiger Begriff, sondern eine Umschreibung für viele ähnliche Anwendungen des clear.

Siehe zum Beispiel

http://jendryschik.de/wsdev/einfuehrung/eigenschaften/ausrichtung-und-elementfluss

unter "Regeln für floatierte Boxen" ziemlich in der Mitte.

Nachtrag, da es mir heute morgen etwas zu spät wurde:

4. Mit HTML5 ist das sogenannte "Flexbox-Modell" zum Layouten neu hinzugekommen.

Genau wie Tabellen ist Float nie zum Layouten ganzer Webseiten gedacht gewesen. Im Gegensatz zu Tabellen hat Float nur ein paar Vorteile, z. B. kein Eingriff in die Semantik, flexiblere Anordnungsmöglichkeiten. Dem sind sich viele gestandene Webseitenersteller überhaupt nicht bewußt.

Aktuelle, zukunftsträchtige Seiten sollten deshalb mit dem Flexbox-Modell erstellt werden. Damit läßt sich zudem ein Responsive Design besser als mit Float erstellen. Da es speziell zum Layouten entwickelt wurde hat es zum Beispiel auch viele Nachteile vom Float nicht. Zum Beispiel die meist unerwünschte Vererbung, die mit dem Clear abgebrochen werden muss oder die Herausnahme aus dem Fluss oder ...

Ich habe als Beispiel mal eine Seite mit dreispaltigem Layout mit aktuellem HTML5 und CSS3 erstellt. Da du uns keinen Inhalt übermittelt hast konnte ich auf die Semantik keine Rücksicht nehmen:

Code: 
<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="utf-8"><!-- Schließende Slashes sind unter HTML5 nicht erforderlich, aber erlaubt -->
  <title>Drei-Spalten-Layout</title>
  <meta name="description" content="HTML5, CSS3">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
  /* Neue HTML5-Elemente für ältere Browser als Block-Elemente übergeben */
  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%;
  }
  body {
  padding: 0;
  }
  nav {
  padding: 0;
  border: 2px solid red;
  border-radius: 0.5rem;
  margin: 1rem 1%;
  }
  ul {
  margin-left: 0;
  padding: 0;
  margin: 0.3rem;
  }
  li {
  list-style-type: none;
  margin: 0 0.2rem;
  }
  a {
  text-decoration: none;
  color: black;
  padding: 0 1rem;
  border: 2px solid blue;
  border-radius: 0.5rem;
  display: block;
  }
  main {
  padding: 0.5rem 5%;
  border: 2px solid blue;
  border-radius: 0.5rem;
  margin: 1rem 1%;
  }
  main>:nth-child(1n+1) {
  padding: 1rem;
  border: 2px solid silver;
  border-radius: 0.5rem;
  margin: 1rem 0 1rem 1%;
  }
  main>:last-child {
  margin-right: 1%;
  }
  /*Flexbox*/
  nav {
  display: flex;
  justify-content: space-between;
  }
  ul {
  display: flex;
  justify-content: flex-end;
  flex: auto;
  }
  ul:first-child {
  justify-content: flex-start;
  }
  nav>ul:nth-child(1) li:first-child {
  margin-left: 0;
  }
  nav>ul:nth-child(2) li:last-child {
  margin-right: 0;
  }
  main {
  display: flex;
  }

  </style>
</head>
<body>

  <nav>
  <ul>
  <li><a href="#">Test</a></li>
  </ul>
  <ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">Contact Us</a></li>
  <li><a href="#">About Us</a></li>
  <li><a href="#">Project</a></li>
  <li><a href="#">Forum</a></li>
  </ul>
  </nav>
  <main>
  <aside>
  <p>Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular.</p>
  <p>Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar custosi traductores.</p>
  <p>At solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles. Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues.</p>
  </aside>
  <article>
  <p>Er hörte leise Schritte hinter sich. Das bedeutete nichts Gutes. Wer würde ihm schon folgen, spät in der Nacht und dazu noch in dieser engen Gasse mitten im übel beleumundeten Hafenviertel?</p>
  <p>Gerade jetzt, wo er das Ding seines Lebens gedreht hatte und mit der Beute verschwinden wollte!</p>
  <p>Hatte einer seiner zahllosen Kollegen dieselbe Idee gehabt, ihn beobachtet und abgewartet, um ihn nun um die Früchte seiner Arbeit zu erleichtern?</p>
  <p>Oder gehörten die Schritte hinter ihm zu einem der unzähligen Gesetzeshüter dieser Stadt, und die stählerne Acht um seine Handgelenke würde gleich zuschnappen? Er konnte die Aufforderung stehen zu bleiben schon hören.</p>
  <p>Gehetzt sah er sich um. Plötzlich erblickte er den schmalen Durchgang. Blitzartig drehte er sich nach rechts und verschwand zwischen den beiden Gebäuden. Beinahe wäre er dabei über den umgestürzten Mülleimer gefallen, der mitten im Weg lag.</p>
  </article>
  <section>
  <p>Es gibt im Moment in diese Mannschaft, oh, einige Spieler vergessen ihnen Profi was sie sind. Ich lese nicht sehr viele Zeitungen, aber ich habe gehört viele Situationen.</p>
  <p>Erstens: wir haben nicht offensiv gespielt. Es gibt keine deutsche Mannschaft spielt offensiv und die Name offensiv wie Bayern. Letzte Spiel hatten wir in Platz drei Spitzen: Elber, Jancka und dann Zickler.</p>
  <p>Wir müssen nicht vergessen Zickler.</p>
  </section>
  </main>

</body>
</html>

Gruss

MrMurphy
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben