Div extending beyond width of browser screen

Discussion in 'HTML' started by Jay, Dec 10, 2003.

  1. Jay

    Jay Guest

    I am trying to create a page where the color of a bar at the top extends
    beyond the actual content area. I've used div and span tags to try this with
    a width: 100% style but I get horizontal scroll bars. Is there a better way
    to do this without the scroll bars?

    http://www.pacer.org/zNew/index.htm

    Thanks,

    - J
    Jay, Dec 10, 2003
    #1
    1. Advertising

  2. Jay wrote:

    > width: 100% style but I get horizontal scroll bars


    Do you have any padding, margin or borders on the element that has
    width:100%?

    space taken up by the element = width + padding + border + margin

    Besides which, all that absolute positioning is a recipe for disaster!

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me - http://www.goddamn.co.uk/tobyink/?page=132
    Toby A Inkster, Dec 10, 2003
    #2
    1. Advertising

  3. Jay

    Jay Guest

    "Toby A Inkster" <> wrote in message
    news:p...
    > Jay wrote:
    >
    > > width: 100% style but I get horizontal scroll bars

    >
    > Do you have any padding, margin or borders on the element that has
    > width:100%?


    No, none of the above.

    > space taken up by the element = width + padding + border + margin
    >
    > Besides which, all that absolute positioning is a recipe for disaster!


    It's just a design prototype to show. It'll be redone with relative
    positioning if it's approved. The absolute positioning was easier for me to
    get something to show quickly.

    - J
    Jay, Dec 11, 2003
    #3
  4. Jay

    kchayka Guest

    Jay wrote:
    > I am trying to create a page where the color of a bar at the top extends
    > beyond the actual content area. I've used div and span tags to try this with
    > a width: 100% style but I get horizontal scroll bars. Is there a better way
    > to do this without the scroll bars?
    >
    > http://www.pacer.org/zNew/index.htm


    You made this much more complicated than it needs to be.
    <URL:http://accessat.c-net.us/test/pacer/pacer.html>

    --
    To email a reply, remove (dash)un(dash). Mail sent to the un
    address is considered spam and automatically deleted.
    kchayka, Dec 11, 2003
    #4
  5. Jay

    rf Guest

    "kchayka" <> wrote in message
    news:3fd8c8fb$0$43854$...
    > Jay wrote:
    > > I am trying to create a page where the color of a bar at the top extends
    > > beyond the actual content area. I've used div and span tags to try this

    with
    > > a width: 100% style but I get horizontal scroll bars. Is there a better

    way
    > > to do this without the scroll bars?
    > >
    > > http://www.pacer.org/zNew/index.htm

    >
    > You made this much more complicated than it needs to be.
    > <URL:http://accessat.c-net.us/test/pacer/pacer.html>


    http://users.bigpond.net.au/rf/test/pacer.jpg

    Note, this effect was achieved by simply ignoring font sizes specified in
    web pages, something I habbitually do to defeat authors who think they know
    better than I what my font size should be :)

    Cheers
    Richard.
    rf, Dec 12, 2003
    #5
  6. Jay

    kchayka Guest

    rf wrote:

    > "kchayka" <> wrote in message
    > news:3fd8c8fb$0$43854$...
    >> Jay wrote:
    >> >
    >> > http://www.pacer.org/zNew/index.htm

    >>
    >> You made this much more complicated than it needs to be.
    >> <URL:http://accessat.c-net.us/test/pacer/pacer.html>

    >
    > http://users.bigpond.net.au/rf/test/pacer.jpg
    >
    > Note, this effect was achieved by simply ignoring font sizes specified in
    > web pages, something I habbitually do to defeat authors who think they know
    > better than I what my font size should be :)


    Thanks for pointing that out, it's a condition I should test more often.
    ;) Most font sizes were already close to default anyway so the issues
    were easily corrected.

    Seems to me this little demo does show that if you are going to invoke
    any user styles, you do take some risks simply by overriding some
    things, but not all.

    --
    To email a reply, remove (dash)un(dash). Mail sent to the un
    address is considered spam and automatically deleted.
    kchayka, Dec 12, 2003
    #6
  7. Jay

    rf Guest

    "kchayka" <> wrote in message
    news:3fd94beb$0$43850$...
    > rf wrote:
    >
    > > "kchayka" <> wrote in message
    > > news:3fd8c8fb$0$43854$...
    > >> Jay wrote:
    > >> >
    > >> > http://www.pacer.org/zNew/index.htm
    > >>
    > >> You made this much more complicated than it needs to be.
    > >> <URL:http://accessat.c-net.us/test/pacer/pacer.html>

    > >
    > > http://users.bigpond.net.au/rf/test/pacer.jpg
    > >
    > > Note, this effect was achieved by simply ignoring font sizes specified

    in
    > > web pages, something I habbitually do to defeat authors who think they

    know
    > > better than I what my font size should be :)

    >
    > Thanks for pointing that out, it's a condition I should test more often.
    > ;) Most font sizes were already close to default anyway so the issues
    > were easily corrected.


    Much better:) Now, what about the bannar. That "PACER Center" is very
    small. Perhaps it should be, by default, a <h1> with some styles to make it
    bigger if necessary.

    > Seems to me this little demo does show that if you are going to invoke
    > any user styles, you do take some risks simply by overriding some
    > things, but not all.


    Seems to me that the KISS principle applies. Each time one uses a style rule
    or property or an HTML element or attribute one should ask: Why am I doing
    this?. If there is not a very positive answer than don't do it.

    Look at that banner. Hmmm. There is a div in there enclosing a span, both of
    which are styled. This construct is presumably to make the text look
    centred both horizontally and vertically. Do we need all of this? Probably
    not. A simple

    ..bannar {text-align: center; height: 2em; padding-top: .4em; font-size:
    250%;}

    <h1 class="bannar">PACER Center</h1>

    works for me.

    It degrades better if the viewer has chosen to ignore font sizes. It works
    better in aural browsers who can hear that it is a heading element. SE
    spiders just may give the words higher importance. It works better in lynx
    :)

    It is far easier to maintain, the next bloke that looks at the code will see
    at a glance what is going on, rather than mentally decoding a div, a span, a
    ..mhead rule and a .mhead span rule and trying to visualise what the merged
    result is going to be (thinks... now what is that line-height actually
    doing?).

    More importantly, that bloke may just look at the HTML and think: hmmm, that
    span isn't needed, I'll just remove it. Bang...

    Cheers
    Richard.


    > --
    > To email a reply, remove (dash)un(dash). Mail sent to the un
    > address is considered spam and automatically deleted.
    rf, Dec 12, 2003
    #7
  8. Jay

    Mark Parnell Guest

    Sometime around Fri, 12 Dec 2003 05:54:17 GMT, rf is reported to have
    stated:
    >
    > It is far easier to maintain, the next bloke that looks at the code will see
    > at a glance what is going on, rather than mentally decoding a div, a span, a
    > .mhead rule and a .mhead span rule and trying to visualise what the merged
    > result is going to be (thinks... now what is that line-height actually
    > doing?).


    No, the next bloke that looks at the code will probably say, "What's all
    this CSS stuff I don't understand?" and rewrite the site with deprecated
    markup. :-(

    Unless kchayka has carefully selected a replacement like Nico is attempting
    to do. :p

    --
    Mark Parnell
    http://www.clarkecomputers.com.au
    Mark Parnell, Dec 12, 2003
    #8
  9. kchayka wrote:

    > Seems to me this little demo does show that if you are going to invoke
    > any user styles, you do take some risks simply by overriding some
    > things, but not all.


    Or from the other POV: it demonstrates the risk in invoking any author
    styles.

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me - http://www.goddamn.co.uk/tobyink/?page=132
    Toby A Inkster, Dec 12, 2003
    #9
  10. "rf" <> wrote in message news:<288Cb.48939$>...
    > "kchayka" <> wrote in message
    > news:3fd8c8fb$0$43854$...
    > > Jay wrote:
    > > > I am trying to create a page where the color of a bar at the top extends
    > > > beyond the actual content area. I've used div and span tags to try this

    > with
    > > > a width: 100% style but I get horizontal scroll bars. Is there a better

    > way
    > > > to do this without the scroll bars?
    > > >
    > > > http://www.pacer.org/zNew/index.htm

    > >
    > > You made this much more complicated than it needs to be.
    > > <URL:http://accessat.c-net.us/test/pacer/pacer.html>

    >
    > http://users.bigpond.net.au/rf/test/pacer.jpg
    >
    > Note, this effect was achieved by simply ignoring font sizes specified in
    > web pages, something I habbitually do to defeat authors who think they know
    > better than I what my font size should be :)


    Do many people *really* give a shit? Do many people *really* go out
    of the way to do that? WTF do you do when you get a newspaper in the
    morning? Do you re-scan it, OCR it, then change the font sizes? FFS!
    Bring it on ...

    --
    Hywel
    Hywel Jenkins, Dec 12, 2003
    #10
  11. Jay

    rf Guest

    "Hywel Jenkins" <> wrote in message
    news:...
    > "rf" <> wrote in message

    news:<288Cb.48939$>...
    > > "kchayka" <> wrote in message
    > > news:3fd8c8fb$0$43854$...
    > > > Jay wrote:
    > > > > I am trying to create a page where the color of a bar at the top

    extends
    > > > > beyond the actual content area. I've used div and span tags to try

    this
    > > with
    > > > > a width: 100% style but I get horizontal scroll bars. Is there a

    better
    > > way
    > > > > to do this without the scroll bars?
    > > > >
    > > > > http://www.pacer.org/zNew/index.htm
    > > >
    > > > You made this much more complicated than it needs to be.
    > > > <URL:http://accessat.c-net.us/test/pacer/pacer.html>

    > >
    > > http://users.bigpond.net.au/rf/test/pacer.jpg
    > >
    > > Note, this effect was achieved by simply ignoring font sizes specified

    in
    > > web pages, something I habbitually do to defeat authors who think they

    know
    > > better than I what my font size should be :)

    >
    > Do many people *really* give a shit? Do many people *really* go out
    > of the way to do that? WTF do you do when you get a newspaper in the
    > morning? Do you re-scan it, OCR it, then change the font sizes? FFS!
    > Bring it on ...


    Hmmm. What is your problem with the way I have *my* browser configured?

    Newspapers have absolutely nothing to do with this issue. If I can't read a
    newspaper I don't buy it.

    If I can't read a web page I make my font larger. If the boneheaded author
    has tried to prevent me from doing this then I ignore said authors
    suggestions. If the site breaks because of this, as this one once did, then
    it is the authors fault, not mine.

    Remember, the web is one way. It is from author to the potential
    viewer/client/buyer. It is up to the author to make this happen, not the
    viewer. If the author screws up there is always another site out there.

    Cheers
    Richard.
    rf, Dec 12, 2003
    #11
  12. Jay

    kchayka Guest

    rf wrote:
    >
    > <h1 class="bannar">PACER Center</h1>
    >
    > works for me.


    I don't agree that logos and mastheads are deserving of h1 markup.

    > It degrades better if the viewer has chosen to ignore font sizes.


    I believe that if a user is clueful enough to invoke user styles of some
    kind, they can probably also live with minor display oddities that might
    result from their overrides. The content is still accessible and
    readable, is it not?

    > It works
    > better in aural browsers who can hear that it is a heading element.


    I don't believe it _should_ be a heading element.

    --
    To email a reply, remove (dash)un(dash). Mail sent to the un
    address is considered spam and automatically deleted.
    kchayka, Dec 14, 2003
    #12
    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. AndrewF
    Replies:
    1
    Views:
    746
    Bruce Barker
    Oct 10, 2005
  2. =?Utf-8?B?cm9kY2hhcg==?=

    how to: div width = browser.width?

    =?Utf-8?B?cm9kY2hhcg==?=, Oct 27, 2006, in forum: ASP .Net
    Replies:
    3
    Views:
    513
    =?Utf-8?B?cm9kY2hhcg==?=
    Oct 30, 2006
  3. Steve Richter
    Replies:
    2
    Views:
    7,892
    Steve Richter
    Jun 15, 2007
  4. Biranchi Narayan Panda
    Replies:
    1
    Views:
    2,720
    Alexey Smirnov
    Feb 17, 2010
  5. Replies:
    1
    Views:
    91
Loading...

Share This Page