I want to position a search bar inside a div so it looks something like this:
At the moment it doesn't even sit within the div.
HTML:
.sb-search {
float: right;
overflow: hidden;
}
.sb-search-input {
border: none;
outline: none;
background: #fff;
width: 100%;
height: 60px;
margin: 0;
z-index: 10;
padding: 20px 65px 20px 20px;
font-family: inherit;
font-size: 20px;
color: #2c3e50;
}
<div class="searchbar" style="position: relative;">
<h1>Welcome Solictior...</h1>
<div id="sb-search" class="sb-search">
<form>
<input class="sb-search-input" placeholder="Search..." type="text" value="" name="search" id="search" />
<input class="sb-search-submit" type="submit" value="" />
<span class="sb-icon-search"></span>
</form>
</div>
</div>
I think your problem here is the h1 as it's a block level element.
Add this to your h1 CSS and it should let the search bar go to the right of it.
h1 {
display: inline-block;
}
Keep the float: right; on your .sb-search element too.
It's very easy to do with Flexbox
.searchbar {
background-color: #8BCAC7;
display: flex;
justify-content: space-between;
align-items: center;
}
https://jsfiddle.net/cb3fu9wj/
justify-content specifies the alignment along the main axis. It defines how the free space is distributed between elements.
align-items specifies the alignment along the cross axis.
Here's the complete guide.
Here's a possible example of what you're looking for : See this fiddle
CSS :
.searchbar { background-color: teal; color: #fff; overflow: hidden; padding: 0 10px;}
.searchbar .sb-search { float: right; margin: 5px 0; }
.searchbar h1 { float: left; font-size: 14px; margin: 10px 0 5px; }
Related
I have two text input boxes and a button in a row:
I want to make the height of the button same as text boxes.
This is the CSS code which I wrote:
.form-button {
background-color: purple;
color: white;
margin: 20px 0px;
border: none;
color: white;
height: 30px;
}
.form input[name="topText"] {
margin: 20px 0px;
width: 100px;
height: 30px;
}
.form input[name="bottomText"] {
margin: 20px 0px;
width: 100px;
height: 30px;
}
HTML code:
return (
<div>
<form className="form">
<input
type="text"
name="topText"
value={this.state.topText}
placeholder="Top text"
onChange={this.handleChange}
/>
<input
type="text"
name="bottomText"
value={this.state.bottomText}
placeholder="Bottom text"
onChange={this.handleChange}
/>
<br />
<button className="form-button">Gen</button>
</form>
</div>
)
Even if I set the height of all the three elements as 30, the height of the button is not matching the text box.
Kindly comment if more information is needed.
You can add a display: flex to your form container and instead of putting the height on each input you could simply add height to the form element. display: flex will adjust the item's height automatically.
.form {
display: flex;
height: 30px;
}
.form-button {
background-color: purple;
color: white;
border: none;
color: white;
}
.form input[name="topText"] {
width: 100px;
}
.form input[name="bottomText"] {
width: 100px;
}
As <form .class="form"> </form> is parent container give a height to it. Then make height of its children 100%
html code:
<div>
<form className="form">
<input
type="text"
name="topText"
value={this.state.topText}
placeholder="Top text"
onChange={this.handleChange}
/>
<input
type="text"
name="bottomText"
value={this.state.bottomText}
placeholder="Bottom text"
onChange={this.handleChange}
/>
<br />
<button className="form-button">Gen</button>
</form>
</div>
css code:
.form{
height: 30px !important;
}
.form-button {
background-color: purple;
color: white;
margin: 20px 0px;
border: none;
color: white;
height: 100% !important;
}
.form input[name="topText"] {
margin: 20px 0px;
width: 100px;
height: 100% !important;
}
.form input[name="bottomText"] {
margin: 20px 0px;
width: 100px;
height: 100% !important;
}
You can use display: flex;. This is what you wanted to do?
Example here: https://codepen.io/yasgo/pen/gOoqbBO
HTML
<form class="form">
<input
type="text"
name="topText"
value={this.state.topText}
placeholder="Top text"
onChange={this.handleChange}
/>
<input
type="text"
name="bottomText"
value={this.state.bottomText}
placeholder="Bottom text"
onChange={this.handleChange}
/>
<button class="form-button">Gen</button>
</form>
CSS
.form {
display: flex;
align-items: stretch;
height: 100px;
}
.form-button {
background-color: purple;
color: white;
margin: 20px 0px;
border: none;
color: white;
}
.form input[name="topText"] {
margin: 20px 0px;
width: 100px;
}
.form input[name="bottomText"] {
margin: 20px 0px;
width: 100px;
}
Use display: flex; along with flex: 1;.
flex: 1; is a shorthand for:
flex-grow: 1; The div will grow in same proportion as the window-size
flex-shrink: 1; The div will shrink in same proportion as the window-size
flex-basis: 0; The div does not have a starting value as such and will
take up screen as per the screen size available for
e.g:- if 3 divs are in the wrapper then each div will take 33%.
Source for above: https://stackoverflow.com/a/37386525/14776809
This means all the child elements in the form's height will be set to the child element with the biggest height-value, in this case the input-elements.
form {
display: flex;
flex: 1;
}
.form-button {
background-color: purple;
color: white;
border: none;
color: white;
}
.form input[name="topText"] {
width: 100px;
}
.form input[name="bottomText"] {
width: 100px;
}
Hi so I have a few comments to make about this bit of code you've shared, I hope it will help you to improve :)
ALWAYS label your input for accessibility purposes and visually hide it if you don't want it to be displayed (Beware /!\ Visually hiding an element ≠ display:none)
Here an article you can read on w3c - Labeling Controls or Web Aim - invisible content
As another user point it out, you can achieve what you're trying to do with Flex Layout here is A Complete Guide to Flexbox on CSS-tricks
There is also an unnecessary <br /> in your code
in yourcssyou also have 2 x color lines fir the same element.
both your inputs have the exact same code, always respect the DRY method (Don't Repeat Yourself) here is an old but efficient article about 7 Important Tips for Writing Better CSS on FreeCodeCamp
Here you can see what I've achieved
form{
display:flex;
}
button {
background-color: purple;
border: none;
color: white;
height: 30px;
}
.sr-only{
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
<form>
<label class="sr-only" for="topText">topText</label>
<input type="text" name="topText" placeholder="topText">
<label class="sr-only" for="bottomText">bottomText</label>
<input type="text" name="bottomText" placeholder="bottomText">
<button>Gen</button>
</form>
Add display:flex; and flex-wrap: wrap; to the parent class which is .form and avoid height css on inputs instead give paddings. Also avoid width unit in pixels instead add percentage and wrap it in a div which has width.
CSS
.form {
display: flex;
flex-wrap: wrap;
}
.form-button {
background-color: purple;
color: white;
margin: 20px 0px;
border: none;
color: white;
/* height: 30px; */ /*add padding instead of height*/
padding: 1rem;
}
.form input[name="topText"] {
margin: 20px 0px;
width: 100px; /*avoid width in pixels instead add percentage % unit*/
/* height: 30px; */ /*add padding instead of height*/
padding: 1rem;
}
.form input[name="bottomText"] {
margin: 20px 0px;
width: 100px; /*avoid width in pixels instead add percentage % unit*/
/* height: 30px; */ /*add padding instead of height*/
padding: 1rem;
}
JSX
return (
<div>
<form className="form">
<input
type="text"
name="topText"
value="{this.state.topText}"
placeholder="Top text"
onChange="{this.handleChange}"
/>
<input
type="text"
name="bottomText"
value="{this.state.bottomText}"
placeholder="Bottom text"
onChange="{this.handleChange}"
/>
<br />
<button className="form-button">Gen</button>
</form>
</div>
)
This can achieved without giving the form element a specific height and with 2 lines of css code only. Just give a display: flex; to .form and .form-button a height: inherit;.
(had to change 'className' to 'class' for html purpose in the snippet below)
.form-button {
background-color: purple;
color: white;
margin: 20px 0px;
border: none;
color: white;
height: inherit
}
.form input[name="topText"] {
margin: 20px 0px;
width: 100px;
height: 30px;
}
.form input[name="bottomText"] {
margin: 20px 0px;
width: 100px;
height: 30px;
}
.form {
display: flex;
}
<div>
<form class="form">
<input
type="text"
name="topText"
value={this.state.topText}
placeholder="Top text"
onChange={this.handleChange}
/>
<input
type="text"
name="bottomText"
value={this.state.bottomText}
placeholder="Bottom text"
onChange={this.handleChange}
/>
<br />
<button class="form-button">Gen</button>
</form>
</div>
I'm working with Reactjs in a page... like a diary.
At the end of the page, there is an img that I'm trying to set inside the page but because of the size, it goes out of the page... I try to modify it with Css, but still not working. Can you help me please?
This is how the page looks:
This is how the html code looks:
<div className="notes__content">
<input type="text" placeholder="Somer awesome title" className="notes__title-input" autoComplete="off"/>
<textarea placeholder="What happened today?" className="notes__textarea"></textarea>
<div className="notes__image">
<img src="https://images.pexels.com/photos/4173624/pexels-photo-4173624.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="imagen"/>
</div>
</div>
This is how I set the css:
.notes__main-content{
display: flex;
flex-direction: column;
height: 100%;
}
.notes__appbar{
align-items: center;
background-color: $primary;
color: white;
display: flex;
justify-content: space-between;
padding: 10px 20px 10px 20px;
}
.notes__content{
display: flex;
flex-direction: column;
height: 100%;
padding: 20px;
}
.notes__title-input, .notes__textarea{
border: none;
&:focus{
outline: none;
}
}
.notes__title-input{
color: $dark-grey;
font-size: 25px;
font-weight: 700;
margin-bottom: 10px;
}
.notes__textarea{
border: none;
color: $dark-grey;
font-size: 20px;
flex: 1 1 auto;
resize: none;
}
.notes__image{
box-shadow: 5px 5px $dark-grey;
height: 150px;
}
To be clear, what I want to do is to set the img to 150px so it can fit my page. Thank you for your help
You can add another div inside notes__image div. Lets call it notes__image__inner with a div wrapper.
<div className="notes__content">
<input type="text" placeholder="Somer awesome title" className="notes__title-input" autoComplete="off"/>
<textarea placeholder="What happened today?" className="notes__textarea"></textarea>
<div className="notes__image">
<div className="notes__inner__image">
<img src="https://images.pexels.com/photos/4173624/pexels-photo-4173624.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="imagen"/>
</div>
</div>
</div>
Update the notes__image and img CSS with this:
.notes__image {
box-shadow: 5px 5px $dark-grey;
height: 150px;
position: relative;
}
.notes__inner__image {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.notes__inner__image img {
width: 100%;
position: static;
height: 100%;
object-fit: cover;
}
Images don't magically shrink to fit their containers. You need to tell them to do so:
.notes__image img {
max-width: 100%; /* <-- here's your huckleberry */
}
You don't want to use the width property as that'll stretch images beyond their native size, and you don't want to set height as that will goof up aspect ratio.
Here I've converted className to class for demonstration purposes. If you view the fullscreen demo and shrink the window size you can see it in action.
.notes__main-content {
display: flex;
flex-direction: column;
height: 100%;
}
.notes__appbar {
align-items: center;
background-color: $primary;
color: white;
display: flex;
justify-content: space-between;
padding: 10px 20px 10px 20px;
}
.notes__content {
display: flex;
flex-direction: column;
height: 100%;
padding: 20px;
}
.notes__title-input,
.notes__textarea {
border: none;
&:focus {
outline: none;
}
}
.notes__title-input {
color: $dark-grey;
font-size: 25px;
font-weight: 700;
margin-bottom: 10px;
}
.notes__textarea {
border: none;
color: $dark-grey;
font-size: 20px;
flex: 1 1 auto;
resize: none;
}
.notes__image {
box-shadow: 5px 5px $dark-grey;
height: 150px;
}
.notes__image img {
max-width: 100%; /* <-- here's your huckleberry */
}
<div class="notes__content">
<input type="text" placeholder="Somer awesome title" class="notes__title-input" autoComplete="off" />
<textarea placeholder="What happened today?" class="notes__textarea"></textarea>
<div class="notes__image">
<img src="https://images.pexels.com/photos/4173624/pexels-photo-4173624.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="imagen" />
</div>
</div>
The className property is used in React. Is this a React application? If not, it needs to be revised to "class".
Also make sure your image does not overflow the bounds of the div. You can set strict width and height in the image by using the img tag's "width" and "height" properties. Or create a notes__image img declaration, like this:
.notes__image img {
width: 100%;
height: 100%;
}
I'm trying to put an image next to the form. I tried using inline-block and float method, but all suggestions I tried just messed up the contents. How can I put the image on the left side of the form?
My code is below:
contactContainer {
display: block;
text-align: center;
border-radius: 2px;
background-color: #f2f2f2;
padding: 20px;
}
.contactContainer form {
display: inline-block;
margin: 30px auto;
text-align: left;
}
.contactContainer img {
display: inline-block;
width: 500px;
}
.buttonHolder {
text-align: center;
}
input[type=Text], select, textarea {
width: 100%; /* Full width */
padding: 12px; /* Some padding */
border: 1px solid #ccc; /* Gray border */
border-radius: 2px; /* Rounded borders */
box-sizing: border-box; /* Make sure that padding and width stays in place */
margin-top: 6px; /* Add a top margin */
margin-bottom: 16px; /* Bottom margin */
resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}
input[type=Submit] {
background-color: gray;
color: white;
padding: 12px 20px;
border: none;
border-radius: 2px;
cursor: pointer;
align-items: center;
}
input[type=Submit]:hover {
background-color: white;
color: gray;
}
.twoContainer{
display: flex;
}
.twoContainer img {
width: 500px;
}
<div class="twoContainer">
<img src="images/tour2.jpg" alt="contact image">
<div class="contactContainer">
<form action="https://formspree.io/lyndall#lyndallwalker.com" method="POST">
<label for="name">Name</label>
<input type="text" id="name" name="name" placeholder="Jane Doe">
<label for="subject">Message</label>
<textarea id="subject" name="subject" placeholder=" " style="height:200px"></textarea>
<div class="buttonHolder">
<input type="submit" value="Submit">
</div>
</form>
</div>
</div>
Thank you in advance!
You need to add another div for the image but taking it out of
The contactContainer div. Then you'll wrap both of them (the image in a new div and the contact container div) in a third div (for example lets call it container). You want to remove the display properties that you have applied and you will give the container div this property
.container{
Display: flex;
}
If the image doesnt size ok you can try giving it a width of 50% and if not you can remove the img tag and apply it as an image background to the image Div.
.imagediv {
Width: 50%;
Background-image: url("yourimage.png");
}
Something like this should do it
You just need to set position: absolute to .contactContainer form and right:0 You can remove display: inline-block. It'll do the trick.
Here
HTML
<div class="twoContainer">
<img src="https://images.unsplash.com/photo-1581264296947-5a26af1aff18?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=600&q=60" alt="contact image" />
<div class="contactContainer">
<form
action="https://formspree.io/lyndall#lyndallwalker.com"
method="POST"
>
<label for="name">Name</label>
<input type="text" id="name" name="name" placeholder="Jane Doe" />
<label for="subject">Message</label>
<textarea
id="subject"
name="subject"
placeholder=" "
style="height: 200px"
></textarea>
<div class="buttonHolder">
<input type="submit" value="Submit" />
</div>
</form>
</div>
</div>
CSS
.contactContainer form {
position: absolute;
right: 0;
margin: 30px auto;
text-align: left;
margin-left: auto;
}
.contactContainer img {
display: inline-block;
width: 500px;
}
.buttonHolder {
text-align: center;
}
input[type="Text"],
select,
textarea {
width: 100%; /* Full width */
padding: 12px; /* Some padding */
border: 1px solid #ccc; /* Gray border */
border-radius: 2px; /* Rounded borders */
box-sizing: border-box; /* Make sure that padding and width stays in place */
margin-top: 6px; /* Add a top margin */
margin-bottom: 16px; /* Bottom margin */
resize: vertical; /* Allow the user to vertically resize the textarea (not horizontally) */
}
input[type="Submit"] {
background-color: gray;
color: white;
padding: 12px 20px;
border: none;
border-radius: 2px;
cursor: pointer;
align-items: center;
}
input[type="Submit"]:hover {
background-color: white;
color: gray;
}
.twoContainer {
display: flex;
flex-direction: row;
}
I have a header with a picture in it, and I'd like to have a navigation menu below that that matches the width as I narrow my window. Currently, my header and picture scale fine, but my menu buttons do not. At an early point, the window becomes too narrow and the menu buttons go onto a separate line. How can I make the menu match the image width? Below are the relevant code and an image to show the issue.
http://imgur.com/a/go2Of
HTML for header and menu:
<div id="wrapper1">
<div id="header">
<div id="logo">
<img src="Images/logolow.jpeg"/>
</picture>
</div>
<div id="login">
<fieldset>
<Legend>Login</Legend>
Username <input type="text" name="username"/>
Password <input type="password" name="password"/>
<input type="submit" value="Login">
<div id="register">
Not a member? Click here to register!
</div>
</fieldset>
</div>
</div>
<div id="sidebar">
Home Search All Profs Submit Contact
</div>
</div>
CSS:
#wrapper1{
width: 85%;
margin-left: auto;
margin-right: auto;
font-family: Helvetica, Verdana, Arial;
}
#header {
width: 100%;
position: relative;
}
#logo {
height: 450px;
width: 100%;
}
#logo img {
height: 100%;
width: 100%;
}
#login {
bottom: 0px;
right: 0px;
width: 15%;
color: white;
position: absolute;
}
#login a {
color: inherit
}
#register {
font-size: 14px;
}
#login fieldset {
display: block;
border: 2px solid white;
}
#sidebar {
margin: 14px;
width: 100%;
}
#sidebar a {
height: 40px;
padding-top: 10px;
padding-left: 6.55%;
padding-right: 6.55%;
text-align: center;
font-size: 12pt;
font-weight: bold;
background-color: black;
color: white;
border-style: outset;
border-width: 1px;
text-decoration: none;
}
Here is one solution.
Use percentage widths on your links that add up to 100%. Make sure not to use display: inline-block; on those links as extra whitespace is added to inline elements and would make their total size over 100% of the parent element.
header img {
display: block;
max-width: 100%;
}
nav {
margin-left: -5px;
margin-right: -5px;
}
nav a {
box-sizing: border-box;
display: block;
float: left;
width: calc( 25% - 10px );
margin: 0 5px;
padding: 0.5rem 1rem;
color: white;
text-align: center;
background-color: #999;
}
<header>
<img src="http://placehold.it/1600x400?text=hero-image">
<nav>
One
Two
Three
Four
</nav>
</header>
For larger screens you'll need:
A larger image, or
A larger image and/or switch max-width: 100%; to width: 100%; (careful, if image is stretched beyond it's native size it will pixelate), or
Restrain the max width of the navigation links.
I have a container that usually has a width of 400px. When the screen gets smaller, its width is reduced to 300px. These two values are static and don't change.
I have 3 buttons within this container. At the wider width, I'd like to have 2 side by side and the 3rd one on the line below. All of them are centered.
When the container is compressed, I'd like to have all the buttons stack on top of each other centered.
I can get it at the wide width but can't get it at the narrow width.
HTML:
<div id="varied-width">
<div class="pg-sp2 prompt-gate">Did you find what you were looking for?
<div class="pg-3-buttons">
<button class="prompt-gate-button" onclick="PromptGate_sp2(1)">Yes</button>
<button class="prompt-gate-button" onclick="PromptGate_sp2(0)">No, you suck</button>
</div>
<button class="prompt-gate-button" onclick="PromptGate_sp2(2)">No, I need help.</button>
</div>
</div>
CSS:
body {
width: 400px;
}
.prompt-gate {
margin-top: 25px;
margin-bottom: 15px;
background-color: #fefab1;
border: 1px solid #ffd532;
padding: 10px;
text-align: center;
}
.prompt-gate-button {
background-color: #0E80B4;
color: white;
font-size: 12px;
height: 30px;
width: 72px;
border: none;
margin: 15px 25px;
outline: none;
font-style: normal;
cursor: pointer;
}
.pg-3-buttons {
display: inline-block;
margin-top: 10px;
}
.pg-3-buttons .prompt-gate-button {
float: left;
}
.pg-sp2 button {
margin: 5px 15px;
width: 120px;
padding: 10px 0px;
}
.pg-sp2 > button {
}
.small-width {
width: 300px;
}
Fiddle: http://jsfiddle.net/je821vz9/10/
Used flex layout instead: http://jsfiddle.net/je821vz9/7/
Added this to .prompt-gate style and then cleaned up some of the conflicting HTML and CSS.
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
You could use a media query and have the viewport size decided on how to display the elements.
I added the following css to your body:
body {
max-width:400px;
min-width:300px;
}
We can then add a media query to adjust how the items are laid out:
#media (max-width: 300px) {
div.pg-3-buttons .prompt-gate-button {
display:block;
float:none;
}
}
See an updated version of your example and scale down the width of your browser to see the items pop in to place at 300px.
Somehow figured it out... removed floats and moved around the button HTML so that they were all in the same container.
http://jsfiddle.net/je821vz9/19/
<div id="varied-width">
<div class="pg-sp2 prompt-gate">Did you find what you were looking for?
<div class="pg-3-buttons">
<button class="prompt-gate-button" onclick="PromptGate_sp2(1)">Yes</button>
<button class="prompt-gate-button" onclick="PromptGate_sp2(0)">No, you suck</button>
<button class="prompt-gate-button" onclick="PromptGate_sp2(2)">No, I need help.</button>
</div>
</div>
</div>
<style>
body {
width: 400px;
}
.prompt-gate {
margin-top: 25px;
margin-bottom: 15px;
background-color: #fefab1;
border: 1px solid #ffd532;
padding: 10px;
text-align: center;
}
.prompt-gate-button {
background-color: #0E80B4;
color: white;
font-size: 12px;
height: 30px;
width: 72px;
border: none;
margin: 15px 25px;
outline: none;
font-style: normal;
cursor: pointer;
}
.pg-3-buttons {
margin-top: 10px;
}
.pg-sp2 button {
margin: 5px 15px;
width: 120px;
padding: 10px 0px;
}
</style>