Been a while since I had a CSS related problem but here I am. to cut a long story short I want to highlight text with a gradient background which I have managed to achieve using the <span> tag and setting a background image onto it. The problem is it startes to get a bit trippy and breaks when the text goes on to a new line.
I have managed to fix it but the HTML is horrible and I don't like compromising HTML code for style purposes as a rule.
The best way to describe this is just to show you.
http://jsfiddle.net/sambeckhamdesign/2HSqh/11/
The top <li> is the good HTML with the broken style and the botom <li> is how it's supposed to look but with awful HTML markup.
Any solutions obviously appreciated. Don't mind using Javascript or jQuery but I'd rarther do it in CSS if I could.
Ta pets :)
I can provide you the css hacks working only for firefox and safari
::selection {
background: #ffb7b7; /* Safari */
}
::-moz-selection {
background: #ffb7b7; /* Firefox */
}
Reference:
http://www.catswhocode.com/blog/10-astonishing-css-hacks-and-techniques
Hope this help :)
The only method (that does not need extra markup) that i can think of would be to use a repeating background-image that has exactly the height of a line. This should work properly and fast if your line-height is constant. All other approaches are likely to be quite slow or bulky.
The best way I could se to do this in the end was to use the <span> tag. I hate doing this and try to avoid it when I can but it needed to be used in this case. See the updated JS fiddle in the question for how I did it.
Maybe this provides what you want
ul#container li.hilight {
padding:3px 20px;
background:url('http://www.sambeckhamdesign.com/_images/rain_1.jpg') left repeat-y #c06;
line-height:30px;
color:#fff;
}
and
<li class="hilight">
This is how the text should look
<br />
but the HTML markup is messy
</li>
Related
I've been looking on stackoverflow and trying different things, but nothing seems to work.
I'm out of ideas.
I have this menu here (for now, my links are inactive)
<nav id="nav-left-en">
<nav id="services-en">
Services
</nav>
<nav id="mission-en">
Our Mission
</nav>
<nav id="contact-en">
Contact
</nav>
</nav>
And I would like that, upon hovering over it the image centers. My text itself is not aligned to the center (hence the problem I have - but I do not want to center it to the center, because the hover has to look the same everywhere). Right now, the hover appears aligned-left with the text itself.
This is the last css I tried. I've tried others, but I'm out of ideas. I've had no luck with stackoverflow and other places that were looking at this type of things.
(note: I have also tried with background-image as well)
background: url('images/hover.jpg') no-repeat;
border: 0;
width:150px; /* this is the width I want it to be. The text itself is 115px*/
color:white;
background-position: -58px 0px ;
EDIT
I edited the code... and this is exactly what I am looking for, EXCEPT that there is an extra space on each side. For example, Let's say that I have 120px in width for each item, well, the color should be 150px in width. Thus, an extra 15px on each side.
$(document).ready(function() {
$('nav').hover(
function () {
$(this).css({"background-color":"#108040"});
},
function () {
$(this).css({"background-color":""});
}
);
});
Perhaps this code will help you in understanding what I'm looking for. In this case, I decided to use js (as it is shorter than the css that does the same thing)
Well this "centers" the background image horizontally on hover. The quality of the supplied code is however too poor to visually determine whether this result is what you expect.
http://jsfiddle.net/u8hfw/5/
But you do realize that there are syntax errors in both supplied HTML and CSS in your fiddle (
http://jsfiddle.net/u8hfw)? I've corrected them in the above fiddle just to make it work. Beside of that, the use of HTML attributes, as well as CSS rules and selectors is very bad. You may end up with a lot of bugs later and spending a huge amount of time debugging them.
Just a few advices:
Try to avoid !important in your CSS.
Use id HTML attribute only if you need to target a specific element. Otherwise use a class attribute. For example use same class on all nav <nav class="menu-item"> and apply a single CSS rule .menu-item{ *your css here* }
-
To find syntax errors, validate your code using W3C validation service
http://jsfiddle.net/Zmpyv/6/
I have a page, where I use <div> to style the sheet. The problem is that it creates a border around the page. How can I remove this border? Check out the jsfiddle to see what I mean. I am using position: static; I do not want to use fixed because then the page won't scroll correctly.
Perhaps you're just talking about the native margin on <body>. Try this;
body {
margin: 0;
}
Check out http://jsfiddle.net/Zmpyv/8 where I added the above CSS to your demo.
To avoid spending time fighting silly things like this, I recommend you have a look at normalize.css which applies this style for you, along with fixing a host of other discrepancies between browsers and in my opinion gives you a better starting point when authoring CSS.
Try setting this in div.
border:none
This will remove the border of any element..
<div class="headerClear" /></div>
see this div has unexpected close the right method is
<div class="headerClear"></div>
replace with this and add this to your css
body{ margin:0px;}
I am using a special link effect on <a> tags with the background-image: CSS. The links look nice but the website also contains a lot of <img> that are links, which also get the CSS.
I am currently solving the issue with jQuery: $("img").parent().css("background", "none");
Is there any correct way of doing this with CSS, getting this CSS not to affect tags.
Code:
a:link ,a:visited {
text-decoration: none;
background-image: url(/underline.png);
background-repeat: repeat-x;
background-position: bottom;
}
CSS4 defines the following syntax:
!a>img {background-image:none}
However, as far as I'm aware no browser supports it yet. It's also not final on where the ! goes, as a!>img and !a!>img all have been suggested.
So, basically, there is no CSS solution for this. However, there is a "hack" solution.
Assuming body {background:white}, you can do this:
a>img {background:white}
This will cover up the link's background with a white one, which essentially hides it. Adjust the colour as needed. Note that this won't work if your content area has a background image...
When I saw this: background-image: url(/underline.png); I got very nervous. Is there some special effect you need to employ here? What's wrong with the underline property in CSS?
To solve this in CSS2 you'll need to redesign your code. Therefore, this might be a bit impractical.
Keep your css code for links.
Then wherever you have a link with an image in there, you should add a class. Use this class to link CSS that overrides the typical behavior.
There is no way to do what you want in current CSS capabilities. Jquery works but it is afterall a hack.
a {
code here that you want
}
a.img {
override properties
}
<!-- Html -->
Normal Text
<a class="img" href="#"><img src="image.png" width="x" height="y" alt="" /></a>
Some food for thought -> The reason CSS does not support what you seek is because a child should not define a parent's style! AFterall, we (as people) do not define our parents' traits but we surely override what we inherited.
What would be the difference in your links ?
Domain, peticular folders, extension name , etc...
I asked cause you could filter them by url.
[href~=picto] will mathch if url contains picto or something similar
[href^="image/] will match any url begining with image/whatever_is_behind_or_not
[href*="image/] will match any url containing image/
[href$=".jpg"] will match any url ending with this .jpg extension
As you can see , there's nowdays lots of option , level4 will make it much easier though :)
Well, unless I am missing something, the solution to this is rather simple.
On a website I worked on I used the following two CSS rules to differentiate between linked text effects and linked image effects:
a:link {
/* rules for linked text effects */
}
a img {
/* rules for linked img effects */
}
Can you have a look at my code and please tell me why the hover is not working, thanks!
<style>
#moreDiscussHome:hover{
background-color: #ffffff;
}
</style>
<a id="moreDiscussHome" style="color:#f1f7f8;background-color:#12a1b7;" href="">more discussions</a>
Well, as soon as display: none; is applied, you are no longer hovering the element because it is not there, so it will basically flicker constantly or do nothing.
Try opacity* instead perhaps:
#moreDiscussHome:hover {
opcaity: 0;
}
Note that the element still retains it's space in the layout with this, which may not be what you want... but I'm honestly not sure what you're trying to achieve with this.
Side note: There's no reason not to move those other inline styles to a stylesheet.
This doesn't work: #moreDiscussHome:hover{ background-color: #ffffff; }
EDIT: I strongly urge you to move all inline styles to a CSS file. If for no other reason, to avoid some of the issues you already seem to be having with trying to apply background colors. A shortcut might seem easier at the time, but as the saying goes: "Shortcuts make for long delays". (In other words, don't do it)
* visibility:hidden will respond to :hover the same as display:none, so it won't work either. Thanks to thirtydot for the tip.
I'm used to use padding + background-image to place an icon next to a link.
There are many example of this approach. Here is one from here:
<a class="external" href="http://www.othersite.com/">link</a>
a.external {
padding-right: 15px;
background: transparent url(images/external-link-icon.gif) no-repeat top right;
}
But most browser don't print background image, which is annoying.
What is the standard to place icon next to links which is semantically correct and works in all cases?
EDIT
What about CSS :before and :after? Is it a recommended practice?
a.test:after {
padding-right: 5px;
content: url(../pix/logo_ppk.gif);
}
I'd personally pad it and put a background image via a CSS class (just like your example). It's by far the lightest route, it keeps the document light and semantic.
If printing them really matters (and I do mean really matters) stick a real image in there but be aware that it does screw up markup from a semantic aspect.
Perhaps a better compromise solution would be to have a "printable version" which uses images instead (either by something server-size or some JS that replaces the CSS class with an actual image.
Although as OLi saying keep icon in css is best method and there is no way to print css backgrounds. (until you turned on css background printing from browser settings).
but if you can use javascript then this method will work for you
http://www.learningjquery.com/2008/08/quick-tip-dynamically-add-an-icon-for-external-links
you can add inline image to link.