By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,723 Members | 1,655 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,723 IT Pros & Developers. It's quick & easy.

Navigation Sidebar problem

P: n/a
Hi All,

I have a problem that is two fold. First a little about the enviroment I'm
using; I am running Microsoft Windows XP with all security patches applied.
I use Mozilla 1.6 for all testing before I test on IE 6 w/ all updates. I
am editing my style sheet with StyleMaster 3.5.2 and am hand coding. I use
Dreamweaver MX 2004 and am also hand coding.

I have a problem that is easily solved by using tables however I don't want
to use tables for layout I want to use CSS2.1. All my HTML complies with
XHTML-STRICT DTD 1.0.

Problem Context:

The owner of MGINVENTS, INC. hired me to improve his site and the current
site may be viewed at http://www.mginvents.com. Currently the site uses
frames and tables for layout. I'm trying to eleminate both the use of
frames and tables for layout. Note that I'm not really trying to emulate
the functionality provided by frames...just trying to get rid of them.

Problem Explanation:

I have a flash file "sidenav.swf" that servers as the navigation for the
mginvents.com site. This flash file has a gradient background that I need
to contiune down from the end of the .swf file to the footer of the page. I
can't seem to figure out how I can make implement this using CSS positioning
and other attirbutes.

Here is the contents of my style sheet:
/*
Redefine browser defalut style sheet rules for basic tages.
*/
body {
margin: 0px;
padding: 0px;
}
object {
margin: 0px;
padding: 0px;
}
div {
margin: 0px;
padding: 0px;
}
img {
margin: 0px;
padding: 0px;
}

/*
Setup site framework of page
*/
div#framework_container {
position: inherit;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
}
div#framework_header {
}
div#side_navigation1 {
}
div#side_navigation_2 {
margin: 0px;
padding: 0px;
left: 0px;
top: 369px;
width: 224px;
height: auto;
background-image: url(../pics/framework/sidenav/sidenav_background.gif);
background-repeat: repeat-y;
}
div#body_content {
}
div#footer {
left: 0px;
top: auto;
right: 0px;
bottom: 0px;
margin: 0px;
padding: 0px;
}

Here is the HTML for my page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<link href="../css/framework.css" rel="stylesheet" type="text/css" />
</head>

<body id="body">
<div id="framework_container" dir="ltr" lang="en">

<div id="framework_header" dir="ltr" lang="en">
</div>

<div id="side_navigation_1" dir="ltr" lang="en">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.ca
b#version=6,0,29,0" width="224" height="368">
<param name="movie" value="../pics/framework/sidenav/sidenav.swf" />
<param name=quality value=high />
<embed src="../pics/framework/sidenav/sidenav.swf" quality=high
pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_
Version=ShockwaveFlash" type="application/x-shockwave-flash" width="224"
height="368"></embed>
</object>
</div>

<div id="side_navigation_2" dir="ltr" lang="en">
&nbsp;
</div>

<div id="body_content" dir="ltr" lang="en">
</div>

<div id="footer" dir="ltr" lang="en">
</div>

</div>
</body>
</html>So to put the problem in a diferent light I'm trying to get the
side_navigation_2 divto expand and contact depending on the size of the
browser window between side_navigation_1div and the footer div. Note that
I've yet to create the real style for the footer, header orbody_content
div's. One other issue I'm having with Mozilla is that mozilla puts a
spaceof about five pixels between side_navigation_1 and side_navigation_2
this doesn't happenon IE6 and I don't know why it's happening in Mozilla.All
help, suggestions or general feedback is greatly appricated.Best
regards,Theo
Jul 20 '05 #1
Share this Question
Share on Google+
9 Replies


P: n/a
Theodore A. Jencks wrote:
I have a problem that is easily solved by using tables however I
don't want to use tables for layout I want to use CSS2.1. All my
HTML complies with XHTML-STRICT DTD 1.0.
Sidebar: HTML 4.01/strict may be more practical, and just as beneficial,
as XHTML.
The owner of MGINVENTS, INC. hired me to improve his site and the
current site may be viewed at http://www.mginvents.com. Currently
the site uses frames and tables for layout.
Ugh! Well, there's probably not much to see at the old site, then. Well,
let's have a look-see, all the same --

