#searchBar {
display: inline-block;
}
#container {
width: 580px;
background-color: white;
}
#logo {
margin-left: 25%;
}
<div id="container">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/2880px-Google_2015_logo.svg.png" id="logo" height="40px">
<form>
<input type="text" id="searchBar">
<input type="submit" value="Search Google">
<input type="submit" value="Feeling Lucky">
</form>
</div>
I'm trying to replicate the Google home page(sort of),what I'm trying to achieve is that the search bar (where input type equals search)will be one line above the two buttons,i can achieve that by other ways for sure but wanted to check the inline-block property..the object should act like its "inline",captures only the width of the content and "block" too,but for some reason the "block" does not work and the buttons are just next to the right side of the search bar..
Compared to display: block, the major difference is that display: inline-block does not add a line-break after the element, so the element can sit next to other elements.
So you will have to use display: block to fit the width.
display : block will serve the purpose. As {display: inline-block} will not add the line break. So, you have to modify the CSS as:
#searchBar {
display: block;
}
#container {
width: 580px;
background-color: white;
}
#logo {
margin-left: 25%;
}
Related
Sorry, I know this is super basic but I've been through my coding reference books all day and I think my mind's a little buggered. I need to get BOTH the input field AND the "submit" button in one line, in the center of the page, similar to Google.
.logo {
width: 50%;
display: block;
margin: auto;
}
.input-fields {
padding: 3%;
width: 40%;
display: block;
margin: auto;
font-size: 90%;
}
.submit {
padding: 3%;
width: 15%;
}
<header>
<img class="logo" src="OnSaleTodayMobile.png" alt="OnSaleToday.co.za">
</header>
<div class="form-wrapper">
<form class="center">
<input class="input-fields" name="search" type="text" placeholder="Search for anything...">
<input class="input-fields submit" name="find" type="submit" value="Find">
</form>
</div>
The problem I'm getting is that the button is stacking underneath the text-field. What am I missing out?
Well Google has it vertically and horizontally aligned so you should try something like this (simplified version):
* {margin: 0; padding: 0; box-sizing: border-box}
html, body {width: 100vw; height: 100vh}
body {
display: flex;
justify-content: center;
align-items: center;
}
.align-me {
display: flex;
flex-direction: column;
align-items: center;
}
.align-me > .form-wrapper > .center {
display: flex;
}
<div class="align-me">
<header>
<img class="logo" src="OnSaleTodayMobile.png" alt="OnSaleToday.co.za">
</header>
<div class="form-wrapper">
<form class="center">
<input class="input-fields" name="search" type="text" placeholder="...">
<input class="input-fields submit" name="find" type="submit" value="Search">
</form>
</div>
</div>
But their design is not responsive and this is.
What you are seeing is the default behaviour of display:block.
Using display:inline-block will make them block elements so you can add padding, etc, but make them inline so they will appear beside each other (assuming they fit, and other styles don't change the default behaviour).
Just change the display from block to inline-block in your CSS here:
.input-fields {
[...]
display:inline-block;
}
Working snippet:
.logo {width: 50%; display:block; margin:auto;}
.input-fields {
padding:3%;
width:40%;
display:inline-block; /* change this from block to inline-block */
vertical-align: middle; /* this will help with any vertical alignment issues */
margin:auto;
font-size:90%;
}
.submit {
padding:3%;
width:15%;
}
/* Add this this to center your inputs -
you included the "center" class in your HTML but not it in your CSS */
.center { text-align:center}
<header><img class="logo" src="OnSaleTodayMobile.png" alt="OnSaleToday.co.za"/></header>
<div class="form-wrapper">
<form class="center">
<input class="input-fields" name="search" type="text" placeholder="Search for anything..."/>
<input class="input-fields submit" name="find" type="submit" value="Find"/>
</form>
</div>
You are missing a
display: inline-block;
on the elements you want to display in line. You currently have 'display: block;' This will push elements on to there own line.
You may also want:
vertical-align: middle;
To make them vertically aligned relative to each other.
To make sure they both stay dead center in the page put them all in a container (or just use your existing form container) and style it like:
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
text-align: center;
This will ensure no matter what the screen size is the container is in the middle both vertically and horizontally.
Having some issues with aligning images side by side on my wordpress staging environment.
I thought this would be the easiest part of the development phase but has actually proven quite difficult.
So in a nutshell, I want to align two images together, with some space inbetween and buttons below them. Simple right?
So I did the following HTML:
<div class="shop-banners">
<ul>
<li>
<img src="https://www.cutepinkboutique.com/staging/wp-
content/uploads/2017/06/NoHTTPS1">
<input type="submit" name="submit" value="Shop our Tops and Dresses">
</li>
<li>
<img src="https://www.cutepinkboutique.com/staging/wp-
content/uploads/2017/06/NoHTTPS2">
<input type="submit" name="submit" value="Shop Now for Boutique Clothing">
</li>
</ul>
</div>
Here is my CSS that I'm using:
.shop-banners ul {
display: inline-block;
float: left;
width: 40%;
margin-left: auto;
margin-right: auto;
}
.shop-banners li {
display: inline-grid;
margin: 0 20px 0 0;
}
.shop-banners input {
margin-top: 20px;
}
This is how it looks below with the above code:
This is all on our staging environment so I can't link the web page. I just can't figure out why this is happening. I've tried messing around with the width percentage and taken out float but no luck.
Any help would be much appreciated.
That is depends on aspect ration of image , if you have two different images with different aspect ratio that if you set width same that you will get what you want but images resoluions will change , so try to wrap image in on block element set width property then assign image to max-width:100%
please use Li for both sections. into the questions, it's showing only one image use CSS below
.shop-banners ul {
display: inline-block;
float: left;
width: 40%
margin-left: auto;
margin-right: auto;
}
li {
display: inline-grid;
margin: 0 20px 0 0;
}
input {
margin-top: 20px;
}
<div class="shop-banners">
<ul>
<li>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRfefpyGjtYN37nWjh0koST45Hjx9uA4TP0OKlUG81VBsKaWI7g">
<input type="submit" name="submit" value="Shop our Tops and Dresses">
</li>
<li>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRfefpyGjtYN37nWjh0koST45Hjx9uA4TP0OKlUG81VBsKaWI7g">
<input type="submit" name="submit" value="Shop Now for Boutique Clothing">
</li>
</ul>
</div>
So for your code,
You should use width: 50% for images, so that it takes half the screen width.
For spacing between two images, use padding on the containing div.
To arrange the button and image in the above fashion, use flexbox in CSS. By simply arranging them in rows. See below CSS-
I have demonstrated with height and width responsive for the image.
You can change that by simply changing the height of the image to an absolute value.
.shop-banners {
display: flex;
flex-direction: row;
}
.shop-banners__left, .shop-banners__right {
display: inline-block;
width: 50%;
}
.shop-banners img {
width: 100%;
height: 100%;
}
.shop-banners input {
width: 100%;
}
.shop-banners__left {
padding-right: 10px;
}
.shop-banners__right {
padding-left: 10px;
}
<div class="shop-banners">
<div class="shop-banners__left">
<img src="https://s-media-cache-ak0.pinimg.com/originals/ce/4d/0c/ce4d0c6e5769b1ae0e78a09a516bce6a.jpg">
<input type="submit" name="submit" value="Shop our Tops and Dresses">
</div>
<div class="shop-banners__right">
<img src="http://vivaglammagazine.com/wp-content/uploads/2017/05/636096742373357996142416222_fashion-beauty-tips.jpg">
<input type="submit" name="submit" value="Shop Now for Boutique Clothing">
</div>
</div>
The code that I used was mainly correct, however it is best practice to encase it in .
The major difference, was scaling down the actual image sizes within the media library of wordpress. Once I did that and modified the width percentage in css, they managed to align without issues.
I'm trying to do a simple page with two divs inside a large div which I'm using as a container for the whole page. For being able to do this I'm using the display: inline for the divs, but when I do this everything just wrecks itself.
div {
margin: auto;
border: 2px solid black;
border-radius: 10px;
padding-left: 10px;
padding-right: 10px;
}
#container {
width: 95%;
min-height: 620px;
}
#options, #forms {
display: inline;
}
h1 {
text-align: center;
}
<body>
<div id="container">
<h1>BANCO DE LA NACION</h1>
<hr>
<div id="options">
<h3>Eliga su operación:</h3>
<input type="button" name="crear" id="creacion" value="Crear nueva cuenta">
<input type="button" name="mostrar" id="mostrador" value="Mostrar datos">
</div>
<div id="forms">
</div>
</div>
</body>
I'm wondering if there is another way of making divs spawn right to each other (without the usage of bootstrap which for the moment I'm trying to avoid) or in the case the way I'm doing it is the correct one, which is my mistake?
Use inline-block instead of inline.
Read difference between them in:
What is the difference between display: inline and display: inline-block?
CSS display: inline vs inline-block
Change inline to inline-block.
How to make all inputs with the same width 100%?
if I set width 100% then input will be break on new line:
div > input {
width: 100%;
}
HTML:
<div class="wrapper">
<div>
<label>Label</label>
<input type="text" />
</div>
<div>
<label>Label</label>
<input type="text" />
</div>
<div>
<label>Label</label>
<input type="text" />
</div>
</div>
CSS:
.wrapper label {
float: left;
margin-right: 10px;
}
.wrapper div {
margin-bottom: 15px;
}
The desired result (JSFiddle):
.wrapper input {
width: 90%;
}
You cannot make it 100% without a new line because the Label will take some space of the screen. Remaining portion you can allot for the text fields.
You can do something like this: DEMO
Just remove the float statement, and make both the label and input display: inline-block.
.wrapper div {
margin-bottom: 15px;
}
div > input, div > label {
display: inline-block;
}
div > input {
width: 77%;
}
div > label {
width: 20%;
}
You can change the width of the input fields and/or the labels, but I think width: 77% is the highest value possible for the input fields (with the width of the labels set to 20%) to still display inline.
EDIT:
Do note that using CSS selectors based on HTML tagnames is not the ideal way of doing this. A better way is to give all labels and inputs a class (f.e. class="lbl" and class="inp" respectively), and selecting those, like underneath:
...
.lbl, .inp {
display: inline-block;
}
...
<pre>
.wrapper{width:100%; display:block}
.wrapper lable{width:30%; display:inline-block; position:relative}
.wrapper input{width:70%; display:inline-block; position:relative}
</pre>
I'm looking to center this textbox and submit button on the page both vertically and horizontally but the following code just puts it in the top center. How can I center this to the page? It's like it's ignoring the vertical-align setting.
<div style="text-align:center; vertical-align:middle">
<form action="save_thought.php" method="post">
<input type="text" name="thought"><br>
<input type="submit" value="Submit">
</form>
</div>
You can use position:absolute DEMO http://jsfiddle.net/kevinPHPkevin/U8dZr/
div#form-wrapper {
position:absolute;
top:50%;
right:0;
left:0;
}
You can also go for this:
HTML
<div id="main" >
<form id="frm" action="save_thought.php" method="post">
<input type="text" name="thought"><br>
<input type="submit" value="Submit">
</form>
</div>
CSS
#main
{
line-height: 400px;
text-align:center;
vertical-align:middle;
}
#frm
{
display: inline-block;
vertical-align: middle;
line-height: 14px;
}
Demo Here
None of the solutions provided above worked for me for my real proyect in which I wanted to center both vertically and horizontally a form inside a div (not taking as reference the full page) but I got it using display: flex; property. Just display your parent div as flex and then use the property margin: auto; for your child form.
In your case, it would be like this:
HTML code:
<div id="centeringDiv" style="display: flex;">
<form id="mainForm" action="save_thought.php" method="post">
<input type="text" name="thought"><br>
<input type="submit" value="Submit">
</form>
</div>
CSS code:
html, body{
height: 100%;
width: 100%;
margin: 0;
}
#centeringDiv{
height: 100%;
width: 100%;
display: flex;
}
#mainForm{
margin: auto;
}
JSFiddle in which you can see that the form it is being centered both vertically and horizontally in the full page.
CSS will probably never stop to amaze me. Given Dhaval Marthak's answer I was actually able to achieve what I wanted, right aligned labels and left aligned fields (on the right of the labels of course):
label {
display: block;
position:relative;
text-align: right;
width: 100px;
margin: 0 0 5px 0;
}
label > input,
label > select,
input {
position: absolute;
left: 120px;
}
The JSfiddle still points out my remaining problem, the field will align with the bottom of the label if the label breaks the line. But I am sure that can be amended as well.
Of course it would also be nice if the space between labels and fields could be assigned more "dynamically" based on the sizes of the labels (e.g. in different languages) but I have not seen this done anywhere so far. I guess I will have to resort to tables if I really need it.
You have have to change the width from "100%" to "px" and then you have to do margin: "auto".
Then the form will be centered horizontally.