Positionierung von Elementen in einen Responsive Layout

shadownight · 26.04.2017

Hallo liebe Community!

Ich habe schon lange nichts mehr im Bereich Webdesign bzw Web-Programmierung gemacht und brauch deshalb mal eure Hilfe.
Derzeit versuche ich mich an responsive Webseiten, dazu habe ich mir mittels CSS jetzt ein Gridview mit 12 Spalten erstellt.

Nun möchte ich ein Element innerhalb einer Spalte, die eine breite von 50% hat, positionieren. Leider weiß ich nicht mit welchen CSS Eigenschaften ich das bewerkstelligen soll. Da wenn ich die Eigenschaft position: fixed oder relative benutze, dass Element außerhalb der Spalte gerät.

Also sollte ich dazu lieber padding oder margin verwenden?
Oder gibt es noch bessere Lösungen das zu bewerkstelligen?

Hier mal das Html-Dokument:

HTML:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="responsive.css">
<title>resposnive</title>
</head>

<body>

<div class="row">
    <div class="col-6">
        <div id="data">Tel: +49 (0) 123 4567865 &ensp; Mobil: +49 (0) 123 45678936</div>
    </div>
</div>

<div class="row">
    <div class="col-6">
        <div class="center-image">
            <img src="img/logo_neu.png" id="logo">
        </div>
    </div>
    <div class="col-6">
        <ul class="menu">
            <li>Home</li>
            <li>Coaching
                <ul class="submenu">
                   
                </ul>
            </li>
            <li>Über Mich</li>
            <li>Kontakt</li>
            <li>Flyer</li>
        </ul>
    </div>
</div>

</body>
</html>

Und das CSS-Dokument

Code:

@charset "utf-8";

*{
    box-sizing: border-box;
    margin: 0 auto;
}

#logo{
    max-width: 100%;
    height: auto;
    display: inline-block;
    vertical-align: middle;
}
.center-object{
}

.center-image{
    text-align: center;
    font: 0/0 a; 
}

.center-image:before {
    content: ' ';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

#data{

}

.menu{
    display: table;
    list-style: none;
    max-width:  100%;
    height: auto;
    vertical-align: middle;
}

.menu li{
    float: left;
    padding-left: 0.983em;
    max-width:  100%;
    height: auto;
}

.row:after{
    content: "";
    clear: both;
    display: table;
}

[class*="col-"]{
    float: left;
    padding: 15px;
}

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

Schon mal vielen Dank für die Hilfe im voraus!

Myhar · 26.04.2017

Du verwendest am besten gar kein position: für irgendwas. Du teilst mit deinen cols deine row so ein, dass die Elemente an der gewünschten Position erscheinen.
Natürlich kannst du auch innerhalb der cols floats, etc. verwenden, da gibt es keine Regeln. Kommt ja auch immer darauf an, was, wo und wie positioniert werden soll.

Edit:
Wieso display:table fürs Menü?
Warum werden die Spalten mit floats und nicht mit flexbox umgesetzt? Da könnte man mal ansetzen und optimieren bevor man sich Gedanken über weitere Inhalte macht.

shadownight · 26.04.2017

Erst mal danke für die Antwort hat mir auf jeden Fall geholfen.

dsplay:table war nur zum testen um das Menü zu zentrieren mittels "vertical-align: middle" was jedoch nicht zum gewünschten Ergebnis geführt hat.

Wie gesagt fange ich gerade an mich mit der Thematik auseinander zu setzen

. Könntest du mir den unterschied zwischen den Übersetzungsmöglichkeiten erklären?

Myhar · 26.04.2017

Was für Übersetzungsmöglichkeiten? Was willst du in welche Sprache übersetzen? Bin verwirrt?

shadownight · 26.04.2017

Oh sorry Schreibfehler

. Meinte eigentlich Umsetzungsmöglichkeiten.

Myhar · 26.04.2017

Mit floats kennst du dich anscheinend bereits aus (sonst hättest du dein Grid nicht erstellen können)
flexbox ist neu und dient dazu, dass sich Elemente entsprechend dem zur verfügend stehenden Platz anpassen.
Hat man also 2 col Elemente in einer row, so hat jedes 50%, hat man 3, so haben diese automatisch 33% Breite, etc. Bzw. man kann die aufteilung auch variabel gestalten (Col 1 immer 30%, col 2, etc dann den Rest, je nach Wunsch des Erstellers)
https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties

flexbox kann aber viel mehr, hier eine Übersicht über die möglichen Eigenschaften:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

shadownight · 27.04.2017

Entschuldige die späte Antwort.

Hab mich seit gestern ein bisschen in die Thematik rein gelesen.

Und jetzt nur noch mal zum Verständnis

:

Ich kann mein Grid zu einem genau so lassen wie es nur das ich es mittels Flexboxen realisiere. Sprich wie du schon gesagt hast das ich jeder spalte einer festen Größe zu weise.

Oder ich kann darauf verzichten und das mittels Flexbox automatisch aufteilen lassen.(Je nach Anforderung des Designs)

Das habe ich soweit richtig verstanden?

Vielen Danke noch mal hat mir bis jetzt auf jeden Fall viel geholfen

.

Gruß Shadownight

Myhar · 27.04.2017

Ganz kurze flexbox einführung:

Man nehme eine row mit cols
zum mitmachen einfach bei zb jsfiddle.net einfügen:

HTML:

<div class="row">
<div class="col">
asdf
</div>

<div class="col">
qwer
</div>
<div class="col">
yxcv
</div>

</div>

Basis-Styles damit man sieht, wie groß die boxen sind:

Code:

.row{
  border: 1px solid green;
  height: 30px;
}

.col{
  border: 2px solid blue;
}

Soweit so gut, jetzt kommt flexbox-magic:

Code:

.row{
  display:flex;
  align-items:stretch; /*hier sagt man: teile mir die items auf, so dass der Platz ausgenutzt wird.*/
  }

.col{
  flex-grow: 1; /*damit sagt man, jedes Element soll gleich viel Platz einnehmen.*/
}

Damit hat man die row gedrittelt. Mit floats ist das nicht ganz so einfach. Vor allem braucht es für flexbox kein clear oder so, alles was nach der row kommt ist automatisch in der nächsten Zeile.
Egal wie groß die Auflösung ist, die Breite passt sich immer an den Bildschirm an (das gedrittelte auch)
Möchte man das 2. Element nun doppelt so groß haben wie die anderen beiden, müsste man mit float die größen der einzelnen Elemente anpassen (das erste und letzte in der Größe reduzieren, das zweite vergrößern):

Mit flexbox funktioniert es so:

Code:

.col:nth-child(2){
  flex-grow: 2; /*sagt, dass das zweite Element doppelt so groß ist wie die restlichen*/
}

Das ist natürlich nur mal eine erste Grundlage für rows mir Flexbox, tiefergehend kann man sich damit schon tagelang beschäftigen bis man sämtliche "Tricks" raus hat.

Edit:
Ich habe hier komplett ohne %-Angaben gearbeitet, man kann natürlich auch %-Angaben vorgeben:
col{min-width: 50%} sagt, dass eine col mindestens 50% breite haben soll.
Damit die Zeilen dann in die neue rutscht, muss flex-wrap: wrap; bei der row eingefügt werden.
(dann rutscht jede col in eine Zeile, weil ja col-2 doppelt so breit sein soll == 100%. ) <-- es ist also nicht immer alles super-einfach, man muss leider immer noch mitdenken

Myhar · 28.04.2017

Und weil es irgendwie dazu passt: Ein einfaches flexbox-grid system
Bootstrap 4 arbeitet auch nur noch mit flexbox