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.
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:
Könnt ihr mir dabei helfen?
Besten Dank & Mit freundlichen Grüssen,
Smustyle
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:
HTML:
<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>
CSS:
/* -------------------------------------------------------------- */
/* 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
) 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? 
