Positionierung und Skalierung

[Smustyle]

Guten Morgen,

Ich bin dabei, eine Vorlage für eine Webpage zu erstellen. Doch irgendwie hängt es gerade bei mir etwas. ALs CSS Framework verwende ich zusätzlich Bootstraps.

Die Situation sieht folgendermassen aus:
- In einem Div-Element soll es 2 Sub-divs geben.
- Eines dieser Sub-divs hat eine feste Breite und befindet rechts.

+ Darin entalten sind Text & Icons.​

- Das zweite Sub-div soll den restlich zu verfügung stehenden Platz einnehmen.

+ Darin enthalten ist ein Input-Feld als Suchfunktion und ein Button.
​

Die Platzverteilung und die Anordnung der beiden Sub-divs funktioniert soweit. Allerdings habe ich Probleme, das Input-Feld auf die volle Breite des Sub-divs zu skalieren. (Ein kleiner Abstand zum nächsten Sub-div sollte ebenfalls vorhanden sein). Von Bootstrap her wird das Input-Feld per default auf "width = auto" gesetzt, daher passt es sich im darin enthaltenen Text an.

Zudem möchte ich, dass zwischen Input-Feld und Button kein freier Platz vorhanden ist, heisst dass es aussieht als wäre der Button im Input-Feld integriert. Dies habe ich erreicht mit einem "Margin-left: -5px", allerdings ist es nicht responsive und beim zoom-in / zoom-out stimmen die Proportionen des Abstands nicht mehr.

Hier nun mein Code:

        <div id="body">
            <div id="body_navigation">
                <div id="body_navigation_title">
                    <h2>Menu</h2>
                    <span id="body_navigation_title_icon" class="glyphicon glyphicon-chevron-left btn-lg"></span>
                </div>
                <div id="body_navigation_content">
                    <ul>
                        <li>Supply Chain Materials</li>
                        <li>Supply Chain Materials</li>
                        <li>Supply Chain Materials</li>
                        <li>Supply Chain Materials</li>
                        <li>Supply Chain Materials</li>
                    </ul>
                </div>
            </div>
            <div id="body_content">
                <div id="body_content_header">
                    <div id="body_content_header_settings">
                        <h6>Test
                            <span class="body_content_settings_icon glyphicon glyphicon-log-out btn-lg" title="Logout"></span>
                        </h6>
                    </div>
                    <form id="body_content_header_search" class="navbar-form" role="search">
                      <div class="form-group">
                        <input type="text" class="form-control" placeholder="What are you looking for?">
                      </div>
                      <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search btn-lg"></span></button>
                    </form>

                </div>
            </div>
        </div>

/* --------------------------------------------------------------  */
/* html section   -----------------------------------------------  */
/* --------------------------------------------------------------  */

html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    color: #000000;
    font-weight: normal;
    font-family: Arial, Helvetica, sans-serif;
    margin-left: 0;
    padding: 0;
}

#body {
    height: auto;
}

h1 {
    font-size: 1.7em;
    color: #767676;
    font-weight: normal;
    font-style: italic;
    margin-bottom: 10px;
}

h2 {
    font-size: 1.3em;
    color: #FFFFFF;
    font-weight: normal;
    font-style: italic;
    padding: 25px 0px 0px 20px;
    margin: 0px;
}

h6 {
    font-size: 1em;
    color: #FFFFFF;
    font-weight: normal;
    font-style: normal;
}

