I'm hoping someone could help me out! I'm trying to achieve the desired effect seen on this wordpress template from themeforest (http://themeforest.net/item/lespaul-retina-responsive-wordpress-theme/full_screen_preview/4083224 -- scroll right down to the bottom).
Basically having a pixel divider repeat across the page, and have text embedded on the left side. I've tried SOOO many different CSS codes and html... It should be an easy thing to do but I just can't seem to get it.
The closest I've gotten a to achieve this effect is the horizontal divider with Text under it...
/////////////////////////////
TEXT(but centered)
but I would like to have
TEXT ///////////////////////////
Here's my code!
div.divider17a {
height:5px; width:100%; border:0; background:url(images/divider17.png) repeat-x;
margin:35px 0 25px;
padding:0;
text-align:left;
float:left;
width:100%;
}
div.divider_notext {
margin:50px 0 20px;
}
div.divider_left1 {
text-align:left;
}
HTML
<div class="divider17a divider_left1"><h3>Strategic Planning</h3></div>
Any help would be much appreciated... Thanks =D
Is there a reason you're not just using the same styling they use anyway?
<h3 class="widget-heading separator-heading">
<span class="text-holder">Companies that trust us</span>
</h3>
.separator-heading {
background-image: url(../img/separator-heading-diagonal.png);
background-repeat: repeat-x;
background-position: 0 50%;
}
.separator-heading .text-holder {
display: inline-block;
padding: 0 .6em 0 0;
background-color: white;
}
Can you provide a link to your page and subsequent code? Also if you look at their code this is what they are doing:
.separator-heading, hr.diagonal {
background-image: url(../img/separator-heading-diagonal.png);
background-repeat: repeat-x;
background-position: 0 50%;
}
If you have to use text you can use the following CSS style:
.divider17a h3:after{
content:"//////////////////////////////////////";
overflow:hidden;
}
and add the following to you container:
div.divider17a{
overflow:hidden;
white-space:nowrap;
}
Demo: http://jsfiddle.net/kyBaN/1/
Alternatively, use a background image.
Related
in site we have like below text as in link1 :
But instead of text - Black & Green , i want to display images as below or css icons as here....
i uploaded Black & Green images to below path :
http://sbdev2.kidsdial.com:81/media/catalog/custom/green.png
http://sbdev2.kidsdial.com:81/media/catalog/custom/black.png
i am trying below css to display icons instead of text, but its not displaying any icons in site. I want to hide text with icons.
label[for=options_455_2]
{
width:50px; height:50px; background:#000; border-radius:50%;
}
You have to use display:block on label. So that empty label does not have zero width and height.
Secondly link you took the idea from is setting the background-color. but you are not. Either use different background-colors (like that link) or use background-image property.
Here's a working snippet.
label{
width:50px;
height:50px;
border-radius:50%;
background-image:url("http://sbdev2.kidsdial.com:81/media/catalog/custom/green.png");
background-size:cover;
display:block;
color:transparent;
}
<label>jdjshjkdhd</label>
if you have no influence on html I can give you a hack :))
label {
color: #fff;
width: 0px;
}
label::before {
display: block;
width: 50px;
height: 50px;
background: green;
border-radius: 50%;
}
here is codepen http://codepen.io/kejt/pen/EZZGeE
This workaround could help you with your requirements. Change the color of background based on for value.
label[for=options_453_2]{position:relative;border-radius:50% !important;max-width: 20px !important;}
label[for=options_453_2]:before{background: #000 !important;display:block;content: "";position: absolute;left: 0;top: 0;z-index: 9999;width: 100%;height: 100%;}
I have a strange CSS issue, I'm not quite sure how to fix this.
When I press the "Sign In" button on my website and I start to type in the Username, the header goes up. I really don't know what is causing this.
Any ideas?
Thanks!
Here is some code:
The form:
.tooltip-wrap {
position: fixed;
display:none;
}
.tooltip-wrap .corner {
position:relative;
z-index:100;
margin-left:-5px;
width:0;
height:0;
border:5px solid transparent;
border-bottom-color:#fff;
}
.tooltip-text {
float:left;
margin-left:-50%;
padding:1em 15px;
background:#fff;
color:#333;
}
This is the part that goes up:
.header-navigation.back {
z-index:-1;
position:absolute;
margin-left:0;
margin-top:-6px;
border:none;
display:block; height:137px; width:1171px; padding:0px; outline:none; text-indent:-9999px;
background-image:url('xhttp://frenchegg.com/images/backmenu.png');
}
You need to click on Username and start typing something.
Very strange bug, and I can't explain what's going on. But it is related to your div.header-navigation.back. If you remove that, the behaviour disappears.
As far as I can tell, you are only using that element for your background image, so it's not a good idea to include it in the markup anyway. If you amend your .site-header you can achieve the same effect without the extra div:
.site-header {
background: #0894ff url('http://frenchegg.com/images/backmenu.png') 50% 20px no-repeat;
background: url('http://frenchegg.com/images/backmenu.png') 50% 20px no-repeat,
linear-gradient(to bottom, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0) 100%);
}
I couldn't quite work out what you're trying to achieve with your gradient, but the idea would be to provide multiple backgrounds for those browsers that support them, with a fallback to a solid colour.
Change the line-height of the input box - fixes the issue.
HTML to change:
<input type="text" id="text-user" name="user_login" value="Username" style="
line-height: 15px;
">
CSS:
#text-user{
line-height: 15px;
}
The reason is because the line-height of the input was much smaller without text, than it was with text. So when you typed something into the box, the line-height expanded which is what caused the header to be pushed up.
Edit
I see you're having no luck with the code, so do these two more things and you're sure to be up and running - it's working here for me.
Remove the following from .site-header:
padding: 2em 0;
Next, change the row style to look like this:
.row{
margin: 0 auto;
padding: 0 30px;
width: 1171px;
height: 137px;
}
I think the solution is along these lines:
Set .header-wrap to have overflow:visible (well, remove overflow hidden!) - this will mean you have to slice those character graphics to have flat bottoms.
Then, change .tooltip-wrap to be position:absolute;z-index:2; (not fixed).
I also noticed that you have the placeholder polyfill in your head. This means you could use that attribute on the input rather than value; like so:
<input type="text" name="user_login" placeholder="Username">
Very cute site!
You could give it a z-index instead of a fixed position, and give it an absolute position.
I am having the css sprite image.And it works fine but the issue is I want the image right side of the anchor tag's text.But it displays in the left side.The sprite image is here.
http://jstiles.com/temp/1360875952/ctrls/css-sprite.png
Expected result:
[Mylinktext]<MyImagehere>
Actual result what I am getting is
<MyImagehere>[Mylinktext]
I don't want to use after pseudo class.Becuase it wont work out in the IE7 browser too.My code is below.
.ctrls
{
font-family:Arial;
font-weight:bold;
font-size:16px;
color:black;
background-image: url(images/ctrlsprite.png);
//background-image: url(images/css-sprite.png);
background-repeat:no-repeat;
text-decoration:none;
display: inline-block;
padding-left:30px;
}
.ctrls:hover
{
background-position: 0px -252px;
text-decoration:underline;
}
a.magenta
{
background-position:0px -144px;
}
And HTML
<div>
<p>Magenta</p>
Et Movet
</div>
How can I place the image right side of the Text?
How about adding a <span> to the right of the text in the anchor tag? Demo
HTML
<div>
<p>Magenta</p> Et Movet <span class="icon"></span>
</div>
CSS
.ctrls {
font-family:Arial;
font-weight:bold;
font-size:16px;
color:black;
text-decoration:none;
}
.ctrls:hover {
text-decoration:underline;
}
.ctrls .icon {
display: inline-block;
background-image: url(http://jstiles.com/temp/1360875952/ctrls/css-sprite.png);
background-repeat:no-repeat;
width: 16px;
height: 16px;
background-position:0px -144px;
}
.ctrls:hover .icon {
background-position: 0px -252px;
}
When I tried your code, the result seems to be as you want: [Mylinktext]<MyImagehere>. I'm probably missing something. Try and explain what and will try and help you out.
Personally, I wouldn't use a sprite. Instead, I would make one image per color (I find that easier to work with) or, even better, make a font with the character I want (reference: http://mashable.com/2011/11/17/free-font-creation-tools/; I haven't tried any of the programs, so I don't know how good they are)
and then use the #font-face Rule (reference: http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp).
When Googling this hurdle, it came up with a ton of info about how to apply css and different static buttons as rollovers, when using an image as a button in a form.
My question is, how would you go about changing the button for each mouse event (on the button) and if you are using ONE image for all states?
For example... I have the following HTML for my button
<input type="image" id="login_submit" name="login_submit" src="button_login.png" />
and seperate to this I have the following CSS that I used before...
#login_submit a {
outline: none;
text-indent: -5000px;
display:block;
margin-left: auto;
margin-right: auto;
width: 141px;
height: 36px;
background: url("button_login.png") 0 0 no-repeat;
}
#login_submit a:hover {
background-position: -141px 0;
}
#login_submit a:active {
background-position: -282px 0;
}
now obviously it won't work at the moment... so how would I go about it? I'm looking for a more 'pure' CSS solution so no JS to brighten the day.
or should I stick with having 2/3 separate buttons for each state?
Well the main problem seems to be that you are trying to style an anchor that is a child to "#login_submit" instead of just "#login_submit", try this:
#login_submit {
outline: none;
text-indent: -5000px;
display:block;
margin-left: auto;
margin-right: auto;
width: 141px;
height: 36px;
background: url("button_login.png") 0 0 no-repeat;
}
#login_submit:hover {
background-position: -141px 0;
}
#login_submit:focus {
background-position: -282px 0;
}
Good luck,
Leo
I had this problem too, but just solved it.
By using an input type="image" and adding a 1x1px blank (transparent) .png or .gif to the src of the form element. Then using CSS for setting the background as the double (or, in the above case, triple) rollover image. The form element uses the blank .png as image, but beneath it lies the CSS handled background image, showing a beautifully working rollover with submit button functionality across its height and width.
=)
Code is taken directly from my situation:
HTML:
<div class="formrow">
<input id="send" type="image" src="../blank.png" name="Submit" onclick="submit" alt="Send" />
</div>
CSS:
#send
{
height: 25px;
width: 107px;
overflow: hidden;
display: block;
float: right ;
background: url('../images/style/button-send.png');
}
#send:hover
{
background-position: 0 -25px;
}
I hope this helps. =)
By the way, for me this approach took care of the problems mentioned by svict4 as well. =)
I am trying to get rid of the thin border that appears for every image in Chrome & IE9.
I have this CSS:
outline: none;
border: none;
Using jQuery, I also added a border=0 attribute on every image tag. But the border as shown in the image still appears. Any solution?
body {
font: 10px "segoe ui",Verdana,Arial,sans-serif, "Trebuchet MS", "Lucida Grande", Lucida, sans-serif;
}
img, a img {
outline: none;
border: none;
}
.icon {
width: 16px;
height: 16px;
text-indent: -99999px;
overflow: hidden;
background-repeat: no-repeat;
background-position: -48px -144px;
background-image: url(theme/images/ui-icons_0078ae_256x240.png);
margin-right: 2px;
display: inline-block;
position: relative;
top: 3px;
}
<h1>Dashboard <img class="icon" border="0"></h1>
See attached screenshot:
It's a Chrome bug, ignoring the "border:none;" style.
Let's say you have an image "download-button-102x86.png" which is 102x86 pixels in size. In most browsers, you would reserve that size for its width and height, but Chrome just paints a border there, no matter what you do.
So you trick Chrome into thinking that there is nothing there - size of 0px by 0px, but with exactly the right amount of "padding" to allow for the button. Here is a CSS id block that I am using to accomplish this...
#dlbutn {
display:block;
width:0px;
height:0px;
outline:none;
padding:43px 51px 43px 51px;
margin:0 auto 5px auto;
background-image:url(/images/download-button-102x86.png);
background-repeat:no-repeat;
}
Voila! Works everywhere and gets rid of the outline/border in Chrome.
Instead of border: none; or border: 0; in your CSS, you should have:
border-style: none;
You could also put this in the image tag like so:
<img src="blah" style="border-style: none;">
Either will work unless the image has no src. The above is for those nasty link borders that show up in some browsers where borders refuse to play nice. The thin border that appears when there is no src is because chrome is showing that in fact no image exists in the space that you defined. If you are having this issue try one of the following:
Use a <div> instead of an <img> element (effectively creating an element with a background image is all you are doing anyway, the <img> tag really isn't being used)
If you want/need an <img> tag use Randy King's solution below
Define an image src
For anyone who wants to get rid of the border when the src is empty or there is no src just use this style:
IMG[src=''], IMG:not([src]) {opacity:0;}
It will hide the IMG tag completely until you add a src
Add attribute border="0" in the img tag
If u didn't define a src or the src attribute is empty in a img tag most browsers will create a border. To fix this use transparent image as src:
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAMAAAAoyzS7AAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAAlwSFlzAAALEgAACxIB0t1+/AAAAApJREFUeJxjYAAAAAIAAUivpHEAAAAASUVORK5CYII=" border="0">
If you are trying to fix the Chrome Bug on loading images, but you ALSO want your placeholder image to load use (with Lazy Loading images, for example) use can do this trick:
.container { overflow: hidden; height: 200px; width: 200px }
.container img { width: 100%; height: 100% }
.container img[src=''],
.container img:not([src]) {
width: 102%;
height: 102%;
margin: -1%;
}
This will make the border be hidden in the container's overflow and you won't see it.
Turn this:
Into this:
I liked Randy King's solution in that chrome ignores the "border:none" styling, but its a bit complex to understand and it doesn't work in ie6 and older browsers. Taking his example, you can do this:
css:
ins.noborder
{
display:block;
width:102px;
height:86px;
background-image:url(/images/download-button-102x86.png);
background-repeat:no-repeat;
}
html
<ins class="noborder"></ins>
Make sure when you use the ins tag to close it off with a "" or else the formatting will look funky.
In your img src tag, add a border="0", for example, <img src="img.jpg" border="0"> as per explained by #Amareswar above
using border="0" is an affective way, but you will need to add this attribute for each image.
i used the following jQuery to add this attribute for each image as i hate this outlines and borders around images.
$(document).ready(function () {
$('img').each(function () {
$(this).attr("border", "0");
});
});
inline css
<img src="logo.png" style="border-style: none"/>
You can remove the border by setting text-indent to a very big number, but the alt of the image also be gone.
Try this
img:not([src]) {
text-indent: 99999px !important;
}
I had a similar problem when displaying a .png-image in a div-tag. A thin (1 px I think) black line was rendered on the side of the image. To fix it, I had to add the following CSS style: box-shadow: none;
same as what #aaron-coding and #randy-king had - but just a more generic one to hide image border before they are loaded (i.e. with lazy-load.js or something
(apparently I can't do a code block in my original comment)
.lazy-load-borderFix {
display: block;
width: 1px !important;
height: 1px !important;
outline: none;
padding: 0px;
margin: -4px;
background-image:none !important;
background-repeat:no-repeat;
}
I fix it using padding style:
#picture {
background: url("../images/image.png") no-repeat;
background-size: 100%;
}
.icon {
height: 30px;
width: 30px;
padding: 15px;
}
The border is disappearing, while you are increasing padding value. Find your own value.
it worked for me. It took days which made me crazy.
img.logo
{
display:block;
width:100%;
height:0px;
outline:none;
padding:43px 51px 43px 51px;
margin:0 auto 5px auto;
}
the solution is to set the outline style to none (i.e.) outline:none, it's work with Me
First create an image type PNG transparent with photoshop in mini size.
Then in your class please add:
content:url("url of your blank png");
That happens because you are using an img tag with no src attribute. The solution is puting the image into a div. Something like that:
<style>
div#uno{
display:block;
width: 351px;
height: 500px;
background: url(especificaciones1.png) no-repeat;
}
div#dos{
display:block;
width: 612px;
height: 500px;
background: url(especificaciones2.png) no-repeat;
}
</style>
<div class="especificaciones">
<div id="uno" class="imag1"></div>
<div id="dos" class="imag2"></div>
</div>