Re: [css-d] 2 small css problems

2010-03-18 Thread Claude Needham
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

2010-03-18 Thread Claude Needham
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

2010-03-18 Thread 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 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

2010-03-18 Thread Christian Kirchhoff


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

2010-03-18 Thread Rory Bernstein
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

2010-03-18 Thread Climis, Tim
 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

2010-03-18 Thread Rory Bernstein
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

2010-03-17 Thread Rory Bernstein
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

2010-03-17 Thread Rod Castello




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