Im working on a header for a website and i have a problem with search option.
I have include an input and a button tag.
Thoose have to have a vertical-align: middle; and should be side by side.
I've try something but it doesn't work.
Can somebody explain why and how i fix that?
HTML:
<div id="main_search">
<input id="main_search_input" type="text" placeholder="Suchen" />
<button id="search_button"><img src="search.png" width="20" style="border-left: 1px solid #D7D7D7; padding: 0 0 0 5px;" alt="" title="" /></button>
</div>
CSS:
#main_search {
float: right;
line-height: 60px;
margin: 0 50px 0 0;
}
#main_search_input {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
height: 20px;
line-height: 20px;
width: 200px;
vertical-align: middle;
padding: 5px 10px 5px 10px !important;
}
#search_button {
background-color: #FFF;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
height: 30px;
padding: 5px;
vertical-align: middle;
}
FIDDLE
input and button elements are inline elements, as such by separating them by a newline in your code, this is effectively interpreted and rendered as a whitespace character, leading to a gap appearing between them.
To solve this, add:
input, button{
margin:0;
}
Then remove the new line from between the elements in your HTML:
Demo Fiddle
<body>
<div id="main_search">
<input id="main_search_input" type="text" placeholder="Suchen" /><button id="search_button">
<img src="https://cdn1.iconfinder.com/data/icons/TWG_Retina_Icons/24/magnifier.png" width="20" style="border-left: 1px solid #D7D7D7; padding: 0 0 0 5px;" />
</button>
</div>
</body>
Alternatives
(also requiring setting no margins, per above)
Float the two elements so they push up against one another
Apply a font-size:0 to #main_search so the space has a width of zero
Related
I made some input boxes with 0 20px padding placeholders. However the text I type inside ignores padding and starts from the exact left side (from the left outline). Is there any possibility to position it inside the input field?
HTML:
<div class="input-border">
<label for="sign-login"><i class="fas fa-envelope"></i></label>
<input type="text" name="sign-login" placeholder="Enter your Email">
</div>
CSS:
input::placeholder {
font-size: 16px;
font-family: $font-base;
color: #979797;
padding: 0 20px;
height: 38px;
}
.input-border {
width: 340px;
margin: 10px 0;
border: 1px solid #DEDEDE;
border-radius: 0.5em;
}
I'd like the text I type to start from the same place as my placeholder is
in this case with 0 20px padding.
target the input text input[type=text]{padding:0 20px;}
input::placeholder{
font-size: 16px;
font-family: $font-base;
color: #979797;
padding: 0 20px;
height: 38px;}
.input-border
form .input-container .input-border {
width: 340px;
margin: 10px 0;
border: 1px solid #DEDEDE;
border-radius: 0.5em;}
input[type=text]{padding:0 20px;}
<div class="input-border">
<label for="sign-login"><i class="fas fa-envelope"></i></label>
<input type="text" name="sign-login" placeholder="Enter your Email">
</div>
Use this to add padding to the placeholder.
input::placeholder {
padding: 0 20px;
}
Use this to add padding to input text.
input {
padding: 0 20px;
}
CSS:
.center {
text-align: center;
margin: 0;
}
I am attempting to attach a div on the bottom on my image with no spaces. However, the following code does not do what I ask of it. In addition to this, when hovering anywhere along the width of my div h2, the click button occurs, to indicate it is clickable in this blank space. I feel I have attempted everything to attach the black div and the image together, and make them both clickable without glitching or bugging with only one anchor tag. If you can help me, I would be extremely greatful.
Here is my current HTML code:
<div style="#">
<a style="max-width: 280px;" href="#">
<img src="../Images/7.JPG" style="height: 200px; width: 280px; border-radius: 10px 10px 0 0;">
<div style="background-color: black; width: 280px; height: 30px; border-radius: 0 0 10px 10px;">
<h2 style="color: white; font-weight: bold; text-align: center; padding-top: 2px;">Bees</h2>
</div>
</a>
</div>
Thanks in advance!
Use this rule, it is caused by initial margin of h2
<div style="max-width: 280px; overflow:hidden;" style="#">
<a style="max-width: 280px;" href="#">
<img src="../Images/7.JPG" style="height: 200px; width: 280px; border-radius: 10px 10px 0 0; display: block;">
<div style="background-color: black; width: 280px; height: 30px; border-radius: 0 0 10px 10px;">
<h2 style="color: white; margin:0px; font-weight: bold; text-align: center; padding-top: 2px;">Bees</h2>
</div>
</a>
</div>
here is a fiddle for you
There are a few things at play here.
Your <h2> is overflowing trough the parent because of collapsible margins. Set the margin to 0 to fix it.
Either the <a> or the main <div> needs display:inline-block to not go 100% width.
Finally, don't use inline styles. Use <style> tag or style.css and add some classes and IDs.
a{
max-width: 280px;
display: inline-block;
}
img{
height: 200px;
width: 280px;
border-radius: 10px 10px 0 0;
display: block;
}
h2{
color: white;
font-weight: bold;
text-align: center;
padding-top: 2px;
margin: 0;
}
a div{
background-color: black;
width: 280px;
height: 30px;
border-radius: 0 0 10px 10px;
}
<div>
<a href="#">
<img src="https://placeimg.com/280/200/any">
<div>
<h2>Bees</h2>
</div>
</a>
</div>
I´m trying to build a search element together with a button, something like:
Except that I need to change the background color of the search icon (blue, gray, whatever...).
Here is my code so far and the result:
.searchWrap {
position: absolute;
border: thin solid #f2f2f2;
border-radius: 5px;
top: 5px;
left: 5px;
}
.searchTerm {
float: left;
border-style: none;
padding: 5px;
height: 20px;
outline: none;
}
.searchButton {
right: -50px;
width: 30px;
height: 20px;
border: 1px solid #f2f2f2;
background: #f2f2f2;
border-radius: 5px;
text-align: center;
color: #ccc;
vertical-align: middle;
cursor: pointer;
}
<div className="searchWrap">
<input type="text" className="searchTerm" placeholder="Search..." />
<button type="submit" className="searchButton">
<Icon name='search' />
</button>
</div>
I'm using React. Here is my result so far:
The external border is rounded, ok, that's what I need, but the separation between the searchTerm and the searchButton is also rounded, and I need a plain separator here, something like:
I'm using font awesome here, so the code isn't spaced like your screenshot, but looks like you have your own library you're using with react for that icon and your spacing is fine.
All you need to do is use border-radius: 0 5px 5px 0 to keep the left side borders from rounding, and assign a border-left on the .searchButton to draw the vertical line. I changed the border color so it's more prominent, but you can use whatever color you want.
*{margin:0;padding:0;}
.searchWrap {
position: absolute;
top: 5px;
left: 5px;
}
.searchTerm {
float: left;
border-style: none;
padding: 5px;
height: 20px;
outline: none;
margin-left: 3px;
border: thin solid #ddd;
border-width: thin 0 thin thin;
border-radius: 5px 0 0 5px;
}
.searchButton {
right: -50px;
width: 30px;
height: 32px;
border: 1px solid #f2f2f2;
background: #f2f2f2;
border-radius: 0 5px 5px 0;
text-align: center;
color: #ccc;
vertical-align: middle;
cursor: pointer;
border: thin solid #ddd;
}
.searchTerm:focus, .searchTerm:focus + .searchButton {
border-color: red;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="searchWrap">
<input type="text" class="searchTerm" placeholder="Search..." />
<button type="submit" class="searchButton">
<i class="fa fa-search"></i>
</button>
</div>
Try this for the search button css instead of border-radius
.searchButton {
...
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
...
}
Can you use bootstrap? Relatively simple, and once you have it, modify the css the way you want it.
https://v4-alpha.getbootstrap.com/components/input-group/#button-addons
Bootstrap is strongly recommended for this. See http://getbootstrap.com/components/#input-groups. Coupled with FontAwesome, you could do something like this:
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="fa fa-search"></span>
<span class="sr-only">Search</span>
</button>
</span>
</div>
Can someone explain why the element below the floated element gets displaced as if it had a padding of a width of the floated element?
HTML and CSS:
div.filter { border: 1px solid #aaaaaa; padding: 0 10px 10px 10px; width: 300px;}
div.filterTitle { float:left; padding: 5px; margin:-12px 0 0 10px; background:#fff; }
div.filter label { display:inline-block; width: 120px; font-weight: bold; margin-top: 15px;}
div.filter input[type="text"] { width: 146px; }
<div class="filter">
<div class="filterTitle">Filters</div>
<form id="filterForm" method="post" action="">
<div>
<label for="dateFrom" class="optional">Date</label>
<input type="text" name="dateFrom" id="dateFrom" value="">
</div>
</form>
</div>
FIDDLE: jsFiddle
It's not clear exactly what you are asking but based on comments I think this is just a case of clearing the float.
/* filters menu */
div.filter {
border: 1px solid #aaaaaa;
padding: 0 10px 10px 10px;
width: 300px;
}
div.filterTitle {
float:left;
padding: 5px;
margin:-12px 0 0 10px;
background:#fff;
}
form {
clear: both;
}
div.filter label {
display:inline-block;
width: 120px;
font-weight: bold;
margin-top: 15px;
}
div.filter input[type="text"] {
width: 146px;
}
<div class="filter">
<div class="filterTitle">Filters</div>
<form id="filterForm" method="post" action="">
<div>
<label for="dateFrom" class="optional">Date</label>
<input type="text" name="dateFrom" id="dateFrom" value=""/>
</div>
</form>
</div>
You might also want to look into the fieldset and legend elements which would seem to be more inline with the look you seem to be aiming for.
Fieldset # MDN
Quick JSfiddle Demo
I am trying to place a border around a div and I am unable to do so effectively.
Main Issues:
The middle line that separates the border into two sections will not extend the entire length of the border.
The background color (.insiderbox class) for the top section is out of alignment.
I want the border to hug the div in a leaner fashion.
.Box {
border: 1px solid #000;
-webkit-border-top-left-radius: 26px;
-webkit-border-top-right-radius: 2px;
-moz-border-radius-topleft: 2px;
-moz-border-radius-topright: 2px;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
width: 325px;
font-size: 12pt;
/* or whatever */
padding: 4px;
color: #fff;
margin: 0 0 0 0px;
}
.insiderBox {
background-color: #e2e2e2;
}
<div id="ValidationPanel" Visible="false" runat="server" class="Box">
<div style="border-bottom:1px solid black; height: 79px; width: 326px;" class="insiderBox">
<h3 style="margin-bottom:20px; width: 319px;">
Enter ATM Cash-In Ticket Amount
</h3>
</div>
<div>
<asp:TextBox ID="TxtValidateTotals" runat="server" length="50" title="Please Enter Totals Here" />
</div>
<div>
<asp:Button runat="server" ID="btnValidationPanelValidateTotals" Text="Validate Totals" CausesValidation="true" OnClick="btnValidationPanelValidateTotals_Click" width="200" />
asdasdasdasdasd
</div>
</div>
fiddle
Your .Box div has padding around it, remove the padding and you will get your desired result.
.Box {
padding: 0;
}
Another thing would be to set the background on the div with the border, instead of the div inside. This is probably a better option.
.Box {
background: #E2E2E2;
}
.Box {
border: 1px solid #000;
-webkit-border-top-left-radius: 26px;
-webkit-border-top-right-radius: 2px;
-moz-border-radius-topleft: 2px;
-moz-border-radius-topright: 2px;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
width: 325px;
font-size: 12pt;
/* or whatever */
padding: 0px;
color: #fff;
margin: 0 0 0 0px;
}
.insiderBox {
background-color: #e2e2e2;
}
h3 {
margin: 0
}
<div id="ValidationPanel" Visible="false" runat="server" class="Box">
<div style="border-bottom:1px solid black; height: 79px;" class="insiderBox">
<h3 style="margin-bottom:20px; width: 319px;">
Enter ATM Cash-In Ticket Amount
</h3>
</div>
<div>
<asp:TextBox ID="TxtValidateTotals" runat="server" length="50" title="Please Enter Totals Here" />
</div>
<div>
<asp:Button runat="server" ID="btnValidationPanelValidateTotals" Text="Validate Totals" CausesValidation="true" OnClick="btnValidationPanelValidateTotals_Click" width="200" />
asdasdasdasdasd
</div>
</div>