Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Div extending beyond width of browser screen

Reply
Thread Tools

Div extending beyond width of browser screen

 
 
Jay
Guest
Posts: n/a
 
      12-10-2003
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


 
Reply With Quote
 
 
 
 
Toby A Inkster
Guest
Posts: n/a
 
      12-10-2003
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

 
Reply With Quote
 
 
 
 
Jay
Guest
Posts: n/a
 
      12-11-2003

"Toby A Inkster" <(E-Mail Removed)> wrote in message
news(E-Mail Removed). ..
> 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


 
Reply With Quote
 
kchayka
Guest
Posts: n/a
 
      12-11-2003
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.
 
Reply With Quote
 
rf
Guest
Posts: n/a
 
      12-12-2003

"kchayka" <(E-Mail Removed)> wrote in message
news:3fd8c8fb$0$43854$(E-Mail Removed). ..
> 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.


 
Reply With Quote
 
kchayka
Guest
Posts: n/a
 
      12-12-2003
rf wrote:

> "kchayka" <(E-Mail Removed)> wrote in message
> news:3fd8c8fb$0$43854$(E-Mail Removed). ..
>> 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.
 
Reply With Quote
 
rf
Guest
Posts: n/a
 
      12-12-2003

"kchayka" <(E-Mail Removed)> wrote in message
news:3fd94beb$0$43850$(E-Mail Removed). ..
> rf wrote:
>
> > "kchayka" <(E-Mail Removed)> wrote in message
> > news:3fd8c8fb$0$43854$(E-Mail Removed). ..
> >> 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.



 
Reply With Quote
 
Mark Parnell
Guest
Posts: n/a
 
      12-12-2003
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.

--
Mark Parnell
http://www.clarkecomputers.com.au
 
Reply With Quote
 
Toby A Inkster
Guest
Posts: n/a
 
      12-12-2003
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

 
Reply With Quote
 
Hywel Jenkins
Guest
Posts: n/a
 
      12-12-2003
"rf" <(E-Mail Removed)> wrote in message news:<288Cb.48939$(E-Mail Removed)>...
> "kchayka" <(E-Mail Removed)> wrote in message
> news:3fd8c8fb$0$43854$(E-Mail Removed). ..
> > 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 ****? 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
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
two div in one line, first div's width is const and the second isn't tomek milewski HTML 6 06-25-2007 09:28 PM
set div width to remaining width of the browser Steve Richter ASP .Net 2 06-15-2007 06:40 PM
how to: div width = browser.width? =?Utf-8?B?cm9kY2hhcg==?= ASP .Net 3 10-30-2006 05:43 AM
Textbox width scaling to width of data not width of page? AndrewF ASP .Net 1 10-10-2005 04:38 PM
Fixed layout width based on browser window width msswasstastic@aol.com HTML 11 01-28-2005 07:36 AM



Advertisments