putting a banner at the top of a page

[John Salerno]

How can you put a banner at the top of a web page so that there is no
border between it and the edges of the browser? I've tried margin and
padding of 0, but I suspect there's more to it since that didn't work.
Perhaps something to do with the way the image is made in the first place?

 

[Beauregard T. Shagnasty]

How can you put a banner at the top of a web page so that there is no
border between it and the edges of the browser? I've tried margin and
padding of 0, but I suspect there's more to it since that didn't
work.

Could be several things. How about a sample URL?

Perhaps something to do with the way the image is made in the first
place?

What is the width of the image? What if my browser window is wider than
this image?

 

[John Salerno]

Could be several things. How about a sample URL?


What is the width of the image? What if my browser window is wider than
this image?

Actually, not so much an image as just a banner that can stretch across
any length, like this: http://www.nwnlexicon.com/

That probably isn't the best example since it uses frames, but pretend
it's just all one page, and that banner appears on each page.

This is similar: http://www.python.org/

 

[Beauregard T. Shagnasty]

Actually, not so much an image as just a banner that can stretch
across any length, like this: http://www.nwnlexicon.com/

Did you look at the page source?
http://www.nwnlexicon.com/header.shtml
Rather poorly done, IMO. It's also not just one image, of course.

That probably isn't the best example since it uses frames, but
pretend it's just all one page, and that banner appears on each page.

This is similar: http://www.python.org/

At the python site, I don't see a banner that fits the description of
what you are asking about.

Maybe this old page of mine I made for someone with a banner question
some time ago will help:
http://k75s.home.att.net/banner.html

 

[John Salerno]

Did you look at the page source?
http://www.nwnlexicon.com/header.shtml
Rather poorly done, IMO. It's also not just one image, of course.


At the python site, I don't see a banner that fits the description of
what you are asking about.

Maybe this old page of mine I made for someone with a banner question
some time ago will help:
http://k75s.home.att.net/banner.html

Hmm, maybe neither of my links were very good, but for the python site I
had the small bar at the top in mind, with the search box.

Your page isn't quite what I'm thinking of, because I'm thinking of a
constant color (or maybe a tiled image) across the whole top.

Maybe something like the red bar at the top of here:
http://www.ruby-lang.org/

And here's what I'd like to avoid, the white space around the banner:
http://www.halhelms.com/

I wish I could find better examples. I'll keep looking if you're not
sure what I mean.

 

[Wÿrm]

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

Your page isn't quite what I'm thinking of, because I'm thinking of a
constant color (or maybe a tiled image) across the whole top.

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

something like that maybe?

 

[John Salerno]

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


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

something like that maybe?

Yes, exactly that kind of bar! I'm guessing it was the body
margin/padding that got rid of the white space?

Now, is it possible to also have an image in the left side of that bar?
I figure what I'd ultimately have is not just a background-color div,
but an img in the div, I just don't know how it would look with various
browser widths.

 

[John Salerno]

Yes, exactly that kind of bar! I'm guessing it was the body
margin/padding that got rid of the white space?

Now, is it possible to also have an image in the left side of that bar?
I figure what I'd ultimately have is not just a background-color div,
but an img in the div, I just don't know how it would look with various
browser widths.

Say for example I want to have a bar like that, but I want to create a
darkening effect that goes across it, or something like that. How would
I implement that in the markup while taking into consideration changing
widths? I know this would be more than just a background-color property,
so I didn't know what else was involved. Plus having an embedded image
on the left.

 

[Mitja Trampus]

http://www.ruby-lang.org/

Out of curiosity: which one did you like better, python or ruby?

 

[John Salerno]

Out of curiosity: which one did you like better, python or ruby?

I assume you mean the banners and not the languages.

I'd probably say that Ruby's looks better overall, because it's cleaner.
I'm not a big fan of having a lot of text links like on the Python site.
Although I much prefer the thinner Python banner. Ruby's is way too big
without having much content in it, which actually makes it look rather
ugly in its own way.

 

