verschachtelte div's - margin-top, height

Aslan44

Hallo zusammen!

Ich habe 3 div's (oben, Mitte, unten). In der oberen div habe ich ein Suchfeld.
Wie kann ich das Suchfeld in Relation auf die obere div mit Prozenten nach unten und oben bewegen, sodass das Suchfeld auch in der oberen div bleibt?
(ich arbeite mit Bootstrap 3.3.7)

Das Suchfeld ist am roten Pfeil... Nochmal kurz: Es soll in der oberen (weißen) div bleiben, und ich will z.B. margin-top 50% eingeben, und dann soll es in die Mitte des oberen div's kommen und NICHT z.B. in die Mitte der ganzen Webseite.

HTML

<div class="container-fluid divTop">
        <div class="row parent">
            <div class="form-group">
                <div class="col-md-4 col-centered srchDiv">
                    <input type="text" class="form-control">
                </div>
            </div>
        </div>
   </div>


   <div class="container-fluid divMid" style="background-color:grey">

   </div>


   <div class="container-fluid divBot">

   </div>

Alles anzeigen

CSS:

Code

html, body {
    height: 100%;
}


.divTop {
    height: 14%;
}


.divMid {
    height: 69%;
}


.divBot {
    height: 17%;
}


.col-centered{
    float: none;
    margin: 0 auto;
}


.srchDiv {

}

Alles anzeigen

Ich würde mich freuen, wenn ihr mir weiterhelfen könnt!

Vielen Dank im Voraus!

sudteam

du willst das suchfeld in der oberen div bewegen zb. zentrieren oder so?

Aslan44

Ja genau, aber so, dass sich die Zahlen, die ich in Prozent angebe sich auf die obere Div bezieht und nicht auf die ganze Seite. Also wenn ich zB dem Suchfeld margin-top: 50%; als Wert zuweise, dann soll es in die Mitte des oberen Divs kommen. Wenn ich es mit kleinen Werten mache (wie zB margin-top: 4%, dann klappt es, weil diese 4% sich auf die ganze Seite bezieht. Das will ich aber nicht.
Hättest du ne Idee, wie ich es machen kann?
Danke im Voraus.

sudteam

bin mir net sicher aber versuch es mal mit einem "clear: both;" nach dem div

- - - Aktualisiert - - -

und ich denke mal das du "padding meinst denn das ist der innenabstand

gruss sud

Aslan44

Mit clear:both; klappts leider nicht das hat nur die verschachtelten divs voneinander getrennt

MrMurphy

Hallo

Im Moment willst du Lösungen, für die weder HTML noch CSS vorgesehen und die in der Praxis unsinnig sind.

Erschwerend kommt hinzu, dass du Bootstrap zwar benutzt, aber überhaupt noch nicht verstanden hast.

Du machst dir damit das Leben doppelt schwer. Lernen kannst du so schon gar nichts. Das ist ungefähr so als würdest du mit dem Fahrrad Querfeldeinrennen fahren um für den PKW-Führerschein zu lernen.

Du solltest dir erst mal ein Grundlagenwissen aneignen. Wenn du Bootstrap verwenden und zusätzlich mittels HTML/CSS Änderungen darin vornehmen willst zunächst aktuelles HTML/CSS (Hinweis: AKTUELLES) und dann zusätzlich Bootstrap.

Zum aktuellen HTML/CSS gehört zum Beispiel dass das Layout dem Inhalt folgt. Layouts mit leeren Containern wie in deinem Beispiel zu erstellen ist vollkommen sinnfrei. Damit lernst du auch überhaupt nichts.

Du solltest also zunächst eine Seite mit Inhalt erstellen. Wenn du eigenen Inhalt hast, dann bevorzugt den. Ansonsten suchst du dir eine Webseite, die dir gefällt, und baust die nach.

So sollen auch height-Angaben nur in ganz bestimmten Ausnahmefällen verwendet werden. Grundregel: Die Höhe von Containern richtet sich nach deren Inhalt. Und nicht nach dem, wie der Webseitenersteller es sich wünscht. Zumal die Webseite in der Regel auf den unterschiedlichsten Endgeräten funktionieren soll. Vom Smartphone/Handy bis zum Desktop.

An Hand von leeren Containern ist grade Anfängern auch kaum zu erklären, warum es sinnvoll ist auf height-Angaben zu verzichten.

Wenn du dich ernsthaft mit HTML/CSS beschäftigen willst solltest du also zunächst den Inhalt erstellen.

Danach folgt die Entscheidung, ob du das Layout mittels CSS selbst erstellen willst oder dafür Bootstrap verwenden willst.

Wenn du Bootstrap verwenden willst solltest du auch bevorzugt die vorgegebenen Bootstrap-Möglichkeiten nutzen. Erst wenn die Seite damit fertig ist werden mit eigenem CSS noch ein paar Glanzpunkte gesetzt.

Zitat

Mit clear:both; klappts leider nicht

Das ist logisch. Bootstrap 3 basiert auf einem float-Layout. Ohne genaue Kenntnis, wie float/clear und zusätzlich wie Bootstrap funktionieren, sind solche Angaben tödlich. Das wirst du spätestens merken, wenn du zunächst leere Container erstellst und nach dem Einfügen von Inhalt überhaupt nichts mehr wie vorgesehen funktioniert.

Zitat

dann soll es in die Mitte des oberen div's kommen

Das Zentrieren ist eine der vielen Möglichkeiten für die Flexbox gedacht ist.

Gruss

MrMurphy

verschachtelte div's - margin-top, height

Tags

Benutzer online in diesem Thema