Menu
I need to change something without touching HTML codes.
So I have this code in my HTML
<span class="share"> <ul> <li>Share </li> <li class="twitter"><a href="#">twitter</a></li> <li class="facebook"><a href="#">facebook</a></li> <li class="delicious"><a href="#">delicious</a></li> <li class="friendfeed"><a href="#">friendfeed</a></li> <li class="addthis"><a href="#">share</a></li> <div class="clear"></div> </ul> </span> and this in CSS
.twitter { background: url('../images/tt.png') no-repeat; width: 10px; height: 14px; } This works fine, but twitter text is visible under the twitter logo, I don't want those texts to appear in my list, I want to replace them with images in CSS.
Is it possible to do without touching HTML Codes?
852
After the image is loaded, type or paste whatever text you want to hide in the bottom field. Then click the Write Data button on the top menu. You'll get a confirmation message in the status bar at the bottom of the window. For more security, I suggest also using the Encrypt feature.
You can use the user-select property to disable text selection of an element. In web browsers, if you double-click on some text it will be selected/highlighted. This property can be used to prevent this.
A text-overflow property in CSS is used to specify that some text has overflown and hidden from view. The white-space property must be set to nowrap and the overflow property must be set to hidden. The overflowing content can be clipped, display an ellipsis ('…'), or display a custom string.
1 To hide text from html use text-indent property in css .classname { text-indent: -9999px; white-space: nowrap; } /* for dynamic text you need to add white-space, so your applied css will not disturb. nowrap means text will never wrap to the next line, the text continues on the same line until a <br>tag is encountered
The most cross-browser friendly way is to write the HTML as <h1><span>Website Title</span></h1> then use CSS to hide the span and replace the image h1 {background:url(/nicetitle.png);} h1 span {display:none;} If you can use CSS2, then there are some better ways using the contentproperty, but unfortunately the web isn't 100% there yet. Share
The controlling link is the easiest part. Simply create a link as you would to another page. For now, leave the href attribute blank. Place this anywhere on your webpage. Create the div element you want to show and hide. Make sure that your div has a unique id on it. In the example, the unique id is learn HTML . This is the content column.
If an element’s visibility property is set to hidden, then the element is “visually hidden.” Being “visually hidden” sounds a lot like what display: none does, but it’s incredibly different in that the element is generated and rendered, but invisible.
Make the text transparent. Since it's a link, you'll want to use a few selectors to make sure all cases are addressed:
.twitter a, .twitter a:link, .twitter a:visited { color: transparent; } Edit: This other option, while more verbose, has the benefit of keeping the focus border (the little dots that appear when a link is selected) to the size and shape of the twitter icon. Also, the text will not be revealed if selected and copied and pasted. It becomes invisible and unselectable. Here is the technique:
.twitter a { display: inline-block; overflow: hidden; width: 0; height: 14px; padding-left: 10px; } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
