Here's one that CSS seems to be showing its limitations on (I'm new to website building- so I could be wrong- but here goes):
I have a text link with a mouse-over hover effect within a border. I set the right side cell padding between the border and the text link to be-- let's say, 10px. When I hold the mouse curser over the link, the hover effect extends the length of the cell padding. I want it to only highlight the text but at the same time I want that 10px cell padding between the text link and its right side border. To get the cell padding I want, I lose the mouse over effect I want. To get the mouse over effect I want, I lose the cell padding I want. In CSS it seems I can't have both. What's the deal?
Originally posted by Stefan
You want WHAT with the padding?
I think you left out a few words there, becuise I can't make sence of what you mean by that.
You know how when you have back ground shading that appears when the curser is over your text links? Well, that shading usually only covers the text that makes up the link. But when I add "cell padding" to a rule with a text link, the shading for that text link extends the length between the last letter in the text link to the border. In other words,
Without cell padding :
Text Link<---Hover effect shading stops here*.
With cell padding :
Text Link.............<---Hover effect shading stops here*.
*"Here" refers to tip of arrow.
Keep in mind the cell padding is to keep the text link from brushing up against the border I put around it. The border is not that of a Table-- these forums have steered me away from using tables (thank you)-- but is a CSS border.
<H2><a href="link.html">TEXT LINK ONE</a><span id="y"><y><a href="link">TEXT LINK TWO</a></y></span><span id="f"><f><a href="link">TEXT LINK THREE</a></f></span></H2>
"TEXT LINK THREE" is the link I want a cell padding of around 10px and with the hover effect only shading the background of the text, not the text PLUS the cell padding.
Why? Because I'm a total newbie, who's made about 50,000 revisions in order to get my future site up-to-snuff and I suppose you're about to tell me I have to make another revision. Somebody kill me. Kill me now. Please, I'm begging you. [Where's that smilie with the bullet hole in his forehead when you need it?]
There are no <f>, or <y> tags, so that's why you were asked why you used them. Of course, you would have figured this out if you were validating your pages from the get go.
Originally posted by spufi There are no <f>, or <y> tags, so that's why you were asked why you used them. Of course, you would have figured this out if you were validating your pages from the get go.
I thought you could use any letter you wanted to as a span id?
Aren't those valid tags?
id is an attribute of a tag and not a tag itself. Example, <span id="y">. The id attribute of that <span> tag is equal to the value "y." (without the double quotes) You can not create a legal tag called <y> in HTML. You can in XML, but that's another story.
I would suggest clicking on both my links in my signature. One is for finding a Doctype. I'm guessing you need one, and the other is to validate your code. When you get a list of errors and you are clueless about how to fix them, post your code, or a link to it, and we can see about what needs to be done to fix it.
Originally posted by spufi id is an attribute of a tag and not a tag itself. Example, <span id="y">. The id attribute of that <span> tag is equal to the value "y." (without the double quotes) You can not create a legal tag called <y> in HTML. You can in XML, but that's another story.
I would suggest clicking on both my links in my signature. One is for finding a Doctype. I'm guessing you need one, and the other is to validate your code. When you get a list of errors and you are clueless about how to fix them, post your code, or a link to it, and we can see about what needs to be done to fix it.
Thanks for the sugestion but I think you've already told me to go the wc3 link weeks ago and I know about validators. I have a doctype and I have a long way to go before I want to deal with validators. I tested a validator by putting Amazon.com's source through it and it came up with error after error. So I'm not going to worry about my site's performance in one of those (at least not just yet), though it's probably at my own peril. I try to keep my design and markup as simple as possible to avoid compatibility issues ;ie, not trying to do anything too fancy.
Anyway, I'm still hunting for ideas to fix this on-going (what was it again?)...over extended hover effect. I'm not sure if there is a difference between using #f or span.f and I don't know how to code span.f in the body anyway. Is it the same as #f? Like this <span id="f"><f>textlink</f></span>?
I'm not sure if there is a difference between using #f or span.f and I don't know how to code span.f in the body anyway. Is it the same as #f? Like this <span id="f"><f>textlink</f></span>?
"#f" is an ID syntax, and you can only us an ID once in a page - all IDs have to be unique. Using an ID in CSS will make your page bigger than it has to be.
"span.f" creates a CLASS that is only associated with a SPAN tag. You still have to declare the class that the span belongs to. This also can make your page bigger than it has to be (the class would be more useful/universal if it was not associated with one particular tag). You can apply a non-specific CLASS (e.g.: ".f") to any tag.
An "id" is quite different from a "class", even though you can specify a style sheet for each. An "id" is unique, and should be reserved for scripting purposes. A "class" can be applied to any tag, and to as many of them as necessary.
So the best way to do your little ditty would be:
<span class="f"> ... </span>
If the effect you want is a tight background color and an empty padding, then I would think something like this would do it for you:
Code:
<html>
<HEAD>
<TITLE>My First Stylesheet</TITLE>
<style type="text/css">
.wide {background-color: none; padding: 10pt}
.wide a {background-color: yellow}
.wide a:hover {background-color: lightgrey}
</style>
</HEAD>
<body>
<a href="link.html">TEXT LINK ONE</a>
<span class="wide"><a href="link.html">TEXT LINK TWO</a></span>
<a href="link">TEXT LINK THREE</a>
</body>
</html>
There seems to be a bug in IE 5.5, but NS 6.2 works as expected.
Hover effect extending with cell border.
Reply With Quote
Bookmarks