Yep, not much to see. Much of the content is simply invisible in my
browser. And I really dislike that super-modern look, not that my
opinion of the aesthetics is important.
I'm trying to eleminate both the use of frames and tables for layout.
Both bad design elements, so it's good to lose them.
Note that I'm not really trying to emulate the functionality provided
by frames...just trying to get rid of them.
That seems like a rather prudent decision.
I have a flash file "sidenav.swf" that servers as the navigation for
the mginvents.com site.
And for users who don't have flash? Or have disabled it (as I have)?
Flash has become synonmous with "gratuitously animated ad" for lots of
folks. I dare say that Using flash for navigation is a bigger
accessibility barrier than frames, and it almost certainly is a bigger
problem than tables for layout.
Here is the contents of my style sheet: body { margin: 0px; padding:
0px; } [snip] Here is the HTML for my page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Instead of code, any chance you could post the test site on the web
somewhere (perhaps http://www.mginvents.com/test/ )? That'd be much
easier for us to help you.
to put the problem in a diferent light I'm trying to get the
side_navigation_2 divto expand and contact depending on the size


This is the navigation with Flash? I have no experience with it. There's
no content in side_navigation_2, what will be in it that has to expand?
You're sizing things in pixels, so it's hard to see how it can expand. A
url would really help me understand this better.

--
Brian (remove "invalid" from my address to email me)
http://www.tsmchughs.com/
Jul 20 '05 #2

P: n/a
Brian,

Thanks for the reply, I will post up a test site of some sort and post the
URL shortly. Just to let you know, I don't really like the design either,
wasn't done by me I'm just trying to recode this mess and learn to use style
sheets in the process as I'll be rebuilding this site later this year and
redesigning it. Anyway the current task at hand is just to clean up the
code for what is already there.

Regards,
Theo
"Brian" <us*****@julietremblay.com.invalid> wrote in message
news:10*************@corp.supernews.com...
Theodore A. Jencks wrote:
I have a problem that is easily solved by using tables however I
don't want to use tables for layout I want to use CSS2.1. All my
HTML complies with XHTML-STRICT DTD 1.0.


Sidebar: HTML 4.01/strict may be more practical, and just as beneficial,
as XHTML.
The owner of MGINVENTS, INC. hired me to improve his site and the
current site may be viewed at http://www.mginvents.com. Currently
the site uses frames and tables for layout.


Ugh! Well, there's probably not much to see at the old site, then. Well,
let's have a look-see, all the same --

Yep, not much to see. Much of the content is simply invisible in my
browser. And I really dislike that super-modern look, not that my
opinion of the aesthetics is important.
I'm trying to eleminate both the use of frames and tables for layout.

Both bad design elements, so it's good to lose them.
Note that I'm not really trying to emulate the functionality provided
by frames...just trying to get rid of them.


That seems like a rather prudent decision.
I have a flash file "sidenav.swf" that servers as the navigation for
the mginvents.com site.


And for users who don't have flash? Or have disabled it (as I have)?
Flash has become synonmous with "gratuitously animated ad" for lots of
folks. I dare say that Using flash for navigation is a bigger
accessibility barrier than frames, and it almost certainly is a bigger
problem than tables for layout.
Here is the contents of my style sheet: body { margin: 0px; padding:
0px; }

[snip]
Here is the HTML for my page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


Instead of code, any chance you could post the test site on the web
somewhere (perhaps http://www.mginvents.com/test/ )? That'd be much
easier for us to help you.
to put the problem in a diferent light I'm trying to get the
side_navigation_2 divto expand and contact depending on the size


This is the navigation with Flash? I have no experience with it. There's
no content in side_navigation_2, what will be in it that has to expand?
You're sizing things in pixels, so it's hard to see how it can expand. A
url would really help me understand this better.

--
Brian (remove "invalid" from my address to email me)
http://www.tsmchughs.com/

Jul 20 '05 #3

P: n/a
How am I supposed to post my replies in a newsgroup?:
http://allmyfaqs.com/faq.pl?How_to_post

Theodore A. Jencks wrote:
Brian wrote...
Theodore A. Jencks wrote:
current site may be viewed at http://www.mginvents.com.
Currently the site uses frames and tables for layout.

flash file "sidenav.swf" that servers as the navigation
there's probably not much to see at the old site, then.


I don't really like the design either, wasn't done by me I'm just
trying to recode this mess


Oh, I figured as much.
and learn to use style sheets in the process as I'll be rebuilding
this site later this year and redesigning it. Anyway the current
task at hand is just to clean up the code for what is already there.


Good luck. I'd lose the flash, and KISS.

--
Brian (remove "invalid" from my address to email me)
http://www.tsmchughs.com/
Jul 20 '05 #4

P: n/a
"Brian" <us*****@julietremblay.com.invalid> wrote in message
news:10*************@corp.supernews.com...
Theodore A. Jencks wrote:
I have a problem that is easily solved by using tables however I
don't want to use tables for layout I want to use CSS2.1. All my
HTML complies with XHTML-STRICT DTD 1.0.
Sidebar: HTML 4.01/strict may be more practical, and just as beneficial,
as XHTML.
The owner of MGINVENTS, INC. hired me to improve his site and the
current site may be viewed at http://www.mginvents.com. Currently
the site uses frames and tables for layout.


Ugh! Well, there's probably not much to see at the old site, then. Well,
let's have a look-see, all the same --

Yep, not much to see. Much of the content is simply invisible in my
browser. And I really dislike that super-modern look, not that my
opinion of the aesthetics is important.
I'm trying to eleminate both the use of frames and tables for layout.

Both bad design elements, so it's good to lose them.
Note that I'm not really trying to emulate the functionality provided
by frames...just trying to get rid of them.


That seems like a rather prudent decision.
I have a flash file "sidenav.swf" that servers as the navigation for
the mginvents.com site.


And for users who don't have flash? Or have disabled it (as I have)?
Flash has become synonmous with "gratuitously animated ad" for lots of
folks. I dare say that Using flash for navigation is a bigger
accessibility barrier than frames, and it almost certainly is a bigger
problem than tables for layout.


Perhaps though the folks that will be visiting this site will have flash
enabled....as there will be lot's of flash videos later on.
Here is the contents of my style sheet: body { margin: 0px; padding:
0px; } [snip]
Here is the HTML for my page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


Instead of code, any chance you could post the test site on the web
somewhere (perhaps http://www.mginvents.com/test/ )? That'd be much
easier for us to help you.


http://www.mginvents.com/test/index.html is the test link and is now active.
to put the problem in a diferent light I'm trying to get the
side_navigation_2 divto expand and contact depending on the size
This is the navigation with Flash? I have no experience with it. There's
no content in side_navigation_2, what will be in it that has to expand?
You're sizing things in pixels, so it's hard to see how it can expand. A
url would really help me understand this better.


So here at last is the URL: http://www.mginvents.com/test/index.html

I basiclly need to find a way to make the gradient background of
side_navigation_2 extend down to the bottom of the page.
I know that I could use Javascript to set the height in pixels when a user
resizes the window but that seems to be a dirty solution. Note also that I
only have that div tag there so that I can add that background picture to
it. No content will be placed in the div tag.

--
Brian (remove "invalid" from my address to email me)
http://www.tsmchughs.com/


Thanks,
-TJ
Jul 20 '05 #5

P: n/a
"Brian" <us*****@julietremblay.com.invalid> wrote:
And for users who don't have flash? Or have disabled it (as I have)?
Flash has become synonmous with "gratuitously animated ad" for lots of
folks. I dare say that Using flash for navigation is a bigger
accessibility barrier than frames, and it almost certainly is a bigger
problem than tables for layout.

Theodore A. Jencks <tj*****@digitalfacet.com> wrote: Perhaps though the folks that will be visiting this site will have flash
enabled....as there will be lot's of flash videos later on.
What if they want some of the other (non-Flash) content? What if they don't
know that your site has lots of Flash videos later on? All I wanted from
http://www.chipotle.com/ was the address of a local restaurant, something
that I should have been able to get without JavaScript and Flash enabled.
http://www.mginvents.com/test/index.html is the test link and is now active.


I just get a blank window. Normally, I'd just Ctrl-W and go somewhere else.
--
Darin McGrew, da***@TheRallyeClub.org, http://www.TheRallyeClub.org/
A gimmick car rallye is not a race, but a fun puzzle testing your
ability to follow instructions. Upcoming gimmick car rallye in
Silicon Valley: Starsky & Hutch (Saturday, May 1)
Jul 20 '05 #6

P: n/a
Theodore A. Jencks wrote:
Brian wrote...
Theodore A. Jencks wrote:
I have a flash file "sidenav.swf" that servers as the navigation
for the mginvents.com site.
And for users who don't have flash? Or have disabled it (as I
have)?


Perhaps though the folks that will be visiting this site will have
flash enabled....


Perhaps implies perhaps not. So what will you do about the "perhaps not"
folks?
as there will be lot's of flash videos later on.
Presumably, because you want to provide some sort of moving videos of
some sort, but you don't say. If that's the case, then use flash for
content that requires it. Since navigation certainly does not require
flash -- simple <a href=...> markup will do -- there's no point in using
for that. It's woefully inadequate to the task.
here at last is the URL: http://www.mginvents.com/test/index.html
I get a mostly blank window. Moz 1.6/Win2k. What should I be seeing?
I basiclly need to find a way to make the gradient background of
side_navigation_2 extend down to the bottom of the page.
I do see a small block of light blue color in the bottom right corner;
is this what you are talking about?
I know that I could use Javascript to set the height in pixels when a
user resizes the window but that seems to be a dirty solution.
And guaranteed to fail in at least some situations.
Note also that I only have that div tag there so that I can add that
background picture to it. No content will be placed in the div tag.


Umm, so why don't you just go with the background image and forget the
complexities? I guess you need it to go to the bottom of the window,
regardless of content, yes? Do you know that you can repeat a background
image?

http://www.w3.org/TR/CSS21/colors.ht...kground-repeat

Let us know if that will solve your problem.

--
Brian (remove "invalid" from my address to email me)
http://www.tsmchughs.com/
Jul 20 '05 #7

P: n/a

"Brian" <us*****@julietremblay.com.invalid> wrote in message
news:10*************@corp.supernews.com...
Theodore A. Jencks wrote:
Brian wrote...
Theodore A. Jencks wrote:

I have a flash file "sidenav.swf" that servers as the navigation
for the mginvents.com site.

And for users who don't have flash? Or have disabled it (as I
have)?
Perhaps though the folks that will be visiting this site will have
flash enabled....


Perhaps implies perhaps not. So what will you do about the "perhaps not"
folks?
as there will be lot's of flash videos later on.


Presumably, because you want to provide some sort of moving videos of
some sort, but you don't say. If that's the case, then use flash for
content that requires it. Since navigation certainly does not require
flash -- simple <a href=...> markup will do -- there's no point in using
for that. It's woefully inadequate to the task.


Brian, this totally makes sense to me, though....the people that we work for
are sometimes less than understanding of such issues. My client thinks that
a flash site is impressive and that his clients will be impressed. I have
not really been able to disuade him from this point of view as of yet.
Although as far as propriatery extensions go I think that flash is fairly
broad based. I'm trying to use style sheets and XHTML so that at least the
code is clean and easy to work with, that's my primary goal. Flash may
stand in the way of that in some instances but it's just something I've got
to live with for right now. Just out of curiousity, have any of you guys
looked at Macromedia Flex? That really impressed me and I'm going to start
my first Flex project soon.
here at last is the URL: http://www.mginvents.com/test/index.html
I get a mostly blank window. Moz 1.6/Win2k. What should I be seeing?


Sorry about this, I've fixed the issue and now you should see a mostly blank
page with the flash navigation in the upper left hand corner. I'm trying to
find a way to contiune that background gradient down to the bottom of the
page using style sheets and div tages...hope this makes sense?
I basiclly need to find a way to make the gradient background of
side_navigation_2 extend down to the bottom of the page.
I do see a small block of light blue color in the bottom right corner;
is this what you are talking about?
I know that I could use Javascript to set the height in pixels when a
user resizes the window but that seems to be a dirty solution.


And guaranteed to fail in at least some situations.
Note also that I only have that div tag there so that I can add that
background picture to it. No content will be placed in the div tag.


Umm, so why don't you just go with the background image and forget the
complexities? I guess you need it to go to the bottom of the window,
regardless of content, yes? Do you know that you can repeat a background
image?

http://www.w3.org/TR/CSS21/colors.ht...kground-repeat


I've seen this however I don't think you understand my question yet.
Probably because I'm being unclear and my test link didn't work! :-)

