Click here to get back home

Material that does no scroll in web page

 HomeNewsGroups | Search | About
 comp.infosystems.www.authoring.html    Post an article   get this group's latest topics as an RSS feed add this group's latest topics to your My MSN content add this group's latest topics to your My Yahoo content
Subject Author Date
Material that does no scroll in web page mjeschk 01-10-2008
Posted by mjeschk on January 10, 2008, 9:50 pm
Please log in for more thread options
I'm writing a web page using Nvu. I have the page such that the
content is centered, with a column of links and media on the left hand
side. I want that column on the left to stay fixed, not scroll as the
user reads text on the right hand side.

How can this be done?

Posted by Christian Hackl on January 11, 2008, 10:16 am
Please log in for more thread options
mjeschk@iastate.edu wrote:

> I'm writing a web page using Nvu.

Never heard of it, sorry.

> I have the page such that the content is centered, with a column of
> links and media on the left hand side. I want that column on the
> left to stay fixed, not scroll as the user reads text on the right
> hand side.

You can do that with frames (very bad!) or using the "position" property
in CSS, for example:

#some-element
{
position:fixed;
left:0;
top:0;
}

Personally, I think it's extremely irritating for web page elements not
to scroll, and I recommend you do not design your page like this.


--
Christian Hackl

Posted by mjeschk on January 11, 2008, 9:13 pm
Please log in for more thread options
> mjes...@iastate.edu wrote:
> > I'm writing a web page using Nvu.
>
> Never heard of it, sorry.
>
> > I have the page such that the content is centered, with a column of
> > links and media on the left hand side. I want that column on the
> > left to stay fixed, not scroll as the user reads text on the right
> > hand side.
>
> You can do that with frames (very bad!) or using the "position" property
> in CSS, for example:
>
> #some-element
> {
> position:fixed;
> left:0;
> top:0;
>
> }
>
> Personally, I think it's extremely irritating for web page elements not
> to scroll, and I recommend you do not design your page like this.
>
> --
> Christian Hackl

I got it to work, using a layer in NVU editor. My goal is to have the
navigation menu on the left hand side of the site stay put as the user
scroll through the page. Now my question is how can I get it to work
with IE.. It only currently works with Firefox. The code is listed
below. It is a little menu containing streaming video and site
navigation below it for a fitness website I'm building. Thanks!

<div
style="position: fixed; height: 375px; width: 180px; z-index: 1; top:
-9px; left: 257px;"
background-color="rgb(192, 192, 192)">
<table style="text-align: left; width: 184px; height: 406px;"
border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="center" valign="undefined">
<embed src="clip_02.wmv" autostart="true" height="180"
width="180"></td>
</tr>
<tr style="font-family: Agency FB; font-weight: bold;">
<td style="text-align: center;" valign="undefined">
<a href="index.html"><big><big>Introduction</big></big></a></td>
</tr>
<tr style="font-family: Agency FB; font-weight: bold;">
<td style="text-align: center;" valign="undefined"><a
href="goals.html"><big><big>Setting
Goals</big></big></a></td>
</tr>
<tr style="font-family: Agency FB; font-weight: bold;">
<td style="text-align: center;" valign="undefined"><a
href="posture.html"><big><big>Correcting
Posture</big></big></a></td>
</tr>
<tr style="font-family: Agency FB; font-weight: bold;">
<td style="text-align: center;" valign="undefined"><a
href="stretch.html"><big><big>Stretching
Routine</big></big></a></td>
</tr>
<tr style="font-family: Agency FB; font-weight: bold;">
<td style="text-align: center;" valign="undefined"><a
href="diet.html"><big><big>Dieting
Tips</big></big></a></td>
</tr>
<tr>
<td align="center" valign="undefined"></td>
</tr>
</tbody>
</table>
<br>
</div>

Posted by Christian Hackl on January 12, 2008, 8:32 am
Please log in for more thread options
mjeschk@iastate.edu wrote:

> I got it to work, using a layer in NVU editor. My goal is to have the
> navigation menu on the left hand side of the site stay put as the user
> scroll through the page. Now my question is how can I get it to work
> with IE..

You could also use the "overflow" property. Here's the first Google hit
for "position:fixed IE6":

http://home.tampabay.rr.com/bmerkey/examples/fake-position-fixed.html

But that's not a nice solution, either, because if the window is too
small, then the bottom of the fixed element may not be visible anymore
and the user has no way of scrolling down to get it. My original
recommendation of not designing your page to have fixed elements
remains. It's not worth the trouble.

> The code is listed below.

As expected, your editor generates broken HTML code.

> <div
> style="position: fixed; height: 375px; width: 180px; z-index: 1; top:
> -9px; left: 257px;"
> background-color="rgb(192, 192, 192)">

Avoid the style attribute and put all CSS declarations into an external
stylesheet. Besides, this code is not valid HTML. You cannot take a CSS
property like "background-color" and use it like an HTML attribute.

> <table style="text-align: left; width: 184px; height: 406px;"
> border="0" cellpadding="0" cellspacing="0">

