Please see this jsfiddle
HTML:
<body>
<header>
<div id="top-header">
<div id="search-div">
<form method="get" name="search">
<input value="Search" id="search-button" type="submit">
<input name="term" id="search-box" type="search">
<div id="search-options">
<ul>
<li id="search-option-icon">0</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<input name="search-type" id="search-type" type="hidden">
</div>
</form>
</div>
</div>
<div id="bottom-header">something here</div>
</header>
</body>
CSS:
*{
margin:0;
padding:0;
font-size:100%;
border:0 none;
}
body{
direction: rtl;
}
header{
position:relative;
width:100%;
height: 80px;
}
/*
--------------------------------------------------------
| header
--------------------------------------------------------
*/
header > div{
width: 100%;
position:relative;
position: relative;
}
#top-header{
background: #9600ee;
height: 52px;
}
#bottom-header{
background: white;
height: 29px;
border-bottom: 1px solid #d5d5d5;
box-shadow:0 1px 1px #e0e0e0;
}
#img-logo{
display: inline-block;
}
/*
--------------------------------------------------------
| header > search-div
--------------------------------------------------------
*/
#search-div{
width:432px;
position: absolute;
top:8px;
height: 36px;
left:0;
right:0;
margin:auto;
z-index: 3;
}
#search-options{
height: 36px;
width: 49px;
background: #FFFFFF;
background: linear-gradient(#FFFFFF,#e6e6e6);
text-align: center;
display: inline-block;
vertical-align: middle;
cursor: pointer;
left:0;
}
#search-options > ul > li{
display: none;
}
#search-option-icon{
display: block !important;
}
#search-options:hover > ul > li{
width: 49px;
background: red;
display: block;
}
#search-box{
display: inline-block;
height: 36px;
width: 325px;
right:49px;
padding:0 5px;
border-right:1px solid #9600ee;
border-left: 1px solid #d1d1d1;
}
#search-button{
height: 100%;
width: 48px;
background: #FFFFFF;
background: linear-gradient(#FFFFFF,#e6e6e6);
border-radius: 0 2px 2px 0;
}
I am going to create a page that its direction is Right to Left. I don't know why Firefox is showing a different result then other browsers?
What I see in Chrome:
What Firefox shows(Firefox 37):
What is the problem? And why is Firefox (or my Firefox) showing a different result?
Input elements are rendered depending on the browsers and OS with a different appearance. Chrome seems to apply box-sizing: border-box; to an input element as soon as you change the type to search, but Firefox doesn't do that (currently I would say that Firefox is right about that but I need to check this in the specs).
Firefox does not change the box-sizing for those elements and because the default box-sizing is content-box, the complete outer-width is width + padding + border (for more details you can look here CSS-Tricks: Box Sizing). As of that your #search-box in Firefox does not have an outer-width of 325px.
If you want to have better control about the outer-width of the elements you need to use border-box for box-sizing. You can change the box-sizing for your whole page using :
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
Code from site: Paul Irish: * { Box-sizing: Border-box } FTW
Updated jsfiddle using border-box.
Your #search-div is too narrow, making the elements crammed together. Your search divs are also out of order. I would suggest arranging them in the order of search-options, search-box, search-button, then adding float: left; to each of their styles as well as some margin-left: 20px; so they aren't right next to each other.
Your search-box also has a small width cutting off letters.
See this jsfiddle: http://jsfiddle.net/3qzb7q0d/1/
Something like:
#search-options {
display: inline-block;
float: left;
margin-left: 20px;
// whatever else
}
Add that to each search portion.
Increase the width of #search-button
Remove the width from #search-div
Related
I've got multiple textareas. One underneath the other. There should not be any spacing between them, since I explicitly set their margin to 0.
However on chrome, there is a rather larger gap, on firefox it's small, but still there, and on IE it actually behaves as intended.
body{
background-color: #0087B3;
font-family: Helvetica, sans-serif;
}
.editor {
width: 460px;
display: inline-block;
}
.panel{
text-align: left;
margin: 10px;
padding: 12px;
background-color: rgba(255,255,255,0.1);
}
.panel .toolbar{
background-color: #007da6;
height: 40px;
}
.panel .lines{
height: 400px;
background-color: #ACE1F2;
}
.panel .lines textarea{
resize: none;
font-family: inherit;
font-size: 12pt;
padding: 8px;
box-sizing: border-box;
width: 100%;
height: auto;
overflow: hidden;
border: 0 none white;
outline: none;
margin: 0;
}
<div class="editor">
<div class="panel" id="panel">
<div class="toolbar"></div>
<div class="lines">
<textarea rows="1">There should be no space</textarea>
<textarea rows="1">between these textareas</textarea>
<textarea rows="1">however in chrome & firefox there is</textarea>
<textarea rows="1">except internet explorer</textarea>
</div>
</div>
</div>
JSFiddle to play around
Does anyone have a clue?
Thank you in advance!
You need to add display: block; to your textarea styles
.panel .lines textarea {
resize: none;
font-family: inherit;
font-size: 12pt;
padding: 8px;
box-sizing: border-box;
width: 100%;
height: auto;
overflow: hidden;
border: 0 none white;
outline: none;
margin: 0;
display: block;
}
Please check the updated fiddle here : https://jsfiddle.net/fu3ytLpt/4/
The only fix was to assign the display to match the box sizing.
display: -webkit-box;
I am having some trouble with my css, I have a content id and then inside that I have a class that is just padding. When inside the padding class, I have a textarea and a submit button. By default, the submit button is on the left:
But when I go to align the submit button to either the left or right of the content, it will go ther ebut it will also go outside of the content, like it's not part of it anymore:
These are my html and css codes
html:
<div id="content">
<div class="content-padding">
<textarea class="content-post" placeholder="Update your status..."></textarea>
<input type="submit" class="content-submit">
</div>
</div>
css:
#content {
width: 60%;
background: #dddddd;
color: #000;
margin: 0 auto;
border-radius: 4px;
margin-bottom: 10px;
height: auto;
}
.content-padding {
padding: 10px;
}
.content-post {
width: 97.5%;
height: 80px;
border: 0px;
background: #fff;
resize: none;
padding: 10px;
outline: none;
margin-bottom: 5px;
border-radius: 4px;
}
.content-submit {
background: #005ddb;
width: 70px;
height: 30px;
border: 0px;
border-radius: 4px;
color: #fff;
outline: none;
cursor: pointer;
float: right;
}
I hope someone cal help me fix this as soon as possible, thanks!
You need to trigger the layout of .content-padding or add a clearing element.
.content-padding {
padding: 10px;
overflow:hidden ; /* minds inside and outside floatting elements, fine if no size given */
}
or a generated clearing element.
.content-padding:after {
content:'';
display:block; /* or whatever else than inline */
clear:both;
}
Learn more about floatting elements : http://css-tricks.com/all-about-floats/
add overflow: auto under #content in your CSS.
Another option would be to add another div in your markup right after the submit button.
<div class="clear"></div>
In your CSS you would then add the following.
.clear{
clear: both;
}
fiddle
You can create a div with clear:both style after the button:
<div id="content">
<div class="content-padding">
<textarea class="content-post" placeholder="Update your status..."></textarea>
<input type="submit" class="content-submit">
<div style="clear:both"></div>
</div>
</div>
The float attribute makes the height of element zero, then the parent div do not recognize the height of element.
Try this:
#content:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
From http://css-tricks.com/snippets/css/clear-fix/.
The problem arises because you do not have a static height set for #content. If you set a static height for content ( padding + textArea + submitButton ) and set that as the height for #content, then it will look allow the room for everything.
#content {
width: 60%;
background: #dddddd;
color: #000;
margin: 0 auto;
border-radius: 4px;
margin-bottom: 10px;
height: 140px; //Play with this number to get it perfect.
}
At the top level of my website layout are 4 div tags.
The first one is a full width header section, with css:
#header {
margin-top: 0px;
height: 70px;
border: 4px double rgb(255,255,255);
border-radius: 20px;
background: rgb(88,150,183) no-repeat fixed left top;
padding: 0px;
}
At the bottom is a full width footer:
#footer {
clear: both;
margin: 0px;
color:#cdcdcd;
padding: 10px;
text-align: center;
border: 4px double rgb(88,150,183);
border-radius: 20px;
}
On the left is my main menu section:
#categories {
float:left;
width:150px;
border: 4px double rgb(88,150,183);
border-radius: 20px;
}
All of those 3 elements work fine. They're in the right place and that doesn't change whatever screen resolution the user has on their monitor, or whether they view it on not maximum screen size.
My problem is with the main element of the page - where all the interesting stuff is. It's directly to the right of the menu div - or rather, it should be. My css is:
#main {
float:right;
min-height: 440px;
width: 80%;
margin-bottom: 20px;
padding:20px;
border: 4px double rgb(88,150,183);
border-radius: 20px;
}
width 80% works OK for most of my users, but for those with less resolution, the main element shifts below the menu, which is ghastly.
What I would ideally like is for the width set in the css #main to be something like (100% - 170px), thus leaving a nice margin between the menu and the main bit at all times and never pushing it below the menu. However, css standards don't fulfil that desire yet!
Could someone suggest how I amend my css to give me a nice clean page that's clean for all my users? Or do I need to go back to setting out my page using tables?
Using CSS3 flex
* { box-sizing: border-box; margin: 0; }
#parent{
display: flex;
}
#aside{
width: 170px; /* You, be fixed to 170 */
background: #1CEA6E;
padding: 24px;
}
#main{
flex: 1; /* You... fill the remaining space */
background: #C0FFEE;
padding: 24px;
}
<div id="parent">
<div id="aside">Aside</div>
<div id="main">Main</div>
</div>
Using CSS3 calc
width: calc(100% - 170px);
Example:
* { box-sizing: border-box; margin: 0; }
#aside {
background: #1CEA6E;
width: 170px;
float: left;
padding: 24px;
}
#main {
background: #C0FFEE;
width: calc(100% - 170px);
float: left;
padding: 24px;
}
<div id="aside">Aside</div>
<div id="main">Main</div>
Using float: left; and overflow
* { box-sizing: border-box; margin: 0; }
#aside{
width: 170px; /* You, be fixed to 170 */
float: left; /* and floated to the left */
padding: 24px;
background: #1CEA6E;
}
#main {
background: #C0FFEE;
padding: 24px;
overflow: auto; /* don't collapse spaces */
/* or you could use a .clearfix class (Google for it) */
}
<div id="aside">Aside</div>
<div id="main">Main</div>
Using style display: table;
* { box-sizing: border-box; margin: 0; }
#parent{
display: table;
border-collapse: collapse;
width: 100%;
}
#parent > div {
display: table-cell;
}
#aside{
width: 170px; /* You, be fixed to 170 */
background: #1CEA6E;
padding: 24px;
}
#main{
background: #C0FFEE;
padding: 24px;
}
<div id="parent">
<div id="aside">Aside</div>
<div id="main">Main</div>
</div>
Is this what you are looking for? You don't need any css3
Dont need any css3
.wrapper {
width: 800px;
height: 800px;
background-color: blue;
}
.content {
width: auto;
height: 100%;
background-color: yellow;
}
.menu {
width: 170px;
height: 100%;
float: left;
background-color: red;
}
<div class="wrapper">
<div class="menu">Menu</div>
<div class="content">
Aside
</div>
</div>
You can use 'calc' function supported by all modern browsers and IE9+, or switch to flexbox (supported by IE11+)
See this pen: https://codepen.io/neutrico/pen/MyXmxa
width: calc(100% - 170px);
Keep in mind that all borders matter unless you set 'box-sizing' to 'border-box' (or just remove these borders and apply them on child elements).
I am trying to create a custom div with input text and two buttons inside it as shown below.
But when i resize the screen it becomes like this
Is there a way to avoid the two buttons to come down ? Instead it should remain inside the original div.
Here's the code i tried:
.searchBar {
background: #DDDDDD;
width:100%;
height:50px;
padding: 10px;
position: relative;
}
.search_field {
display: inline-block;
border-radius:4px ;
background: #FFFFFF;
width: 70%;height: 32px;
position: relative;
left: 60px;
overflow: inherit;
}
.search_field input {
width: 89%;
padding: 0;
border-top-left-radius: 4px;
padding-left: 10px;
padding-top: 5px;
padding-bottom: 5px;
border:1px inset red;
}
.search_field input:focus {
outline-color: transparent;
outline-style: none;
}
.search_field button {
border: none;
background: none;
}
<div id="searchBar" class="searchBar">
<div class="search_field">
<input type="text" id="searchInput" placeholder="Search" oninput="showSearchButtons()"/>
<button id="btn1" hidden="true" onclick="alert()"><img src="assets/images/search.png"></button>
<button id="btn2" hidden="true" onclick="alert()"><img src="assets/images/saveBtn.png"></button>
</div>
</div>
Any help is appreciated. Thanks
You can use calc to calculate the width of your input element relative to your buttons:
width: calc(100% - 100px);
Just make sure the width of your buttons is taken of the 100%. In SASS it could look like this:
$buttons: 50px;
width: calc(100% - #{$buttons * 2});
Below is a simplified implementation. I still have the % values as a fallback for older browsers - but that's more a habit than necessity as every major browser supports calc, even IE9 and onward.
input, button {
float: left;
height: 50px;
display: block;
box-sizing: border-box;
margin: 0;
padding: 0;
border: none;
}
input {
width: 70%;
width: calc(100% - 100px);
padding: 10px;
}
button {
/* Note that this width is equal to 100%
/* minus the percentage width of the input
/* divided by the amount of buttons. */
width: 15%;
width: 50px;
line-height: 50px;
}
/* This rule is just to make sure your images don't decide the buttons width */
button img {
max-width: 100%;
display: inline-block;
}
<input type='text' placeholder='search' />
<button><img src="http://placehold.it/50x50" /></button>
<button><img src="http://placehold.it/50x50" /></button>
Please try this instead of your styles:
.searchBar{
background: #DDDDDD;
width:100%;
height:50px;
padding: 10px;
position: relative;
}
.search_field {
border-radius:4px ;
background: #FFFFFF;
position: relative;
padding-right: 100px; /* You can change as button width */
}
.search_field input {
width: 100%;
padding: 0;
padding-left: 10px;
padding-top: 5px;
padding-bottom: 5px;
border: solid 1px #FF0000;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box;
}
.search_field button {
border: none;
background: none;
position: absolute;
top: 0;
}
.search_field button#btn1 {
right: 50px; /* Change as your requirement */
}
.search_field button#btn2 {
right: 0; /* Change as your requirement */
}
I want to add some space to the right of an <input type="text" /> so that there's some empty space on the right of the field.
So, instead of , I'd get .
So, same behavior just some empty space to the right.
I've tried using padding-right, but that doesn't seem to do anything.
Is there a way to do this (or fake it)?
You can provide padding to an input like this:
HTML:
<input type=text id=firstname />
CSS:
input {
width: 250px;
padding: 5px;
}
however I would also add:
input {
width: 250px;
padding: 5px;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
Box sizing makes the input width stay at 250px rather than increase to 260px due to the padding.
For reference.
padding-right works for me in Firefox/Chrome on Windows but not in IE. Welcome to the wonderful world of IE standards non-compliance.
See: http://jsfiddle.net/SfPju/466/
HTML
<input type="text" class="foo" value="abcdefghijklmnopqrstuvwxyz"/>
CSS
.foo
{
padding-right: 20px;
}
padding-right should work. Example linked.
http://jsfiddle.net/8Ged8/
HTML
<div class="FieldElement"><input /></div>
<div class="searchIcon"><input type="submit" /></div>
For Other Browsers:
.FieldElement input {
width: 413px;
border:1px solid #ccc;
padding: 0 2.5em 0 0.5em;
}
.searchIcon
{
background: url(searchicon-image-path) no-repeat;
width: 17px;
height: 17px;
text-indent: -999em;
display: inline-block;
left: 432px;
top: 9px;
}
For IE:
.FieldElement input {
width: 380px;
border:0;
}
.FieldElement {
border:1px solid #ccc;
width: 455px;
}
.searchIcon
{
background: url(searchicon-image-path) no-repeat;
width: 17px;
height: 17px;
text-indent: -999em;
display: inline-block;
left: 432px;
top: 9px;
}
you can solve this, taking the input tag inside a div,
then put the padding property on div tag. This work's for me...
Like this:
<div class="paded">
<input type="text" />
</div>
and css:
.paded{
padding-right: 20px;
}
<input class="form-control search-query input_style" placeholder="Search…" name="" title="Search for:" type="text">
.input_style
{
padding-left:20px;
}