CSS and background colours...

  • Uzzo
  • Graduate
  • Graduate
  • Uzzo
  • Posts: 136
  • Loc: London

Post 3+ Months Ago

Hi

I have a table and some links in it. Is there a way i can have it so that when the user hovers over a link, not only does the background of the text turn grey, but also the cell its in?

Thanks.
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

if you just have links inside the cells, then make the links 100% height and width, alternatively you can do
Code: [ Select ]
td:hover{
background-color:#999;
}
  1. td:hover{
  2. background-color:#999;
  3. }

which won't work in IE :roll:

Or you can use javascript:

Code: [ Select ]
onmouseover="this.parentElement.style.backgroundColor='#999';"


But you mat need to check the spellings/caps in the jscript one.
  • gsv2com
  • Professor
  • Professor
  • User avatar
  • Posts: 776
  • Loc: Nippon

Post 3+ Months Ago

Set the links display type to block; Then it'll stretch 100% across the cell automatically.

td a:link{display:block; background:#abc; color:#abc;}
td a:hover{background:#cba; color:#cba;}

I'm also finding out it is good to stick your links in a list (ul or ol). Go http://css.maxdesign.com.au/listamatic/ for more information on that.
  • gsv2com
  • Professor
  • Professor
  • User avatar
  • Posts: 776
  • Loc: Nippon

Post 3+ Months Ago

"I'm also finding out it is good to stick your links in a list (ul or ol)".

What I meant to say is it's best if you've got a navigation bar or link list, it's best to use a list (ul or li) since that's essentially what a navbar is--a list of links to different pages.

Then use the block method. Your web page will fall apart gracefully on browsers with no css support using this method rather than just using display:block alone.
  • b_heyer
  • Web Master
  • Web Master
  • User avatar
  • Posts: 4581
  • Loc: Maryland

Post 3+ Months Ago

gsv2com wrote:
I'm also finding out it is good to stick your links in a list (ul or ol). Go http://css.maxdesign.com.au/listamatic/ for more information on that.


That IS an awesome link man! :-D
  • JrzyCrim
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2062

Post 3+ Months Ago

Excellent site! I need to add that to my big list...

Cheers,
  • Uzzo
  • Graduate
  • Graduate
  • Uzzo
  • Posts: 136
  • Loc: London

Post 3+ Months Ago

gsv2com wrote:
Set the links display type to block; Then it'll stretch 100% across the cell automatically.

td a:link{display:block; background:#abc; color:#abc;}
td a:hover{background:#cba; color:#cba;}


Quality! Ive used this and its worked perfectly. Is there a way to have it so that it only applies to the table with the links, and not the links elsewhere?
The page Im talking about is http://cms-stu-iis.gre.ac.uk/db810/arrive/index.htm

This isnt the version of the site with the right css but its only the links on the left that this needs to apply for. The link in the main body of the page doesnt need the samme effect, i.e., the background colour changes when the user moves the mouse over the link.

Thanks.
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

Uzzo wrote:
gsv2com wrote:
Is there a way to have it so that it only applies to the table with the links, and not the links elsewhere?


give the table an id then in the css use

Code: [ Select ]
table#myId a{
  /*css stuffs here*/
}
  1. table#myId a{
  2.   /*css stuffs here*/
  3. }


(any a tag within the table that has id="myId")
  • gsv2com
  • Professor
  • Professor
  • User avatar
  • Posts: 776
  • Loc: Nippon

Post 3+ Months Ago

You can also use ul and li to make a horizontal navbar. Learned this trick the listutorials as well. See it in action at http://www.englishrescue.com. The links are on the top-right. The page is still in progress, so don't even think about critiquing it!!! :P But using lists for navigation kicks butt! Quality!
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

just out of curiousity, what do those links do hat you couldn't do just using <a> tags with display:block....
I don't quite get why the list is needed. Maybe I'm overlooking something simple :)
  • gsv2com
  • Professor
  • Professor
  • User avatar
  • Posts: 776
  • Loc: Nippon

Post 3+ Months Ago

Because if you don't use li, your links look like crap in a browser without css support. With li, they appear as a list--as they should.

I thought the same thing as you when I first read about this, but after trying it and seeing the results on a cellphone browser without css support, it all makes sense.
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

Lots of different solutions! Mine was all style sheet...

Code: [ Select ]
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    body{font-family:tahoma,sans-serif;font-size:10px;}
    h1{font-size:21px;}
    #news{width:475px;height:355px;overflow:auto;background:#C30;border-top:1px solid #9ABAE1;border-right:1px solid #E4ECF3;border-bottom:1px solid #E4ECF3;border-left:1px solid #9ABAE1;}
    #news p{margin:0 0 5px 0;}
    #news a{display:block;padding:3px 4px 4px 4px;border-bottom:1px solid #9ABAE1;color:#CCC;}
    #news a:hover{color:#444;text-decoration:none;background:#FFF;}</style></head>

<body>
    <div id="news">
        <a href="not.htm"><h1>Ma quande lingues</h1><p>Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues. It va esser tam simplic quam Occidental: in fact, it va esser Occidental. A un Angleso it va semblar un simplificat Angles, quam un skeptic Cambridge amico dit me que Occidental es.</p></a>
        <a href="not.htm"><h1> Li nov lingua franca </h1><p>Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues. It va esser tam simplic quam Occidental: in fact, it va esser Occidental. A un Angleso it va semblar un simplificat Angles, quam un skeptic Cambridge amico dit me que Occidental es.</p></a>
        <a href="not.htm"><h1>Por scientie, musica</h1><p>A un Angleso it va semblar un simplificat Angles, quam un skeptic Cambridge amico </p></a>
        <a href="not.htm"><h1>Omnicos directe al desirabilit√° </h1><p>A un Angleso it va semblar un simplificat Angles, quam un skeptic Cambridge amico .</p></a>
        <a href="not.htm"><h1>Duis autem veleum</h1><p>A un Angleso it va semblar un simplificat Angles, quam un skeptic Cambridge amico </p></a></div></body></html>
  1. <?xml version="1.0" encoding="iso-8859-1"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5.     <title></title>
  6.     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  7.     <style type="text/css">
  8.     body{font-family:tahoma,sans-serif;font-size:10px;}
  9.     h1{font-size:21px;}
  10.     #news{width:475px;height:355px;overflow:auto;background:#C30;border-top:1px solid #9ABAE1;border-right:1px solid #E4ECF3;border-bottom:1px solid #E4ECF3;border-left:1px solid #9ABAE1;}
  11.     #news p{margin:0 0 5px 0;}
  12.     #news a{display:block;padding:3px 4px 4px 4px;border-bottom:1px solid #9ABAE1;color:#CCC;}
  13.     #news a:hover{color:#444;text-decoration:none;background:#FFF;}</style></head>
  14. <body>
  15.     <div id="news">
  16.         <a href="not.htm"><h1>Ma quande lingues</h1><p>Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues. It va esser tam simplic quam Occidental: in fact, it va esser Occidental. A un Angleso it va semblar un simplificat Angles, quam un skeptic Cambridge amico dit me que Occidental es.</p></a>
  17.         <a href="not.htm"><h1> Li nov lingua franca </h1><p>Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues. It va esser tam simplic quam Occidental: in fact, it va esser Occidental. A un Angleso it va semblar un simplificat Angles, quam un skeptic Cambridge amico dit me que Occidental es.</p></a>
  18.         <a href="not.htm"><h1>Por scientie, musica</h1><p>A un Angleso it va semblar un simplificat Angles, quam un skeptic Cambridge amico </p></a>
  19.         <a href="not.htm"><h1>Omnicos directe al desirabilit√° </h1><p>A un Angleso it va semblar un simplificat Angles, quam un skeptic Cambridge amico .</p></a>
  20.         <a href="not.htm"><h1>Duis autem veleum</h1><p>A un Angleso it va semblar un simplificat Angles, quam un skeptic Cambridge amico </p></a></div></body></html>
  • gsv2com
  • Professor
  • Professor
  • User avatar
  • Posts: 776
  • Loc: Nippon

Post 3+ Months Ago

dM, I'm not sure exactly what you're trying to do with that code, but that's an interesting and original use of css. I cringed at first when I saw a p tag nested in a link, but makes sense now. Nice job. Not bad.

What exactly are you trying to do with that anyway?
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

It's a snippet of code from a site that I'm working on. I wanted a collection of news articles to be contained in the front page for their keywords. I needed to manage their display somehow. That was my solution. I modified it a good bit for my example.

Technically, it's illegal. You're not supposed to nest block level elements like that. But, it works in my test cycle, without fail - even Opera.
  • gsv2com
  • Professor
  • Professor
  • User avatar
  • Posts: 776
  • Loc: Nippon

Post 3+ Months Ago

You little rule breaker you! :)

Like I said, it's interesting and original. It might not validate as perfect html, but it is a solution and the code is lightweight.
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

you could make it validate by using a couple of spans with classes inside the link, hoverever you lose the advantages of the <h*> tag for seo etc. Or you could replace the <h> with a <b> and the <p> for a span....

Depends how concerned you are about validating. And as gsv says, it is an interesting use of css.

Post Information

  • Total Posts in this topic: 16 posts
  • Users browsing this forum: No registered users and 40 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.