Why rely on layout attributes such as "cellpadding" and "cellspacing" if
you use CSS?

> <td align="center" valign="undefined">

Same here. If your goal is to have exactly the same layout in truly
ancient browsers, then why use CSS in the first place?

> <big><big>Introduction</big></big>

Why not use the "font-size" property in CSS?

> <tr style="font-family: Agency FB; font-weight: bold;">

If the user's system does not offer the "Agency FB" font, then the
browser will just use the default font. Use a generic font family as a
final alternative, at least, e.g. font-family:"Agency FB",sans-serif;


--
Christian Hackl

Posted by GTalbot on January 12, 2008, 6:48 pm
Please log in for more thread options
> mjes...@iastate.edu wrote:




> You could also use the "overflow" property. Here's the first Google hit
> for "position:fixed IE6":
>
> http://home.tampabay.rr.com/bmerkey/examples/fake-position-fixed.html
>


Christian,

This sort of hack is not recommendable. It's really time to remind (or
invite) Internet Explorer 6 users to switch to a better browser or to
upgrade and then warn the others that the webpage may not render as
intended by the author but will degrade gracefully. Position: fixed
should degrade as position: absolute for the browsers which do not
support it: that's per spec. Many years ago, in a W3C webpage at
w3.org, this is what the W3C people did themselves. No non-forward-
compatible hack, no complicated workaround.

http://www.end6.org/

http://www.alternativebrowseralliance.com/


> As expected, your editor generates broken HTML code.
>
> > <div
> > style=3D"position: fixed; height: 375px; width: 180px; z-index: 1; top:=

> > -9px; left: 257px;"
> > background-color=3D"rgb(192, 192, 192)">
>


background-color=3D"rgb(192, 192, 192)"

was most likely added manually. Nvu 1.0 does not do that.



> Avoid the style attribute and put all CSS declarations into an external
> stylesheet.


I believe KompoZer 0.7.10 can do that, at least it can do that in a
local, embedded stylesheet.
http://www.charlescooke.me.uk/web/ugs04.htm

HTML Tidy can do that in an embedded, local stylesheet ...
http://tidy.sourceforge.net/docs/quickref.html#clean
although not in an intuitive, natural manner


> Besides, this code is not valid HTML. You cannot take a CSS
> property like "background-color" and use it like an HTML attribute.
>
> > <table style=3D"text-align: left; width: 184px; height: 406px;"
> > border=3D"0" cellpadding=3D"0" cellspacing=3D"0">
>
> Why rely on layout attributes such as "cellpadding" and "cellspacing" if
> you use CSS?


The OP is probably not as experienced at stylesheet edition as you and
I are and probably not accustomed to CSS tableless layout.
One reason that springs to mind: CSS border-spacing property is not
supported by MSIE 6 and MSIE 7 ... so cellspacing may still be
required anyway... assuming the webpage really requires a table for
tabular data.

> > <td align=3D"center" valign=3D"undefined">
>
> Same here. If your goal is to have exactly the same layout in truly
> ancient browsers, then why use CSS in the first place?

valign=3D"undefined"
is a Nvu 1.0 bug which I personally reported in 2005 to D. Glazman. I
believe it has been fixed in KompoZer 0.7.10.

>
> > <big><big>Introduction</big></big>
>
> Why not use the "font-size" property in CSS?


Why not use the accessible and semantic
<h1>Introduction</h1>
or another heading?

> > <tr style=3D"font-family: Agency FB; font-weight: bold;">
>
> If the user's system does not offer the "Agency FB" font, then the
> browser will just use the default font. Use a generic font family as a
> final alternative, at least, e.g. font-family:"Agency FB",sans-serif;
>
> --
> Christian Hackl

I personally reported the blank-space(s) separated font-family name
without surrounding quote bug to the main KompoZer software developer
(Kaze) myself. It should be fixed in KompoZer 0.8.

Also, note that Agency FB would require single quote, not double
quote:

style=3D"font-family: 'Agency FB'; font-weight: bold;"

Regards,

G=E9rard
--
Internet Explorer 7 bugs
http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/

Similar ThreadsPosted
enthralling promotional material October 9, 2006, 11:45 am
How to define a HTML page not allow scroll bars and resize? July 26, 2006, 3:30 pm
Frameset -> Page -> IFrame -> Frameset ...issue with scroll bars (Two issues) April 4, 2008, 6:45 pm
CSS SCroll Box? January 28, 2005, 7:32 pm
and CSS Scroll bar March 25, 2006, 5:19 pm
Horizontal scroll to nowhere---why? October 23, 2007, 11:38 pm
Readonly textbox with scroll April 25, 2005, 1:40 pm
Vertical and Horizontal Frames that Scroll Together October 7, 2004, 5:35 pm
Scroll bar working in IE and Opera but not Firefox? August 5, 2005, 11:10 pm
Only Vertical Scroll bar no horizontal bars August 26, 2005, 3:44 am

Our other projects:

Art Dolls, Fairies and Mermaids - Sunnyfaces.net

Roy's Linux, Programming and Search Engines messages

1-Script XML SitemapXML Sitemap