Frage horizontales <div> zentriert nicht

ersxn · 8 Mai 2016

Hallo Leute!

Ich bin neu in diesem Forum und möchte Vorweg sagen, dass mir schon einige Fehler beim Programmieren meiner Webseite untergelaufen sind, aber durch die Tipps in dem Forum locker gelöst wurden. Dafür dickes Lob!

Leider stehe ich jetzt vor einem Problem, zudem ich hier in dem Forum keine Lösung finde :(
Auch die Suchfunktion hat mir ein ähnliches Problem (https://www.html.de/threads/mehrere-boxen-bei-html-zentrieren-wie-vorgehen.41068/) angeboten. Habe natürlich unzählige Varianten aus dem Thema probiert, aber vergebens.

Nun, um mein Problem deutlich darzustellen, hier erstmal der Code von meiner html:

HTML:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"  />
        <title>Beispieltext1</title>
        <meta name="description" content="Beispiel" />
        <link href="style.css" type="text/css" rel="stylesheet" />

        <a href="index.html">Zurück zum Hauptverzeichnis</a>
    </head>
    <body>

        <hr style="margin: 30px"/>
     
<div id="cont">

<div class="boxEins">
            <p class="uberschriften">Aufgaben</p>

            <p class="profiltext">Wir haben hier neue Profile. Hier möchten wir euch unser Grundgedanken näher bringen und euch in die verführerische Welt des Kaffees zeigen.Wir haben hier neue Profile.Wir haben hier neue Profile. Hier möchten wir euch unser Grundgedanken näher bringen und euch in die verführerische Welt des Kaffees zeigen.Wir haben hier neue Profile.</p>
            </div>
     

<div class="boxZwei">
            <p class="uberschriften">Profil</p>

            <p class="profiltext">Wir haben hier neue Profile. Hier möchten wir euch unser Grundgedanken näher bringen und euch in die verführerische Welt des Kaffees zeigen.Wir haben hier neue Profile.Wir haben hier neue Profile. Hier möchten wir euch unser Grundgedanken näher bringen und euch in die verführerische Welt des Kaffees zeigen.Wir haben hier neue Profile.</p>
            </div>
 
 
<div class="boxDrei">
            <p class="uberschriften">Bereiche</p>

            <p class="profiltext">Wir haben hier neue Profile. Hier möchten wir euch unser Grundgedanken näher bringen und euch in die verführerische Welt des Kaffees zeigen.Wir haben hier neue Profile.Wir haben hier neue Profile. Hier möchten wir euch unser Grundgedanken näher bringen und euch in die verführerische Welt des Kaffees zeigen.Wir haben hier neue Profile.</p>
            </div>


    <div class="clear"></div>

  </div>
 
    </body>
</html>

Und hier der gesamte CSS-Code:

HTML:

body {  text-align: center;
        font-family: 'Multicolore', Arial, serif;
        font-size: 25px;
        margin: 0px auto;
        padding: 0px auto;
        vertical-align: middle;   }

* {
  margin: 0 auto;
  padding: 0 auto;
}


h1 {    background: #E67E22;
        padding-right: 0px;
        padding-top: 20px;
        padding-left: 0px;
        padding-bottom: 0px;
        margin: 0;
        text-align: center;   }


h2 {    text-align: center;
        font-size: 50px;
        margin-top: 15px;   }


.profiltext {   font-size: 20px;
                font-family: 'Slate Pro', fantasy;
                font-weight: 100;
                padding-left: 5px;
                padding-right: 5px;
                text-align: justify;
                margin-left: 30px;
                margin-right: 30px;
                margin-top: 5px;  }


#fusszeile {    clear: both;
                font-size: 13px;
                margin: 0px auto;
                text-align: left;
                line-height: 130%;
                color: black;
                font-family: 'Slate Pro', fantasy;
                font-weight: 100    }

.bereiche {     font-family: 'Slate Pro', fantasy;
                font-weight: 500;
                font-size: 18px;
                margin: 0px auto;}
.uberschriften {text-align: center;
                align-items: center;
}

/* Links */
a {
    text-decoration:none;
}
a:link,
a:visited {
    color:black;
}
a:hover,
a:active {
    color:#666;
    text-decoration: underline;
}

/* Spalten */
.row {
  width:auto;
}

.row:before,
.row:after {
  content: " ";
  display: table;
}

.row:after {
  clear: both;
}
.columns {
  float:left;
}

/* Small */
@media screen and (max-width:600px) {
  .small-1 {width: 100%;}
}

/* Medium */
@media screen and (min-width:600px) and (max-width:1000px) {
  .medium-1 {width:50%;}
  .medium-2 {width:100%;}
}

/* Large */
@media screen and (min-width:1000px) {
  .large-1 {width:33.333333%;}
  .large-2 {width:66.666666%;}
  .large-3 {width:100%;}
}


// das hier drüber will ich, durch das was folgt, ersetzen



div#cont {
 
}

