Search:
Namespaces
Discussions
.NET v1.1
Feedback
Please help! Problems with positioning
Messages
Related Types
This message was discovered on
ASPFriends.com 'aspngclient' list
.
John Tyson
Hi,
I am trying to develop a css template for the web pages of my web site.
I am running into some real difficulty with my div positioning. If
someone would please take a moment to look at my style sheet I would
greatly appreciate it. I am trying to get my page to display like this:
Header
TopMenu
Content (with a bunch of div's within this element to create columns)
Footer
The problem is that the Content and Footer overlap and both align to the
bottom of the TopMenu; the Footer should align to the bottom of the
Content block.
Thank you for your time,
John
body {
margin: 0px;
padding: 0px;
text-align: center;
font-family: Verdana;
background-color: #ffffff;
}
div.page {
margin: 0px auto;
padding: 0px;
top: 0px;
text-align: center;
height: 100%;
width: 700px;
background-color: #ffffff;
}
div.page div.header {
margin: 0px auto;
padding: 0px;
top: 0px;
height: 87px;
width: 700px;
text-align: left;
background-color: transparent;
}
div.page div.TopMenu {
margin: 0px;
padding-top: 10px;
height: 40px;
width: 700px;
font-size: 8pt;
text-align: center;
background-color: transparent;
border-top: 2px solid #cccccc;
}
div.page div.content {
position: relative;
margin: 0px auto;
padding: 0px;
height: auto;
width: 700px;
text-align: left;
background-color: transparent;
}
div.page div.content div.lftCol {
position: absolute;
margin: 0px;
padding: 0px;
left: 0px;
height: 100%;
width: 170px;
background-color: transparent;
}
div.page div.content div.lftSpacer {
position: absolute;
margin: 0px;
padding: 0px;
left: 170px;
height: 100%;
width: 15px;
background-color: transparent;
}
div.page div.content div.ctrCol {
position: absolute;
margin: 0px;
padding: 0px;
left: 185px;
height: 100%;
width: 320px;
background-color: transparent;
}
div.page div.content div.rgtSpacer {
position: absolute;
margin: 0px;
padding: 0px;
left: 505px;
height: 100%;
width: 15px;
background-color: transparent;
}
div.page div.content div.rgtCol {
position: absolute;
margin: 0px;
padding: 0px;
left: 520px;
height: 100%;
width: 180px;
background-color: transparent;
}
div.page div.footer {
position: relative;
margin: 0px;
padding: 0px;
height: 80px;
width: 700px;
text-align: left;
background-color: transparent;=09
}
div.page div.footer div.BtmMenu {
margin: 0px;
padding-top: 10px;
padding-bottom: 10px;
height: 40px;
width: 700px;
font-size: 8pt;
text-align: center;
background-color: transparent;
border-bottom: 2px solid #cccccc;
}
div.page div.footer div.BtmTerms {
margin: 0px;
padding-top: 10px;
height: 40px;
width: 700px;
font-size: 8pt;
text-align: center;
background-color: transparent;
}
Reply to this message...
Bob Filipiak
Without seeing how your using your styles I'll take a guess and recommend
looking into all the height=100% setting you have for your various div's.
"John Tyson" <
Click here to reveal e-mail address
> wrote in message news:681759@aspngclient...
Hi,
I am trying to develop a css template for the web pages of my web site.
I am running into some real difficulty with my div positioning. If
someone would please take a moment to look at my style sheet I would
greatly appreciate it. I am trying to get my page to display like this:
Header
TopMenu
Content (with a bunch of div's within this element to create columns)
Footer
The problem is that the Content and Footer overlap and both align to the
bottom of the TopMenu; the Footer should align to the bottom of the
Content block.
Thank you for your time,
John
body {
margin: 0px;
padding: 0px;
text-align: center;
font-family: Verdana;
background-color: #ffffff;
}
div.page {
margin: 0px auto;
padding: 0px;
top: 0px;
text-align: center;
height: 100%;
width: 700px;
background-color: #ffffff;
}
div.page div.header {
margin: 0px auto;
padding: 0px;
top: 0px;
height: 87px;
width: 700px;
text-align: left;
background-color: transparent;
}
div.page div.TopMenu {
margin: 0px;
padding-top: 10px;
height: 40px;
width: 700px;
font-size: 8pt;
text-align: center;
background-color: transparent;
border-top: 2px solid #cccccc;
}
div.page div.content {
position: relative;
margin: 0px auto;
padding: 0px;
height: auto;
width: 700px;
text-align: left;
background-color: transparent;
}
div.page div.content div.lftCol {
position: absolute;
margin: 0px;
padding: 0px;
left: 0px;
height: 100%;
width: 170px;
background-color: transparent;
}
div.page div.content div.lftSpacer {
position: absolute;
margin: 0px;
padding: 0px;
left: 170px;
height: 100%;
width: 15px;
background-color: transparent;
}
div.page div.content div.ctrCol {
position: absolute;
margin: 0px;
padding: 0px;
left: 185px;
height: 100%;
width: 320px;
background-color: transparent;
}
div.page div.content div.rgtSpacer {
position: absolute;
margin: 0px;
padding: 0px;
left: 505px;
height: 100%;
width: 15px;
background-color: transparent;
}
div.page div.content div.rgtCol {
position: absolute;
margin: 0px;
padding: 0px;
left: 520px;
height: 100%;
width: 180px;
background-color: transparent;
}
div.page div.footer {
position: relative;
margin: 0px;
padding: 0px;
height: 80px;
width: 700px;
text-align: left;
background-color: transparent;
}
div.page div.footer div.BtmMenu {
margin: 0px;
padding-top: 10px;
padding-bottom: 10px;
height: 40px;
width: 700px;
font-size: 8pt;
text-align: center;
background-color: transparent;
border-bottom: 2px solid #cccccc;
}
div.page div.footer div.BtmTerms {
margin: 0px;
padding-top: 10px;
height: 40px;
width: 700px;
font-size: 8pt;
text-align: center;
background-color: transparent;
}
Reply to this message...
John Tyson
I would be happy to share my code...I've tried all of the position
properties to get the footer div to settle below the content div, but
they continue to overlap. It seems to work fine until I add the divs
within the content div. I have the height setting on the content div to
"auto" - I want the content div to size dynamically based on the height
of the column divs within, and then the footer block to always be at the
bottom of the content block. Any help is greatly appreciated.
John
-----Original Message-----
From: Bob Filipiak [mailto:
Click here to reveal e-mail address
]=20
Sent: Thursday, July 11, 2002 5:06 AM
To: aspngclient
Subject: [aspngclient] Re: Please help! Problems with positioning
Without seeing how your using your styles I'll take a guess and
recommend
looking into all the height=3D100% setting you have for your various
div's.
"John Tyson" <
Click here to reveal e-mail address
> wrote in message
news:681759@aspngclient...
Hi,
I am trying to develop a css template for the web pages of my web site.
I am running into some real difficulty with my div positioning. If
someone would please take a moment to look at my style sheet I would
greatly appreciate it. I am trying to get my page to display like this:
Header
TopMenu
Content (with a bunch of div's within this element to create columns)
Footer
The problem is that the Content and Footer overlap and both align to the
bottom of the TopMenu; the Footer should align to the bottom of the
Content block.
Thank you for your time,
John
body {
margin: 0px;
padding: 0px;
text-align: center;
font-family: Verdana;
background-color: #ffffff;
}
div.page {
margin: 0px auto;
padding: 0px;
top: 0px;
text-align: center;
height: 100%;
width: 700px;
background-color: #ffffff;
}
div.page div.header {
margin: 0px auto;
padding: 0px;
top: 0px;
height: 87px;
width: 700px;
text-align: left;
background-color: transparent;
}
div.page div.TopMenu {
margin: 0px;
padding-top: 10px;
height: 40px;
width: 700px;
font-size: 8pt;
text-align: center;
background-color: transparent;
border-top: 2px solid #cccccc;
}
div.page div.content {
position: relative;
margin: 0px auto;
padding: 0px;
height: auto;
width: 700px;
text-align: left;
background-color: transparent;
}
div.page div.content div.lftCol {
position: absolute;
margin: 0px;
padding: 0px;
left: 0px;
height: 100%;
width: 170px;
background-color: transparent;
}
div.page div.content div.lftSpacer {
position: absolute;
margin: 0px;
padding: 0px;
left: 170px;
height: 100%;
width: 15px;
background-color: transparent;
}
div.page div.content div.ctrCol {
position: absolute;
margin: 0px;
padding: 0px;
left: 185px;
height: 100%;
width: 320px;
background-color: transparent;
}
div.page div.content div.rgtSpacer {
position: absolute;
margin: 0px;
padding: 0px;
left: 505px;
height: 100%;
width: 15px;
background-color: transparent;
}
div.page div.content div.rgtCol {
position: absolute;
margin: 0px;
padding: 0px;
left: 520px;
height: 100%;
width: 180px;
background-color: transparent;
}
div.page div.footer {
position: relative;
margin: 0px;
padding: 0px;
height: 80px;
width: 700px;
text-align: left;
background-color: transparent;
}
div.page div.footer div.BtmMenu {
margin: 0px;
padding-top: 10px;
padding-bottom: 10px;
height: 40px;
width: 700px;
font-size: 8pt;
text-align: center;
background-color: transparent;
border-bottom: 2px solid #cccccc;
}
div.page div.footer div.BtmTerms {
margin: 0px;
padding-top: 10px;
height: 40px;
width: 700px;
font-size: 8pt;
text-align: center;
background-color: transparent;
}
| [aspngclient] member
Click here to reveal e-mail address
=3D YOUR ID
|
http://www.aspfriends.com/aspfriends/aspngclient.asp
=3D JOIN/QUIT
Reply to this message...
Bob Filipiak
There may be some DHTML techniques you can try for positioning like some of
the floating menus at dynamicdrive.com. Sorry don't have any url cause I
can't get to dynamicdrive.com. Another thought might be to use an iframe for
your content.
"John Tyson" <
Click here to reveal e-mail address
> wrote in message news:682248@aspngclient...
I would be happy to share my code...I've tried all of the position
properties to get the footer div to settle below the content div, but
they continue to overlap. It seems to work fine until I add the divs
within the content div. I have the height setting on the content div to
"auto" - I want the content div to size dynamically based on the height
of the column divs within, and then the footer block to always be at the
bottom of the content block. Any help is greatly appreciated.
John
Reply to this message...
Matt Serdar
You can use expressions in your styles of the div. Here's a snippet from a
page that I've used it successfully on. The reason I use an expression is
that I dynamically change the height of "menuContent" based on screen
resolution.
<div id="menuContent" runat="server" style="LEFT: 0px;WIDTH: 180px;
POSITION: absolute; TOP: 10px; HEIGHT: 570px">
html code in here
</div>
<div id="bottomContent" style=" POSITION: absolute; TOP:
expression(menuContent.style.posHeight -
bottomContentHeight.style.posHeight)">
html code in here
</div>
hth
matt
-----Original Message-----
From: John Tyson [mailto:
Click here to reveal e-mail address
]
Sent: Thursday, July 11, 2002 7:23 AM
To: aspngclient
Subject: [aspngclient] Re: Please help! Problems with positioning
I would be happy to share my code...I've tried all of the position
properties to get the footer div to settle below the content div, but
they continue to overlap. It seems to work fine until I add the divs
within the content div. I have the height setting on the content div to
"auto" - I want the content div to size dynamically based on the height
of the column divs within, and then the footer block to always be at the
bottom of the content block. Any help is greatly appreciated.
John
-----Original Message-----
From: Bob Filipiak [mailto:
Click here to reveal e-mail address
]
Sent: Thursday, July 11, 2002 5:06 AM
To: aspngclient
Subject: [aspngclient] Re: Please help! Problems with positioning
Without seeing how your using your styles I'll take a guess and
recommend
looking into all the height=100% setting you have for your various
div's.
"John Tyson" <
Click here to reveal e-mail address
> wrote in message
news:681759@aspngclient...
Hi,
I am trying to develop a css template for the web pages of my web site.
I am running into some real difficulty with my div positioning. If
someone would please take a moment to look at my style sheet I would
greatly appreciate it. I am trying to get my page to display like this:
Header
TopMenu
Content (with a bunch of div's within this element to create columns)
Footer
The problem is that the Content and Footer overlap and both align to the
bottom of the TopMenu; the Footer should align to the bottom of the
Content block.
Thank you for your time,
John
body {
margin: 0px;
padding: 0px;
text-align: center;
font-family: Verdana;
background-color: #ffffff;
}
div.page {
margin: 0px auto;
padding: 0px;
top: 0px;
text-align: center;
height: 100%;
width: 700px;
background-color: #ffffff;
}
div.page div.header {
margin: 0px auto;
padding: 0px;
top: 0px;
height: 87px;
width: 700px;
text-align: left;
background-color: transparent;
}
div.page div.TopMenu {
margin: 0px;
padding-top: 10px;
height: 40px;
width: 700px;
font-size: 8pt;
text-align: center;
background-color: transparent;
border-top: 2px solid #cccccc;
}
div.page div.content {
position: relative;
margin: 0px auto;
padding: 0px;
height: auto;
width: 700px;
text-align: left;
background-color: transparent;
}
div.page div.content div.lftCol {
position: absolute;
margin: 0px;
padding: 0px;
left: 0px;
height: 100%;
width: 170px;
background-color: transparent;
}
div.page div.content div.lftSpacer {
position: absolute;
margin: 0px;
padding: 0px;
left: 170px;
height: 100%;
width: 15px;
background-color: transparent;
}
div.page div.content div.ctrCol {
position: absolute;
margin: 0px;
padding: 0px;
left: 185px;
height: 100%;
width: 320px;
background-color: transparent;
}
div.page div.content div.rgtSpacer {
position: absolute;
margin: 0px;
padding: 0px;
left: 505px;
height: 100%;
width: 15px;
background-color: transparent;
}
div.page div.content div.rgtCol {
position: absolute;
margin: 0px;
padding: 0px;
left: 520px;
height: 100%;
width: 180px;
background-color: transparent;
}
div.page div.footer {
position: relative;
margin: 0px;
padding: 0px;
height: 80px;
width: 700px;
text-align: left;
background-color: transparent;
}
div.page div.footer div.BtmMenu {
margin: 0px;
padding-top: 10px;
padding-bottom: 10px;
height: 40px;
width: 700px;
font-size: 8pt;
text-align: center;
background-color: transparent;
border-bottom: 2px solid #cccccc;
}
div.page div.footer div.BtmTerms {
margin: 0px;
padding-top: 10px;
height: 40px;
width: 700px;
font-size: 8pt;
text-align: center;
background-color: transparent;
}
| [aspngclient] member
Click here to reveal e-mail address
= YOUR ID
|
http://www.aspfriends.com/aspfriends/aspngclient.asp
= JOIN/QUIT
| [aspngclient] member
Click here to reveal e-mail address
= YOUR ID
|
http://www.aspfriends.com/aspfriends/aspngclient.asp
= JOIN/QUIT
Reply to this message...
John Tyson
Hi Bob,
Thanks for your suggestions and your time. I've been working on this
for a couple of days now and reading all kinds of css documents, it's
been getting a little frustrating. If you don't mind, would you please
look at the below simple style sheet - could you suggest a reason why
the body, header and topMenu divs are visible but the main and footer
divs are not? I'm baffled.
Thank you again,
John
body {
margin: 0px;
padding: 0px;
text-align: center;
}
div.body {
height: 100%;
position: relative;
width: 700px;
}
div.header {
height: 87px;
left: 0px;
margin: 0px;
padding: 0px;
position: absolute;
top: 0px;
width: 700px;
}
div.topMenu {
height: 40px;
left: 0px;
margin: 0px;
padding-top: 10px;
position: absolute;
top: 87px;
width: 700px;
}
div.main {
height: auto;
left: 0px;
margin: 0px;
padding: 0px;
position: absolute;
top: 127px;
width: 700px;
}
div.footer {
bottom: 0px;
height: 80px;
left: 0px;
margin: 0px;
padding: 0px;
position: absolute;
width: 700px;
}
-----Original Message-----
From: Bob Filipiak [mailto:
Click here to reveal e-mail address
]=20
Sent: Thursday, July 11, 2002 8:32 AM
To: aspngclient
Subject: [aspngclient] Re: Please help! Problems with positioning
There may be some DHTML techniques you can try for positioning like some
of
the floating menus at dynamicdrive.com. Sorry don't have any url cause I
can't get to dynamicdrive.com. Another thought might be to use an iframe
for
your content.
"John Tyson" <
Click here to reveal e-mail address
> wrote in message
news:682248@aspngclient...
I would be happy to share my code...I've tried all of the position
properties to get the footer div to settle below the content div, but
they continue to overlap. It seems to work fine until I add the divs
within the content div. I have the height setting on the content div to
"auto" - I want the content div to size dynamically based on the height
of the column divs within, and then the footer block to always be at the
bottom of the content block. Any help is greatly appreciated.
John
| [aspngclient] member
Click here to reveal e-mail address
=3D YOUR ID
|
http://www.aspfriends.com/aspfriends/aspngclient.asp
=3D JOIN/QUIT
Reply to this message...
leon jollans
I haven't done css positioning for a while, but your footer div has the =
bottom at 0px.
0px is the at top of the screen.
Can't see a reason from your CSS why the main isn't visible, it must be =
a problem with the HTML - unless I'm missing something. Post your HTML =
for the div, and any surrounding divs
-----Original Message-----
From: John Tyson [mailto:
Click here to reveal e-mail address
]
Sent: 11 July 2002 16:59
To: aspngclient
Subject: [aspngclient] Re: Please help! Problems with positioning
Hi Bob,
Thanks for your suggestions and your time. I've been working on this
for a couple of days now and reading all kinds of css documents, it's
been getting a little frustrating. If you don't mind, would you please
look at the below simple style sheet - could you suggest a reason why
the body, header and topMenu divs are visible but the main and footer
divs are not? I'm baffled.
Thank you again,
John
body {
margin: 0px;
padding: 0px;
text-align: center;
}
div.body {
height: 100%;
position: relative;
width: 700px;
}
div.header {
height: 87px;
left: 0px;
margin: 0px;
padding: 0px;
position: absolute;
top: 0px;
width: 700px;
}
div.topMenu {
height: 40px;
left: 0px;
margin: 0px;
padding-top: 10px;
position: absolute;
top: 87px;
width: 700px;
}
div.main {
height: auto;
left: 0px;
margin: 0px;
padding: 0px;
position: absolute;
top: 127px;
width: 700px;
}
div.footer {
bottom: 0px;
height: 80px;
left: 0px;
margin: 0px;
padding: 0px;
position: absolute;
width: 700px;
}
-----Original Message-----
From: Bob Filipiak [mailto:
Click here to reveal e-mail address
]=20
Sent: Thursday, July 11, 2002 8:32 AM
To: aspngclient
Subject: [aspngclient] Re: Please help! Problems with positioning
There may be some DHTML techniques you can try for positioning like some
of
the floating menus at dynamicdrive.com. Sorry don't have any url cause I
can't get to dynamicdrive.com. Another thought might be to use an iframe
for
your content.
"John Tyson" <
Click here to reveal e-mail address
> wrote in message
news:682248@aspngclient...
I would be happy to share my code...I've tried all of the position
properties to get the footer div to settle below the content div, but
they continue to overlap. It seems to work fine until I add the divs
within the content div. I have the height setting on the content div to
"auto" - I want the content div to size dynamically based on the height
of the column divs within, and then the footer block to always be at the
bottom of the content block. Any help is greatly appreciated.
John
| [aspngclient] member
Click here to reveal e-mail address
=3D YOUR ID
|
http://www.aspfriends.com/aspfriends/aspngclient.asp
=3D JOIN/QUIT
| [aspngclient] member
Click here to reveal e-mail address
=3D YOUR ID
|
http://www.aspfriends.com/aspfriends/aspngclient.asp
=3D JOIN/QUIT
Reply to this message...
John Tyson
Hi,
Thank you for responding. I did try bottom: 0px; and it didn't work. I
believe with absolute positioning the browser only recognizes the top
and left coordinates.
Here is my code - the problem is that both the footer and content divs
line up right under the TopMenu div, thus overlapping. If you could
offer any suggestions I would much appreciate it! John
First the stylesheet (sorry if this is kinda long):
body {
margin: 0px;
padding: 0px;
text-align: center;
font-family: Verdana;
background-color: #ffffff;
}
div.page {
margin: 0px auto;
padding: 0px;
top: 0px;
text-align: center;
height: 100%;
width: 700px;
background-color: #ffffff;
}
div.page div.header {
position: static;
margin: 0px auto;
padding: 0px;
top: 0px;
height: 87px;
width: 700px;
text-align: left;
background-color: transparent;
}
div.page div.TopMenu {
position: static;
margin: 0px;
padding-top: 10px;
height: 40px;
width: 700px;
font-size: 8pt;
text-align: center;
background-color: transparent;
border-top: 2px solid #cccccc;
}
div.page div.TopMenu span.open {font-weight: bold; text-decoration:
none; color: #000000;}
div.page div.TopMenu a:hover {color: #cc0000; text-decoration: none;}
div.page div.TopMenu a:link {color: #000000; text-decoration:
underline;}
div.page div.TopMenu a:active {color: #000000; text-decoration:
underline;}
div.page div.TopMenu a:visited {color: #000000; text-decoration:
underline;}
div.page div.content {
position: relative;
margin: 0px auto;
padding: 0px;
height: auto;
width: 700px;
text-align: left;
background-color: transparent;
}
div.page div.content div.lftCol {
position: absolute;
margin: 0px;
padding: 0px;
left: 0px;
height: 100%;
width: 170px;
background-color: transparent;
}
div.page div.content div.lftCol div.SwshMenu {
position: absolute;
margin: 0px;
padding-top: 32px;
padding-left: 43px;
top: 0px;
height: 200px;
width: 170px;
background-image: url('graphics/swooshBack.gif');
background-position: top left;
background-repeat: no-repeat;
text-align: left;
font-size: 8pt;
line-height: 14pt;
}
div.page div.content div.lftCol div.SwshMenu span.open {font-weight:
bold; text-decoration: none; color: #000000;}
div.page div.content div.lftCol div.SwshMenu a:hover {color: #cc0000;
text-decoration: none; font-weight: bold;}
div.page div.content div.lftCol div.SwshMenu a:link {color: #000000;
text-decoration: underline;}
div.page div.content div.lftCol div.SwshMenu a:active {color: #000000;
text-decoration: underline;}
div.page div.content div.lftCol div.SwshMenu a:visited {color: #000000;
text-decoration: underline;}
div.page div.content div.lftCol div.lftLinks {
position: absolute;
margin: 0px;
padding-left: 43px;
top: 200px;
height: 222px;
width: 170px;
background-color: transparent;
text-align: left;
}
div.page div.content div.lftSpacer {
position: absolute;
margin: 0px;
padding: 0px;
left: 170px;
height: 100%;
width: 15px;
background-color: transparent;
}
div.page div.content div.ctrCol {
position: absolute;
margin: 0px;
padding: 0px;
left: 185px;
height: 100%;
width: 320px;
background-color: transparent;
}
div.page div.content div.ctrCol div.title {
position: absolute;
margin: 0px;
padding: 0px;
top: 10px;
height: 35px;
width: 320px;
font-size: 12pt;
font-weight: bold;
background-color: transparent;
}
div.page div.content div.ctrCol div.subject {
position: absolute;
margin: 0px;
padding: 0px;
top: 45px;
height: 100%;
width: 320px;
font-size: 8pt;
background-color: transparent;
}
div.page div.content div.ctrCol div.subject span.bold {font-weight:
bold;}
div.page div.content div.ctrCol div.subject span.italic {font-style:
italic;}
div.page div.content div.ctrCol div.subject a:hover {color: #0000ff;
text-decoration: underline;}
div.page div.content div.ctrCol div.subject a:link {color: #0000ff;
text-decoration: underline;}
div.page div.content div.ctrCol div.subject a:active {color: #0000ff;
text-decoration: underline;}
div.page div.content div.ctrCol div.subject a:visited {color: #0000ff;
text-decoration: underline;}
div.page div.content div.rgtSpacer {
position: absolute;
margin: 0px;
padding: 0px;
left: 505px;
height: 100%;
width: 15px;
background-color: transparent;
}
div.page div.content div.rgtCol {
position: absolute;
margin: 0px;
padding: 0px;
left: 520px;
height: 100%;
width: 180px;
background-color: transparent;
}
div.page div.content div.rgtCol div.rgtTopDisp {
position: absolute;
margin: 0px;
padding: 0px;
top: 0px;
height: 59px;
width: 180px;
background-color: transparent;
}
div.page div.content div.rgtCol div.rgtMidDisp {
position: absolute;
margin: 0px;
padding: 0px;
top: 59px;
height: 220px;
width: 180px;
background-color: transparent;=09
}
div.page div.content div.rgtCol div.rgtBtmDisp {
position: absolute;
margin: 0px;
padding: 0px;
top: 279px;
height: 130px;
width: 180px;
background-color: transparent;
}
div.page div.footer {
position: static;
margin: 0px;
padding: 0px;
height: 80px;
width: 700px;
text-align: left;
background-color: transparent;=09
}
div.page div.footer div.BtmMenu {
position: static;
margin: 0px;
padding-top: 10px;
padding-bottom: 10px;
height: 40px;
width: 700px;
font-size: 8pt;
text-align: center;
background-color: transparent;
border-bottom: 2px solid #cccccc;
}
div.page div.footer div.BtmMenu a:hover {color: #cc0000;
text-decoration: none;}
div.page div.footer div.BtmMenu a:link {color: #000000; text-decoration:
underline;}
div.page div.footer div.BtmMenu a:active {color: #000000;
text-decoration: underline;}
div.page div.footer div.BtmMenu a:visited {color: #000000;
text-decoration: underline;}
div.page div.footer div.BtmTerms {
position: static;
margin: 0px;
padding-top: 10px;
height: 40px;
width: 700px;
font-size: 8pt;
text-align: center;
background-color: transparent;
}
div.page div.footer div.BtmTerms span.redItal {color: #cc0000;
font-style: italic;}
div.page div.footer div.BtmTerms a:hover {color: #cc0000;
text-decoration: none;}
div.page div.footer div.BtmTerms a:link {color: #000000;
text-decoration: underline;}
div.page div.footer div.BtmTerms a:active {color: #000000;
text-decoration: underline;}
div.page div.footer div.BtmTerms a:visited {color: #000000;
text-decoration: underline;}
************************************************************************
****
and here is my aspx page:
<%@ Page Language=3D"VB" %>
<html>
<head>
<title>Physical Therapy - Therapeutic Associates, Inc.: About Us/Our
Expertise</title>
<link rel=3D"stylesheet" type=3D"text/css" href=3D"PageLayout.css" />
</head>
<script language=3D"VB" runat=3D"server">
Sub ImgTopLogo_Click(sender As Object, e As ImageClickEventArgs)
Dim x As Integer =3D e.X
Dim y As Integer =3D e.Y
If x >=3D 320 And y >=3D 56 Then
Response.Redirect("OurFocus.aspx")
End If
End Sub
Sub ImgBtnExperts_Click(s As Object, e As ImageClickEventArgs)
Response.Redirect("OurExperts.aspx")
End Sub
Sub ImgBtnNews_Click(s As Object, e As ImageClickEventArgs)
Response.Redirect("Newsroom.aspx")
End Sub
Sub ImgBtnTAOS_Click(s As Object, e As ImageClickEventArgs)
Response.Redirect("TAOS_Login.aspx")
End Sub
</script>
<body>
<div class=3D"page">
<form runat=3D"server">
<div class=3D"header">
<asp:ImageButton id=3D"ImgTopLogo" =
ImageUrl=3D"graphics/topLogo.gif"
OnClick=3D"ImgTopLogo_Click"
OnMouseOver=3D"this.src=3D'graphics/topLogo_hot.gif';"
OnMouseOut=3D"this.src=3D'graphics/topLogo.gif';" runat=3D"server" />
</div>
<div class=3D"TopMenu">|
<asp:Hyperlink id=3D"LnkAbout" navigateUrl=3D"AboutUs.aspx"
runat=3D"server"><span class=3D"open">About
Us</span></asp:Hyperlink> |
<asp:Hyperlink id=3D"LnkHlthCare" navigateUrl=3D"Healthcare.aspx"
text=3D"The Business Of Healthcare" runat=3D"server"
/> |
<asp:Hyperlink id=3D"LnkLocs" navigateUrl=3D"Locations.aspx" =
text=3D"Our
Locations" runat=3D"server" /> |
<asp:Hyperlink id=3D"LnkPatSvcs" navigateUrl=3D"PatientSvcs.aspx"
text=3D"Patient Services" runat=3D"server" /> |
<asp:Hyperlink id=3D"LnkPTtools" navigateUrl=3D"PT_Tools.aspx"
text=3D"Tools For Physical Therapists" runat=3D"server" /> |
</div>
<div class=3D"content">
<div class=3D"lftCol">
<div class=3D"SwshMenu">
<asp:Hyperlink id=3D"LnkVision" =
navigateUrl=3D"OurVision.aspx"
text=3D"Our Vision" runat=3D"server" />
<br/>
<asp:Hyperlink id=3D"LnkHistory" =
navigateUrl=3D"OurHistory.aspx"
text=3D"Our History" runat=3D"server" />
<br/>
<asp:Hyperlink id=3D"LnkExpertise"
navigateUrl=3D"Expertise.aspx" runat=3D"server"><span class=3D"open">Our
Expertise</span></asp:Hyperlink>
<br/>
<asp:Hyperlink id=3D"LnkPatCare"
navigateUrl=3D"PatientCare.aspx" text=3D"Patient Care" runat=3D"server" =
/>
<br/>
<asp:Hyperlink id=3D"LnkPeople" =
navigateUrl=3D"OurPeople.aspx"
text=3D"Our People" runat=3D"server" />
<br/>
<asp:Hyperlink id=3D"LnkPartners"
navigateUrl=3D"Partnerships.aspx" text=3D"Partnerships" runat=3D"server" =
/>
<br/>
<asp:Hyperlink id=3D"LnkNewsRoom" =
navigateUrl=3D"NewsRoom.aspx"
text=3D"Newsroom" runat=3D"server" />
</div>
<div class=3D"lftLinks">
<asp:ImageButton id=3D"ImgBtnExperts"
imageUrl=3D"graphics/experts.gif" OnClick=3D"ImgBtnExperts_Click"
OnMouseOver=3D"this.src=3D'graphics/experts_hot.gif';"
OnMouseOut=3D"this.src=3D'graphics/experts.gif';" runat=3D"server" />
<br/> <br/>
<asp:ImageButton id=3D"ImgBtnNews"
imageUrl=3D"graphics/news.gif" OnClick=3D"ImgBtnNews_Click"
OnMouseOver=3D"this.src=3D'graphics/news_hot.gif';"
OnMouseOut=3D"this.src=3D'graphics/news.gif';" runat=3D"server" />
<br/> <br/>
<asp:ImageButton id=3D"ImgBtnTAOS"
imageUrl=3D"graphics/taos.gif" OnClick=3D"ImgBtnTAOS_Click"
OnMouseOver=3D"this.src=3D'graphics/taos_hot.gif';"
OnMouseOut=3D"this.src=3D'graphics/taos.gif';" runat=3D"server" />
</div>
</div>
<div class=3D"lftSpacer">
</div>
<div class=3D"ctrCol">
<div class=3D"title">We Understand The Rehab Business</div>
<div class=3D"subject">
<p><span class=3D"bold">A Wealth Of
Knowledge</span><br/>Strategically located throughout the Western United
States, Therapeutic Associates facilities offer an interdisciplinary
staff of physical therapists and skilled assistants and aides. The
diversity of our clinicians' training and expertise gives each of our
individual providers access to a wealth of knowledge. The result
is the highest quality of service for all of our clients, meeting the
highest professional expectations and ethics of the <asp:Hyperlink
id=3D"LnkAPTA" navigateUrl=3D"
http://www.apta.org/"
; text=3D"American =
Physical
Therapy Association" target=3D"_blank" runat=3D"server" />.</p>
<p><span class=3D"bold">Comprehensive Systems</span><br/>We
are capable of contracting to deliver services to medical providers and
third-party payers. Physicians, insurers and businesses have all
come to rely on Therapeutic Associates to provide effective and economic
physical therapy and rehabilitative care to their patients and
employees. Our comprehensive systems for communication, data
collection, outcomes and practice management are all geared toward
increasing the value of our services to our customers.</p>
<p><span class=3D"bold">We Understand The
Business</span><br/>We understand the business of healthcare.
Nationally, our professional colleagues look to Therapeutic
Associates as a leading provider of innovative management tools and
services. Regionally, as charter members, we are the Management
Service Organization (MSO) of <asp:Hyperlink id=3D"LnkNWRA"
navigateUrl=3D"
http://www.nwrehab.com/"
; text=3D"Northwest Rehab =
Alliance"
target=3D"_blank" runat=3D"server" /> - a provider network that consists =
of
over 175 affiliated clinics in the states of Oregon and Washington.</p>
</div>
</div>
<div class=3D"rgtSpacer">
</div>
<div class=3D"rgtCol">
<div class=3D"rgtTopDisp">
<asp:Image id=3D"ImgTopBanner" =
ImageUrl=3D"graphics/50years.gif"
runat=3D"server" />
</div>
<div class=3D"rgtMidDisp">
<asp:Image id=3D"ImgPagePic"
ImageUrl=3D"graphics/OurExpertise_blinds.jpg" runat=3D"server" />
</div>
<div class=3D"rgtBtmDisp">
<asp:Image id=3D"ImgBtmBanner"
ImageUrl=3D"graphics/since1952.gif" runat=3D"server" />
</div>
</div>
</div>
<div class=3D"footer">
<div class=3D"BtmMenu">|
<asp:Hyperlink id=3D"LnkHome" navigateUrl=3D"Default.aspx"
text=3D"Home" runat=3D"server" /> |
<asp:Hyperlink id=3D"LnkSiteMap" navigateUrl=3D"SiteMap.aspx"
text=3D"Site Map" runat=3D"server" /> |
<asp:Hyperlink id=3D"LnkCareerOpp" =
navigateUrl=3D"CareerOpp.aspx"
text=3D"Career Opportunities" runat=3D"server" =
/> |
<asp:Hyperlink id=3D"LnkBusOpp" =
navigateUrl=3D"BusinessOpp.aspx"
text=3D"Business Opportunities" runat=3D"server" =
/> |
<asp:Hyperlink id=3D"LnkContact" navigateUrl=3D"ContactUs.aspx"
text=3D"Contact Us" runat=3D"server" /> |
<asp:Hyperlink id=3D"LnkLinks" navigateUrl=3D"Links.aspx"
text=3D"Links" runat=3D"server" /> |
</div>
<div class=3D"BtmTerms">|
<asp:Hyperlink id=3D"LnkPrivacy" =
navigateUrl=3D"PrivacyPol.aspx"
text=3D"Privacy Policy" runat=3D"server" /> |
<asp:Hyperlink id=3D"LnkTerms" navigateUrl=3D"Terms.aspx"
text=3D"Terms & Conditions" runat=3D"server" /> |
<span class=3D"redItal">Copyright © 2002 Therapeutic
Associates, Inc.</span>
</div>
</div>
</form>
</div>
</body>
</html>
-----Original Message-----
From: leon jollans [mailto:
Click here to reveal e-mail address
]=20
Sent: Thursday, July 11, 2002 9:33 AM
To: aspngclient
Subject: [aspngclient] Re: Please help! Problems with positioning
I haven't done css positioning for a while, but your footer div has the
bottom at 0px.
0px is the at top of the screen.
Can't see a reason from your CSS why the main isn't visible, it must be
a problem with the HTML - unless I'm missing something. Post your HTML
for the div, and any surrounding divs
-----Original Message-----
From: John Tyson [mailto:
Click here to reveal e-mail address
]
Sent: 11 July 2002 16:59
To: aspngclient
Subject: [aspngclient] Re: Please help! Problems with positioning
Hi Bob,
Thanks for your suggestions and your time. I've been working on this
for a couple of days now and reading all kinds of css documents, it's
been getting a little frustrating. If you don't mind, would you please
look at the below simple style sheet - could you suggest a reason why
the body, header and topMenu divs are visible but the main and footer
divs are not? I'm baffled.
Thank you again,
John
body {
margin: 0px;
padding: 0px;
text-align: center;
}
div.body {
height: 100%;
position: relative;
width: 700px;
}
div.header {
height: 87px;
left: 0px;
margin: 0px;
padding: 0px;
position: absolute;
top: 0px;
width: 700px;
}
div.topMenu {
height: 40px;
left: 0px;
margin: 0px;
padding-top: 10px;
position: absolute;
top: 87px;
width: 700px;
}
div.main {
height: auto;
left: 0px;
margin: 0px;
padding: 0px;
position: absolute;
top: 127px;
width: 700px;
}
div.footer {
bottom: 0px;
height: 80px;
left: 0px;
margin: 0px;
padding: 0px;
position: absolute;
width: 700px;
}
-----Original Message-----
From: Bob Filipiak [mailto:
Click here to reveal e-mail address
]=20
Sent: Thursday, July 11, 2002 8:32 AM
To: aspngclient
Subject: [aspngclient] Re: Please help! Problems with positioning
There may be some DHTML techniques you can try for positioning like some
of
the floating menus at dynamicdrive.com. Sorry don't have any url cause I
can't get to dynamicdrive.com. Another thought might be to use an iframe
for
your content.
"John Tyson" <
Click here to reveal e-mail address
> wrote in message
news:682248@aspngclient...
I would be happy to share my code...I've tried all of the position
properties to get the footer div to settle below the content div, but
they continue to overlap. It seems to work fine until I add the divs
within the content div. I have the height setting on the content div to
"auto" - I want the content div to size dynamically based on the height
of the column divs within, and then the footer block to always be at the
bottom of the content block. Any help is greatly appreciated.
John
| [aspngclient] member
Click here to reveal e-mail address
=3D YOUR ID
|
http://www.aspfriends.com/aspfriends/aspngclient.asp
=3D JOIN/QUIT
| [aspngclient] member
Click here to reveal e-mail address
=3D YOUR ID
|
http://www.aspfriends.com/aspfriends/aspngclient.asp
=3D JOIN/QUIT
| [aspngclient] member
Click here to reveal e-mail address
=3D YOUR ID
|
http://www.aspfriends.com/aspfriends/aspngclient.asp
=3D JOIN/QUIT
Reply to this message...
John Tyson
Hi Matt,
That is a great idea and something I'd thought about, but did not know
how to do.
I did try to implement this based on the code snippet you forwarded and
it didn't work. Would you mind if I forwarded you my code so that you
might take a quick gander at it?
Thanks again,
John
-----Original Message-----
From: Matt Serdar [mailto:
Click here to reveal e-mail address
]=20
Sent: Thursday, July 11, 2002 8:06 AM
To: aspngclient
Subject: [aspngclient] Re: Please help! Problems with positioning
You can use expressions in your styles of the div. Here's a snippet
from a
page that I've used it successfully on. The reason I use an expression
is
that I dynamically change the height of "menuContent" based on screen
resolution.
<div id=3D"menuContent" runat=3D"server" style=3D"LEFT: 0px;WIDTH: =
180px;
POSITION: absolute; TOP: 10px; HEIGHT: 570px">
html code in here
</div>
<div id=3D"bottomContent" style=3D" POSITION: absolute; TOP:
expression(menuContent.style.posHeight -
bottomContentHeight.style.posHeight)">
html code in here
</div>
hth
matt
-----Original Message-----
From: John Tyson [mailto:
Click here to reveal e-mail address
]
Sent: Thursday, July 11, 2002 7:23 AM
To: aspngclient
Subject: [aspngclient] Re: Please help! Problems with positioning
I would be happy to share my code...I've tried all of the position
properties to get the footer div to settle below the content div, but
they continue to overlap. It seems to work fine until I add the divs
within the content div. I have the height setting on the content div to
"auto" - I want the content div to size dynamically based on the height
of the column divs within, and then the footer block to always be at the
bottom of the content block. Any help is greatly appreciated.
John
-----Original Message-----
From: Bob Filipiak [mailto:
Click here to reveal e-mail address
]=20
Sent: Thursday, July 11, 2002 5:06 AM
To: aspngclient
Subject: [aspngclient] Re: Please help! Problems with positioning
Without seeing how your using your styles I'll take a guess and
recommend
looking into all the height=3D100% setting you have for your various
div's.
"John Tyson" <
Click here to reveal e-mail address
> wrote in message
news:681759@aspngclient...
Hi,
I am trying to develop a css template for the web pages of my web site.
I am running into some real difficulty with my div positioning. If
someone would please take a moment to look at my style sheet I would
greatly appreciate it. I am trying to get my page to display like this:
Header
TopMenu
Content (with a bunch of div's within this element to create columns)
Footer
The problem is that the Content and Footer overlap and both align to the
bottom of the TopMenu; the Footer should align to the bottom of the
Content block.
Thank you for your time,
John
body {
margin: 0px;
padding: 0px;
text-align: center;
font-family: Verdana;
background-color: #ffffff;
}
div.page {
margin: 0px auto;
padding: 0px;
top: 0px;
text-align: center;
height: 100%;
width: 700px;
background-color: #ffffff;
}
div.page div.header {
margin: 0px auto;
padding: 0px;
top: 0px;
height: 87px;
width: 700px;
text-align: left;
background-color: transparent;
}
div.page div.TopMenu {
margin: 0px;
padding-top: 10px;
height: 40px;
width: 700px;
font-size: 8pt;
text-align: center;
background-color: transparent;
border-top: 2px solid #cccccc;
}
div.page div.content {
position: relative;
margin: 0px auto;
padding: 0px;
height: auto;
width: 700px;
text-align: left;
background-color: transparent;
}
div.page div.content div.lftCol {
position: absolute;
margin: 0px;
padding: 0px;
left: 0px;
height: 100%;
width: 170px;
background-color: transparent;
}
div.page div.content div.lftSpacer {
position: absolute;
margin: 0px;
padding: 0px;
left: 170px;
height: 100%;
width: 15px;
background-color: transparent;
}
div.page div.content div.ctrCol {
position: absolute;
margin: 0px;
padding: 0px;
left: 185px;
height: 100%;
width: 320px;
background-color: transparent;
}
div.page div.content div.rgtSpacer {
position: absolute;
margin: 0px;
padding: 0px;
left: 505px;
height: 100%;
width: 15px;
background-color: transparent;
}
div.page div.content div.rgtCol {
position: absolute;
margin: 0px;
padding: 0px;
left: 520px;
height: 100%;
width: 180px;
background-color: transparent;
}
div.page div.footer {
position: relative;
margin: 0px;
padding: 0px;
height: 80px;
width: 700px;
text-align: left;
background-color: transparent;
}
div.page div.footer div.BtmMenu {
margin: 0px;
padding-top: 10px;
padding-bottom: 10px;
height: 40px;
width: 700px;
font-size: 8pt;
text-align: center;
background-color: transparent;
border-bottom: 2px solid #cccccc;
}
div.page div.footer div.BtmTerms {
margin: 0px;
padding-top: 10px;
height: 40px;
width: 700px;
font-size: 8pt;
text-align: center;
background-color: transparent;
}
| [aspngclient] member
Click here to reveal e-mail address
=3D YOUR ID
|
http://www.aspfriends.com/aspfriends/aspngclient.asp
=3D JOIN/QUIT
| [aspngclient] member
Click here to reveal e-mail address
=3D YOUR ID
|
http://www.aspfriends.com/aspfriends/aspngclient.asp
=3D JOIN/QUIT
| [aspngclient] member
Click here to reveal e-mail address
=3D YOUR ID
|
http://www.aspfriends.com/aspfriends/aspngclient.asp
=3D JOIN/QUIT
Reply to this message...
System.Web.UI.ImageClickEventArgs
System.Web.UI.WebControls.ImageButton
Ad
MBR BootFX
Best-of-breed application framework for .NET projects, developed by Matthew Baxter-Reynolds and MBR IT
Copyright © Matthew Baxter-Reynolds 2001-2008. '.NET 247 Software Development Services' is a trading style of MBR IT Solutions Ltd.
Contact Us
-
Terms of Use
-
Privacy Policy
-
www.dotnet247.com
