I want to make the search bar longer and higher. Lining up with the end of the body (width) and menu (heighth). I looked at other tutorials and questions but I am missing something.
CSS
form input[type="text"] {
height: 45px;
width: 250px;
margin: 0;
padding: 0;
font-size: 15px;
border: 1px solid #CCCCCC;
float: left;
}
HTML
<form name="catsearchform60238" method="post" action="/Default.aspx?SiteSearchID=2433&PageID=/search.html">
<div class="cat_textbox">
<input type="text" value="text field"></input>
<input type="submit" value="Submit"></input>
</form>
Using display: block; is probably what you are looking for.
form input[type="text"] {
display: block;
height: 45px;
width: 250px;
margin: 0;
padding: 0;
font-size: 15px;
border: 1px solid #CCCCCC;
float: left;
}
Related
I'd like to know the code in CSS so my two different input types be equal in every monitor.
So I have 1 big input type, and below 7 inputs that should cover the same width. Its all great in my 17.3inch monitor with fullhd. But in anothers, the seven inputs surpass the first one.
Here's the code:
input[type="text"] {
font: 95% oxygen, sans-serif;
border:2px solid rgb();
width: 7%;
height: 2%;
padding: 0px;
margin-right: 0%;
padding: 10px;
background: #ffffff;
}
input[type="text1"] {
font: 95% oxygen, sans-serif;
border:2px solid rgba();
width: 50%;
height: 2%;
padding: 2px;
margin-right: 0%;
margin-left: 0%;
padding: 10px;
background: #ffffff;
Please help me, I saw every forum but I cant get it.When its wrong, it looks like this
I think as per your scenario this solution should work:
// JavaScript to toggle text placeholder for small inputs
$('.smallText').on('input', function () {
if ($(this).val().length) {
$(this).parent().addClass('empty');
} else {
$(this).parent().removeClass('empty');
}
});
.clearfix::before, .clearfix::after {
content: '';
display: table;
clear: both;
}
.container {
padding: 10px;
}
.largeText, .smallText {
padding: 5px;
border: 1px solid #999;
font-size: 16px;
margin-bottom: 5px;
box-sizing: border-box;
outline: none;
}
.largeText {
width: 100%;
}
.textWrapper {
box-sizing: border-box;
position: relative;
float: left;
width: 20%;
}
.textWrapper+.textWrapper {
padding-left: 5px;
}
.textWrapper::before {
content: 'small text...';
display: block;
padding: 5px;
border: 1px solid #999;
color: #777;
font-family: Arial;
}
.textWrapper.empty::before {
color: transparent;
}
.smallText {
position: absolute;
top: 0;
width: 100%;
padding: 5px 10px 5px 5px;
border: 0;
background-color: transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<input type="text" placeholder="large text..." class="largeText" />
<div class="inner-container clearfix">
<div class="textWrapper"><input type="text" class="smallText" /></div>
<div class="textWrapper"><input type="text" class="smallText" /></div>
<div class="textWrapper"><input type="text" class="smallText" /></div>
<div class="textWrapper"><input type="text" class="smallText" /></div>
<div class="textWrapper"><input type="text" class="smallText" /></div>
</div>
</div>
Recently I try to fit textbox for publishing post. Main problem - textbox doesn't want to fit properly, even if it obviously should. Here is the image:
and here is the JSFiddle file I prepared for this question:
https://jsfiddle.net/Ch3shireDev/u0j5rgud/4/
It looks like a textbox is naturally expanded to the right.
body {
margin: 0;
height: 100%;
width: 100%;
}
.post {
display: flex;
background-color: lightgrey;
border-radius: 10px;
/* width: auto; */
height: 300px;
padding: 5px 5% 5px 5%;
margin: 20px;
box-shadow: #888888 1px 1px 1px 1px;
}
.background {
margin: 5px;
border: 1px solid;
padding: 0;
}
textarea {
resize: none;
width: 80%;
margin: 10px;
}
.titlebox {
height: 20px;
}
.message {
height: 100px;
}
.background {
width: 100%;
padding: 10px;
}
textarea {
margin: 0;
height: auto;
width: 100%;
}
.input {
background-color: red;
padding: 5px;
}
.buttons {
float: right;
padding-top: 5px;
padding-left: 5px;
margin-bottom: 0;
margin-right: 0;
padding-right: 0;
}
<div class=post>
<div class=background>
<div class=title>
<h3>
Publish post
</h3>
</div>
<div class=input>
<form>
<textarea class=message cols=50></textarea>
</form>
</div>
<div class=buttons>
<input type="submit" value="Preview" />
<input type="submit" value="Send" />
</div>
</div>
</div>
What should I do to get textbox fitting right?
For your textarea, just add box-sizing: border-box;.
textarea{
resize:none;
width:80%;
margin: 10px;
box-sizing: border-box;
}
https://jsfiddle.net/u0j5rgud/6/
border-box: The width and height properties (and min/max properties) includes content, padding and border
You have 2 textarea rules in your css, try deleting the one with the wodth set to 100%
Remove the padding from your textarea
textarea {
padding: 0;
}
I'm trying to create a header bar at the top of a page on my website and I'm having trouble with the layout. Below is my desired result:
goal http://ambiguities.ca/images/goal.png
Here is the html:
<div id="page_wrapper">
<div id="header_wrapper">
<div id="banner_wrapper">
<div id="header_banner">
<div class="header_format">Site Name</div>
</div>
</div>
<div id="user_management">
<div class="header_format">Login / Register</div>
</div>
<div id="user_search">
<form method="post" action="?search">
<input id="search_box" type="search" name="search" autocomplete="off" placeholder="Search..." />
</form>
</div>
</div>
</div>
and the css:
body{
margin:0;
padding:0;
}
#page_wrapper {
width: 100%;
min-width: 800px;
}
#header_wrapper {
width: 100%;
height: 30px;
background-color: #E6E6E6;
border-bottom-color: #D8D8D8;
border-bottom-style: solid;
border-bottom-width: 1px;
}
#banner_wrapper {
float: left;
width: 100%;
}
#header_banner {
margin: 0 180px 0 160px;
}
#user_management{
float: left;
height: 30px;
width: 160px;
margin-left: -100%;
border-right-color: #D8D8D8;
border-right-style: solid;
border-right-width: 1px;
}
#user_search {
padding-top: 2px;
float: left;
height: 30px;
width: 180px;
margin-left: -181px;
border-left-color: #D8D8D8;
border-left-style: solid;
border-left-width: 1px;
}
#search_box {
height: 26px;
width: 176px;
margin: 0;
}
.header_format {
font-family: Verdana;
font-size: 10px;
text-align: center;
line-height: 30px;
vertical-align: middle;
}
I understand that this might not be the most efficient code. My real problem lies in the fact that in the user_search div when a padding of 2 at the top is added the search box becomes unusable by mouse click. If anyone can help me by pointing me in the right direction or showing me a better way of doing this it would be much appreciated.
First, remove the 'padding-top' value from '#user_search', use the following CSS:
#user_search {
float: left;
height: 30px;
width: 180px;
margin-left: -181px;
border: 1px solid #D8D8D8;
}
Second, add a 'margin-top' value to '#search_box' and that should do the trick.
#search_box {
height: 26px;
width: 176px;
margin: 5px 0 0 0;
}
Demo: http://jsfiddle.net/8Frnq/
I am currently working with an input field that will do search for my page. But I am undergoing some css styling issues. I have placed inside the input field the submit button which is an image of a magnifying glass. the problem is that the button does not stay in its place through cross browsers. It looks ok in firefox but others browsers it looks bad.
How can i get the submit button to stay inside the input field at all times? EXAMPLE
thank you!
CSS related to object
<style>
.search-input {
padding: 0 5px 0 22px;
border: 2px solid #DADADA;
height: 30px;
font-size: 12px;
line-height: 30px;
border-radius: 25px;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
background: #FFF; /* old browsers */
}
.search-input li {
list-style: none outside none;
}
.search-submit {
width: 13px;
height: 13px;
border: none;
background: url(http://webprolearner2346.zxq.net/css-test2/images/mag-glass.png) no-repeat;
display: block;
position: absolute;
right: 170px;
text-indent: -9999em;
top: 60px;
}
.search{
float: right;
margin-right: 30px;
margin-top: 35px;
}
</style>
HTML
<div id="header">
<div class="search"><input type="text" class="search-input" name="search" value="Search"/><input type="submit" class="search-submit" /></div>
</div>
Use this much better approach I came across. It works well and tested with web developer tools. Cheers#!!!
HTML
<div id="header">
<form id="search">
<input id="searchField" type="text" />
<input id="searchSubmit" type="submit" value="" />
</form>
</div>
CSS
#search{
float: right;
margin-right: 30px;
margin-top: 35px;
}
#searchField{
border: 1px solid #FFEDE8;
float: left;
height: 20px;
padding-right: 25px;
width: 140px;}
#searchSubmit{
background: url("http://webprolearner2346.zxq.net/css-test2/images/mag-glass.png") no-repeat scroll 0 0 transparent;
border: medium none;
cursor: pointer;
height: 20px;
margin-left: -22px;
margin-top: 5px;
width: 20px;
}
Height of submit field is slightly smaller than the text input field. How do I fix it?
HTML code:
<form name="searchBox" id="searchBox" action="#" method="post"> <input type="text" name="query" id="query"/>
<input type="submit" name="sub" id="sub" value="Search"/> </form>
CSS code:
form input[type="text"] {
height: 28px;
width: 300px;
margin: 0;
padding: 0;
font-size: 15px;
border: 1px solid #CCCCCC;
}
form input[type="submit"] {
height: 28px;
width: 80px;
margin: 0;
padding: 0;
font-size: 15px;
background-color: #FFFFFF;
border: 1px solid #CCCCCC;
}
you can increase or decrease height of the text/submit fields to align properly.
Example http://jsfiddle.net/2DdA3/