I am having difficulty in aligning an image next to a text box. I was wondering if there is an easy way to do it other than setting padding and margin. because those measures can vary in each browsers. I have made a fiddle http://jsfiddle.net/wD5T9/
<div id='searchWrapper'>
<input id='searchBox' style='width:250px; border:1px solid #cccccc; border-radius:7px 7px 7px 7px; padding:5px 28px 5px 10px; margin-top:14px; margin-left:50px;height:18px;' type='text' placeholder='Search'/><img src='http://www.q-park.ie/Portals/8/images/search-icon.png'/>
</div>
Just add to the CSS:
#searchWrapper img {
vertical-align: middle;
}
Whenever I try to position something very delicately, I chose to use this sort of method:
position:relative;
and then I define by using top, left, right and buttom.
http://jsfiddle.net/wD5T9/5/
Hope this helps
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
I have a problem with height button in e-mail.
When I open the html file email in a browser button it is displayed correctly.
html in browser
However, when it comes to e-mail the customer is too narrow.
html in e-mail
My code
<tr>
<td align="center">
<a href="{guest_tracking_url}?id_order={order_name}" style="background-color: #ee1000; color:#ffffff; display:block; width:220px; font-size:14px; line-height:40px; text-decoration:none; margin-top:20px;" target="_blank" data-saferedirecturl="https://www.google.com/url?hl=sk&q={guest_tracking_url}?id_order={order_name}">Zistiť aktuálny stav objednávky
</a>
</td>
</tr>
Use padding, like that:
padding: 20px 30px;
And your text will be vertically centered in the button.
The browser may have some default padding, which the rendering engine of your email client doesn't have. So simpy set it manually uing padding.
In your case, you may want to specify the padding for top/bottom and left/right like this: padding: 5px 10px This would result in 5px top/bottom and 10px right-left: Feel free to define an invidivual padding to every side, which may not make much sense here, but is also possible if required by passing it clockwise like padding: 1px 2px 3px 4px (result: 1px top, 2px right, 3px bottom, 4px left)
Use padding instead of width
padding: 10px 20px; /* something like that */
UPDATE:
That's from an email I got this morning:
color: #fff!important;
text-decoration: none;
border: 0;
border-radius: 8px;
background: #651a84;
line-height: 1em;
padding: 18px 30px;
display: inline-block;
Remove the line height and add the padding
padding: 10px 15px;
Thanks for tips.
But when I add padding to button, text around too close button :/
img
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.
So I have this html code:
<!DOCTYPE html>
<html>
<body>
<div style="background-color:black;color:white;padding:20px">
<h2>London</h2>
</body>
</html>
My question is, what does the padding:20px property do in the style attribute for the div element? Is that the same thing as doing padding:top=20px, padding:right=20px, padding:bottom=20px, padding:left=20px?
I tried putting (padding:top=20px, padding:right=20px, padding:bottom=20px, padding:left=20px) in the h2 element as an attribute like this (removed padding:20px from the style attribute in the div element):
<h2 padding:top=20px, padding:right=20px, padding:bottom=20px, padding:left=20px>London</h2>
But for some reason the line above gave me a different output than putting the padding:20px in the style attribute of the div element. Can someone please explain me this difference? Thank you in advance for the help!
Your syntax is full of errors.
It has to be
<h2 style="padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px">London</h2>
and yes, in short this is identical to
<h2 style="padding: 20px">London</h2>
There is also three other short forms:
/* applies 10px top/bottom, and 5px left/right */
padding: 10px 5px;
/* applies 10px top, 0 to bottom, and 5px left/right */
padding: 10px 5px 0;
/* applies 1px top, 2px right, 0 bottom, 4px left (clockwise, starting at top) */
padding: 1px 2px 0 4px;
not valid
<h2 padding:top=20px, padding:right=20px, padding:bottom=20px, padding:left=20px>London</h2>
use
h2{
background: #ccc;
}
<h2 style="padding-top:20px; padding-right:20px; padding-bottom:20px; padding-left:20px">London</h2>
Fiddle
Yes, padding:20px; applies the same amount of padding to all sides of your element.
Also, your HTML is incorrect. Do this:
<h2 style="padding-top:20px; padding-right:20px; padding-bottom:20px; padding-left:20px">London</h2>
Or simply,
<h2 style="padding:20px">London</h2>
yours, h2 padding style is incorrect.
you should add style for the h2 element.
<h2 style="padding:20px">London</h2>
If you're gonna apply padding to all sides simultaneously, you're better off just using padding:20px as a value for style since it cuts down on code size.
See this link for more examples on the use of CSS padding:
http://www.w3schools.com/css/css_padding.asp
try this. you will know how the padding works. padding is for positioning the text/element in an element(parent)
<div style="background-color:black;color:white;padding:20px">
<h2 style="border: solid 1px red">London</h2>
</div>
Padding:20px will apply padding in all 4 directions .
You can also write this way padding:20px 20px 20px 20px; this goes like this padding : top right bottom left
SO instead or write padding-right, padding-top and other two, one can simply write padding and apply the right left top bottom padding value to it. This method is helpful when we want to apply different padding values for all directions. Like padding: 5px 10px; This will apply padding 5px in top and bottom and 10px from left right;
Also, your HTML is incorrect. Do this:
<h2 style="padding-top:20px; padding-right:20px; padding-bottom:20px; padding-left:20px">London</h2>
OR
<h2 style="padding:20px 20px 20px 20px;">London</h2>
Or simply,
<h2 style="padding:20px;">London</h2>
Your css syntax is incorrect
The correct syntax is:
<h2 style="padding-top=20px; padding-right=20px; padding-bottom=20px; padding-left=20px;">London</h2>
OR
<h2 style="padding=20px;">London</h2>
OR
<h2 style="padding=20px 20px 20px 20px;">London</h2>
h2{ padding:20px;}`<h2 style="padding:20px">London</h2>`
Your syntax is totally wrong.It would be
<h2 style="padding-top: 20px; padding-right: 20px; padding-bottom: 20px;
padding-left: 20px">London</h2>
Also if you want to give padding to all sides you can use as below :
<h2 style="padding: 20px;">London</h2>
Or you can also write like padding:10px 20px 30px 40px; it means padding-top:10px,padding-right:20px,padding-bottom:30px,padding-left:40px,
Padding: 10px 20px it means padding-top:10px,padding-bottom:10px,padding-left:20px,padding-right:20px
Padding: 10px 30px 20px it means padding-top:10px,padding-bottom:20px,padding-left:30px,padding-right:30px
h2{
background: #ccc;
}
<h2 style="padding-top:20px; padding-right:20px; padding-bottom:20px; padding-left:20px">London</h2>
padding:20px means you give 20px padding from top right bottom left. Do you mean padding-top, padding-right.... rather than the padding:right, padding:top etc.. cos this one is not working on mine.
Is there any way to alter the text property inside label so that it touches the baseline? In the example, both State and City are above the baseline.
http://jsfiddle.net/6VzLR/
HTML:
<div id="leftContent">
<div id="state">
<label for="state">State:</label>
<select name="state">
<option>State - Karnataka</option>
</select>
</div>
<div id="city">
<label for="city">City:</label>
<select name="city">
<option>City - Bangalore</option>
</select>
</div>
</div><!--leftContent-->
CSS:
#state label, #city label{
width:40%;
display:inline-block;
margin: 3px 0 3px 6px;
}
If you specify a height for the label you can use line-height to adjust where the text will be:
#state label, #city label{
width:40%;
display:inline-block;
border:1px solid #000000;
margin: 3px 0 3px 6px;
line-height: 28px;
height: 20px;
vertical-align: bottom;
}
Here's the JSFiddle.
EDIT: You can add
#state select, #city select {
margin-bottom: 4px;
}
So the select boxes are positioned the same as well.
Here's the updated JSFiddle.
The order of margins in CSS margin property is top-right-bottom-left.
So it looks like you are setting 0px for right margin, not for bottom one.
Try this:
margin: 3px 3px 0px 6px;
Or:
margin-bottom: 0px;
I would persionally better explore padding css option though.
I applied the following CSS to your HTML snippet:
label, select {
font-family: arial;
font-size: 2.0em;
vertical-align: baseline; /* default value */
}
label {
border: 1px solid gray;
width:40%;
display:inline-block;
margin: 3px 0 3px 6px;
text-align: right;
}
and got the following result: http://jsfiddle.net/audetwebdesign/3CQbq/
The text in the label and the select elements align along a common baseline, which is more obvious if you increase the font size.
However, you need to make sure that the same font family and font size are used in both the label and the select fields to get the same alignment. (In your example, this does not seem to be an issue even though the fonts differ.)
In your example, the text align along the same baseline and the bottom of the two boxes also align along a common horizontal line.
However, the box around the label is taller than the box for the select group, so that may be what you are trying to fix.