I want to align my elements in my header so they are positioned, like this:
LOGO SEARCH LINK|LINK
The logo begins on far left, while the search is in middle, and the links on the right, while that I want the search to be max width of the space between the div's of logo and siteMeta and I don't want to break responsiveness.
body {
margin: 0 auto;
}
.container {
border: 1px solid blue;
box-sizing: border-box;
padding: 0;
}
#logo {
float: left;
max-width: 220px;
}
#search {
float: left;
max-width: 300px;
margin-top: 75px;
}
#siteMeta {
float: left;
max-width: 300px;
height: 220px;
line-height: 220px;
}
<div class="container">
<div id="header">
<div id="logo">
<img src="images/logo.png" class="img-responsive">
</div>
<div id="search">
<form class="navbar-form" role="search">
<div class="input-group add-on">
<input class="form-control" placeholder="Search" name="srch-term" id="srch-term" type="text">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</div>
<div id="siteMeta">
Link
Link
</div>
</div>
</div>
You can make #header a table, and its children elements table-cells having width: 33%;:
body {
margin: 0 auto;
}
.container {
border: 1px solid blue;
box-sizing: border-box;
padding: 0;
}
#header {
display: table;
width: 100%;
}
#header > * {
display: table-cell;
width: 33%;
}
#logo {
}
#search {
margin-top: 75px;
text-align: center;
}
#siteMeta {
text-align: right;
height: 220px;
line-height: 220px;
}
<body>
<div class="container">
<div id="header">
<div id="logo">
<img src="images/logo.png" class="img-responsive">
</div>
<div id="search">
<form class="navbar-form" role="search">
<div class="input-group add-on">
<input class="form-control" placeholder="Search" name="srch-term" id="srch-term" type="text">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i>
</button>
</div>
</div>
</form>
</div>
<div id="siteMeta">
Link
Link
</div>
</div>
CSS Tables can do this.
A simplified layout
.container {
display: table;
width: 100%;
border: 1px solid grey;
}
#header,
#logo,
#search,
#siteMeta {
display: table-cell;
}
#siteMeta a {
display: table-cell;
padding: 0 1em;
text-align: center;
}
#search {
width: 100%;
text-align: center;
background: lightblue;
}
<div class="container">
<div id="header">
<div id="logo">
LOGO
</div>
<div id="search">
<form class="navbar-form" role="search">
<div class="input-group add-on">
SEARCH
</div>
</form>
</div>
<div id="siteMeta">
Link
Link
</div>
</div>
Simply without table and flex:
body {
margin: 0 auto;
text-align:center;
}
#header {
width: 100%;
}
#logo {
float:left;
width:33%;
}
#search {
float: left;
width:33%;
}
#siteMeta {
float: left;
width:33%;
}
<body>
<div class="container">
<div id="header">
<div id="logo">
<img src="images/logo.png" class="img-responsive">
</div>
<div id="search">
<form class="navbar-form" role="search">
<div class="input-group add-on">
<input class="form-control" placeholder="Search" name="srch-term" id="srch-term" type="text">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i>
</button>
</div>
</div>
</form>
</div>
<div id="siteMeta">
Link
Link
</div>
</div>
You can solve this with the calc value for the width property.
I've had to add the following things to your css. I've replaced your max-width properties with width and added some backgrounds to better observe the result.
#search{
width: calc(100% - 220px - 300px);
}
#search input {
width: 100%;
box-sizing: border-box;
}
#siteMeta{
width: 300px;
}
#logo{
width: 220px;
}
https://jsfiddle.net/9h3zm2sc/
If you want a wider range of support you can also solve it with the following:
* {
box-sizing: border-box;
}
#search{
width: 100%;
position: absolute;
top: 0;
left: 0;
padding-left: 220px; /* width of the logo */
padding-right: 300px; /* width of the siteMeta */
}
#siteMeta{
float: right;
}
https://jsfiddle.net/mehabrzz/1/
Related
I'm making a basic citation generator mockup with two columns: one for the list of already-generated citations, and one with a form to create a new one. Each element is in a div. Because the form is shorter in height than the citation list, I'm putting an example image underneath that could be replaced with an advertisment.
However, despite placing the first column (citation list) and second (form and ad) in different divs, the ad stays underneath the citation list:
#container {
text-align: center;
}
#header {
margin-bottom: 3em;
margin-top: 2em;
}
#header h3 {
color: darkgrey;
font-size: 1em;
}
#citationList {
display: inline-block;
float: left;
margin-left: 15%;
width: 30%;
}
#citationList #citations {
border: 1px solid darkgrey;
padding: 20px;
border-radius: 15px;
margin-top: 1.5em;
}
#creationForm {
display: inline-block;
float: right;
margin-right: 15%;
width: 30%
}
#creationForm form {
border: 1px solid darkgrey;
padding: 20px;
border-radius: 15px;
margin-top: 1.5em;
}
#creationForm form label {
float: left;
}
#creationForm form input .textBox {
float: right;
}
#adSpace {
float: right;
}
<html>
<body>
<div id="container">
<div id="header">
<h1>Citation Generator</h1>
<h3>it's totally amazing</h3>
</div>
<div class="col-sm">
<div id="citationList">
<h4>Your Citations</h4>
<ul id="citations">
<li>Citations are listed here</li>
<li>This can be however long</li>
</ul>
</div>
</div>
<div class="col-sm">
<div id="creationForm">
<h4>Create a Citation</h4>
<form>
<!-- Author -->
<label for="someInput">Some input:</label>
<input id="someInput" type="text" class="textBox" />
<label for="moreInput">More input:</label>
<input id="moreInput" type="text" class="textBox" />
<label for="evenMoreInput">Even more input:</label>
<input id="evenMoreInput" type="text" class="textBox" />
<label for="muchMoreInput">Much more input:</label>
<input id="muchMoreInput" type="text" class="textBox" />
</div>
<div id="adSpace">
<img src="https://via.placeholder.com/300x300.jpg?text=Placeholder+Advertisment" />
<p>Advertisment</p>
</div>
</div>
</div>
</body>
</html>
use clear:both; as shown below
#adSpace {
float: right;
clear: both;
}
Here is the corrected CSS and HTML.
#container {
text-align: center;
}
#header {
margin-bottom: 3em;
margin-top: 2em;
}
#header h3 {
color: darkgrey;
font-size: 1em;
}
.contentContainer {
width:1200px;
margin:0 auto;
display: inline-block;
}
#citationList {
display: inline-block;
float: left;
width: 100%;
}
#citationList #citations {
border: 1px solid darkgrey;
padding: 20px;
border-radius: 15px;
margin-top: 1.5em;
}
#creationForm {
display: inline-block;
float: right;
width: 100%
}
#creationForm form {
border: 1px solid darkgrey;
padding: 20px;
border-radius: 15px;
margin-top: 1.5em;
}
.row {
margin:10px -15px;
}
#creationForm form label {
float: left;
width: 30%;
}
#creationForm form input.textBox {
float: left;
}
#adSpace {
float: left;
}
<html>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<body>
<div id="container">
<div id="header">
<h1>Citation Generator</h1>
<h3>it's totally amazing</h3>
</div>
<div class="contentContainer">
<div class="col-md-6 col-sm-6">
<div id="citationList">
<h4>Your Citations</h4>
<ul id="citations">
Looks like you don't have any citations made yet!
</ul>
</div>
</div>
<div class="col-md-6 col-sm-6">
<div id="creationForm">
<h4>Create a Citation</h4>
<form>
<!-- Author -->
<div class="row">
<label for="authorFirst">Author's first name:</label>
<input id="authorFirst" type="text" class="textBox" />
</div>
<div class="row">
<label for="authorLast">Author's last name:</label>
<input id="authorLast" type="text" class="textBox" />
</div>
<br />
<!-- Website -->
<div class="row">
<label for="pageTitle">Title of page/article:</label>
<input id="pageTitle" type="text" class="textBox" />
</div>
<div class="row">
<label for="siteTitle">Title of website:</label>
<input id="siteTitle" type="text" class="textBox" />
</div>
<br />
<!-- Dates -->
<div class="row">
<label for="datePublished">Date published:</label>
<input id="datePublished" type="text" class="textBox" />
</div>
<div class="row">
<label for="dateAccessed">Date accessed:</label>
<input id="dateAccessed" type="text" class="textBox" />
</div>
</form>
</div>
<div id="adSpace">
<img src="https://via.placeholder.com/300x300.jpg?text=Placeholder+Advertisment" />
<p>Advertisment</p>
</div>
</div>
</div>
</div>
</body>
</html>
I'm trying to use images as checkboxes in a grid layout, but the images won't show and I'm at a loss. Here is the relevant css and html. I have double checked the image address as this has been an issue in many other posts here, but it is stored at the address being accessed.
Any help is appreciated.
body{
width: 100vw;
height: 100vh;
margin-left: auto;
margin-right: auto;
}
.container {
width: 100%;
height: 100%;
margin: 0;
}
.jumbotron {
width: 100%;
float: left;
}
.four {
width: 32vw;
float: left;
margin-left: 2%;
/*background-color: #95a5a6;*/
}
.row {
width: 100vw;
height: 20vh;
clear: both;
padding: 0px;
margin: 0px;
}
.buttonLabel {
cursor: pointer;
}
.button input[type="checkbox"] {
display: none;
}
.button input[type="checkbox"] + label {
width: 32vw;
height: 20vh;
display: inline-block;
}
#accomLabel {
background: url('../img/shelter.png') no-repeat;
}
<div class="container">
<div class="row jumbotron heading">
<h1 style="text-align: center;">foo</h1>
<h3 style="text-align: center;">bar</h3>
</div>
<form method="post" id="services_form">
<div class="row">
<div class="four">
<div class="button">
<input type="checkbox" id="accomButton"></input>
<label class="buttonLabel" for="accomButton" id="accomLabel"></label>
</div>
</div>
<div class="four">
<div class="button">
<input type="checkbox" id="foodButton"></input>
<label class="buttonLabel" for="foodButton" id="foodLabel"></label>
</div>
</div>
<div class="four">
<div class="button">
<input type="checkbox" id="medicalButton"> </input>
<label class="buttonLabel" for="medicalButton" id="medicalLabel"></label>
</div>
</div>
</div>
</form>
</div>
Seems fine, although you don't need input closing tags (</input>). Here's a demo with placehold.it image:
body {
width: 100vw;
height: 100vh;
margin-left: auto;
margin-right: auto;
}
.container {
width: 100%;
height: 100%;
margin: 0;
}
.jumbotron {
width: 100%;
float: left;
}
.four {
width: 32vw;
float: left;
margin-left: 2%;
/*background-color: #95a5a6;*/
}
.row {
width: 100vw;
height: 20vh;
clear: both;
padding: 0px;
margin: 0px;
}
.buttonLabel {
cursor: pointer;
}
.button input[type="checkbox"] {
display: none;
}
.button input[type="checkbox"] + label {
width: 32vw;
height: 20vh;
display: inline-block;
}
#accomLabel {
background: url('http://placehold.it/54x54') no-repeat;
}
<div class="container">
<div class="row jumbotron heading">
<h1 style="text-align: center;">foo</h1>
<h3 style="text-align: center;">bar</h3>
</div>
<form method="post" id="services_form">
<div class="row">
<div class="four">
<div class="button">
<input type="checkbox" id="accomButton">
<label class="buttonLabel" for="accomButton" id="accomLabel"></label>
</div>
</div>
<div class="four">
<div class="button">
<input type="checkbox" id="foodButton">
<label class="buttonLabel" for="foodButton" id="foodLabel"></label>
</div>
</div>
<div class="four">
<div class="button">
<input type="checkbox" id="medicalButton">
<label class="buttonLabel" for="medicalButton" id="medicalLabel"></label>
</div>
</div>
</div>
</form>
</div>
My head banner is made as such
The logo width and height are known. The banner takes the logo's height. The rest would be in percentage of whatever's remaining. The message fills the remaining space and floats left. The search bar and profile space floats right. All elements are centered vertically.
Here's my terrible attempt. Every solution I've tried so far have had unintended consequences.
HTML
.top-banner {
position:fixed;
width:100%;
height:115px;
}
.top-banner .logo {
float:left;
display:inline-block;
width:255px;
height:115px;
background-color:red;
}
.user-status {
display:inline-block;
float:left;
}
.search-bar {
width:30%;
float:right;
}
.user-profile {
float:right;
background:blue;
width: 75px;
height: 75px;
-moz-border-radius: 37.5px;
-webkit-border-radius: 37.5px;
border-radius: 37.5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="top-banner">
<div class="logo">
</div>
<div class="user-status">
<span>You have 29 days left to your trial</span>
</div>
<div class="search-bar input-group">
<input name="search" class="form-control" placeholder="Search">
<span class="input-group-addon">
<button type="submit">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
<div class="user-profile">
</div>
</div>
Here's the jsfiddle https://jsfiddle.net/xu17j585/6/
You can use Flexbox with media queries set to min-width: 768 or something.
.top-banner {
position: fixed;
width: 100%;
height: 115px;
}
.top-banner .logo {
width: 255px;
height: 115px;
background-color: red;
}
.user-status {
flex: 1;
}
.search-bar {
width: 30%;
}
.user-profile {
background: blue;
width: 75px;
height: 75px;
border-radius: 37.5px;
}
#media(min-width: 768px) {
.top-banner {
display: flex;
align-items: center;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="top-banner">
<div class="logo"></div>
<div class="user-status"><span>You have 29 days left to your trial</span>
</div>
<div class="search-bar input-group">
<input name="search" class="form-control" placeholder="Search">
<span class="input-group-addon">
<button type="submit">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
<div class="user-profile">
</div>
</div>
Here is solution with flexbox. If i understand you correctly you want to logo and user status always to be left and search input and user profile to left.
<div class="top-banner">
<div>
<div class="logo"></div>
<div class="user-status"><span>You have 29 days left to your trial</span></div>
</div>
<div>
<div class="search-bar input-group">
<input name="search" class="form-control" placeholder="Search">
<span class="input-group-addon">
<button type="submit">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
<div class="user-profile"></div>
</div>
</div>
.top-banner {
position:fixed;
width:100%;
height:115px;
}
.top-banner .logo {
float:left;
display:inline-block;
width:255px;
height:115px;
background-color:red;
}
.user-status {
display:inline-block;
float:left;
}
.search-bar {
width:30%;
float:right;
}
.user-profile {
float:right;
background:blue;
width: 75px;
height: 75px;
-moz-border-radius: 37.5px;
-webkit-border-radius: 37.5px;
border-radius: 37.5px;
}
I want to achieve this layout:
*********
* Image * Price | Add-to-cart-icon | Amount
*********
But as you can see in this fiddle, the order of "Price | Add-to-cart-icon | Amount" is "Add-to-cart-icon | Amount | Price". Why is this happening and how can I achieve the pursued layout?
Maybe it is better to align elements by using display: inline?
My HTML-Code:
<div class="views-column">
<img typeof="foaf:Image" src="https://upload.wikimedia.org/wikipedia/commons/d/d2/Vitoria_-_Museo_Ciencias_Naturales16.JPG">
<div class="feldgruppe">
10,00 €
<form class="commerce-add-to-cart">
<div>
<input src="http://images.all-free-download.com/images/graphiclarge/shopping_cart_icon_vector_red_background_280670.jpg" class="form-submit" type="image">
<div class="form-item-quantity">
<label>Anzahl </label>
<input size="3">
</div>
</div>
</form>
</div>
</div>
<div class="views-column">
<img typeof="foaf:Image" src="https://upload.wikimedia.org/wikipedia/commons/f/fd/Pyrite_from_Ampliaci%C3%B3n_a_Victoria_Mine%2C_Navaj%C3%BAn%2C_La_Rioja%2C_Spain_2.jpg">
<div class="feldgruppe">
19,00 €
<form class="commerce-add-to-cart">
<div>
<input name="submit" src="http://images.all-free-download.com/images/graphiclarge/shopping_cart_icon_vector_red_background_280670.jpg" class="form-submit" type="image">
<div class="form-item-quantity">
<label>Anzahl </label>
<input size="3">
</div>
</div>
</form>
</div>
</div>
My CSS:
.views-column {
position: relative;
clear: both;
padding-top: 1em;
}
.views-column img {
float: left;
max-width: 35%;
height: auto;
padding-right: 1em;
}
.feldgruppe,
.commerce-add-to-cart {
float: left;
}
input.form-submit {
float: left;
max-width: 30px;
}
.form-item-quantity {
float: left;
}
If you want to use float for all, you should wrap the price text into a div or span and float it to the left too. But I suggest to use inline blocks instead of float, so less CSS is needed.
.views-column img {
max-width: 35%;
height: auto;
padding-right: 1em;
}
.views-column div,
.views-column form {
display: inline-block;
vertical-align: top;
}
input.form-submit {
max-width: 30px;
}
jsFiddle
.views-column {
position: relative;
clear: both;
padding-top: 1em;
/* white-space: nowrap; */
}
.views-column img {
max-width: 35%;
height: auto;
padding-right: 1em;
}
.views-column div,
.views-column form {
display: inline-block;
vertical-align: top;
}
input.form-submit {
max-width: 30px;
}
<div class="views-column">
<img typeof="foaf:Image" src="https://upload.wikimedia.org/wikipedia/commons/d/d2/Vitoria_-_Museo_Ciencias_Naturales16.JPG">
<div class="feldgruppe">
10,00 €
<form class="commerce-add-to-cart">
<div>
<input src="http://images.all-free-download.com/images/graphiclarge/shopping_cart_icon_vector_red_background_280670.jpg" class="form-submit" type="image">
<div class="form-item-quantity">
<label>Anzahl </label>
<input size="3">
</div>
</div>
</form>
</div>
</div>
<div class="views-column">
<img typeof="foaf:Image" src="https://upload.wikimedia.org/wikipedia/commons/f/fd/Pyrite_from_Ampliaci%C3%B3n_a_Victoria_Mine%2C_Navaj%C3%BAn%2C_La_Rioja%2C_Spain_2.jpg">
<div class="feldgruppe">
19,00 €
<form class="commerce-add-to-cart">
<div>
<input name="submit" src="http://images.all-free-download.com/images/graphiclarge/shopping_cart_icon_vector_red_background_280670.jpg" class="form-submit" type="image">
<div class="form-item-quantity">
<label>Anzahl </label>
<input size="3">
</div>
</div>
</form>
</div>
</div>
I've got a search form within a div that
margin: 0 auto;
isn't moving it to the center. Any idea's of how to correct this?
Here's an image link to reference
HTML:
<div id="welcome">
<div class="search-row">
<div class="postcode-search col-lg-4">
<div id="postcode-search" class="input-group">
<input type="text" id="postcode-bar" class="form-control" placeholder="Enter postcode.."/>
<span class="input-group-btn">
<button class="btn btn-default" id="postcode-btn" type="button">FIND STORES</button>
</span>
</div>
</div>
</div>
</div>
CSS:
#welcome {
height: 220px;
border: 1px solid yellow;
}
#postcode-search {
margin: 0 auto;
padding: 0px;
}
#postcode-bar {
height: 50px;
background-color: #fff;
text-align: center;
font-size: 13px;
}
#postcode-btn {
height: 50px;
}
Add additional class "col-lg-offset-4" to "postcode-search".
Because you are using "col-lg-4" it adds style width: 33.33% and float: left.
So, The style below won't work. This is Useless style.
#postcode-search {
margin: 0 auto;
padding: 0px;
}
You just have to add one bootstrap grid offset class to center your form within a DIV.
Using a pure CSS solution you can simply do this, using text-align:
#welcome {
height: 220px;
border: 1px solid yellow;
}
#postcode-search {
margin: 0 auto;
padding: 0px;
text-align: center;
}
#postcode-bar {
height: 50px;
background-color: #fff;
text-align: center;
font-size: 13px;
}
#postcode-btn {
height: 50px;
}
<div id="welcome">
<div class="search-row">
<div class="postcode-search col-lg-4">
<div id="postcode-search" class="input-group">
<input type="text" id="postcode-bar" class="form-control" placeholder="Enter postcode.."/>
<span class="input-group-btn">
<button class="btn btn-default" id="postcode-btn" type="button">FIND STORES</button>
</span>
</div>
</div>
</div>
</div>
You need to width on #postcode-search fox example width: 300px; then it will be in center
This is quite simple.
I applied the text-align:center style
#postcode-search {
margin: 0 auto;
padding: 0px;
text-align:center;
}
Here is a working demo
you have to add this css
.postcode-search {
width: 300px; // change value as per requirement
padding: 30px; // optional
}
.postcode-search.col-lg-4 {
margin: auto;
}
here is a working example https://plnkr.co/edit/FSeAt3TkFeuGvj57hVgS?p=preview