putting a banner at the top of a page

Discussion in 'HTML' started by John Salerno, Feb 7, 2006.

  1. John Salerno

    John Salerno Guest

    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?
     
    John Salerno, Feb 7, 2006
    #1
    1. Advertising

  2. John Salerno wrote:

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

    --
    -bts
    -Warning: I brake for lawn deer
     
    Beauregard T. Shagnasty, Feb 7, 2006
    #2
    1. Advertising

  3. John Salerno

    John Salerno Guest

    Beauregard T. Shagnasty wrote:
    > John Salerno wrote:
    >
    >> 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?
    >


    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/
     
    John Salerno, Feb 7, 2006
    #3
  4. John Salerno wrote:

    > Beauregard T. Shagnasty wrote:
    >> John Salerno wrote:
    >>
    >>> 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?

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

    --
    -bts
    -Warning: I brake for lawn deer
     
    Beauregard T. Shagnasty, Feb 7, 2006
    #4
  5. John Salerno

    John Salerno Guest

    Beauregard T. Shagnasty wrote:

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


    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.
     
    John Salerno, Feb 7, 2006
    #5
  6. John Salerno

    Wÿrm Guest

    "John Salerno" <> kirjoitti
    viestissä:TK7Gf.1553$...
    <snip>

    > 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?
     
    Wÿrm, Feb 7, 2006
    #6
  7. John Salerno

    John Salerno Guest

    Wÿrm wrote:
    > "John Salerno" <> kirjoitti
    > viestissä:TK7Gf.1553$...
    > <snip>
    >
    >> 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?
    >
    >


    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, Feb 7, 2006
    #7
  8. John Salerno

    John Salerno Guest

    John Salerno wrote:
    > Wÿrm wrote:
    >> "John Salerno" <> kirjoitti
    >> viestissä:TK7Gf.1553$...
    >> <snip>
    >>
    >>> 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?
    >>

    >
    > 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.
     
    John Salerno, Feb 7, 2006
    #8
  9. Mitja Trampus, Feb 7, 2006
    #9
  10. John Salerno

    John Salerno Guest

    Mitja Trampus wrote:
    > John Salerno wrote:
    >>>> This is similar: http://www.python.org/

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

    >
    > 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, Feb 7, 2006
    #10
  11. John Salerno

    John Salerno Guest

    John Salerno wrote:
    > Mitja Trampus wrote:
    >> John Salerno wrote:
    >>>>> This is similar: http://www.python.org/
    >>> http://www.ruby-lang.org/

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


    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.
     
    John Salerno, Feb 7, 2006
    #11
  12. John Salerno

    Wÿrm Guest

    "John Salerno" <> kirjoitti
    viestissä:578Gf.1556$...

    <snip>

    > 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
     
    Wÿrm, Feb 7, 2006
    #12
  13. John Salerno

    John Salerno Guest

    Wÿrm wrote:
    > "John Salerno" <> kirjoitti
    > viestissä:578Gf.1556$...
    >
    > <snip>
    >
    >> 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
    >
    >


    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.
     
    John Salerno, Feb 7, 2006
    #13
  14. John Salerno

    Stan McCann Guest

    John Salerno <> wrote in
    news:578Gf.1556$:

    > Wÿrm wrote:
    >> "John Salerno" <> kirjoitti
    >> viestissä:TK7Gf.1553$...
    >> <snip>
    >>
    >>> 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?
    >>
    >>

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

    --
    Stan McCann, "Uncle Pirate" http://stanmccann.us/
    Webmaster, NMSU at Alamogordo http://alamo.nmsu.edu/
    Now blocking Google Grouper posts and replies.
    http://blinkynet.net/comp/uip5.html
     
    Stan McCann, Feb 7, 2006
    #14
  15. John Salerno wrote:
    > John Salerno wrote:
    >
    >> Mitja Trampus wrote:
    >>
    >>> John Salerno wrote:
    >>>
    >>>>>> This is similar: http://www.python.org/
    >>>>
    >>>> http://www.ruby-lang.org/
    >>>
    >>>
    >>> 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.


    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...
     
    Mitja Trampus, Feb 7, 2006
    #15
  16. John Salerno wrote:

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

    --
    -bts
    -Warning: I brake for lawn deer
     
    Beauregard T. Shagnasty, Feb 7, 2006
    #16
  17. John Salerno

    Stan McCann Guest

    Mitja Trampus <> wrote in
    news:Xa9Gf.503$:

    > John Salerno wrote:


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


    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.

    --
    Stan McCann, "Uncle Pirate" http://stanmccann.us/
    Webmaster, NMSU at Alamogordo http://alamo.nmsu.edu/
    Now blocking Google Grouper posts and replies.
    http://blinkynet.net/comp/uip5.html
     
    Stan McCann, Feb 7, 2006
    #17
  18. John Salerno

    John Salerno Guest

    Stan McCann wrote:
    > John Salerno <> wrote in
    > news:578Gf.1556$:
    >
    >> Wÿrm wrote:
    >>> "John Salerno" <> kirjoitti
    >>> viestissä:TK7Gf.1553$...
    >>> <snip>
    >>>
    >>>> 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?
    >>>
    >>>

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


    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, Feb 7, 2006
    #18
  19. John Salerno

    John Salerno Guest

    Mitja Trampus wrote:
    > John Salerno wrote:
    >> John Salerno wrote:
    >>
    >>> Mitja Trampus wrote:
    >>>
    >>>> John Salerno wrote:
    >>>>
    >>>>>>> This is similar: http://www.python.org/
    >>>>> http://www.ruby-lang.org/
    >>>>
    >>>> 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.

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


    Very nice. Thanks for the think. It definitely looks better.
     
    John Salerno, Feb 7, 2006
    #19
  20. John Salerno

    John Salerno Guest

    Stan McCann wrote:
    > Mitja Trampus <> wrote in
    > news:Xa9Gf.503$:
    >
    >> John Salerno wrote:

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

    >
    > 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!) :)
     
    John Salerno, Feb 7, 2006
    #20
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Saurabh
    Replies:
    6
    Views:
    4,617
    Chris Smith
    May 30, 2004
  2. crispy
    Replies:
    1
    Views:
    934
    crispy
    Jul 2, 2003
  3. Sunfire
    Replies:
    2
    Views:
    668
    Sunfire
    Nov 5, 2007
  4. Gerry Wolff
    Replies:
    1
    Views:
    440
    Beauregard T. Shagnasty
    Apr 5, 2008
  5. nez

    Banner chains / page slowdown

    nez, Jan 30, 2007, in forum: Javascript
    Replies:
    2
    Views:
    147
Loading...

Share This Page