I have a page which has some data in form of tables
Currently, for one of the columns(which is a link) I need to display a text on hover and was able to do it successfully by giving the title in the tag. Now , I tried applying css to the text on hover and following is the snippet
CSS
a.changes:hover {text-decoration: none; }
a.changes p {position: absolute; left: -9999px;border-style:solid; border-color:black; border-width:1px;}
a.changes:hover p {left: 5%; background: #ffffff; size:1px;}
and in the html, I removed the title from the a tag and gave it in inside tag
<a href='#' class='changes' onclick='AAA'><font color=blue>XYZ</font><p style='width:100px;'>TextToBeDisplayedOnHover</p></a>";
The above snippet works fine on the current display. But when I scroll down the page and then try to display to text on hover by selecting the last element, then the title is not getting displayed at well. My guess the text on hover has gone beyond the display page vertically.
Someone please help me in this. I need this hover to work for all the rows in the table in the current page as well as the next pages and not just the current display alone as happens in my case
Thanks in advance.
I don't quite understand your problem but you have 100 pixels wide container so the "TextToBeDisplayedOnHover" doesn't fit into the container. You could try this (or widen the container):
a.changes:hover p {left: 5%; background: #ffffff; size:1px;width:100px;overflow:scroll;}
Lose the inline styles in the hovering ´p´. (You're using CSS already.)
<a href='#' class='changes' onclick='AAA'>XYZ<p>TextToBeDisplayedOnHover</p></a>
If you use spaces in the hovering text ("Text To Be Displayed On Hover") you'll be less likely to run out of space.
If blue isn't the the default font color, add this to your styles:
a {color:blue;}
Related
I want to:
be able to style some text on my HTML page so that a certain background color only covers the text and not beyond it.
Ideally I would like to control this from one div.
Here is my jsfiddle of the below:
#edit_this_div {
min-width: 0px;
background-color: yellow;
}
#bad_way {
background-color: yellow;
display: inline-block
}
<div id="edit_this_div">Please edit this div to there isn't extra yellow background without manually setting the width.</div>
<br>
<div id="bad_way">This is the inefficient and manual way.</div>
What I tried:
The way I thought of accomplishing this is to set the div as an inline block, which I've also shown in my jsfiddle. However, I rather not do this because I feel it would complicate things; when I did this my block started jumping around and combining with other elements. I don't plan to have any other elements with the div so I am fine with it staying as a block that takes up the whole line on the screen.
With the display of block, I also tried setting the padding and minimum widths but it doesn't have an effect laterally for removing the extra color that spills past the text.
It is generally recommended that you put text into appropriate block tags, i.e. <p>...</p>, <h1>...</h1>, <blockquote>...</blockquote>, etc.
If you did that, it would be easy, for example:
<div id="edit_this_div">
<p>Please edit this div to there isn't extra yellow background without manually setting the width.</p>
</div>
Then the CSS:
#edit_this_div p {
background-color: yellow;
display: inline;
}
Even cleaner would be to use both <p>-tags as well as additional inline tags, for example <span>-tags:
<div id="edit_this_div">
<p><span>Please edit this div to there isn't extra yellow background without manually setting the width.</span></p>
</div>
CSS:
#edit_this_div p span {
background-color: yellow;
display: inline;
}
What you need is <mark></mark> tag, like this:
<p>Do not forget to buy <mark>milk</mark> today.</p>
Here's a fiddle for you:
http://jsfiddle.net/am9rzfmd/
The default css settings for this tag are:
mark {
background-color: yellow;
color: black;
}
So you don't have to explicitly define the css, only just in case you need to change the color.
Update
As misterManSam pointed out:
Be aware that the element has a special semantic meaning and
shouldn't be used if you just want "to make my text a yellow
background"
Change it from a div to a span and it will only stretch its width to the contents within it.
<body>
<span id="edit_this_div">Please edit this div to there isn't extra yellow background without manually setting the width.</span>
<br>
<br>
<span id="bad_way">This is the inefficient and manual way.</span>
</body>
http://jsfiddle.net/bbv5ryhk/
I am trying to style a box for the alternative text in pictures. If a pictures doesn't exist I want the alternative-text to appear in a box with text in it that looks like a picture. It works on PC, but it doesn't look the way I want on Mac. A thin grey border appears and a question mark is placed in the middle.
Picture: http://postimg.org/image/tte1lw8sj/
This is my HTML for the pictures
<a href='LINK.php?id=$id'><img src='$filename' class='headerimg' alt='$alttext' width='300'></a>
And this is my CSS:
.headerimg {
color: #000;
font-size: 20px;
margin-bottom: 5px;
max-height: 120px;
border: none;
}
Does any one know why it box looks different on Mac?
The rendering of an img element in situations where the image is not displayed is very browser-dependent, and you cannot expect to style it consistently. For example, some browsers simply render the alt text as if the element were just replaced by that text (and some people think that this is really the most appropriate way).
Unless you need to support rather old browsers, consider using an object element instead. It allows the fallback content to be normal HTML, and you can put an element there and style it as desired:
<object data='$filename' width=300><span class=alt>$alttext</span></object>
I used to have the following structure to hold a logo with a link inside a div:
<a href="http://mysite.com">
<div class="logo"></div>
</a>
with the following CSS:
.logo {
float: left;
width: 120px;
height: 24px;
background: url('logo.png') no-repeat;
}
Is it wrong or there's any problem with compatibility if I remove the DIV and apply the 'logo' class directly to the A element? Just like this:
No, nothing wrong with it. It's actually better to do it that way, less redundant markup.
Some other things to note:
It's actually not valid for doctype other than HTML5 to put a block element (in this case, the div) inside an <a>
You should put a text inside the <a> for SEO/screen reader purpose and hide the text using text-indent:-999px and overflow:hidden. display:block is unnecessary as float:left implicitly sets it.
There is nothing wrong in doing this. You will need to add display:block for dimensions to apply to a non block level element, but as for how the site is read and crawled, no it will not hurt you.
You can make img a block element using this:
.logo {
float: left;
width: 120px;
height: 24px;
background: url('logo.png') no-repeat;
display:block;
}
And as the others are saying it is safe to use an a-tag with a background but normally i have the logo in a div and an anchor on top. Good luck ; )
It creates a major accessibility problem and is in direct violation of Guideline 1.1 of the modern accessibility guidelines, WCAG 2.0: “Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.” The content of the a element is empty, and a background image is displayed, when CSS is enabled and image loading is enabled; but there is no text alternative.
And you cannot specify a text alternative for a background image. Use a content image instead:
<img src="logo.png" alt="ACME">
Here “ACME” is to be replaced by a descriptive name or abbreviation for the linked page.
By default, an image that is a link has a colored border, with the same color as link texts. You can remove it by using border="0" in the img tag or a img { border: none } in CSS.
I'm coding a site which has a big company logo at the top left.
So I code it with the logo as the background image, the company name in an H1, and hide the H1 using image-replacement techniques.
But there's no "home" link in the rest of the site's navigation. The logo is probably intended to be the "home" link. But because of the semantic/image-replacement technique, there's nothing to click.
What would you do in this situation? Position something transparent over the logo is my first thought, but I'd like to hear other suggestions.
Very simple - put an Company name inside your H1 element, and apply your image replacement styles to h1#logo a (or whatever selector you use). You'll need to add display:block; to the styles, to have the anchor behave correctly.
Let me know if you need more detail than this!
Extra detail:
OK - I usually use the following HTML and CSS for image replacement:
HTML:
<h1 id="logo">
[Company name]
</h1>
CSS
#logo a {
display:block;
width: 200px; /* Or whatever you like */
height: 0;
padding-top: 100px; /* The required height */
text-indent: -999em; /* negative text indent, leaves the box alone, and in ems to scale with text */
overflow: hidden;
background: /*whatever you like */;
}
This is a kind of 'double-strength' - the height:0/padding-top technique creates a box the size you need, but without any room for text to display (the background image will appear in the top padding, but the text won't). The big negative-text-indent is just a safety for browsers that get things wrong occasionally (old webkit used to have problems - not much of an issue nowadays).
Let me know how you go!
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;
}