It's a challenge and not sure if that's even possible but here is my problem:
I don't have full access to the website. The only what I can do is to edit my external css.
Menu code:
<ul id="navPrimary" class="nav">
<li id="navLink1">Link1</li>
</ul>
I want to add this as first position on the list:
<li id="navHome"><i class="icon-home"></i></li>
I can ask system administrator to add link to Home but his code will look like this:
<li id="navHome">Home</li>
So there still will be the problem with replacing text Home with my <i class="icon-home"></i>.
The only thing which comes up to my mind regarding CSS is :before, :after and content but not quite sure how exactly to use it. As before I've tried adding single word.
EDIT1
I have tired this:
#navLink1:before{
content:'<li id="navHome"><i class="icon-home"></i></li>';
}
but this added only html code as text.
by using :before and :after you can add content to your HTML document. even you can add a icon too.
for eg
#navHome:before {
content:'';
display:block;
float:left;
width:20px; /* this must be the icon width*/
height:20px; /* this must be the icon height*/
background: url(icon.png) 0 0 not-repeat;
}
If you want to do so without using pseudo elements you can just hide the link text and add the icon as a background. To remove the text you do
display: inline-block; /* or block */
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
Then add the background as an image, sample:
http://codepen.io/anon/pen/vOYmoQ
This still requires the admin to add the link in for you.
Related
I want to create a menu item in Joomla 3 however use a sprite image instead of the link name. To do so I use the following html code and CSS to add a background image.
<a class="mobile-icon-cart sprite" href="/index.php/cart" style="width: 40px; height: 40px; display: block;">Cart</a>
How can I hide the text "Cart" in a nice way. Hiding the text from Joomla backend only works when uploading a picture but then I can't use the sprite image. Also I would not like to use color:#fff; for text.
Can't you use display:none? If you can't use display:none, you can try with removeChild() http://www.w3schools.com/jsref/met_node_removechild.asp or removeAttribute() http://www.w3schools.com/jsref/met_element_removeattribute.asp
Use
width:0;
height :0;
padding :40px 40px 0 0;
overflow: hidden ;
display: block;
On the following page, http://duncanmorley.com/ there are the following issues:
One cannot highlight text within the document
When a user hovers over an object with the ":hover" property applied,in the CSS file, the hover effect doesn't happen (See social icons at the top) (class="fb")
It seems that there is a transparent object over the page which is not allowing the user to interact with the elements. I'm unsure what this is, as there is nothing in the CSS file (that I can see) that suggests this is the issue.
I believe these issues are likely the result of one problem.
text-indent: -99999999px; causes the issue here because it will modify the area hover works, too.
Fix for the Facebook share button (an example)
Remove the text-indent style from the fb class and change <li class="fb">Facebook</li> to <li class="fb"><span class="hide">Facebook</span></li>
Now you can style the text the sr-only way:
.hide {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
At the end you should get the same effect, the "Facebook" text will be hidden for the visual presence and the hover effect will work on the entire element.
Oddly enough, your text-indent is too large. If you make it -9999999px instead, Chrome seems to like it better.
I have a outer container, containing two links. They are aligning horizontally. The first one contains a div with background image and the second one is just text. The problem is the whole outer container acts as the first anchor, links to the first url while it is supposed to link nothing. Here's the simplified layout
<div id="links-block">
<div id="edit-quote-button"></div>
Preview the PDF
</div>
Here is the example JSFiddle. I am just wonder how to structure this set of elements, to prevent this problem.
Define this css
a{display:inline-block;vertical-align: top;}
#preview-pdf-link {
float: right;
margin-top: -30px; // remove this line
color: #999999;
}
Demo
here is your new html structure
<div id="links-block">
<a class="g-link" href="http://www.google.com"><div id="edit-quote-button"></div></a>
<a class="y-link" href="http://www.yahoo.com" id="preview-pdf-link">Preview the PDF</a>
<div class="clear"></div>
</div>
add this css to your css file
.g-link{
display:block;
float:left;
}
.y-link{
display:block;
}
.clear{
clear:both;
height:0px;
width:0px;
display:block;
}
hope this will work for you
It's not a great idea to have a div inside the a like that (invalid in pre-HTML5). If you set the edit-quote-button div to display: inline-block it will work better, though. Then remove the negative top margin on the Yahoo link.
Need blue arrow after sentence end for a div it should auto display can we fix this with css
i found solution with css3 but i can't use css3 in this page
i am using a CMS and there is it's client who add and edit contain, can't write server side language nor javascript
i thought it is easy to fix with css but i am finding impossible to if it now
DemoLink
p:after
{
content: url('images/blue-arrow.png');
}
Assuming you save the blue arrow image at that location.
This is not a best practice, but the only way to do this in ie7 (without a polyfill) is to add an inline element to the end of each p tag (on the inside) and give it the appropriate image styling.
ex:
HTML
<p> Lorem Ipsum... <span class="arrow"></span></p>
CSS
p span.arrow{
display: inline-block;
background: url(img/arrow.png) no-repeat top left;
width: XXpx;
height: XXpx;
}
I have an interesting goal that hopefully, with your help, will be achieved.
I have this HTML structure:
<li>
<span class="buttonHighlight"></span>
BUY NOW
</li>
That HTML + a few CSS lines gives me this:
IMG 1 (see below)
As you can see, the span.buttonHighlight is overlapping the button itself. Now, here comes the interesting part: The button is a simple anchor tag with cufonized text, that has a few CSS styles which give it that rounded-button background. Hence, what I want to achieve, is putting the 3 elements (CSS background, cufonized text and Highlight) in this order:
IMG 2 (see below)
What I've tried so far was to aim at each element separately: The <span class="buttonHighlight"></span> as span.buttonHighlight, the CSS-driven background/box as a.button and the cufonized text as a.button .cufon . And luckily, the a.button .cufon is properly displaying; you can see it in FireBug:
IMG 3 (see below)
However, adding a z-index (of 101) that is superior to the z-index of span.buttonHighlight (100) did not help, i.e. the Highlight still overlapped the text.
You can find all the CSS styles relevant to this case here: pastie [dot] org/1478291
I really, really appreciate any help provided and your time.
Thank you so much!
Chris
**PS. Since I am not allowed to post images and only 1 hyperlink, i've stacked the 3 images below:
http://i.stack.imgur.com/Upe63.jpg:
z-index only works on positioned elements, you must specify postion:relative even if that is the default. Try this:
span.buttonHighlight {
background: url(assets/images/button_highlight.png) no-repeat top center;
z-index: 100;
position: relative;
}
and
a.button .cufon {
z-index: 101;
position: relative;
}