div#cont > div{
    float: left;
    font-family: 'Slate Pro', fantasy;
    position: absolute;
margin: 0px auto;
}

div.boxEins {
  width: 300px;
  height: 500px;
  background-color: white;
}

div.boxZwei {
  width: 300px;
  height: 500px;
  background-color: white;
}

div.boxDrei {
  width: 300px;
  height: 500px;
  background-color: white;
}

div.boxVier {
  width: 200px;
  height: 200px;
  background-color: white;
}

div.boxFive {
  width: 200px;
  height: 200px;
  background-color: white;
}

div.boxSechs {
  width: 200px;
  height: 200px;
  background-color: white;
}

div.clear {
  clear: both;
}

Ich möchte, dass es am Ende so aussieht, also zentriert:

Diese Stelle soll auch zentrieren, wenn ich eine weitere box mit dazu nehme, so dass die boxen sich auch automatischen anpassen, aber nur wenn es mit ihren Größen passt.

Ich habe als Lösungsansatz mal das mit dem margin= 0px auto; probiert, aber er möchte nie :(

Könnt ihr mir bitte helfen?

djheke · 8 Mai 2016

Code:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style >
body { width:80%; margin:0 auto;}
section { padding:10px 0; }
article {  background:#eee; padding:20px; margin-right:10px;}
article:last-child { margin-right:0;}
.col-33 { width:33%;}
.flex { display:flex;}
</style>
<title>flexbox</title>
</head>
<body>
<section class="flex">
   <article class="col-33">
   <h3>Info</h3>
   <p>
Diese Stelle soll
   </p>
   </article>

   <article class="col-33">
   <h3>Versand</h3>
   <p>
Diese Stelle soll auch zentrieren, wenn ich eine weitere box mit dazu nehme,
   </p>
   </article>

   <article class="col-33">
   <h3>Zahlung</h3>
   <p>
Diese Stelle soll auch zentrieren, wenn ich eine weitere box mit dazu nehme, so dass die boxen sich auch automatischen anpassen, aber nur wenn es mit ihren Größen passt.
   </p>
   </article>
</section>

</body>
</html>

ersxn · 8 Mai 2016

Meine Güte, was man alles so außer Acht lässt.

Vielen Dank!

hab es jetzt mit width 33% gelöst. Gibts wahrscheinlich bessere Lösungen, aber die reicht mir zurzeit.

edit: Problem: Jetzt ist die Seite nicht mehr responsive... beim verkleinern zieht sich der Text einfach über die ganze Webseite hindurch.

djheke · 10 Mai 2016

ersxn schrieb:
edit: Problem: Jetzt ist die Seite nicht mehr responsive... beim verkleinern zieht sich der Text einfach über die ganze Webseite hindurch.

Ist das eine Frage an uns? Wenn ja, dann wäre ein Link zur Seite hilfreich oder den gesamten Quelltext anfügen.

Frage horizontales <div> zentriert nicht

ersxn

Neues Mitglied

djheke

Aktives Mitglied

ersxn

Neues Mitglied

djheke

Aktives Mitglied

Neueste Beiträge