putting a banner at the top of a page

[John Salerno]

Heh, then you didn't look at the source of my banner page.


You're looking for "gradient." A 1xNNN pixel graphic that changes
color. I use one here, but for vertical background.
http://countryrode.com/

I'm not sure I see anything changing color there.

 

[John Salerno]

"John Salerno" <[email protected]> kirjoitti
viestissä:[email protected]...



Yup. Gotta apply margin and padding on where you want them, or where you
want them to be removed from



Yes. http://www.kolumbus.fi/ace/ng/top-bar-v2.html

btw, do you know where i can find images like that?

 

[Beauregard T. Shagnasty]

I'm not sure I see anything changing color there.

It's vertical. Note the shade of the blue at the top of the page. Scroll
down, it gets lighter.
http://www.countryrode.com/images/bluebg.gif
It's a 5x1200px image. I have the background color of the body set to
match the lighter blue at the bottom so that when the content is longer
than 1200px, the blue continues.

body {
background: url("../images/bluebg.gif") #66ccff repeat-x;

You're expressing a desire for something similar, maybe 600px wide, and
used horizontally, or at least that is how I interpreted your "like
darkening" phrase above.

 

[John Salerno]

It's vertical. Note the shade of the blue at the top of the page. Scroll
down, it gets lighter.
http://www.countryrode.com/images/bluebg.gif
It's a 5x1200px image. I have the background color of the body set to
match the lighter blue at the bottom so that when the content is longer
than 1200px, the blue continues.

body {
background: url("../images/bluebg.gif") #66ccff repeat-x;

You're expressing a desire for something similar, maybe 600px wide, and
used horizontally, or at least that is how I interpreted your "like
darkening" phrase above.

Yeah, I guess that's close. I was talking about having a horizontal bar
across the top that starts out dark and becomes lighter as you look to
the right, so I guess this can be applied that way somehow?

 

[Beauregard T. Shagnasty]

Yeah, I guess that's close. I was talking about having a horizontal bar
across the top that starts out dark and becomes lighter as you look to
the right, so I guess this can be applied that way somehow?

Sure. You would need a gradient image of maybe 600px wide and 2px high.
Since you only want it in a top banner, put it in a <div> of the proper
height, and use similar CSS.

#banner {
background: url("images/bannerbg.gif") #yourcolor repeat-y;
color: #fff; /* text color contrasts with background */
text-align: right;
}

<div id="banner">
Possibly some<br>
text here
</div>

 

[John Salerno]

Sure. You would need a gradient image of maybe 600px wide and 2px high.
Since you only want it in a top banner, put it in a <div> of the proper
height, and use similar CSS.

#banner {
background: url("images/bannerbg.gif") #yourcolor repeat-y;
color: #fff; /* text color contrasts with background */
text-align: right;
}

<div id="banner">
Possibly some<br>
text here
</div>

But will that mean that my header would only be 600px wide? And if I
decide to go with an image instead of just changing the background color
of the header div, does that mean I'd have to settle for a less than
full-width header also?

 

[Mark Parnell]

Deciding to do something for the good of humanity, John Salerno

But will that mean that my header would only be 600px wide?

No. The *image* is only 600px wide, which is why you set the background
colour to be the same as the right side of the image - anyone with a
browser canvas wider than 600px will see the solid colour to the right
of the image.

 

[Mark Parnell]

Deciding to do something for the good of humanity, Stan McCann

http://alamo-smccann.nmsu.edu/

Glad to see you're finally getting a chance to redo that.

A couple of comments (SCNR):

Make .mynmsu a little wider - at my default settings the "Go" button
drops below the text field.

From #quiltPattern, remove
position: absolute;
top: 80px;
left: 0px;

and add
background-color: #882345;
instead. This prevents the header text (and search form) from hiding
underneath the image when font size is increased.

It's probably best to remove the height on #masthead, though I haven't
had a chance to work out how to make the background colour fill the
whole thing if you do.

A bit of left padding on #breadcrumb-you-are-here would be nice - it's
right up against the red of the left column.

The width of #nav is set in ems, yet the actual links are sized in px.
Looks weird if you increase the font size - the column gets wider but
the links don't.

#header ul and #header li styles are pointless - no lists in #header.

Turned out to be more than a couple, but hey.

BTW: All the above was in FF1.5 - didn't look in anything else.

 

[John Salerno]

Deciding to do something for the good of humanity, John Salerno


No. The *image* is only 600px wide, which is why you set the background
colour to be the same as the right side of the image - anyone with a
browser canvas wider than 600px will see the solid colour to the right
of the image.

But I don't think I want my background color to be dependent on my
header. In fact, I'd like a contrast between the two, such as a dark
blue header and lighter colored body.

 

[Beauregard T. Shagnasty]

But I don't think I want my background color to be dependent on my
header. In fact, I'd like a contrast between the two, such as a dark
blue header and lighter colored body.

...which is why I said to set the background color of the *<div>*
containing the banner/header code.

 

[Beauregard T. Shagnasty]

..which is why I said to set the background color of the *<div>*
containing the banner/header code.

I've added a background color to the banner/header here now:
http://k75s.home.att.net/banner.html

 

[Stan McCann]

Deciding to do something for the good of humanity, Stan McCann


Glad to see you're finally getting a chance to redo that.

Thanks Mark, me too. It's coming along. Meanwhile, I've been
practicing techniques and studying. I appreciate your pointers. Saved
for consideration. Now I'm caught up in writing a simple CMS with a
news management system for a novice user to be able to easily input
stories, and mark stories as feature to be displayed on the first page.
I may adapt it later for novices to input data to be used as main
content on other pages.

Our campus committee was still struggling with content access structure
when I happened to look at http://www.nmsu.edu one day and saw the
change that they had made. I like the design they came up with very
much so sent email to the other committee members asking them to look
and offer opinions. Within about two weeks after that, we got a memo
mandating that all departments of NMSU must follow the templates that
they provided.

Even though we all like the layout and design, being a branch, not just
another department, we screamed loudly that using the templates
provided removed our identity as a branch. I took their main page
XHTML and CSS and tweaked it enough to maintain a campus identity, fit
well with their design and maybe at some time, utilize the CMS that was
purchased and is being implemented slowly. The CMS is their excuse for
using XHTML.

Currently, I realize that I'm just writing HTML and calling it XHTML.
More to learn.

A couple of comments (SCNR):

I appreciate your comments and will take them seriously. Thanks.

 

[Stan McCann]

But I don't think I want my background color to be dependent on my
header. In fact, I'd like a contrast between the two, such as a dark
blue header and lighter colored body.

Then set the background of the container of the image instead of the
entire page. It'll still work.

 

[John Salerno]

..which is why I said to set the background color of the *<div>*
containing the banner/header code.

Ah, that makes more sense!