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] Styling font-size of h tags
Hi All, Does anyone have a rule of thumb for styling the font-size: of h tags? For example: h1:200%; ...180%,160%,140%,120%... h6:100%; . Sincerely, Brian __ 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] Styling font-size of h tags
Brian M. Curran wrote: Hi All, Does anyone have a rule of thumb for styling the font-size: of h tags? Sincerely, Brian The list-wiki once had a chart but I can't seem to find it. As I recall, h1 was set in that chart at 180%. But for the most part rules, were made to be broken, and the font-size and font-weight of headings are determined by readability and the look and feel one hopes to obtain for the particular site and its content. My rule of thumb for h1 through h6 is to set them no-smaller than default. The amount, if any, that all or any all may be set greater than default depends solely on the specific look and feel for the particular site/page at hand, the specific font in use, and the specific available measure. All of these vary from site to site. Best, ~d -- desktop http://chelseacreekstudio.com/ mobile http://chelseacreekstudio.mobi/ __ 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 more problems (div width issues)
Hi All, me again.
http://rorybernstein.com/francesca_proto/book1.html
So, I now have a new page. On the URL above, I have 2 problems:
1. I want the div called #book_images to have the images it containts to sit on
the bottom of that div (bottom aligned). I tried changing the position to
absolute and using bottom: 0; but it does not work; it puts the whole div in a
totally different place (moves it up and almost totally out of the window).
Here's the rules for that div now (the blue border is just so you can see it
better):
#book_images {
position: relative;
border: 1px solid blue;
width: auto;
overflow: hidden;
}
2. I want that same div to always be just as wide as it needs to be to contain
whatever images might be there, as they go out horizontally to the right. If
the images are fewer, I don't want the page to scroll out farther than it needs
to go. Currently, its parent-parent container (#nav_item_container) has a fixed
width; if I don't use this fixed width, the whole div moves down under #nav.
And, I don't want to break the layout if the images that get put in there
exceed that width. How do I code this for a variable width in the best way?
Part of the trouble seems to be that my #nav div has to have a fixed width
(200px), because it has text in in that I want to wrap if that text gets longer
(don't want the text in there to push that div wider). So, since that has a
fixed width, the layout gets messed up if I don't set a fixed width for the
parent-parent div. Am I being unreasonable to expect that I can have a changing
width for this div, and that they will always keep going out to the right, and
keep the scrollbars to always fit to the existing width of the images, even as
that changes? This will go into a CMS and the client will have the freedom to
put a lot of images in there, and I want it to work at whatever width those
images turn out to be.
Thanks in advance,
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] Styling font-size of h tags
On 3/18/10 11:03 AM, Brian M. Curran wrote:
Hi All,
Does anyone have a rule of thumb for styling the font-size: of h tags? For
example: h1:200%; ...180%,160%,140%,120%... h6:100%; .
Most of my browsers apply these sizes and margins:
h1 {
font-size: 2em;
margin: .67em 0;
}
h2 {
font-size: 1.5em;
margin: .83em 0;
}
h3 {
font-size: 1.17em;
margin: 1em 0;
}
h4 {
margin: 1.33em 0;
}
h5 {
font-size: 0.83em;
margin: 1.67em 0;
}
h6 {
font-size: 0.67em;
margin: 2.33em 0;
}
FWIW - I follow David's idea, avoiding font-size less than 100%. You can
use font-style and/or font-variant as alternative ways of distinguishing
h4 - h6. YMMV.
Cordially,
David
--
__
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/
