RE: [WSG] hover div fill query
ivanovitch
The demo page is at http://imeet.com.au/aa2/ - it's cut right backto
highlight my problem. Ignore the content, and the site URL
I'm trying to find a way to make blocks of text in a div (item) to
display the hover background for the entire div, and not just the
linked text.
Adding
.item a { display: block; }
to your stylesheet solved it for me (in Firefox anyway, not tested in anything
else)
Patrick
Patrick H. Lauke
Web Editor / University of Salford
http://www.salford.ac.uk
Web Standards Project (WaSP) Accessibility Task Force
http://webstandards.org/
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] hover div fill query
Thanks for the prompt response, Tim - but your suggestion did not alter the output (in my browser, at least). Sounded plausible, though... Anyone else? On 14/11/05, Tim Burgan [EMAIL PROTECTED] wrote: If I remember correctly (others, please correct me if I'm wrong).. Make your links block elements with a height and width. e.g. div.item a ( display: block; height: 100%; width: 100%; } I think that should do the trick.. maybe? Tim ivanovitch wrote: Dear all I've been trying very hard to propel myself into the 21st century and apply web standards and use good CSS as much as possible, but I'm stuck on getting a div to honour a hover state that I am trying to build. Guidance appreciated... The demo page is at http://imeet.com.au/aa2/ - it's cut right backto highlight my problem. Ignore the content, and the site URL I'm trying to find a way to make blocks of text in a div (item) to display the hover background for the entire div, and not just the linked text. I'd also like the hover state to apply to only the divs in question, and not all other linked text. What am I doing wrong? I can do this standing on my head and one hand behind my back using tables, but I'm not going back now. And yes, I've googled myself to death on this one, which is why I'm asking! Thanks in advance. I.K. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] hover div fill query
On 11/14/2005 4:44 AM ivanovitch wrote:
I've been trying very hard to propel myself into the 21st century and
apply web standards and use good CSS as much as possible, but I'm
stuck on getting a div to honour a hover state that I am trying to
build. Guidance appreciated...
The demo page is at http://imeet.com.au/aa2/ - it's cut right backto
highlight my problem. Ignore the content, and the site URL
This did it for me (adding stuff for the a selector and moving the
padding there):
style type=text/css
div.input {border-color: #ccc;border-width: 1px 1px 0px
1px;border-style: solid;}
div.item {border-bottom: #999;border-width: 0 0 1px 0;border-style: dotted;}
#author {font-size: 1.2em;color: #f30;font-weight: bold;}
#comment {font-size: 1.0em;color: #666;}
#timestamp {font-size: 0.9em;color: #999;}
a {
padding: 2px 0px 3px 0px;
display: block;
}
a:link {text-decoration: none;}
a:visited {text-decoration: none;}
a:hover {background: #fc3;color: #fff;}
/style
--
Steve Clason
Web Design and Development
Boulder, Colorado, USA
www.topdogstrategy.com
(303)818-8590
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] hover div fill query
ivanovitch wrote: Thank you: this is a great improvement, but not quite there. I've added the extra declaration as shown, but... This addtion only hovers the text component, not the entire span area. A table cell would go to the ruled edges - it's only a few pixels, I know, but it's important. (and I've not solved the white text on hover, either!). Your two problems are related to the box model (padding) and selector specificity; see: http://webtuitive.com/samples/aa2.html HTH, -- Hassan Schroeder - [EMAIL PROTECTED] Webtuitive Design === (+1) 408-938-0567 === http://webtuitive.com dream. code. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] hover div fill query
ivanovitch wrote: Thank you: this is a great improvement, but not quite there. I've added the extra declaration as shown, but... This addtion only hovers the text component, not the entire span area. A table cell would go to the ruled edges - it's only a few pixels, I know, but it's important. (and I've not solved the white text on hover, either!). Adding the proposed declarations to your DEMO page works just fine. Are you checking it there, or are you adding the extra CSS to your actual live project, rather than the cut back demo one? If that's the case, you probably have some more rules in your full page that are interfering with the proposed styles. Can you not post the URL to your full page? P -- Patrick H. Lauke __ re·dux (adj.): brought back; returned. used postpositively [latin : re-, re- + dux, leader; see duke.] www.splintered.co.uk | www.photographia.co.uk http://redux.deviantart.com __ Web Standards Project (WaSP) Accessibility Task Force http://webstandards.org/ __ ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] hover div fill query
Nope: it's the demo page that is failing. Might be the browser (I'm using Safari and Firefox at present, and rebuilding my Windows box after a trojan popped in). We're only talking a few pixels: the text does show the hover state, but if I were to use a table cell, the entire cell would show it. At present, the hover finishes at exactly the edge of the text, and not to the div border. Also, haven't licked the white text on hover bit, either - and yes, I can see a conflict with the author/comment/timestamp tags. On 15/11/05, Patrick H. Lauke [EMAIL PROTECTED] wrote: ivanovitch wrote: Thank you: this is a great improvement, but not quite there. I've added the extra declaration as shown, but... This addtion only hovers the text component, not the entire span area. A table cell would go to the ruled edges - it's only a few pixels, I know, but it's important. (and I've not solved the white text on hover, either!). Adding the proposed declarations to your DEMO page works just fine. Are you checking it there, or are you adding the extra CSS to your actual live project, rather than the cut back demo one? If that's the case, you probably have some more rules in your full page that are interfering with the proposed styles. Can you not post the URL to your full page? P -- Patrick H. Lauke __ re·dux (adj.): brought back; returned. used postpositively [latin : re-, re- + dux, leader; see duke.] www.splintered.co.uk | www.photographia.co.uk http://redux.deviantart.com __ Web Standards Project (WaSP) Accessibility Task Force http://webstandards.org/ __ ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] hover div fill query
ivanovitch wrote:
Nope: it's the demo page that is failing. Might be the browser (I'm
using Safari and Firefox at present, and rebuilding my Windows box
after a trojan popped in).
We're only talking a few pixels: the text does show the hover state,
but if I were to use a table cell, the entire cell would show it. At
present, the hover finishes at exactly the edge of the text, and not
to the div border.
You have some padding in there, isn't?
Remove padding from div.item {}
Thierry | www.TJKDesign.com
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] hover div fill query
ivanovitch wrote:
We're only talking a few pixels: the text does show the hover state,
but if I were to use a table cell, the entire cell would show it. At
present, the hover finishes at exactly the edge of the text, and not
to the div border.
Ah, hang on, missed the bit about the white space. Why not just set the
padding on both div.input and div.item to 0, and reapply the padding in
div.item a:link? Also, you don't need the width: 100%; and height: 100%
in the a:link
Something like
div.input {border-color: #ccc;border-width: 1px 1px 0px
1px;border-style: solid;padding: 0;}
div.item {padding: 0;border-bottom: #999;border-width: 0 0 1px
0;border-style: dotted;}
div.item a:link {padding: 5px; text-decoration: none; display: block;
}
--
Patrick H. Lauke
__
re·dux (adj.): brought back; returned. used postpositively
[latin : re-, re- + dux, leader; see duke.]
www.splintered.co.uk | www.photographia.co.uk
http://redux.deviantart.com
__
Web Standards Project (WaSP) Accessibility Task Force
http://webstandards.org/
__
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] hover div fill query
This is a really brief answer, but should get you started on the right
track to thinking about the C in CSS =)
First, some house work: id must be unique, class can be reused on any
number of elements.
Second, the following demonstrates the use of the cascade - C - to color
the author class:
a:hover .author {color:#fff;}
Create similar rules begninning with a:hover to apply the styles you want
to anything contained within the a element.
kind regards,
Terrence Wood
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] hover div fill query
Patrick H. Lauke wrote: Ah, hang on, missed the bit about the white space. Why not just set the padding on both div.input and div.item to 0, and reapply the padding in div.item a:link? Also, you don't need the width: 100%; and height: 100% in the a:link The width is not needed, but I believe the height should be equals to 0, 1% or whatever (but *not* 100%), to prevent IE5 from doing some shrink-wrapping. Thierry | www.TJKDesign.com ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] hover div fill query
Tried height adjustments (0, 1, 99%) in Safari, but no dice. It seems as though the padding (needed here) is getting in the way no matter what. I didn't think that the full-width div color would be so tricky. I think that I can work my head around Terence's advice on the text color (Thanks, Terence), but the issue of the div not taking the full color is bothering me. I've also yet to see what transpires in Win/IE - so might ask others to check it out once I'm closer to the final output. On 15/11/05, Thierry Koblentz [EMAIL PROTECTED] wrote: Patrick H. Lauke wrote: Ah, hang on, missed the bit about the white space. Why not just set the padding on both div.input and div.item to 0, and reapply the padding in div.item a:link? Also, you don't need the width: 100%; and height: 100% in the a:link The width is not needed, but I believe the height should be equals to 0, 1% or whatever (but *not* 100%), to prevent IE5 from doing some shrink-wrapping. Thierry | www.TJKDesign.com ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] hover div fill query
On 15/11/05, Terrence Wood [EMAIL PROTECTED] wrote:
This is a really brief answer, but should get you started on the right
track to thinking about the C in CSS =)
First, some house work: id must be unique, class can be reused on any
number of elements.
Oops - leftover from the bigger site... Thanks!
Second, the following demonstrates the use of the cascade - C - to color
the author class:
a:hover .author {color:#fff;}
Got it - Thanks again. So simple when you know how, no? Now for the
'div complete fill problem'.
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] hover div fill query
ivanovitch said:
I didn't think that the full-width div color would be so tricky.
Try using the following css:
div.input{border-top: 1px dotted #999;border-right: 1px dotted
#999;border-left: 1px dotted #999;}
div.item {padding: 0;border-bottom: 1px dotted #999;margin: 0px; width:
100%;}
div.item a:link {text-decoration: none; display: block;}
span.author {font-size: 1.2em;color: #f30;font-weight: bold;}
span.comment {font-size: 1.0em;color: #666;}
span.timestamp {font-size: 0.9em;color: #999;}
a:hover .author {color:#fff;}
a:hover .comment {color:#fff;}
a:hover .timestamp {color:#fff;}
a:link {text-decoration: none;padding: 5px;}
a:visited {text-decoration: none;}
a:hover {background: #fc3;color: #fff;}
Works well in FF Mac (haven't had time to x-check)
HTH
Sarah :)
--
XERT Communications
email: [EMAIL PROTECTED]
office: +61 2 4782 3104
mobile: 0438 017 416
http://www.xert.com.au/
web development : digital imaging : dvd production
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
