Re: [css-d] 2 small css problems
On Wed, Mar 17, 2010 at 8:43 PM, Rod Castello flashju...@sbcglobal.net wrote: --- On Thu, 3/18/10, Rory Bernstein r...@rorybernstein.com wrote: http://rorybernstein.com/francesca_proto/ On this page, I cannot get the hover to work on the nav bar links. The style sheet is here: http://rorybernstein.com/francesca_proto/style.css The rule that I think should be making the text links turn red when you hover is: #nav li a:hover { color: #FF000; When I look at the current version of the page I get the following error: Warning: Expected end of value but found ''. Error in parsing value for 'color'. Declaration dropped. Source File: http://rorybernstein.com/francesca_proto/style.css Line: 85 style sheet When I look at the style sheet I see the following: /* HOVER NOT WORKING!!! */ #nav li a:hover { color: #FF�; } You have a funny character in the code. Delete the line and retype it. This should fix the problem. Regards, Claude Needham __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] 2 small css problems
On Wed, Mar 17, 2010 at 8:33 PM, Rory Bernstein r...@rorybernstein.com wrote: Next, on this page: http://rorybernstein.com/francesca_proto/section_landing.html The div with the id of thumbnail_grid has a float:left rule. Shouldn't it sit alongside the div nav, and not under it? Why is it under it? I want the grid to sit to the right of the nav list. And, I can't figure out why the photos don't line up in neat rows/columns. Why is the grid irregular? The grid is irregular because the images are not the same height. If you make the images the same height then the irregular stuff should go away. To fix the nav and thumbnail_grid you can do the following. But first a word of disclaimer. I have learned css by doing tutorials and hacking around until stuff works. So, my background is not exhaustive. I am looking forward to other answers to this question. However, to just get the darn thing working so you can move on with your life you have a few options. Basically, as far as I know, the problem is you declare the width to be 100% If you give the width a value less than 100% it will work. You can either work with px or % If you choose px, then you should create a wrapper div that surrounds both the nav and the grig. Give this wrapper a width equal to the total width you want to use. Then give the grid a width = wrapper - nav. If you choose %, convert the 200px of the nav div to 20% or 25% or ??%, then make the grid 80% or 75%, etc. There is a possible issue with margin, padding, width combining differently in different browsers. So you might have to leave wiggle room in the widths. Hopefully someone with a broader background will clue us both in on this issue. But, in the mean time get your width down and things will work better. Regards, Claude Needham __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] 2 small css problems
There was some sort of weird invisible character at the end of the color rule ; that was what was messing up the rendered code. I removed it but the hover still is not working! I just started using coda (moving away from BBedit) and I find that something is causing these strange characters to be inserted into my code occasionally. I don't know why. Either way, the hover still doesn't work. I tried it 2 ways: #nav li a:hover { color: #FF000; } and #nav a:hover { color: #FF000; } I am sure it is something really silly, but I cannot find the problem. And if anyone knows the reason why I have the other problem with my thumbnail_grid div's position, please let me know! That's on this page: http://rorybernstein.com/francesca_proto/section_landing.html The div called thumbnail_grid should be next to the nav div, both of them under the logo. But the thumbnail_grid is getting pushed down and sitting under the nav. Here is that rule: #thumbnail_grid { position: relative; float: left; overflow: hidden; /* border: 1px solid red; */ width: 100%; } Thanks, Rory == On Mar 17, 2010, at 11:43 PM, Rod Castello wrote: --- On Thu, 3/18/10, Rory Bernstein r...@rorybernstein.com wrote: From: Rory Bernstein r...@rorybernstein.com Subject: [css-d] 2 small css problems To: CSS Discuss List css-d@lists.css-discuss.org Date: Thursday, March 18, 2010, 3:33 AM I have 2 small CSS problems and I just can't seem to figure them out: http://rorybernstein.com/francesca_proto/ On this page, I cannot get the hover to work on the nav bar links. The style sheet is here: http://rorybernstein.com/francesca_proto/style.css The rule that I think should be making the text links turn red when you hover is: #nav li a:hover { color: #FF000; Thanks, Rory Hi Rory, It seems as though you are missing the semi-colon, and the closing bracket. /* HOVER NOT WORKING!!! */ #nav li a:hover { color: #FF The above is what shows up in your CSS file. It should read: /* HOVER NOT WORKING!!! */ #nav li a:hover { color: #FF; */semi-colon added/* } */closing bracket added/* Maybe that will help Rod Castello __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] 2 small css problems
Am 18.03.2010 13:40, schrieb Rory Bernstein: There was some sort of weird invisible character at the end of the color rule ; that was what was messing up the rendered code. I removed it but the hover still is not working! I just started using coda (moving away from BBedit) and I find that something is causing these strange characters to be inserted into my code occasionally. I don't know why. Either way, the hover still doesn't work. I tried it 2 ways: #nav li a:hover { color: #FF000; } and #nav a:hover { color: #FF000; } I am sure it is something really silly, but I cannot find the problem. And if anyone knows the reason why I have the other problem with my thumbnail_grid div's position, please let me know! That's on this page: http://rorybernstein.com/francesca_proto/section_landing.html The div called thumbnail_grid should be next to the nav div, both of them under the logo. But the thumbnail_grid is getting pushed down and sitting under the nav. Here is that rule: #thumbnail_grid { position: relative; float: left; overflow: hidden; /* border: 1px solid red; */ width: 100%; } Thanks, Rory == On Mar 17, 2010, at 11:43 PM, Rod Castello wrote: --- On Thu, 3/18/10, Rory Bernsteinr...@rorybernstein.com wrote: From: Rory Bernsteinr...@rorybernstein.com Subject: [css-d] 2 small css problems To: CSS Discuss Listcss-d@lists.css-discuss.org Date: Thursday, March 18, 2010, 3:33 AM I have 2 small CSS problems and I just can't seem to figure them out: http://rorybernstein.com/francesca_proto/ On this page, I cannot get the hover to work on the nav bar links. The style sheet is here: http://rorybernstein.com/francesca_proto/style.css The rule that I think should be making the text links turn red when you hover is: #nav li a:hover { color: #FF000; Thanks, Rory Hi Rory, It seems as though you are missing the semi-colon, and the closing bracket. /* HOVER NOT WORKING!!! */ #nav li a:hover { color: #FF The above is what shows up in your CSS file. It should read: /* HOVER NOT WORKING!!! */ #nav li a:hover { color: #FF; */semi-colon added/* } */closing bracket added/* Maybe that will help Rod Castello __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ The color code is still missing a hex number. Right now it is #FF000; It should be #FF; Regards Christian Kirchhoff *Editura GmbH Co. KG* Tempelhofer Damm 2 · 12101 Berlin www.editura.de AG Berlin-Charlottenburg · HRA 43189 B · USt.Id. DE217180548 Geschäftsführer: Ralf Szymanski __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] 2 small css problems
RE: the missing number in my hex value: Doh. So sorry. It works now. I just need to fix the layout here now: http://rorybernstein.com/francesca_proto/section_landing.html to get the grid of thumbnails moved up the page, next to the nav list. Many thanks to Christian and Rod for your help with my crazy hover problem! Best, Rory __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] 2 small css problems
And if anyone knows the reason why I have the other problem with my thumbnail_grid div's position, please let me know! That's on this #thumbnail_grid { position: relative; float: left; overflow: hidden; /* border: 1px solid red; */ width: 100%; } Claude Needham already answered that one, but here's a repeat. That width: 100% is throwing it off. That says that it needs to take up ALL of the width of its parent, which means that it can't go next to anything, since that wouldn't allow it to have ALL the width. You need to set the width to something else, and keep shrinking it until it fits in there. The best way to do that is to set your nav column with percents too, and have the two of them add up to something close to 100%. (20 and 75, for instance - to give some wiggle room for margins, padding, and rounding errors) And your grid is off because your images are different heights. If you make them all the same height, it'll align itself. ---Tim __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] 2 small css problems
OK, I did change the width of that thumbnail_grid div and it worked. I am sure that I tried that when I was working on the problem myself, so I am not sure why it did not work for me then. Thanks to everyone who responded, you have made my day. I am very grateful. Rory __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] 2 small css problems
I have 2 small CSS problems and I just can't seem to figure them out: http://rorybernstein.com/francesca_proto/ On this page, I cannot get the hover to work on the nav bar links. The style sheet is here: http://rorybernstein.com/francesca_proto/style.css The rule that I think should be making the text links turn red when you hover is: #nav li a:hover { color: #FF000; Next, on this page: http://rorybernstein.com/francesca_proto/section_landing.html The div with the id of thumbnail_grid has a float:left rule. Shouldn't it sit alongside the div nav, and not under it? Why is it under it? I want the grid to sit to the right of the nav list. And, I can't figure out why the photos don't line up in neat rows/columns. Why is the grid irregular? Thanks, Rory __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] 2 small css problems
--- On Thu, 3/18/10, Rory Bernstein r...@rorybernstein.com wrote: From: Rory Bernstein r...@rorybernstein.com Subject: [css-d] 2 small css problems To: CSS Discuss List css-d@lists.css-discuss.org Date: Thursday, March 18, 2010, 3:33 AM I have 2 small CSS problems and I just can't seem to figure them out: http://rorybernstein.com/francesca_proto/ On this page, I cannot get the hover to work on the nav bar links. The style sheet is here: http://rorybernstein.com/francesca_proto/style.css The rule that I think should be making the text links turn red when you hover is: #nav li a:hover { color: #FF000; Thanks, Rory Hi Rory, It seems as though you are missing the semi-colon, and the closing bracket. /* HOVER NOT WORKING!!! */ #nav li a:hover { color: #FF The above is what shows up in your CSS file. It should read: /* HOVER NOT WORKING!!! */ #nav li a:hover { color: #FF; */semi-colon added/* } */closing bracket added/* Maybe that will help Rod Castello __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/