473,511 Members | 15,715 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Positioning Problem in CSS

CJM
I'm developing a web application, that has a left-sided navigation menu and
a centre-right content area. The menu is static and therefore is in an
INCLUDEd file.

I'm wanting to add a link to a context-sensitive help page, and I'd like it
to appear beneath the menu on the left-hand side. However, I'm not sure how
to get it to do this... Also, the menu uses Javascript to expand and
contract each menu section, so this Help link would need to react to this.

The typical page structure is like the following:

<html>
<head>
....etc...
</head>
<body>
<div id="content">
...etc...
</div>
<!-- #include virtual="menu.asp" -->
</body>
</html>

The menu file is like this:

<div id="leftnav">
...Logo...
<div id="menu">
...etc...
<\div>
<\div>

The CSS layout code is as follows:
#leftnav {
position:absolute;
width:200px;
z-index:2;
padding: 10px 0 0 10px;
}

#content {
position:absolute;
left:201px;
padding-left: 20px;
right:24px;
z-index:1;
border-left: 1px green dotted;
}

#menu {
position: relative;
top: 15px;
width: 200px;
color: #000;
background-color: transparent;
}
Can some suggest how I can get this link positioned correctly?

Thanks

--
cj*******@REMOVEMEyahoo.co.uk
[remove the obvious bits]
Jul 21 '05 #1
4 1835
"CJM" <cj******@REMOVEMEyahoo.co.uk> wrote:
The menu is static and therefore is in an
INCLUDEd file.
If it's static then using inclusion needlessly causes caching issues. If
by "static" you mean that you want to have the same menu appear on more
than one page and have only one instance of the code to change then you
should consider using S&R or a preprocessor to avoid having to deal with
the caching problem.
I'm wanting to add a link to a context-sensitive help page, and I'd like it
to appear beneath the menu on the left-hand side. However, I'm not sure how
to get it to do this...
One way is to use a link to the help index, and then check the referrer
to serve help related to the page that it was called from. Note that in
some clients may suppress the referrer, in that case the link should
produce the help index.

A better and fully reliable method is to use different links.
Also, the menu uses Javascript to expand and
contract each menu section,
What happens if javascript isn't enabled or available on the client?
so this Help link would need to react to this.
React how?
The typical page structure is like the following:
Post a url to a minimized test case, not code.
position:absolute;
width:200px;


Usually a bad choice, the side panel doesn't adjust in width to
accommodate client side font size variations.

--
Spartanicus
Jul 21 '05 #2
DU
CJM wrote:
I'm developing a web application, that has a left-sided navigation menu and
a centre-right content area. The menu is static and therefore is in an
INCLUDEd file.

I'm wanting to add a link to a context-sensitive help page, and I'd like it
to appear beneath the menu on the left-hand side. However, I'm not sure how
to get it to do this... Also, the menu uses Javascript to expand and
contract each menu section, so this Help link would need to react to this.

The typical page structure is like the following:

<html>
No doctype declaration. Now this is important if you want to trigger
modern browsers (MSIE 6, Firefox 1.x, Mozilla 1.x, Opera 7+, Safari 1.x,
etc.) into standards compliant rendering mode, therefore making layout
and rendering as consistent as possible across browsers.
<head>
...etc...
</head>
<body>
<div id="content">
...etc...
</div>
<!-- #include virtual="menu.asp" -->
I would have include the menu before the <div id="content"> for
accessibility reasons. If CSS support is disabled or inexistent in a
user agent, then the created document still remains accessible, more
accessible.
</body>
</html>

The menu file is like this:

<div id="leftnav">
...Logo...
<div id="menu">
...etc...
<\div>
<\div>

The CSS layout code is as follows:
#leftnav {
position:absolute;
width:200px;
Personally, I would prefer %tage for navigation pane so that the page
remains scalable regardless viewport dimensions or viewport resizing or
user agents (like small screen) or media (mobile media).
z-index:2;
z-index is useless here. If div id="leftnav" is properly positioned
regarding div id="content", then there is no need to create stack levels.
padding: 10px 0 0 10px;
}

#content {
position:absolute;
left:201px;
padding-left: 20px;
right:24px;
z-index:1;
border-left: 1px green dotted;
}

#menu {
position: relative;
positioning relatively inside an abs. pos. element does not seem
justified but I can't be sure since you have not provided a full example
or an url. That would have been helpful.
Personally, I would try to avoid having nested pos. elements as much as
possible, furthermore if it's rel. pos. versus abs. pos. Here I am
almost certain you don't need to create a <div id="menu" inside the <div
id="leftnav"
top: 15px;
So the logo (image or text) must be 15 pixels high: that is the
reasonable deduction to reach here.
width: 200px;
color: #000;
background-color: transparent;
}
Can some suggest how I can get this link positioned correctly?

