I've looked at similar questions relating to this but I can't seem to find anyone having the same problem.
I'm attempting to us CSS in order to make a sumbit button an image. Here's the code
HTML
<input type="submit" class="search" alt="search" >
CSS
input.search {
background-image:url(../search-icon2.png);
width:35px;
height:35px;
}
This returns a broken image in the web page even though the image "search-icon2.png" is exactly 35px x 35px and is in the correct place on the server.
If anyone could suggest what might the problem be, it would be greatly appreciated.
Thanks in advance. J
You could add the image into the same location as the css file with the css having the url('search-icon2.png'). This would verify your path is truly correct and it's not another issue. If you still have an issue could maybe check the spelling of the image??
HTML
<a class="buttonImage">
<span class="left_img"> Hello this is coding
</span>
<span class="right_img"></span>
</a>
CSS
.buttonImage {
display:inline-block;
vertical-align:top;
text-decoration:none;
}
.buttonImage .left_img {
background: url('http://i.stack.imgur.com/634e1.png') no-repeat 0 0;
float:left;
line-height: 15px;
padding: 7px 0 5px 8px;
color: #1b1d60;
cursor: pointer;
}
.right_img {
background: url('http://i.stack.imgur.com/SyeSO.png') no-repeat 0 0;
float:left;
height: 27px;
width:7px;
cursor: pointer;
}
.buttonImage:hover .left_img, .buttonImage:hover .right_img {
background-position:0 -26px;
color:#fff;
}
Fiddle Demo
It will work fine just follow the following steps:
Search button image size must not be greater than whatever you initialize width and height in your css rule.
That means if you give width:100px and height:30px so images must be the same size.Just re-size your image with the help of Image editor software my personal preference is Adobe Photoshop.If your image size is greater than css rule so images may not come or image will be broken.I have edited your html as well as css.
<!DOCTYPE html>
<html>
<head>
<style>
input.search{
background-image:url(url.jpg);
text-indent:-9999px;
width: 100px;
height: 30px;
border:2px solid rgb(0,102,153);
}
</style>
</head>
<body>
<input type="submit" class="search" alt="search">
</body>
</html>
Hope the answer!
Related
Hey if anyone is able to assist it would be much appreciated, I have no idea how to move the following textbox to where I want it to be.
This is my HTML Code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="Stylesheet.css">
</head>
<body>
<img src="../Resources/MainBrowser.png" alt="SearchEngineGIF" class="custom2">
<img src="../Resources/SearchEngineGIF.gif" alt="SearchEngineGIF" class="custom1">
<input type="text" placeholder="Insert Keyword Here">
</body>
</html>
And here is the CSS behind it:
.custom1 {
display: block;
margin-left: auto;
margin-right: auto;
transform: translateY(-210px);
width: 23%;
}
.custom2 {
display: block;
margin-left: auto;
margin-right: auto;
transform: translateY(+25px);
width: 25%;
}
input[type=text]{
width:20%;
border:2px solid #000000 ;
border-radius:4px;
margin:8px 0;
outline:none;
padding:8px;
box-sizing:border-box;
transition:.3s;
font-size: 20px;
text-align: center;
}
input[type=text]:focus{
border-color:dodgerBlue;
box-shadow:0 0 8px 0 dodgerBlue;
}
input[type=text]::placeholder{
font-family: Calibri;
font-size: 20px;
font-style: italic;
text-align: center;
}
It would also be useful if anyone knew how to make it not move when zooming in and out, Setting the position to fixed doesnt help as I am moving a gif inside of the Image by transforming it up/ down y pixels
EDIT - MainBrowser.png is the whole image above "Insert Keyword Here" textbox, minus "Geoorgle" which is SearchEngineGIF.gif
Instead you can just use the form tag
<form style="width:25%;height:auto;">
<img src="yourimage.jpg" style="width:25%;">
<br>
<input type="text" style="width:20%;"><img src="searchimage.jpg" style="width:5%;">
</form>
Change the source of the images and the width according to your need.
You can also use the table tag if you want
And about the image not moving, once you fix the position, put the top and left parameters for the form in the style.
Example:
top:25%;
left:25%;
I am trying to create a mock up of a PSD file and i'm having trouble getting some tags at the bottom of a blog post to behave.
Here is a link to the image;
http://imageshack.com/a/img923/5718/rfVFqe.png
(I'm not allowed to post real images yet)
Here is my css code so far for it;
.comment { content:url(comment.png) ; height:auto; width:auto; }
and then in the html;
<div class="comment"><p>comments</p></div>
the text does not appear at all however. I'm not sure if I can make it work this way?
Thanks all.
I did a similar thing for a footer of a page recently, but I had to use img and p tags.
<div class="comment">
<img src="svg/phone.svg" alt="Phone">
<p>800-888-0123</p>
<img src="svg/email.svg" alt="Email">
<p>billy#billsplumbing.ca</p>
</div>
That was my markup, and my CSS looked something like:
div.comment *{
display:inline-block;
margin:0 .2rem;
}
div.comment p{
margin-right:1rem;
}
div.comment img{
height:25px;
width: 25px;
}
I don't know if this is quite what you're looking for, but this is how I did basically what you are showing.
Why not use background: url(comment.png) instead? And then add some padding-left to the div.
Code:
.comment{
background: url('https://cdn2.iconfinder.com/data/icons/flat-ui-icons-24-px/24/bubble-24-24.png') no-repeat;
padding-left: 30px;
height: 24px;
float: left;
margin-right: 10px;
}
.comment p{
margin: 0
}
<div class="comment"><p>Comments</p></div>
<div class="comment"><p>Comments</p></div>
<div class="comment"><p>Comments</p></div>
I'm trying to write text over an image with the CSS and HTML below but it's not working..
CSS
.social_media_head{
background: url(newsletter_image.gif) no-repeat center;
position: relative;
right: -9px;
height: 0;
width: 325px;
padding: 30px 0 0 5px;
}
.media_name h2{
position: relative;
top: 2px;
}
.media_name {
position: relative;
top: 2px;
}
HTML
<div class="social_media_head">
<h2 class="media_name">Social Media</h2>
</div>
Example jsfiddle
Update
I'm very sorry if the image I'm referring to is wrong. The image I want to put text on is the image on top of the social media icons (facebook, twitter, youtube)...i.e. Image inside class = "social_media_head".
Once again I'm sorry for the confussion.
you can do this by setting z-index of text higher than image and position absolute
.text{
z-index:101;
position:absolute;
/set the position of text you want
}
.image{
z-index:100;
}
and to text above image
.media_name h2 should be h2.media_name
h2.media_name {
color: red;
margin-top: -30px;
top: 2px;
}
full screen Result and fiddle
Try the following to avoid H-tags, and for the box to adjust for height the image is inline rather than as background: (see code here http://jsfiddle.net/jySZB/1/)
(due to update, the old code is removed and kept in the link above - see new link and code below) -
UPDATE: if "over an image" means above rather than on top (which do make more sense in this case), try this code instead:
http://jsfiddle.net/jySZB/2/
HTML:
<div class="social_media_head">
<div>Social Media</div>
<img src="http://satcomng.com/types/twitter.png" alt="" />
<img src="http://satcomng.com/types/twitter.png" alt="" />
<img src="http://satcomng.com/types/twitter.png" alt="" />
</d
CSS:
.social_media_head {
display:block;
}
.social_media_head div {
color:red;
font-size:26px;
font-weight:bold;
font-family:sans-serif;
clear:both;
}
Result:
Tip: as the images are inline here they are easy to convert to click-able links to go the the social sites (I used only one image for example).
Works for me (simplified): http://jsbin.com/uqazel/1/
Maybe you need to set an appropriate height.
Please answer the following questions:
How to merge search box and search button as shown in below example1 and example2? The box and button are joined together.
How to put 'magnifier' icon on the left side of the search box?
How to put a default text into the box like 'Search for items' and fade it when user clicks on the box.
Example1
Example2
Example3 (I don't want a separate button as shown below)
Please help! Thanks!!
Easiest way is to make the entire text field wrapper, from the icon on the left to the button on the right, one div, one image.
Then put a textfield inside that wrapper with a margin-left of like 30px;
Then put a div inside the wrapper positioned to the right and add a click listener to it.
HTML:
<div id="search_wrapper">
<input type="text" id="search_field" name="search" value="Search items..." />
<div id="search_button"></div>
</div>
CSS:
#search_wrapper{
background-image:url('/path/to/your/sprite.gif');
width:400px;
height:40px;
position:relative;
}
#search_field {
margin-left:40px;
background-transparent;
height:40px;
width:250px;
}
#search_button {
position:absolute;
top:0;
right:0;
width:80px;
height:40px;
}
JQuery:
$(function(){
// Click to submit search form
$('#search_button').click(function(){
//submit form here
});
// Fade out default text
$('#search_field').focus(function(){
if($(this).val() == 'Search items...')
{
$(this).animate({
opacity:0
},200,function(){
$(this).val('').css('opacity',1);
});
}
});
});
For your first question, there are many ways to accomplish the joining of the button to the search box.
The easiest is to simply float both elements to the left:
HTML:
<div class="wrapper">
<input placeholder="Search items..."/>
<button>Search</button>
</div>
CSS:
input,
button {
float: left;
}
Fiddle
This method has some limitations, however, such as if you want the search box to have a percentage-based width.
In those cases, we can overlay the button onto the search box using absolute positioning.
.wrapper {
position: relative;
width: 75%;
}
input {
float: left;
box-sizing: border-box;
padding-right: 80px;
width: 100%;
}
button {
position: absolute;
top: 0;
right: 0;
width: 80px;
}
Fiddle
The limitation here is that the button has to be a specific width.
Probably the best solution is to use the new flexbox model. But you may have some browser support issues.
.wrapper {
display: flex;
width: 75%;
}
input {
flex-grow: 2;
}
Fiddle
For your second question (adding the magnifier icon), I would just add it as a background image on the search box.
input {
padding-left: 30px;
background: url(magnifier.png) 5px 50% no-repeat;
}
You could also play around with icon fonts and ::before pseudo-content, but you'll likely have to deal with browser inconsistencies.
For your third question (adding placeholder text), just use the placeholder attribute. If you need to support older browsers, you'll need to use a JavaScript polyfill for it.
It's all in the CSS... You want something like this:
http://www.red-team-design.com/how-to-create-a-cool-and-usable-css3-search-box
Also, for the search icon:
http://zenverse.net/create-a-fancy-search-box-using-css/
Src: Quick Google.
You don't merge them, rather you give the illusion that you have. This is just CSS. Kill the search box borders, throw it all into a span with a white background and then put the fancy little dot barrier between the two things. Then toss in some border radius and you are in business.
The above tut might look too lengthy. The basic idea is this:
Arrange the input box just like you do. The input text box should be followed by the button. add the following css to do that.
position:relative;
top:-{height of your text box}px;
or you can use absolute positioning.
<div id="search_wrapper">
<input type="text" id="search_field" name="search" placeholder="Search items..." />
<div id="search_button">search</div>
</div>
#search_wrapper{
background-color:white;
position:relative;
border: 1px solid black;
width:400px;
}
#search_field {
background-transparent;
border-style: none;
width: 350px;
}
#search_button {
position:absolute;
display: inline;
border: 1px solid black;
text-align: center;
top:0;
right:0;
width:50px;
}
http://jsfiddle.net/zxcrmyyt/
This is pretty much easy if You use bootstrap with custom css
My output is diffrent but the logic works as it is..
I have used Bootstrap 5 here you can also achieve this by using Pure CSS,
<div class="container my-5">
<div class="row justify-content-center">
<div class="col-10 p-0 inputField text-center">
<input type="text" id="cityName"placeholder="Enter your City name..">
<input type="submit" value="search" id="submitBtn">
</div>
</div>
</div>
For Styling
#import url('https://fonts.googleapis.com/css2?family=Ubuntu&display=swap');
* {
font-family: 'Ubuntu', sans-serif;
}
.inputField {
position: relative;
width: 80%;
}
#cityName {
width: 100%;
background: #212529;
padding: 15px 20px;
color: white;
border-radius: 25px;
outline: none;
border: none;
}
#submitBtn {
position: absolute;
right: 6px;
top: 5px;
padding: 10px 20px;
background: rgb(0, 162, 255);
color: white;
border-radius: 40px;
border: none;
}
Hear is an Example !
https://i.stack.imgur.com/ieBEF.jpg
UPDATE #2: I have solved almost all my issues bar the one major one. With the same structure and CSS IE7/6 displays each a with 100% width of it's container. I need this to no happen. Besides that everything else is fine. Can anyone enlighten me?
UPDATE: Should Look Like This
I have the following html page (detailed below). It simply renders 2 styled buttons from the links. My problem is IE6 & 7 renders it differently than Firefox, Safari, IE8 and Chrome that all render it correctly.
I have been banging my head against the wall for a day now trying to make it work in IE6/7. Can anyone offer advice as to what I am doing wrong?
Thanks
<html>
<head>
<style>
.niw-button {
background: #1f81c0 url(niw-btn-gradient-normal.png) repeat-x;
border: none;
color: #fff;
display: inline-block;
font-weight: bold;
margin-right: 6px;
min-width: 95px;
padding: 2px;
text-decoration: none;
}
.niw-button:hover {
background: #5e698f url(niw-btn-gradient-hover.png) repeat-x;
}
.niw-button > .niw-button-contents {
border: 1px solid #73b1da;
}
.niw-button > .niw-button-contents:hover {
border: 1px solid #99a1bc;
}
.niw-button .niw-button-icon {
background-position: center;
background-repeat: no-repeat;
float: right;
height: 25px;
width: 27px;
}
.niw-button .niw-button-text {
height: 25px;
line-height: 1.5em;
padding-left: 5px;
padding-right: 27px;
text-align: center;
text-transform: uppercase;
}
.right-align {
float:right;
}
.niw-icon-cancel {
background-image: url(niwater_cancelIcon.png);
}
</style>
</head>
<body>
<a class="niw-button right-align" href="#">
<div class="niw-button-contents">
<div class="niw-button-icon niw-icon-cancel"></div>
<div class="niw-button-text">Cancel</div>
</div>
</a>
<a class="niw-button" href="#">
<div class="niw-button-contents">
<div class="niw-button-icon niw-icon-cancel"></div>
<div class="niw-button-text">Cancel</div>
</div>
</a>
</body>
</html>
EDIT: Now that I understand your image:
Just make your <a> elements block elements with display:block and put some kind of span inside of them to hold the icon. Or you could make the whole thing an image...
IE6/7 doesn't support display: inline-block, IE6 doesn't support the child (parent > child) selector. So you probably should look into those points in your css...
Edit: I actually don't get correct rendering in IE8, which is what I address below:
For a start, you should put the <a> elements inside the elements rather than the other way round. Block level elements shouldn't really exist within inline elements. e.g.
<div class="niw-button-contents">
<div class="niw-button-icon niw-icon-cancel"></div>
<div class="niw-button-text"><a class="niw-button right-align" href="#">Cancel</a></div>
</div>
<div class="niw-button-contents">
<div class="niw-button-icon niw-icon-cancel"></div>
<div class="niw-button-text"><a class="niw-button" href="#">Cancel</a></div>
</div>
This fixes the positioning for me but there is a subsequent loss in styling. I haven't tinkered with the CSS to correct that yet but it should be straightforward. Secondly, you have an awful lot of classes to deal with a straightforward issue. Arguably you should only need one class in the outer div to identify what's happening inside, and then your CSS can descend from there.
Just one tip for a resource to the button/link problem in general:
http://mezzoblue.com/archives/2008/09/17/anchor_butto/
I'm actually confused myself. How are they supposed to look? If you don't let us know what you're intending to do, it's very difficult to fix the problem.