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">twitter</li>
<li class="facebook">facebook</li>
<li class="delicious">delicious</li>
<li class="friendfeed">friendfeed</li>
<li class="addthis">share</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?
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;
}
You could use text-indent:
text-indent: -9999px; /* get rid of any text */
Try making your font-size : 0px; in your css.
use text-indent with a little magic in it :)
HTML:
<span class="share">
<ul>
<li>Share </li>
<li class="twitter">twitter</li>
<li class="facebook">facebook</li>
<li class="delicious">delicious</li>
<li class="friendfeed">friendfeed</li>
<li class="addthis">share</li>
<div class="clear"></div>
</ul>
</span>
CSS:
a.twitter {
background-image:url('../images/tt.png');
display:block;
height:58px;
text-indent:-9999px;
width:200px;
}
So you see the text is indented but still the image is still clickable because i've put a class in the twitter link ;)
Related
Could you tell me how to bring menu's black background in front of the body text on the image below.
Here is JSFiddle link:
https://jsfiddle.net/johnking/j58cubux/6/
When you scroll down, the menu is not properly visible
<body>
<div class="uppersection">
<div class="menu" id="home">
<ul>
<li>
Home
</li>
<li class="drop">
About
<ul class="haha">
<li>Who am I?</li>
<li>Accomplishments</li>
<li>Academic Work</li>
<li>Future Plans</li>
</ul>
</li>
<li>
Resume
</li>
<li>
Portfolio
</li>
<li>
Contact
</li>
</ul>
</div>
<div class=textupper>Hello, I am John <br><br>Welcome To My Website!<br> <br>Feel Free To Navigate Around</div>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>Hi</body>
How can I fix the problem using css?
Thanks.
You need to add background for a too in case if parent li is hovered:
.menu ul li:hover a {
background-color: #00AFF0;
}
Demo: https://jsfiddle.net/j58cubux/7/
Or better solution is to set a background color to transparent by default:
.menu ul li a {
text-decoration: none;
color: white;
font-size: 21px;
text-align: center;
font-family: Segoe UI Local;
background-color: transparent; /* make it transparent */
}
Demo: https://jsfiddle.net/j58cubux/8/
Your menu a has a black background that is showing up above the blue background of the li.
Just remove that black background (remove this line):
background-color: black;
from your .menu ul li a definition.
JSFiddle: https://jsfiddle.net/j58cubux/10/
use the property "z-index: 1000;" in ".menu". So fix the menu at the top regardless of the scrolling content.
.menu {
background-color: black;
min-height: 77px;
width: 100%;
position: fixed;
z-index: 1000;
}
See you later!
I'm having black text appear instead of the colored text I expect to appear. I'm using Chrome as my browser. Here's the line that isn't working:
<ul class="line-legend">
<li>
<span style="background-color:rgba(220,0,0,1)">
</span>
one
</li>
<li>
<span style="background-color:rgba(0,0,220,1)">
</span>
two
</li>
</ul>
Here's how it appears:
onetwo
I'm very new to HTML.
Thank you.
Your text isn't inside the span, a nice identation should help you to identify when something like that happens.
Change it to the following:
<ul class="line-legend">
<li>
<span style="background-color: rgba(220,0,0,1)">one</span>
</li>
<li>
<span style="background-color:rgba(0,0,220,1)">two</span>
</li>
</ul>
Use this write your text in inside span
<ul class="line-legend"><li><span style="background-color:rgba(220,0,0,1); ">one</span></li><li><span style="background-color:rgba(0,0,220,1)">two</span></li></ul>
DEMO
it looks like you are using span so that you want different color for list style and text color so can use this solution for that
you can use pseudo css for styling the list styles which will not effect the li styles and you can give any style for the li like i have done
i have changed my list style color to green and background for li in different color
JS Fiddle
ul.line-legend {
list-style: none;
}
.line-legend li {
position: relative;
}
.line-legend li:before {
content: "\2022";
color: green;
font-size: 18px;
top: 0;
position: absolute;
left: -19px
}
.red {
background: red;
}
.blue {
background: blue;
}
<ul class="line-legend">
<li class="red">one</li>
<li class="blue">two</li>
</ul>
I have following structure: JSFiddle Demo
HTML & CSS Code is as following:
HTML:
<ul>
<li class="test"> Hello </li>
<li class="test"> Welcome </li>
<li class="test"> Test Process </li>
<li class="test"> Text Message </li>
</ul>
CSS
ul{
width: 100%;
}
.test{
height:20px;
width:20%;
border: 1px solid black;
border-radius: 3px;
display: inline-block;
float: left;
margin-left: 5px;
text-align: center;
}
When I resize the browser the <li> tag widget structure is working fine (Not breaking) but the text inside the widget are breaking like:
My question is How can I make the text inside the widget adjustable so that It will not break.
Is there any way to fix this using only CSS ?
Provide
min-width:20%;
instead of
width:20%;
It should work..
Fiddle: http://jsfiddle.net/ZZa8j/2/
If you want it to expand accordingly, you can simply remove the explicit height and set a min-height like this.
If you want to clip the text and indicate the user that text is clipped, you can use the text-oveflow property like this.
.test{
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
/*other styles*/
}
If you actually want the content to expand as much as possible and scoll if not, you could use Paulie_D's table-cell approach like he mentioned in comments.
Your images are blocked by my proxy so I'm not sure if it's the answer that you need, but you can avoid break between 2 words with the css property white-space.
white-space:nowrap;
see fiddle : http://jsfiddle.net/ZZa8j/4/
add min-width:450px; to the <ul>.
check my Fiddle Demo
CSS
ul{
min-width:450px;
width: 100%;
}
.test{
height:20px;
width:20%;
border: 1px solid black;
border-radius: 3px;
display: inline-block;
float: left;
margin-left: 5px;
text-align: center;
}
HTML
<ul>
<li class="test"> Hello </li>
<li class="test"> Welcome </li>
<li class="test"> Test Process </li>
<li class="test"> Text Message </li>
</ul>
Result
Code Demo
Try :
overflow: hidden;
min-width:100px;
I'm creating a website using my own design, and I had a complication recently. It's about the way the menu style is positioned. I find this problem hard to explain, so firstly, I'll show the images.
It should look like:
http://i.imgur.com/XINIlXC.jpg
It looks like:
http://i.imgur.com/RKrFZVz.jpg
As you can see, It's a simple horizontal menu with seperators between menu items, but the tricky part is the corner. In the image where everything works perfectly, I use a messy code, that's not compatable with lists, which I will need for drop-down menus later.
So, this is the messy code:
<div class="menu" id="menu-item">
<img src="images/top_menu_edge.png" style="margin-left:-23px;"/> <span style="margin-right:10px"> 1aaaa <span class="ms"></span> 2bbbb <span class="ms"></span> 3 </span>
</div>
The span.ms is just the menu seperator. As for all the other parts, I'm gonna show a css code.
#menu-item
{
position: absolute; /* The absolute position shouldn't be a problem, because everything is contained in div#header, and it's position is relative. */
bottom: 12px;
right: 0;
height: 34px;
background-position: bottom right;
z-index: 5;
color: #192c51;
}
.menu
{
position: absolute;
bottom: 0;
right: 0;
height: 34px;
background-image: url('images/top_menu_bg.png');
background-position: bottom right;
z-index: 5;
color: #192c51;
}
And this is the code that's fixed up, but for some reason, the image is not working:
<div class="menu" id="menu-item">
<div class="menu-item">
<img src="images/top_menu_edge.png" style="margin-left:-23px;"/>
<ul id="nav">
<li> Pagrindinis </li>
<li> Apie mus </li>
<li> Paslaugos </li>
<li> Kontaktai </li>
</ul>
</div>
</div>
And the extra css lines for ul and li:
#nav
{
list-style:none;
float:left;
}
#nav > li {
float: left;
}
#nav li+li
{
background:url('images/top_menu_sep.png') no-repeat top left;
padding-left:10px;
}
That's pretty much it, and I don't really get it why the tag ruins it all, yet I need it to do it. Does anyone have any subjections, how to fix it, or could show me the way? I'd be really thankful.
Cheers :)
If you give elements float, they will not have width if you place a non-float element nexto it. Remove all the floats and switch to display: inline-block or give everything float
I am trying to get my bullet-point.png images to show up on the right side of each of my navigation/li menu options.
I did it with some in-valid HTML5, but would prefer to do it properly. Here is my screenshot from before so it explains what I am after. (I previously just added in multiple strings on each menu item). I think it's better to have each menu item assigned to a class with a background-image defined instead.
The HTML/CSS below displays the navigation like the screenshot but without any of the bullet-point images. Any idea why?
HTML
<nav class="nav">
<div class="span12">
<ul>
<li class="bullet-point">HOME</li>
<li class="bullet-point">PROJECTS</li>
<li class="bullet-point">CASE STUDIES</li>
<li class="bullet-point">PROFILE</li>
<li class="bullet-point">NEWS & EVENTS</li>
<li class="bullet-point">LOCATION</li>
<li class="bullet-point">CONTACT</li>
</ul>
</div>
</nav>
CSS
.bullet-point {
margin-top: -5px;
margin-right: 10px;
background: url('img/bullet-point.png');
}
Fiddle: http://jsfiddle.net/avinvarghese/eemTZ/
Css:
.bullet-point {
margin-top: -5px;
margin-right: 10px;
list-style:none;
float:left;
}
.bullet-point:after {
content:" • ";
}
.bullet-point:last-child:after {
content: "";
}
It should be
ul {
list-style-image: url('img/bullet-point.png');
}
Background images do not apply here.