On Thu, Jul 24, 2008 at 8:13 AM, Christopher <[EMAIL PROTECTED]> wrote:
>
> To everyone: It is #topbar that if you resize your browser it won't
> "hug" the right hand side of the browser.
>
As an FYI, #topbar DOES remain at the right edge of the viewport in
FF2 and Safari on Mac.
I've been hesitant to offer anything to this thread due to the extreme
vagueness of it most of the time. However, I will add a couple things
that will help any who are trying to read and analyze your CSS. If
you are determined to write out rules longhand that have a shorthand
equivalent, then it's very nice to keep like items together. I offer
this from your CSS as an example:
#gallerybox {
background-color: #FF0000;
border-right-width: 200px;
height: 300px;
margin-left: 135px;
margin-top: -35px;
border-left-width: 0px;
padding-left: 35px;
padding-right: 150px;
left: 40px;
border-top-width: 0px;
The rule above includes several border property:value pairs that are
sprinkled throughout the rule rather than being together. To me, this
is harder to wade through than putting the like properties together.
Even better, just use border-width: 0 200px 0 0 to accomplish the same
thing. Or, yet another option is to just declare the one side that
has a border width unless the element you're applying the rule to has
a default border. If not, there's no need for the '0' values.
As a side note, '0' values on anything don't require a unit (px, em,
%, etc). 0 is just 0.
Another small thing that can shrink your CSS. Any hexadecimal numbers
(#ffccff or #003311) that have three pairs of identical numbers (ff cc
ff or 00 33 11 from the examples just given) can be reduced to a 3
digit version (#fcf or #031).
Shorthand notation is wonderful for shrinking CSS files! Why use:
border-top-width: 2em;
border-right-width: 2em;
border-bottom-width: 2em;
border-left-width: 2em;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #FFFFFF;
border-right-color: #FFFFFF;
border-bottom-color: #FFFFFF;
border-left-color: #FFFFFF;
when you could use:
border: 2em solid #fff;
A reduced version of your current CSS for #flashbox would be:
#flashbox {
height: 410px;
width: 430px;
margin-left: 500px;
margin-top: 70px;
background: #000; /*removed the repeat property as there is no image
to repeat or not repeat */
z-index: 3;
position: relative;
padding: -12px 0 0 0; /* note I left the -12px in, though padding
can't have negative values, only margins */
border: 2em solid #fff;
}
I think the consensus of those that have tried to help you is that
there are many basics that need to be learned first before really
proceeding very far. So much basic CSS and HTML info is easy to find
online that will help you properly structure your documents if you
will only seclude yourself and study it some. Only then will you be
able to really get out of a list like this what you need to without
making a thread quite laborious for the list.
That's not to say you have to be advanced to use a list like this. By
no means! I'm still learning a ton myself. However, with little
basic understanding of general concepts it's hard to even formulate
the questions in such a way to get the desired answers.
One of the simplest requests throughout this thread which has yet gone
unheeded is to provide a static graphic comp of what it is you're
trying to achieve. Do you have one? A Photoshop file, a scanned hand
drawing, anything that shows the concept you're after? if so, the
ones trying to help you would love to see it.
One final note - two of your images specified for that page are not
available on the server. One is called "topbarfade4.png" and I don't
remember the other one.
Good luck with your project.
Chris
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
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/