/* --------------------------------------------------------------  */
/* body section   -----------------------------------------------  */
/* --------------------------------------------------------------  */


    /* --------------------------------------------------------------  */
    /* navigation section   -----------------------------------------  */
    /* --------------------------------------------------------------  */
    #body_navigation {
        position: absolute;
        width: 240px;
        top: 100px;
        bottom: 0;
    }
   
    #body_navigation_title {
        background-color: #1260B3;
        width: 100%;
        height: 50px;

    }
   
    #body_navigation_title_icon {
        position: absolute;
        top: 5px;
        right: 0px;
        color: #FFFFFF;
        cursor: pointer;
    }
   
    #body_navigation_content {
       
    }
   
    /* --------------------------------------------------------------  */
    /* content section   --------------------------------------------  */
    /* --------------------------------------------------------------  */   
    #body_content {
        position: absolute;
        top: 100px;
        right: 0;
        bottom: 0;
        left: 240px;
        background-color: #F0F0F0;
    }
   
    #body_content_header {
        background-color: #767676;
        width: 100%;
        height: 50px;
    }
       
    #body_content_header_search {
        position: absolute;
        margin-right: 300px;
        margin: 0px;
        padding: 8px 10px 8px 10px;
       
    }
   
    #body_content_header_search .btn-lg {
        padding: 1.5px 6px;
        font-size: 22px;
    }
   
    #body_content_header_search input {   
        -webkit-border-radius: 0 0 0 0;
        border-radius: 0 0 0 0;
    }
   
    #body_content_header_search button {
        background-color: #1260B3;
        color: #FFFFFF;
        padding: 0px;
        -webkit-border-radius: 0 0 0 0;
        border-radius: 0 0 0 0;
    }
   
    #body_content_header_settings {
        background-color: #EFEFE0;
        width: 300px;
        height: 100%;
        right: 0px;
        float: right;
    }
   
    .body_content_settings_icon {
        color: #FFFFFF;
    }

Könnt ihr mir dabei helfen?

Besten Dank & Mit freundlichen Grüssen,
Smustyle

 

[lachender_engel]

Werner (der mit dem Bölckstoff) würde sagen "Oh, haue haue ha.". Soll soviel heißen wie "Wo soll ich da anfangen?".
Am Besten am Ende, denn das erklärt die gemachten Fehler.
Du schreibst

allerdings ist es nicht responsive und beim zoom-in / zoom-out stimmen die Proportionen des Abstands nicht mehr.

und gibst Dir selber die Antwort. Das Wort "Proportionen". Warum stimmt Deine Ausgabe nicht? Weil Du feste Werte verwendes - in Pixel (px).
Gibst Du z.B. ein margin-bottom: 10px; an, so sind diese 10px immer da - egal wie groß oder klein der Browser ist.

Das Geheimnis (welches keines mehr ist) heißt Prozent (%).
Wenn Du willst, dass Proportionen eingehalten werden darfst Du Angaben nur noch prozentual zum Muttercontainer eingeben. Die Kunst dabei ist mit Vererbungen umzugehen.

Zur Frage

Allerdings habe ich Probleme, das Input-Feld auf die volle Breite des Sub-divs zu skalieren. (Ein kleiner Abstand zum nächsten Sub-div sollte ebenfalls vorhanden sein). Von Bootstrap her wird das Input-Feld per default auf "width = auto" gesetzt, daher passt es sich im darin enthaltenen Text an.

kann ich Dir schreiben, Du musst width = 100% setzen - dann ist das Inputfeld so breit wie der Container drumherum.

 

[Myhar]

Ergänzend zu dem Beitrag von @lachender_engel
Es ist wirklich schwer, anzufangen, deine Fehler aufzuzeigen. Du schreibst, dass du bootstrap (ohne s am Ende, hat nichts mit strapsen zu tun ) verwendest. Allerdings hast du sehr viele eigene ID vergeben und gar nicht die von bootstrap zur Verfügung gestellten Klassen verwendet. Wozu dann also überhaupt bootstrap?
Lese dich in die Verwendung von bootstrap also erst einmal grundlegend ein und werde dir bewusst,
Zusätzlich zu dem schon angesprochenen Problem mit fixen pixelwerten kommt noch die falsche Verwendung von position:absolute hinzu. Das brauchst du, ohne dass ich dein design kenne, bestimmt nicht. Das wird nämlich in 99.999% der Fälle wo es eingesetzt wird nicht benötigt. Es wird nämlich meistens von Neulingen eingesetzt die glauben, dass sie sich damit das Leben leichter machen (soll kein heruntermachen sein, jeder hat einmal so angefangen)
Entferne also die unnötigen IDs (das dürften wohl alle bis auf 1 oder 2 sein) und auch die festen Pixelwerte sowie alle position:absolute Angaben. Verwende zusätzlich noch die von bootstrap zur Verfügung gestellten Klassen.

 

[Gelöschtes Mitglied 133165]

Wenn dir das mit den Pixeln zuviel Rechnerei ist, kannst Du auch ".em" verwenden um die Proportionen Deinen Wünschen entsprechend anzupassen. ".px" ist eher HTML 1.0