Let us know if that will solve your problem.

--
Brian (remove "invalid" from my address to email me)
http://www.tsmchughs.com/

Jul 20 '05 #8

P: n/a
Theodore A. Jencks wrote:
Brian wrote...

use flash for content that requires it. Since navigation certainly
does not require flash -- simple <a href=...> markup will do --
there's no point in using for that. It's woefully inadequate to the
task.
this totally makes sense to me, though....the people that we work for
are sometimes less than understanding of such issues. My client
thinks that a flash site is impressive and that his clients will be
impressed.


That's a shame, and it sounds like there is not much you can do. That
it's the wrong choice seems quite clear to me. Flash does not
automatically scale to the users font-size, for example. It will also
make the home page considerably slower to load, especially on dialup.

I am fortunate that my last client specifically wanted a site that would
load fast. He emphasized that several times. And he specifically stated
that he considered a functioning site to be most important. No, he
wasn't a code geek like me. In fact, he is very much an amateur, unaware
of all sorts of things computer related. He just took a lesson from his
experiences on the 'net.
I have not really been able to disuade him from this point of view
You might point out that speed on the internet is of paramount
importance. People don't want to wait for pages to load. Too long, and
they press the back button and find the next result in Google.

You might also want to have a look at the css zen garden.

http://www.csszengarden.com/

