www.webdeveloper.com
Page 1 of 3 123 LastLast
Results 1 to 15 of 31

Thread: Hover effect extending with cell border.

  1. #1
    Join Date
    Feb 2003
    Posts
    138

    Question Hover effect extending with cell border.

    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?
    Last edited by mike444; 03-05-2003 at 11:43 AM.

  2. #2
    Join Date
    Nov 2002
    Posts
    984

    Re: Hover effect extending with cell border.

    Originally posted by mike444
    ...but at the same time I want that 10px cell padding between the text link and its right side border.

    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.

  3. #3
    Join Date
    Feb 2003
    Posts
    138

    Re: Re: Hover effect extending with cell border.

    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.
    Last edited by mike444; 03-05-2003 at 01:56 PM.

  4. #4
    Join Date
    Nov 2002
    Posts
    4,473
    You could save yourself (and us) a lot of hopping around if you'd just post a link or some code.

  5. #5
    Join Date
    Nov 2002
    Posts
    984
    Try

    <span><a>text</a></span>

    with span {padding:0 10px; border:1px solid blue;}

  6. #6
    Join Date
    Feb 2003
    Posts
    138
    Originally posted by gil davis
    You could save yourself (and us) a lot of hopping around if you'd just post a link or some code.



    <HEAD>
    <TITLE>My First Stylesheet</TITLE>
    <STYLE TYPE="text/css">
    <!--
    table a:link, a:visited, a:active {text-decoration: none;}
    a:link {color:black;}
    a:visited {color:black; text-decoration: none}
    a:hover {color:black; background:white; text-decoration: none; }
    a:active {color:black; background:maroon; text-decoration: none}


    H1 { white-space : nowrap; color: black; font-size: 50px; font-family: impact; line-height: 45px; display:inline }

    H2 { white-space : nowrap; position: justify; color: black; font-size: 17px; font-weight: bold; font-family: arial; line-height: 19px; border: 3px double white; text-indent: 17px }

    #y { white-space : nowrap; color: black; font-size: 17px; font-weight: bold; font-family: arial; line-height: 19px; margin-left: 100px; margin-right: 0px }

    #f { white-space : nowrap; color: black; font-size: 17px; font-weight: bold; font-family: arial; line-height: 19px; margin-left: 100px; margin-right: 0px; padding-right: 0px }

    -->
    </STYLE></HEAD>



    <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.

  7. #7
    Join Date
    Jan 2003
    Location
    Atlanta, GA
    Posts
    571
    Do what stefan suggested:
    <span><a href="">Text</a></span>

    span {padding: 0 10px} /* First 0 is for top/bottom padding */

    Or in your case
    span.f {padding: 0 10px}

    BTW, why are you using <y></y> and <f></f>?

  8. #8
    Join Date
    Feb 2003
    Posts
    138
    Originally posted by nkaisare
    Do what stefan suggested:
    <span><a href="">Text</a></span>

    span {padding: 0 10px} /* First 0 is for top/bottom padding */

    Or in your case
    span.f {padding: 0 10px}

    BTW, why are you using <y></y> and <f></f>?
    yes. y?

  9. #9
    Join Date
    Jan 2003
    Location
    Atlanta, GA
    Posts
    571
    Originally posted by mike444
    yes. y?
    huh?

  10. #10
    Join Date
    Feb 2003
    Posts
    138
    Originally posted by nkaisare



    BTW, why are you using <y></y> and <f></f>?
    Oh, "Why"...I thought he said "Are"...

    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?]

  11. #11
    Join Date
    Nov 2002
    Posts
    2,632
    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.

  12. #12
    Join Date
    Feb 2003
    Posts
    138
    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?

  13. #13
    Join Date
    Nov 2002
    Posts
    2,632
    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.

  14. #14
    Join Date
    Feb 2003
    Posts
    138
    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>?

  15. #15
    Join Date
    Nov 2002
    Posts
    4,473
    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.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles