I have a form on my page and i'm trying to give more space between the text boxes.
I tried 'Padding' in all kind of ways but they seem to be grouped together, and whatever i try affect all 4 of them.
The page
If i'm not misstaking this is the Form's CSS for the boxes:
.form-inner
{
/*background:url('../img/content-bg-top.png') no-repeat left top;*/
min-height:278px;
margin:-40px 0 0 0;
padding:72px 72px 21px 36px;
position:relative;
z-index:1;
font-size:14px;
-webkit-text-shadow:0 1px 0 rgba(255,255,255,0.4);
-moz-text-shadow:0 1px 0 rgba(255,255,255,0.4);
text-shadow:0 1px 0 rgba(255,255,255,0.4);
}
Any suggestions?
padding values are for the distance between object's itself and inner content.
You should use margin key for each textboxes in the content which is classified as form-inner.
.form-inner input[type=text]
{
margin: 10px 20px;
}
Margin defines the distances between object's itself and the other object next to it.
margin: [top] [right] [bottom] [left]
From styl.css (line 317)
.form-field { ... margin: 0 0 3px } (bottom margin only...3px)
All 4 of those input boxes are inside containers with .form-field class.
One fix:
.form-field { margin:0 10px 3px }
.form-field:first-child { margin-left:0 }
(that may need to be margin-right. I've never worked with right to left text)
You can add margin-right property on .form-field class, but remember to set bigger width on form.
I think .form-inner is the box around your form. If you want more space between your text boxes, you should style the .form-field class.
For example:
.form-field {
padding-right:10px;
}
Related
I want to put left and right space to text inside of as you can see on image.
I was able to put left space with text-indent but it doesn't seem to work for right space.
Can anyone help me?
sample image
Here inputs can have left right padding to act for indent.
input {padding: 0 5px}
So above inputs will carry 5px of space inside to both left and right.
if you want it in one text box then add class like below and use it in the css
<input type='text' name='firstname' class='space'>
.space
{
padding-left : 10px;
padding-right: 10px;
}
If you want both side you can use padding only.If you use like this it will work when you have appropriate space in the window.If you want to keep the space in at any screen size you can use border-box.
.space
{
padding-left : 10px;
padding-right: 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Well one option would be to combine text-indent with a padding if your markup allows it:
text-indent: 10px;
padding-right: 20px;
Another method I guess could be the "direction" attribute with a value of "rtl" in combination with "text-align:left".
please try following code
input{
border: none;
padding: 10px;
margin: 10px;
height: 20px;
width: 500px;
border:1px solid #eaeaea;
outline:none;
}
input:hover{
border-color: #a0a0a0 #b9b9b9 #b9b9b9 #b9b9b9;
}
input:focus{
border-color:#4d90fe;
}
<div class="mainDiv">
<input type="text" />
</div>
You can set some padding to your input text :
input {
padding: 0 5px /* 0 is for top and bottom | 5px is for left and right */
}
Here the doc on the CSS padding property : https://www.w3schools.com/css/css_padding.asp
After messing around with pseudo element css for a rather long time I've come up with a solution to the heading tag double ended custom image underline I required using the following code:
h2{
clear:both;
position:relative;
color:#000;
margin-left:83px;
background:url(http://i.stack.imgur.com/2eRq2.png) 0px 16px repeat-x;
font-size:1.5em;
float:left;
padding:0px 0px 10px 0px;
}
h2:after,
h2:before{
content:" ";
background:url(http://i.stack.imgur.com/AulCS.png);
display:block;
width:83px;
height:31px;
position:absolute;
bottom:0;
left:0;
margin-left:-83px;
margin-bottom:-10px;
z-index:-1;
}
h2:after{
background:url(http://i.stack.imgur.com/ux1ed.png);
right:0;
left:auto;
margin-right:-83px;
}
<h2>Frequently Asked Questions</h2>
<br>
<h2>Home</h2>
Which can be seen here:
http://jsfiddle.net/848s2335/1/
However I've noticed the 3 background images do not appear to stay in line when the page is zoomed in and out. Please could anyone point me in the right direction to keep all three images in line at all times?
Thanks for your help.
Instead use background image, use border-bottom, this will set the line at the bottom of h2, next set your bottom property of after and before to match with the same position of the border.
Remove this line on your h2:
background:url(http://i.stack.imgur.com/2eRq2.png) 0px 16px repeat-x;
Instead add this line:
border-bottom: 7px solid #000;
In your :before and :after css, change your bottom property to macth with border line:
bottom:-9px;
Fiddle
You could give the h2 element set height. I added height of 27px and it worked for me in your Fiddle:
h2 {
clear: both;
position: relative;
color: #000;
margin-left: 83px;
background: url(http://i.stack.imgur.com/2eRq2.png) 0px 16px repeat-x;
font-size: 1.5em;
float: left;
padding: 0px 0px 10px 0px;
height: 27px;
}
I've managed to make the left end stay always in line by:
setting all elements' height to the same value (I used 62px)
setting background-repeat: no-repeat and background-position: center on both ends
adjusting other values (padding etc)
fiddle: http://jsfiddle.net/ecpv2kv0/
The right end is sill like 0.5px out of line, but probably editing png images to have even height value (right now it's 31px) might help here.
HTML:
<p>
<input type="radio" id="SQL:79" name="SQL" value="79" maxlength="300">
<label for="SQL:79">Microsoft SQL Server 2012 Express - 64 bit</label>
</p>
relevant CSS:
p {
line-height:23px;
vertical-align:top;
margin:0 0 8px 0;
padding:0;
clear:both
}
input {
margin:0 5px 0 0;
padding:0;
height:23px;
}
input[type="radio"] {
border:none;
background:none;
vertical-align:text-bottom
}
label {
vertical-align:top
}
My input and label are exact 23px high, however the <p> is 28px :(
When I remove vertical-align from the input, the <p> reduces to 25px; but still not the desired 23px!
I have changed the vertical-align on the input[type=radio] from text-bottom to plain bottom/top; this makes the parent p exactly 23px :)
PS: this line of code comes from the HTML5 boilerplate reset, so be aware!
Drop the line-height of p to 19px or add a margin-bottom: -2px to the input.
http://jsfiddle.net/EWfyM/
p {
line-height:23px;
vertical-align:top;
margin:0 0 8px 0;
padding:0;
clear:both
}
input {
margin:0 5px 0 0;
padding:0;
height:23px;
margin-bottom: -2px;
}
input[type="radio"] {
border: none;
background:none;
vertical-align:text-bottom
}
label {
vertical-align:top
}
I know this does not answer your question of "Why?", but using firebug I was able to get your paragraph height to display as 23px by changing the height of your radio button.
This is the CSS I changed:
input[type="radio"], input[type="checkbox"] {
box-shadow: 0 0 0;
height: 18px;
margin: 0 5px 0 0 !important;
padding: 0 !important;
}
Notice I changed your height: 23px; to height: 18px. I could not find an answer online, but perhaps the radio button itself has some default height.
Using display inline works:
(I've used inline css here)
<p style="display:inline;margin:0 0 0px 0;padding:0;clear:both;">
<input type="radio" value="79" id="SQL:79" name="SQL" maxlength="300" style="display:inline;margin:0 0px 0 0; padding:0; height:19px;border:none; background:none;vertical-align:middle;position:relative;top:-2px;">
<label for="SQL:79" style="display:inline;">Microsoft SQL Server 2012 Express - 64 bit</label>
</p>
Hope that helps.
The p tag will get expanded as per the content size.
We have to specify the height for the p tag if we need.
Here is modifed css (simplify :)):
p {
line-height:23px;
vertical-align:top;
margin:0 0 8px 0;
padding:0;
clear:both
}
input {
margin:0;
padding:0;
}
input[type="radio"] {
border: none;
background:none;
}
label {
vertical-align:baseline;
}
Setting the height of input[type=radio] cannot enlarge its visual
shape. So I delete the height.
When the display of child element (input) is inline or inline-block,
setting the line-height of parent element can align the child
element center vertically. But you can also align the child element
top or bottom vertically with vertical-align.
I have changed the vertical-align on the input[type=radio] from text-bottom to plain bottom/top
I have a page with an image on the left side, and text on the right. When the browser window is resized, or a smaller resolution is used, the text goes behind the image. I want the text to always be beside of the image, and not go behind it.
Any suggestions? http://jsfiddle.net/TYpCq/ (The layout on jsfiddle is a bit off. Nevermind this, I just need to know how to prevent the text going behind the image)
HTML:
<div id="indishopmain">
<p><strong>Test shop image</strong> by <strong>no one</strong></p>
<div id ="canvasshopwrap">
<div id="canvasshophead">
<p>Blabla</p>
</div>
<div id="canvasshoptext"</p>
<p>The high-quality print on a <span style="color:#01A07E;font-family:Cusmyrb;">stretched canvas</span> lets the artwork just pop of the wall, it’s almost magical. It’s easy to hang up and will keep it’s color brillance as well as the shape for a long time. We are sure, you will love it forever. Note: the size 20 x 20cm comes with a complementary easel.</p>
</div>
</div>
<div id="indishopimg">
<img src="frontgallery/1.jpg" alt="gallery image 1" width="500px" />
</div>
</div>
CSS:
#indishopmain {
width:100%;
padding:0em;
}
#indishopmain p {
text-align:center;
font-family:Logo;
color:#343234;
margin-top:4em;
font-size:90%;
}
#indishopimg img {
margin-top:-11.9em;
margin-left:10%;
-moz-box-shadow: 5px 5px 10x #000000;
-webkit-box-shadow: 5px 5px 10px #000000;
box-shadow: 5px 5px 10px #000000;
}
#canvasshophead {
display:inline-block;
width:11em;
background-color:#5020B8;
height:2em;
border-radius:3px;
-moz-border-radius:3px;
}
#canvasshophead p {
font-family:Cusmyrb;
color:#ffffff;
font-size:30px;
text-align:center;
line-height:2;
margin-top:0;
}
#canvasshopwrap {
margin-left:60%;
width:11em;
display:inline-block;
}
#canvasshoptext p {
font-family:Cusmyr;
font-size:14px;
color:#343234;
text-align:left;
}
#canvasshoptext {
width:11em;
}
Without knowing what it is you're trying to accomplish (things in your code make me wonder if they are by design or not) I will assume you're trying to have a static element centered in the middle of the page. If you're going for a fluid layout (something that will automatically degrade into mobile devices for instance) the solution will look different.
jsfiddle here: http://jsfiddle.net/RbA92/
I find that adding temporary background colors to elements can be very helpful when debugging. For the purpose of this exercise I've left them in there for you so you can easily see what's going on. I would also suggest putting these colors on your original fiddle (and change margin to padding to REALLY see what's going on). You had a few things in there that weren't behaving as you intended... I think :)
Here's a little breakdown of the styles for you. I commented out the styles I "removed" and annotated the things I added and why.
body { text-align: center; } /* centers all content */
#indishopmain {
padding:0em;
/*width: 100%;*/
background-color: blue;
overflow: hidden; /* allows us to float elements inside a non-floated element */
width: 700px; /* gives the browser a literal size to render, which keeps the elements from moving when the window is resized */
text-align: left; /* keeps child elements from inheriting the text-aling: center we put on the body */
margin: 0 auto; /* this is what actually centers our item. use this with body {text-align: center;} */
}
#indishopmain p {
text-align:center;
font-family:Logo;
color:#343234;
margin-top:4em;
font-size:90%;
}
#indishopimg img {
/*margin-top:-11.9em;
margin-left:10%;*/
-moz-box-shadow: 5px 5px 10x #000000;
-webkit-box-shadow: 5px 5px 10px #000000;
box-shadow: 5px 5px 10px #000000;
float: left; /* float this bad boy all the way to the left */
}
#canvasshopwrap {
/*margin-left:60%;*/
width:11em; /* having this in em could break your layout. consider putting this in px to keep it from getting too big for it's area and being pushed to the bottom */
/*display:inline-block;*/
background-color: red;
float: right; /* float this one all the way to the right */
}
#canvasshophead {
/*display:inline-block;*/
width:11em;
background-color:#5020B8;
/*height:2em;*/
border-radius:3px;
-moz-border-radius:3px;
padding: 0 0 .5em 0; /* it's better to size the CONTENT how you want, so this box will always contain it. size thie box but leave the contents dynamic and you could end up with the content outside of your container */
}
#canvasshophead p {
font-family:Cusmyrb;
color:#ffffff;
font-size:2em;
text-align:center;
line-height:2;
margin:0; /* remove any browser-specific formatting */
padding: 0; /* ditto */
}
#canvasshoptext {
width:11em;
}
#canvasshoptext p {
font-family:Cusmyr;
font-size:14px;
color:#343234;
text-align:left;
padding: 0; /* remove any browser-specific formatting */
margin: 0; /* ditto */
}
Hopefully this is the answer you are looking for.
Remove this margin-top:
#indishopimg img {
margin-top:-11.9em; <--- here
margin-left:10%;
-moz-box-shadow: 5px 5px 10x #000000;
-webkit-box-shadow: 5px 5px 10px #000000;
box-shadow: 5px 5px 10px #000000;
}
If you want the image beside the text, move the image into the paragraph containing the text and add float:left to the CSS above.
I have a dialog box where I want to have two button side by side .One button will be "Done" button and other will be "close" button.
html:
clickme
Css:
a.embeddedBrosweWindowDoneButton {
margin:10px 900px 0;
text-align:center;
display: block;
width:50px;
padding: 5px 10px 6px;
color: #fff;
text-decoration: none;
font-weight: bold;
line-height: 1;
/* button color */
background-color: #173553;
/* rounded corner */
border-radius: 5px;
/* drop shadow */
box-shadow: 0 1px 3px rgba(0,0,0,0.5);
/* text shaow */
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
border-bottom: 1px solid rgba(0,0,0,0.25);
position: relative;
cursor: pointer;
}
I already have a "done" button .I want to have another button called close buton by side of done button . How can i have two buttons in line. I tried but one button was over the other button.
a.embeddedBrosweWindowDoneButton:hover {
background-color: #6D7B8D;
}
You have display set to block. It needs to be set to inline-block.
If you set it to block, the elements will reside on their own line within their parent container. Use inline-block to let them reside on the same line.
Put each button in a div and have the float attribute set to left.
.buttondiv {
float: left;
}
This CSS-style:
display: block;
Makes the buttons set themselves on different rows. If you apply float: right; on them both, you'll be able to set them beside eachother. Note that you a) might want to add a clearfix and b) invert the order of your elements (adding done before the second button) as float: right has a tendency to shift them unexpectedly.
Clearfix:
<div style="display: block; clear: both; height: 1px;"></div>
Add the element above to the "bottom" of the element that wraps the buttons, so that they won't "break loose" from their place and float outside the box.
Since it's got a display:block;, you can specify it's width, and then float it left or right, depending on how you would like to have the layout be. Once one is floated, the other one will wrap to the other side of it.
Here's a good article about floats: http://css-tricks.com/795-all-about-floats/
Using nobr can help you solve this problem.
<td>
<nobr><input type="submit" value="Submit">
<input type="button" value="Return"></nobr>
</td>