I have buttons with text in it which has too much space above it. Is looks like this:
How can I position the text a little bit higher so that it doesn't get sliced by the border of the button?
HTML:
<input type="button" value="a">
Here is my CSS so far:
input[type="button"], input[type="submit"] {
min-width: 40px;
height: 25px;
font-size: 30px;
color: #ffffff;
margin-right: 10px;
padding: 0px;
}
The line-height property doesn't change anything, even with the use of !important.
Setting a fixed height will throw the alignment off.
Setting the font size will be enough for the div to auto-size and the text will be centered.
Try this new css:
input[type="button"], input[type="submit"] {
min-width: 40px;
font-size: 30px;
color: #ffffff;
margin-right: 10px;
}
If you really want to preserve the fixed width and height of the button and the font size of the text then you could do something like below.
This is putting the text in a different div so you can position it on top of the button.
If the button is position: relative, the text div is position: absolute, and the HTML is structured so the text div is within the button tag, then it will layer nicely.
Also, when done this way the text will move with the button and won't be displaced (if say you give the button a margin: 100px).
<button value="">
<div id="buttonText">a</div>
</button>
Here is my CSS so far:
<style>
button {
width: 40px;
height: 25px;
margin-right: 10px;
position: relative;
}
#buttonText
{
font-size: 30px;
position: absolute;
top: -9px;
left: 9px;
color: #FFF;
}
</style>
Related
In my text code, the below CSS style is not working. What is missing?
.text2 {
position:absolute;
bottom: 30px;
right:200px;
padding-left: 200px;
padding-right: 20px;
text-align: center;
padding-bottom:20%;
color: white;
padding-top: 6000px;
font-size: 300px;
left: 20px;
}
try make sure that the parent element has the position: relative , also make sure that the background has different color than white as the text color is white.
I have a button that is housed with a few levels of divs. Whenever I attempt to position the button, it is no longer usable. It becomes disabled. I have attempted to set the z-index to 9999, and that did not work. I also wrapped the button in a div and positioned the div itself, but it still disables the button. I tried with with changing the margins, and floating.
#left_menu {
position: fixed;
width: 12%;
height: 100%;
background-color: #262626;
border-right: 3px solid #1a1a1a;
}
#left_menu_top_options {
width: 100%;
height: 30px;
background-color: #1a1a1a;
}
.left_menu_button {
position: relative;
float: right;
width: 25px;
height: 25px;
z-index: 9999;
}
<div id='left_menu' class='lmenu'>
<div id='left_menu_top_options'>
<button class="left_menu_button" onclick="changeMenu()">C</button>
</div>
</div>
Not sure what was causing the issue. As a resolution, I removed the class from the left menu and created an entirely seperate fixed div to use the button in. That worked.
I am looking at the Instagram website. I notice that they put a zoom icon inside the padding of adjacent input. I wonder how this is done, can somebody show me an example
Thanks.
Here is the example for jQuery search box on focus show hide icon as per your reference. I hope this answer will be helpful.
$('.btn-close').hide();
$('.fa-search').show();
$('.input-text').on('focus', function() {
$(this).siblings('.btn-close').show();
$(this).siblings('.fa-search').hide();
});
$('.btn-close').click(function(e) {
$('.fa-search').show();
$('.btn-close').hide();
e.stopPropagation();
});
$('.input-text').on('focusout', function() {
$(this).siblings('.btn-close').hide();
$(this).siblings('.fa-search').show();
});
.input-text {
border: 1px solid #888;
min-height: 40px;
font-size: 16px;
padding: 0 25px 0 5px;
}
.input-box {
position: relative;
display: inline-block;
}
.input-box .fas,
.btn-close {
position: absolute;
right: 0;
padding: 11px 4px;
top: 0;
color: #888;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="input-box">
<input type="text" class="input-text" placeholder="text">
<i class="fas fa-search"></i>
<a class="btn-close" href="#"><i class="fas fa-times-circle"></i></a>
</div>
The answer is that they don't actually put the icon inside the input box. The just draw a rectangle around both the icon and the <input>. The icon itself is added to the <span> on the line right after the highlighted <input> in the image in the question. Look for the class coreSpriteSearchIcon.
When I inspected that <span>, I saw these styles applied:
background-image:
url(/static/bundles/metro/sprite_core_2x_6ba81dcece9b.png/6ba81dcece9b.png);
}
background-size: 410px 396px;
background-position: -240px -366px;
height: 10px;
width: 10px;
The background-image is the sprite file (an image containing multiple smaller images). background-size ensure that the image isn't stretched. background-position tells you where to find the search icon within the larger sprite image. And, width and height tell you how much of the image to display.
They were able to place it where it is by using absolute positioning:
left: 11px;
position: absolute;
top: 9px;
z-index: 2;
One of the way to achieve this is to use position: absolute and put input into a wrapper. Let me show you:
.input-wrapper {
position: relative;
}
.input-wrapper img {
position: absolute;
top: 5px;
left: 5px;
}
input {
height: 40px;
width: 200px;
padding-left: 35px;
font-size: 20px;
box-sizing: border-box;
}
<div class="input-wrapper">
<img src="https://picsum.photos/30"/>
<input type="text" />
</div>
So basically we use position: relative to move img relatively to it. Also note, that you have to add extra padding(left one in this case) so text won't overlap with icon.
There are a lot of ways to do the same: position: relative, negative margin, background-image, utilising of pseudo-elements, but absolute positioning is the most semantically correct in my opinion.
So I have a menu and on it there is a button with text and I want behind the text to be an image that shows that you are on the page and this is the code:
HTML:
<div id="menu">
<div id="about">About Us</div>
</div>
CSS:
a {
text-decoration:none;
color: white;
background: url(images/hover.png);
width: 100%;
height: 38px;
}
#about {
background: url(images/button.png);
width: 168px;
height: 51px;
font-family: Anivers;
font-size: 20pt;
text-align: center;
color: white;
line-height: 50px;
vertical-align: middle;
margin-top: 1%;
}
So far, so good, except that the image will only show the height and width that coresponds to the size of the text. For instance if I make the text 24pt, the image behind it will grow larger, but if I make it smaller, the image will become smaller and I don't want that. So how do I stop it from happening. I already searched all over the place, sadly I couldn't find similar topic. I hope you can help me :).
If I understand your question correctly you need to add display: block to the <a> element and set height: auto; instead. As for the image it should not scale anymore and I centered an image for demo purposes.
DEMO
You can accomplish this by displaying your "a" element as a "block". This will allow you to specify the size of the element independent from the size of the font. You can then inherit the width and height of the "#about" css styling if that's the size of "hover.png", or specify your own size based on the actual size of "hover.png" if its different than that stated in "#about", it sounds like 38px for hover.png is what you want as opposed to the 51px height of the #about parent. Without setting "a" as a block, the font size of the text in "#about", the parent element, would rule the overall size of the a element and styling, and your background "images/hover.png" will only provide a background for that size.
Here's what your a element in css would look like with the 38px height, you could also say "inherit" for the height if desired. I tested this and it works:
a {
text-decoration:none;
color: white;
background: url(images/hover.png);
display: block;
width: inherit;
height: 38px;
}
I hope this helps.
<div id="menu">
<img src="images/4.png" />
About Us
</div>
#menu {
position: relative;
width: 168px;
height: 51px;
}
img {
width: 100%;
height: auto;
}
img:hover {
background: blue;
}
a {
position: absolute;
z-index: 100;
/* top: 0; PLACE LINK CORRESPOMNDING TO IMG
left: 0; PLACE LINK CORRESPOMNDING TO IMG */
background: red;
font-family: Anivers;
font-size: 23pt;
color: white;
line-height: 1.2;
}
I'm developing a Search Application where the requirement is to have a magnifier image instead of button on the search textbox.
On a maximized page the anchor seems to be on correct place.
But on browser resize (clicking restore down button next to close button) the search textbox looks like this:
Following is my CSS code (I'm not a CSS guy btw :))
.search_div A
{
background: url("search-white.png") no-repeat scroll 4px 4px #FFFFFF;
border: 1px solid #CCCCCC;
height: 11px;
left: 85.8%;
margin-right: 175px;
padding: 6px 5px 4px 20px;
position: fixed;
top: 32px;
width: 0;
}
Please suggest.
You don't show the full markup for you search button/input so it's difficult to know exactly how how you exactly position the search button.
Here how I would do it. Let's say you have the followin markup:
<div class="search_div">
Search
<input type="text" />
</div>
For the wrapping DIV, the key is to explicitly position it relative:
.search_div {
position: relative;
border: 1px solid LightGrey;
width: 300px;
}
For the search button, make it absolute with a left value equal zero so it sticks to the left side.
.search_div A {
background: url(icon.gif) no-repeat scroll center center #FFFFFF;
border: 1px solid #CCCCCC;
width: 16px;
height: 16px;
left: 0;
position: absolute;
text-indent: -99999px;
}
As the anchor is absolute positioned, the input will be underneath. The trick is to pad the left side of the input to a value a bit higher than the anchor width, so the beginning of the text is not hidden underneath the anchor:
.search_div input {
box-sizing: border-box;
border: 0;
outline: 0;
line-height: 16px;
width: 100%;
padding-left: 20px;
padding-right: 3px;
}
DEMO
You can go further with this technique then by having the possibility through css to show the search icon to the left or to the right by applying an additionnal class to the .search_div container.
Stick left or right the search icon:
.search_div.iconleft a {
left: 0;
right: auto;
}
.search_div.iconright a {
left: auto;
right: 0;
}
Adjust the padding of the input also left or right:
.search_div.iconleft input {
padding-left: 20px;
padding-right: 3px;
}
.search_div.iconright input {
padding-right: 20px;
padding-left: 3px;
}
DEMO
The line position:fixed; is most likely the trouble spot because it makes the element fixed with respect to the browser window, which is why you are seeing the element shift when the browser resizes.
What you'll want to do is apply position: relative; to both the a anchor element and its parent element .search_div that you want the anchor to be relative to. Once the anchor is positioned relative to its containing element, you can use the css attributes "left, right, top, and bottom" to position it as needed.