[John Salerno]

I assume you mean the banners and not the languages.

I'd probably say that Ruby's looks better overall, because it's cleaner.
I'm not a big fan of having a lot of text links like on the Python site.
Although I much prefer the thinner Python banner. Ruby's is way too big
without having much content in it, which actually makes it look rather
ugly in its own way.

And if you *did* happen to mean the language, then I don't know, because
I know neither yet. But I plan to start learning Python soon.

 

[Wÿrm]

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

Yes, exactly that kind of bar! I'm guessing it was the body margin/padding
that got rid of the white space?

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

Now, is it possible to also have an image in the left side of that bar?

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

 

[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

Oh my god, that looks amazing! I didn't realize you could use CSS to do
all this. Just one final step: is it still possible to use CSS to make
the rest of the banner have an effect, like darkening or other special
effects? Or would I need a graphics program? If the latter, then I'm
suddenly at a loss again, because that seems like it would involve a
more complicated process to get a real image for the whole banner length.

 

[Stan McCann]

Yes, exactly that kind of bar! I'm guessing it was the body
margin/padding that got rid of the white space?

Now, is it possible to also have an image in the left side of that
bar? I figure what I'd ultimately have is not just a
background-color div, but an img in the div, I just don't know how
it would look with various browser widths.

Wÿrm's is very nice and clean. Here's one I'm working on that has a
couple of images in the heading. http://alamo-smccann.nmsu.edu/
Anything like what you're looking to do?

 

[Mitja Trampus]

To get a bit less OT for alt.html: python.org has long been
preparing for a redesign which is now finally underway. You
can have a look at http://beta.python.org

And if you *did* happen to mean the language, then I don't know, because
I know neither yet. But I plan to start learning Python soon.

Yes, I did mean the languages
I'm into python, but I guess that's only because I learned
it first and never felt the need to dig into ruby. They're
both nice...

 

[Beauregard T. Shagnasty]

Oh my god, that looks amazing! I didn't realize you could use CSS to do
all this.

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

Just one final step: is it still possible to use CSS to make
the rest of the banner have an effect, like darkening or other special
effects? Or would I need a graphics program? If the latter, then I'm
suddenly at a loss again, because that seems like it would involve a
more complicated process to get a real image for the whole banner length.

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

 

[Stan McCann]

John Salerno wrote:

Yes, I did mean the languages
I'm into python, but I guess that's only because I learned
it first and never felt the need to dig into ruby. They're
both nice...

I've been teaching myself PHP and loving it. I'm guessing that PHP is
the only language in which you can jump between program code and HTML.
I'm finding that very nice being able to work kind of like using
heredocs without the bother.

 

[John Salerno]

Wÿrm's is very nice and clean. Here's one I'm working on that has a
couple of images in the heading. http://alamo-smccann.nmsu.edu/
Anything like what you're looking to do?

Looks like the same idea, but I had more in mind the thin bar at the
top, with the image to the left just like Wyrm's.

 

[John Salerno]

To get a bit less OT for alt.html: python.org has long been
preparing for a redesign which is now finally underway. You
can have a look at http://beta.python.org


Yes, I did mean the languages
I'm into python, but I guess that's only because I learned
it first and never felt the need to dig into ruby. They're
both nice...

Very nice. Thanks for the think. It definitely looks better.

 

[John Salerno]

I've been teaching myself PHP and loving it. I'm guessing that PHP is
the only language in which you can jump between program code and HTML.
I'm finding that very nice being able to work kind of like using
heredocs without the bother.

My wishlist of languages to learn: Python, JavaScript, PHP, ASP.NET,
maybe more. But I figure I don't really *need* to know any of them,
except knowing some JS might help with web design. I don't know if it's
possible use Python for web programming like you can use PHP. (The only
PHP I know is the include() function, but that's about all I need it for
anyway right now!)