Thanks


Without being able to examine the code? no, it's not possible. An url
would answer many questions we could have.

DU
--
The site said to use Internet Explorer 5 or better... so I switched to
Firefox 1.0.4 :)
Jul 21 '05 #3
DU wrote:
CJM wrote:
<div id="content">
...etc...
</div>
<!-- #include virtual="menu.asp" -->
I would have include the menu before the <div id="content"> for
accessibility reasons.


Why?
If CSS support is disabled or inexistent in a
user agent, then the created document still remains accessible, more
accessible.


I don't follow. I don't believe menu positioning within the structure
has all that much to do with accessibility.

BTW, I used to think putting the content first, menu last was best for
accessibility. Now I'm not convinced it makes much difference, except
maybe to search engines. If the user has quick, easy access to various
areas of a page, where specifically these structural elements are isn't
so relevant.

That access may come via in-built browser functionality (e.g.
type-ahead-find in FF/moz, navigation by headings in Opera or Jaws,
etc.) or things like "skip" links and accesskeys, though accesskeys are
a last resort, IMO.

If you know of a study that shows me I'm way off base, I'd surely like
to read it.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.
Jul 21 '05 #4
CJM

"kchayka" <us****@c-net.us> wrote in message
news:3g************@individual.net...

Why?
If CSS support is disabled or inexistent in a
user agent, then the created document still remains accessible, more
accessible.


I don't follow. I don't believe menu positioning within the structure
has all that much to do with accessibility.

BTW, I used to think putting the content first, menu last was best for
accessibility. Now I'm not convinced it makes much difference, except
maybe to search engines. If the user has quick, easy access to various
areas of a page, where specifically these structural elements are isn't
so relevant.


Having the content first, before the navigation always was regarded as more
accessible. Imagine a screen reader listing every menu option before even
covering any content.

Anyway, with respect to Spartanicus and DU, that wasn't the purpose of my
question.

I simply want to know how to position this one link beneath the menu on the
LHS. Redeveloping the entire page.meny layout to achieve this is not an
option - well, at least not at this moment in time. The powers-that-be want
a link to the help file, in that approximate position, NOW(!). I cant really
tell them that I'm taking a week out to redesign the page structure of all
100+ pages.

So given these constraints, can anyone suggest any easy but sensible way of
achieving this given the current constraints?

Thanks
Jul 21 '05 #5

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

9
32028
by: Bryan R. Meyer | last post by:
Hello Everyone, The problem of browser resizing has become an issue for me. While redesigning my webpage, I set the left and right margins to be auto so that my content would be centered. ...
4
2686
by: Jane Withnolastname | last post by:
I am trying to re-work an old site by replacing the html with css. On the main page, I have a logo image which I needed centred on the initial screen. I found the solution here:...
14
2451
by: Harlan Messinger | last post by:
What am I not understanding about the definition of { position: absolute; }? "The box's position (and possibly size) is specified with the 'left', 'right', 'top', and 'bottom' properties. These...
6
2662
by: rajek | last post by:
I posted a similar question yesterday, but didn't get an answer that resolved the issue. (Thanks to those who tried though.) The background: I've read in books and online that if you have one...
11
2622
by: NS | last post by:
I am relativly new to css positioning and have a question regarding the display of a DHTML pop-up Here is the basic HTML I am using: <html> <head> <script language="JavaScript"> <!--
1
2795
by: Charles Harrison Caudill | last post by:
with tables there is a clean and algorithmic way to organize things, but with css which is, once you get it working, much cleaner, I have to tweak and patch and hope and pray and curse before...
2
2474
by: Rob R. Ainscough | last post by:
I'm slowly (very slowly) working my way thru the bizarre and sadistic world of control positioning in MultiViews (ASP 2.0). I came across this to help me explain (or attempt to anyway) why my web...
4
2089
by: Alan Silver | last post by:
Hello, Having been a light reader of this ng for a few months now (after several years absence), I have noticed that absolute positioning seems to be considered a Very Bad Thing around here....
9
3372
by: Bill Norton | last post by:
I've been experimenting with floats, positioning and offsets (top, left, etc.) to see what happens when you mix the properties together. All this may be old news to most of you, but it was...
6
2896
by: Mark | last post by:
hi, i'm trying to position something in the top right corner of a container, but i can't seem to figure out how to get it working. here's the html <div class='thumb'><a href='image.jpg'><img...
0
7251
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
7148
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
7367
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
7430
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
1
7089
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
0
3217
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
0
1581
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated ...
1
790
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
0
451
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.