css - textbox filling to width, right justify buttons, etc - html

Question

In some ways, I'm still pretty new to CSS and don't "get" how things are done (is seems convoluted, and there doesn't seem to be an easy way to figure things out) - so I am hoping someone here can help me. I'll post the relevant code. I am a programmer - but can't seem to figure out how to do what I want. (BTW - are there any good tools for 'visually' editing CSS? I'm doing this purely by code).
a) I need an HTML text box to expand/contract as the browser window expands/contracts, with a 'search' image icon to the right of it.
b) I need some signup/login buttons right justified
c) I need the logo/text left justified.
So basically the flow is:
[#1 logo] [#2 menu items ] [#3 search-bar with icon] [#4 login/signup buttons]
And if the browser window expands, then #3 expands to fill in the space.
i.e.,
small desktop
[#1][#2][#3][#4]
big desktop
[#1][#2][<#3-------------------------->][#4]
ideally, I'd also like to figure out on mobile (tiny desktop) how to make it:
[#1][#4]
[#3---->]
This is the HTML I have (with other stuff removed to make it simple)
/* General CSS */
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
padding-top: 150px;
padding-bottom: 30px;
font-family: 'Open Sans', sans-serif;
font-size: 18px;
line-height: 1.42857143;
margin: 0;
}
ul {
list-style-type: none;
}
.clfix {
display: table;
content: " ";
clear: both;
}
.hide {
display: none;
}
/* Top bar */
.logo-separator {
float: left;
width: 1px;
border-right: 1px dashed #fff;
height: 80px;
padding-left:20px;
}
.navbar {
background-color: #124780;
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 1030;
}
.navbar .navbar-brand {
text-decoration: none;
float: left;
height: 85px;
padding: 15px 15px;
font-size: 18px;
line-height: 20px;
}
.navbar .navbar-header {
position: relative;
}
.navbar ul li a, .navbar .navbar-brand {
position: relative;
display: block;
padding: 15px;
line-height: 20px;
color: #fff;
text-decoration: none;
}
.nav.navbar-nav {
float: left;
margin: 50;
padding-left:20px;
color: #fff;
}
.navbar-nav > .separator {
padding: 15px 2px;
line-height: 20px;
}
.navbar-nav .dropdown .dropdown-menu > ul > li.separator {
padding: 5px 10px;
color: #000;
}
.navbar-nav .dropdown .dropdown-menu {
text-align:center;
display: none;
position: absolute;
background: #fff;
border-bottom: 1px solid #124780;
z-index: 999;
}
.navbar-nav .dropdown .dropdown-menu > li:hover > a {
background-color: #8fb4de;
}
.navbar-nav > li {
float: left;
}
/*
.nav.navbar-nav li > a:hover, .nav.navbar-nav > li.open a {
color: #000;
}*/
.top-buttons {
margin: 0;
padding: 0;
float:right;
}
.searchBar {
margin: 0;
padding: 0;
float:right;
border-style:solid;border-width:2px;border-color:#FF0000;
display:inline-flex;
background-color: #124780;
position: absolute;
top: 0;
right: 0;
left: 0;
}
.navbar-nav-button {
display: inline-block;
float:right;
padding-top:18px;
padding-right: 5px;
padding-left: 5px;
}
.top-buttons .btn.btn-sm {
padding: 5px 10px;
font-size: 12px;
line-height: 1.5;
border-radius: 7px;
display: inline-block;
margin-bottom: 0;
font-weight: 400;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
width: 88px;
text-align: center;
}
.top-buttons .btn.btn-primary {
color: #fff;
background-color: #337ab7;
border-color: #2e6da4;
font-weight:bold;
}
.top-buttons .btn.btn-default {
color: #333;
background-color: #fff;
border-color: #ccc;
font-weight:bold;
}
.icon-bar {
background-color: #fff;
}
.navbar-nav2 {
display: inline-flex;
width: 100%;
padding-bottom: 5px;
padding-top: 0px;
position: absolute;
left: 0;
top: 85px;
background: #fff;
height: 35px;
overflow: hidden;
}
.navbar-line {
position: absolute;
bottom:0px;
width: 100%;
height: 1px;
background-color: #000;
left: 0;
}
/* Content */
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.row {
margin-right: -15px;
margin-left: -15px;
}
.col-50 {
float: left;
width: 50%;
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
/* Panels */
.submenu {
xborder: 1px solid #ebf2f2;
border-radius: 5px;
margin-bottom: 20px;
background-color: #fff;
}
.submenu .panel-heading {
background-color: #24a3d1;
border: 11px solid #ebf2f2;
cursor: pointer;
text-align: center;
border-radius: 25px;
padding: 20px 15px;
}
.submenu .panel-heading.expanded {
border: 11px solid #ebf2f2;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.submenu .panel-heading .fa-plus, .submenu .panel-heading.expanded .fa-minus {
display: block;
}
.submenu .panel-heading.expanded .fa-plus, .submenu .panel-heading .fa-minus {
display: none;
}
.submenu .panel-heading:hover {
background-color: #166988;
}
.submenu .panel-heading .panel-title {
display: inline-block;
margin: 0;
font-size: 20px;
color: #fff;
}
.submenu .panel-heading i.fa {
font-size: 25px;
color: #fff;
}
.submenu .panel-heading i:first-child {
float: left;
}
.submenu .panel-heading i.fa-plus, .submenu .panel-heading i.fa-minus {
float: right;
}
.submenu .panel-body {
padding: 0;
overflow: hidden;
}
.submenu .panel-body.closed {
display: none;
}
.submenu .panel-body ul {
border: 1px solid #ebf2f2;
border-bottom: 12px solid #ebf2f2;
margin: 0;
padding: 0;
}
.submenu .panel-body ul li a {
display: block;
padding: 12px 8px;
color: #000;
/* border-left: 1px solid #24a3d1;
border-right: 11px solid #ebf2f2; */
border-left: 11px solid #ebf2f2;
border-right: 11px solid #ebf2f2;
border-bottom: 1px solid #ebf2f2;
text-decoration: none;
font-size: 16px;
}
.submenu .panel-body ul li a i {
font-size: 12px;
color: #24a3d1;
}
.submenu .panel-body ul li a:hover, .submenu .panel-body ul li a:hover i {
color: #fff;
background-color: #24a3d1;
text-decoration: none;
}
/* Modals */
.modal {
position: fixed;
left: 0;
top: 0;
z-index: 2000;
width: 100%;
height: 100%;
}
.modal-overlay {
position: relative;
left: 0;
top: 0;
background-color: #000;
opacity: .7;
width: 100%;
height: 100%;
}
.modal-content {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
padding-top: 60px;
padding-bottom: 60px;
padding-left: 20px;
padding-right: 20px;
}
.modal-body {
width: 100%;
background-color: #fff;
margin-left: auto;
margin-right: auto;
border-radius: 10px;
z-index:1000;
position:relative;
}
.modal-body .modal-row {
width: 100%;
}
.modal-body .close {
background: transparent;
border: 0;
float: right;
font-size: 20px;
color: #aeaeae;
cursor:pointer;
}
.modal-body .button-container {
width: 100%;
height: 30px;
padding: 5px 10px;
}
.modal .modal-title {
font-weight: 700;
text-align: center;
}
.modal .modal-subtitle {
text-align: center;
padding-top: 8px;
padding-bottom: 8px;
}
.modal-body .fields {
padding-top: 20px;
position: relative;
}
.modal-body .input-container {
display: block;
padding: 10px 30px;
font-size: 13px;
}
.modal-body .input {
display: block;
width: 100%;
height: 30px;
padding: 5px 10px;
font-size: 12px;
line-height: 1.5;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 3px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
.modal-body .button {
padding: 8px 12px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
display: inline-block;
margin-bottom: 0;
font-weight: 400;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
width: 100%;
}
.modal-body a.forgot {
float: right;
}
.modal-body .button.btn-primary {
color: #fff;
background-color: #337ab7;
border-color: #2e6da4;
}
.modal-body .button.facebook {
background-color: #3b5998;
color: #fff
}
.modal-body .button.google-plus {
background-color: #d9534f;
color: #fff
}
.modal-body .not-member {
text-align: center;
padding-top: 30px;
}
.modal-body .horizontal-line {
padding-top: 15px;
border-bottom: 2px solid #dedede;
}
.modal-body .bottom-message {
padding: 20px;
text-align: center;
font-size: 13px;
}
.modal-body .bottom-message {
background-color: #f8f8f8;
}
.modal-body .grey {
color: #a19997;
}
.navbar-nav .dropdown-menu > li > a {
color: #fff;
background-color: #4692e6;
text-align:left;
padding: 10px 30px;
border-bottom: 1px solid #fff;
}
.navbar-nav2 a {
text-decoration: none;
text-transform: uppercase;
font-size: 12px;
font-weight: bold;
top:220px;
}
.navbar-nav2 .custom {
text-decoration: none;
text-transform: uppercase;
font-size: 12px;
top:220px;
}
#media (min-width: 768px) {
.container, .modal-body {
width: 750px;
}
.top-buttons {
position: absolute;
top: 10px;
/* i took this out because it was screwing things up display: inline-flex; */
display: inline-flex;
}
.navbar-toggle {
display: none;
}
.navbar-nav > li:hover > a, .navbar-nav > li.active > a {
color: #aeaeae;
}
.navbar-nav > .dropdown {
position: relative;
}
.navbar-nav > .dropdown > .fa-caret-up {
position: absolute;
bottom: -4px;
left: 50%;
transform: translateX(-50%);
color:#4692e6;
display: none;
}
.navbar-nav .dropdown-menu > li > a {
width: 250px;
}
.navbar-nav > li:hover .dropdown-menu, .navbar-nav > li:hover > .fa-caret-up {
display: block;
padding:0;
}
.modal-body .vertical-line {
position: absolute;
height: 100%;
left: 50%;
transform: translateX(-50%);
}
.modal-body .vertical-line .line-color {
width: 1px;
background-color: #eee;
height: 87%;
position: absolute;
left: 50%;
}
.modal-body .vertical-line .vertical-message{
display: block;
margin-top: 75px;
background-color: #fff;
color: #696463;
position: relative;
}
}
#media (min-width: 992px) {
.container {
width: 970px;
}
}
#media (min-width: 1200px) {
.container {
width: 1170px;
}
}
#media ( max-width: 767px) {
body {
padding-top: 110px;
}
.navbar {
background-color: #124780;
position: absolute;
}
.separator {
display: none;
}
.modal-body .vertical-line {
display: block;
width: 100%;
float: left;
padding: 10px;
position: relative;
text-align: center;
}
.modal-body .vertical-line .line-color {
position: absolute;
width: 90%;
background-color: #eee;
top: 50%;
height: 1px;
left: 5%;
}
.modal-body .vertical-line .vertical-message{
background-color: #fff;
color: #696463;
position: relative;
}
.logo-separator {
display: none;
}
.navbar {
max-height: 340px;
}
.navbar-nav, .navbar-nav .dropdown-menu, .navbar-nav2 {
display: none;
}
.navbar-nav.open, .navbar-nav .dropdown-menu.open, .navbar-nav2.open {
display: block;
}
.navbar .container {
width: 100%;
padding: 0;
margin: 0;
}
.navbar .container .navbar-header{
position: relative;
width: 100%;
}
.navbar-toggle {
position: relative;
float: right;
padding: 9px 10px;
margin-top: 8px;
margin-right: 15px;
margin-bottom: 8px;
background-color: transparent;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
cursor: pointer;
}
.navbar-toggle .icon-bar {
display: block;
width: 22px;
height: 2px;
border-radius: 1px;
background-color: #fff;
}
.navbar-nav > .dropdown > .fa-caret-up {
display: none;
}
.navbar-header:before, .navbar-header:after{
content: " ";
}
.navbar-toggle .icon-bar+.icon-bar {
margin-top: 4px;
}
.navbar .navbar-nav, .navbar .navbar-nav .dropdown-menu > ul {
margin: 0;
padding: 0;
width: 100%;
}
.navbar .navbar-nav >li>a {
background-color: #78b1eb;
}
.navbar .navbar-nav >li:hover>a {
background-color: #a6c6e6;
}
.navbar .navbar-nav >li>.dropdown-menu {
margin-bottom:0;
margin-top:0;
padding-bottom: 0;
padding-top: 0;
position: relative;
padding-left:0;
}
.navbar .navbar-nav >li>.dropdown-menu>ul>li>a {
color: #fff;
background-color: #aacef2;
text-align:left;
padding: 10px 30px;
border-bottom: 1px solid #fff;
}
.navbar .navbar-nav2 {
padding-top: 0;
position: relative;
top: 0;
height: auto;
}
.navbar .navbar-nav2 a {
display: block;
padding: 10px 15px;
border-bottom: 1px solid #aaa;
}
.navbar .navbar-nav2 a:hover {
background-color: #fff1f1;
color: #5d5aff;
}
.navbar .navbar-nav2 span.separator {
display: none;
}
.navbar ul li {
float: none;
}
.top-buttons {
position: absolute;
top: 10px;
right: 60px;
}
.col-50 {
width: 100%;
}
}
<nav class="navbar">
<div class="container clfix">
<div class="navbar-header">
<button type="button" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src=./mylogo.jpg><img src=./mytextlogo.gif></a>
<div class="logo-separator"></div>
</div>
<div id="navbar">
<ul class="nav navbar-nav">
<li class="dropdown">
Menu Item 1
</li>
<li class="separator">|</li>
<li class="dropdown">
Menu Item 1
</li>
<li class="separator">|</li>
<li class="dropdown">
Menu Item 3
</li>
<li class="separator">|</li>
</ul>
<div class="navbar-nav2">
<div class="navbar-line"></div>
<div class="container" style="width:100%" align=center>
Secondary Menu 1
Secondary Menu 2
</div>
</div>
</div><!--/.nav-collapse -->
//--------------------------------------------------------------------------------------------
/* THIS IS WHERE I WANT A SEARCH BAR WITH ICON TO EXPAND/CONTRACT BASED ON BROWSER WIDTH
//--------------------------------------------------------------------------------------------
<div class=searchBar>
<input name=something type=text width=40><img src=./searchbutton.jpg>
</div>
//--------------------------------------------------------------------------------------------
/* I WANT THESE BUTTONS 'RIGHT' JUSTIFIED HERE
//--------------------------------------------------------------------------------------------
<div >
<ul class="top-buttons" style="width:100%;border-style:solid;border-width:2px;border-color:#FF0000;float:right">
<li class="navbar-nav-button"><Button id="btn-login" class="btn btn-primary btn-sm">Log in</Button></li>
<li class="navbar-nav-button"><Button id="btn-signup" class="btn btn-default btn-sm">Sign Up</Button></li>
</ul>
</div>
</div>
</nav>
any help would be greatly appreciated!

Answer 1

Sounds like you will need judicious use of media queries:
#media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
You've already indicated the three device sizes you need media queries for:
small desktop
[#1][#2][#3][#4]
big desktop
[#1][#2][<#3-------------------------->][#4]
mobile
[#1][#4]
[#3---->]
Now you just need to create media queries for those three sizes and set the CSS accordingly.
Mobile: Hide #2. Maybe play with floats to get #3 to display below the other two.
Big Desktop: Change #3 width (percentage based most likely)
Small Desktop: #1, #2, #3, #4 should all have the same width (percentage based most likely)
You can then use the width property to adjust the size of buttons on these different media widths:
http://www.w3schools.com/cssref/pr_dim_width.asp