Some of their techniques -- fixed font size, widths in pixels -- hurt
accessibilty. But it does show what is possible with (x)html strict and
css -- and no Flash, for goodness sake! In fact, I daresay that one
could rewrite their css, lose the fixed size, and still have beautiful
designs, strict code, etc.
as propriatery extensions go I think that flash is fairly broad based.


Ironcically, that may work against you. Those who have Flash will find a
slow to load home page, and, depending on their resolution, etc.,
unreadably small text. Who knows? It's a gamble, more so than HTML.

In any case, I've *never* touched Macromedia stuff, and I have no idea
how to make flash do anything. In fact, if you want help with that, you
may need to try in a flash group. I know so little about it, that I
really can't say whether your problem can be solved with css or not.

Good luck.

--
Brian (remove "invalid" from my address to email me)
http://www.tsmchughs.com/
Jul 20 '05 #9

P: n/a

"Brian" <us*****@julietremblay.com.invalid> wrote in message
news:10*************@corp.supernews.com...
Theodore A. Jencks wrote:
Brian wrote...

use flash for content that requires it. Since navigation certainly
does not require flash -- simple <a href=...> markup will do --
there's no point in using for that. It's woefully inadequate to the
task.
this totally makes sense to me, though....the people that we work for
are sometimes less than understanding of such issues. My client
thinks that a flash site is impressive and that his clients will be
impressed.


That's a shame, and it sounds like there is not much you can do. That
it's the wrong choice seems quite clear to me. Flash does not
automatically scale to the users font-size, for example. It will also
make the home page considerably slower to load, especially on dialup.

I am fortunate that my last client specifically wanted a site that would
load fast. He emphasized that several times. And he specifically stated
that he considered a functioning site to be most important. No, he
wasn't a code geek like me. In fact, he is very much an amateur, unaware
of all sorts of things computer related. He just took a lesson from his
experiences on the 'net.
I have not really been able to disuade him from this point of view


You might point out that speed on the internet is of paramount
importance. People don't want to wait for pages to load. Too long, and
they press the back button and find the next result in Google.

You might also want to have a look at the css zen garden.

http://www.csszengarden.com/

Some of their techniques -- fixed font size, widths in pixels -- hurt
accessibilty. But it does show what is possible with (x)html strict and
css -- and no Flash, for goodness sake! In fact, I daresay that one
could rewrite their css, lose the fixed size, and still have beautiful
designs, strict code, etc.
as propriatery extensions go I think that flash is fairly broad based.


Ironcically, that may work against you. Those who have Flash will find a
slow to load home page, and, depending on their resolution, etc.,
unreadably small text. Who knows? It's a gamble, more so than HTML.

In any case, I've *never* touched Macromedia stuff, and I have no idea
how to make flash do anything. In fact, if you want help with that, you
may need to try in a flash group. I know so little about it, that I
really can't say whether your problem can be solved with css or not.


Actually my question doesn't involve flash. The flash part is only in the
upper left had corner. The question I had is about making the div tag that
has an id="side_navigation_2" stretch to the bottom of the screen. I think
I'll repost this topic as a more general question about CSS. Thanks for all
your input Brian and I hope that I will be able to redo my site in something
more standards compliant then flash.

-TJ
Good luck.

--
Brian (remove "invalid" from my address to email me)
http://www.tsmchughs.com/

Jul 20 '05 #10

This discussion thread is closed

Replies have been disabled for this discussion.