Ask a Question related to Macromedia Dynamic HTML, Design and Development.
-
Neeil #1
Inherting height in CSS layers
I'm trying to create a menu layer (called 'child') next to a text layer (called
'parent') and I want both layers to have the same height regardless of how much
text there is. The child layer only seems to inherit the original height of the
parent (400px). Here's the code, appreciate any help ....
<!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" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#parent {
position:absolute;
width:500px;
height:400px;
z-index:1;
left: 168px;
top: 50px;
background-color: #A8C5FF;
}
#child {
position:absolute;
width:200px;
height:100%;
z-index:2;
left: 502px;
top: 0in;
background-color: #FC8885;
}
-->
</style>
<script type="text/javascript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if
((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight;
onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH)
location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>
<body>
<div id="parent">
<div id="child"></div>
<p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps
over the lazy dog. The quick brown fox jumps over the lazy dog. The quick
brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy
dog.¶</p>
<p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps
over the lazy dog. The quick brown fox jumps over the lazy dog. The quick
brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy
dog.¶</p>
<p>The quick brown fox jumps over the lazy dog. The quickbrown fox jumps
over the lazy dog. The quick brown fox jumps over the lazy dog. The quick
brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy
dog.¶</p>
<p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps
over the lazy dog. The quick brown fox jumps over the lazy dog. The quick
brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy
dog.¶</p>
<p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps
over the lazy dog. The quick brown fox jumps over the lazy dog. The quick
brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy
dog.¶</p>
<p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps
over the lazy dog. The quick brown fox jumps over the lazy dog. The quick
brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy
dog.¶</p>
<p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps
over the lazy dog. The quick brown fox jumps over the lazy dog. The quick
brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy
dog.¶</p>
<p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps
over the lazy dog. The quick brown fox jumps over the lazy dog. The quick
brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy
dog.¶</p>
</div>
</body>
</html>
Neeil Guest
-
Pbm with Height
Hi Buddies, I have a strange pbm here. I have one Application with a height of 5000 px(its needed). Inside i have one Panel with a height of 4000... -
Fill layers vs Pixel layers
What is the difference between a fill layer and a pixel layer that contains a flat color? (Beside the capacity to paint different colors into the... -
FreeHand Layers to Acrobat Layers
Hi, I have noticed that in Acrobat 6 that you can have layered documents and I 'm wanting to know if there is a way to create a layered PDF from a... -
height of swf
can I dynamic adjust height of swf in browser I do not want to scale swf, I would like to increase hight of "work area" (main stage) fg I have... -
inherting ownership
Clients computer has failing hdd. Slaved to another box and the data is accessible. "c:\documentsandsettings\users name" is access denied. How do I... -
Murray *TMM* #2 Re: Inherting height in CSS layers
> I'm trying to create a menu layer (called 'child') next to a text layer
The only way to do that would be to have the div (I hope not layer) called> (called
> 'parent') and I want both layers to have the same height regardless of how
> much
> text there is.
"child" contained *and* floated within the div (I hope not layer) called
"parent", and then to clear the float before closing "parent". This way,
parent will always be as tall as child, no matter how much content is in
parent. If you want it the other way around, where child is always as tall
as parent no matter how much content is in child, then you would have to
reverse the container and the contained arrangement.
Using absolute positioning the way you have will not only get you into
trouble, but will also make this kind of thing impossible.
--
Murray --- ICQ 71997575
Team Macromedia Volunteer for Dreamweaver
(If you *MUST* email me, don't LAUGH when you do so!)
==================
[url]http://www.dreamweavermx-templates.com[/url] - Template Triage!
[url]http://www.projectseven.com/go[/url] - DW FAQs, Tutorials & Resources
[url]http://www.dwfaq.com[/url] - DW FAQs, Tutorials & Resources
[url]http://www.macromedia.com/support/search/[/url] - Macromedia (MM) Technotes
==================
"Neeil" <webforumsuser@macromedia.com> wrote in message
news:doeg04$rjb$1@forums.macromedia.com...> I'm trying to create a menu layer (called 'child') next to a text layer
> (called
> 'parent') and I want both layers to have the same height regardless of how
> much
> text there is. The child layer only seems to inherit the original height
> of the
> parent (400px). Here's the code, appreciate any help ....
>
>
>
> <!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" />
> <title>Untitled Document</title>
> <style type="text/css">
> <!--
> #parent {
> position:absolute;
> width:500px;
> height:400px;
> z-index:1;
> left: 168px;
> top: 50px;
> background-color: #A8C5FF;
> }
> #child {
> position:absolute;
> width:200px;
> height:100%;
> z-index:2;
> left: 502px;
> top: 0in;
> background-color: #FC8885;
> }
> -->
> </style>
> <script type="text/javascript">
> <!--
> function MM_reloadPage(init) { //reloads the window if Nav4 resized
> if (init==true) with (navigator) {if
> ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
> document.MM_pgW=innerWidth; document.MM_pgH=innerHeight;
> onresize=MM_reloadPage; }}
> else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH)
> location.reload();
> }
> MM_reloadPage(true);
> //-->
> </script>
> </head>
>
> <body>
> <div id="parent">
> <div id="child"></div>
> <p>The quick brown fox jumps over the lazy dog. The quick brown fox
> jumps
> over the lazy dog. The quick brown fox jumps over the lazy dog. The
> quick
> brown fox jumps over the lazy dog. The quick brown fox jumps over the
> lazy
> dog.¶</p>
> <p>The quick brown fox jumps over the lazy dog. The quick brown fox
> jumps
> over the lazy dog. The quick brown fox jumps over the lazy dog. The
> quick
> brown fox jumps over the lazy dog. The quick brown fox jumps over the
> lazy
> dog.¶</p>
> <p>The quick brown fox jumps over the lazy dog. The quickbrown fox jumps
> over the lazy dog. The quick brown fox jumps over the lazy dog. The
> quick
> brown fox jumps over the lazy dog. The quick brown fox jumps over the
> lazy
> dog.¶</p>
>
> <p>The quick brown fox jumps over the lazy dog. The quick brown fox
> jumps
> over the lazy dog. The quick brown fox jumps over the lazy dog. The
> quick
> brown fox jumps over the lazy dog. The quick brown fox jumps over the
> lazy
> dog.¶</p>
> <p>The quick brown fox jumps over the lazy dog. The quick brown fox
> jumps
> over the lazy dog. The quick brown fox jumps over the lazy dog. The
> quick
> brown fox jumps over the lazy dog. The quick brown fox jumps over the
> lazy
> dog.¶</p>
> <p>The quick brown fox jumps over the lazy dog. The quick brown fox
> jumps
> over the lazy dog. The quick brown fox jumps over the lazy dog. The
> quick
> brown fox jumps over the lazy dog. The quick brown fox jumps over the
> lazy
> dog.¶</p>
> <p>The quick brown fox jumps over the lazy dog. The quick brown fox
> jumps
> over the lazy dog. The quick brown fox jumps over the lazy dog. The
> quick
> brown fox jumps over the lazy dog. The quick brown fox jumps over the
> lazy
> dog.¶</p>
> <p>The quick brown fox jumps over the lazy dog. The quick brown fox
> jumps
> over the lazy dog. The quick brown fox jumps over the lazy dog. The
> quick
> brown fox jumps over the lazy dog. The quick brown fox jumps over the
> lazy
> dog.¶</p>
> </div>
> </body>
> </html>
>
Murray *TMM* Guest
-
Neeil #3 Re: Inherting height in CSS layers
Thank you! That works well and entirely logical now I think about it! Here's
the code for anyone equally confused...
<!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" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#parent {
position:absolute;
width:500px;
height:200px;
z-index:1;
left: 260px;
top: 31px;
background-color: #A8C5FF;
}
#child {
position:inherit;
width:300px;
height:100%;
z-index:2;
left: 1px;
top: 0px;
background-color: #FC8885;
}
#child2 {
position:absolute;
width:182px;
height:115px;
z-index:2;
left: 318px;
top: 207px;
}
-->
</style>
<script type="text/javascript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if
((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight;
onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH)
location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>
<body>
<div id="parent">
<div id="child2">
<p>Floating menu text </p>
</div>
<div id="child">
<p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps
over the lazy dog. The quick brown fox jumps over the lazy dog. The quick
brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy
dog.¶</p>
<p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps
over the lazy dog. The quick brown fox jumps over the lazy dog. The quick
brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy
dog.¶</p>
<p>The quick brown fox jumps over the lazy dog. The quickbrown fox jumps
over the lazy dog. The quick brown fox jumps over the lazy dog. The quick
brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy
dog.¶</p>
<p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps
over the lazy dog. The quick brown fox jumps over the lazy dog. The quick
brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy
dog.¶</p>
<p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps
over the lazy dog. The quick brown fox jumps over the lazy dog. The quick
brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy
dog.¶</p>
<p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps
over the lazy dog. The quick brown fox jumps over the lazy dog. The quick
brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy
dog.¶</p>
<p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps
over the lazy dog. The quick brown fox jumps over the lazy dog. The quick
brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy
dog.¶</p>
<p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps
over the lazy dog. The quick brown fox jumps over the lazy dog. The quick
brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy</p>
</div>
</div>
</body>
</html>
Neeil Guest
-
Murray *TMM* #4 Re: Inherting height in CSS layers
position:inherit? I don't think so. That has nothign to do with what I
recommended.
--
Murray --- ICQ 71997575
Team Macromedia Volunteer for Dreamweaver
(If you *MUST* email me, don't LAUGH when you do so!)
==================
[url]http://www.dreamweavermx-templates.com[/url] - Template Triage!
[url]http://www.projectseven.com/go[/url] - DW FAQs, Tutorials & Resources
[url]http://www.dwfaq.com[/url] - DW FAQs, Tutorials & Resources
[url]http://www.macromedia.com/support/search/[/url] - Macromedia (MM) Technotes
==================
"Neeil" <webforumsuser@macromedia.com> wrote in message
news:doeki6$530$1@forums.macromedia.com...> Thank you! That works well and entirely logical now I think about it!
> Here's
> the code for anyone equally confused...
>
>
>
> <!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" />
> <title>Untitled Document</title>
> <style type="text/css">
> <!--
> #parent {
> position:absolute;
> width:500px;
> height:200px;
> z-index:1;
> left: 260px;
> top: 31px;
> background-color: #A8C5FF;
> }
> #child {
> position:inherit;
> width:300px;
> height:100%;
> z-index:2;
> left: 1px;
> top: 0px;
> background-color: #FC8885;
> }
> #child2 {
> position:absolute;
> width:182px;
> height:115px;
> z-index:2;
> left: 318px;
> top: 207px;
> }
> -->
> </style>
> <script type="text/javascript">
> <!--
> function MM_reloadPage(init) { //reloads the window if Nav4 resized
> if (init==true) with (navigator) {if
> ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
> document.MM_pgW=innerWidth; document.MM_pgH=innerHeight;
> onresize=MM_reloadPage; }}
> else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH)
> location.reload();
> }
> MM_reloadPage(true);
> //-->
> </script>
> </head>
>
> <body>
> <div id="parent">
> <div id="child2">
> <p>Floating menu text </p>
> </div>
> <div id="child">
> <p>The quick brown fox jumps over the lazy dog. The quick brown fox
> jumps
> over the lazy dog. The quick brown fox jumps over the lazy dog. The
> quick
> brown fox jumps over the lazy dog. The quick brown fox jumps over the
> lazy
> dog.¶</p>
> <p>The quick brown fox jumps over the lazy dog. The quick brown fox
> jumps
> over the lazy dog. The quick brown fox jumps over the lazy dog. The
> quick
> brown fox jumps over the lazy dog. The quick brown fox jumps over the
> lazy
> dog.¶</p>
> <p>The quick brown fox jumps over the lazy dog. The quickbrown fox
> jumps
> over the lazy dog. The quick brown fox jumps over the lazy dog. The
> quick
> brown fox jumps over the lazy dog. The quick brown fox jumps over the
> lazy
> dog.¶</p>
> <p>The quick brown fox jumps over the lazy dog. The quick brown fox
> jumps
> over the lazy dog. The quick brown fox jumps over the lazy dog. The
> quick
> brown fox jumps over the lazy dog. The quick brown fox jumps over the
> lazy
> dog.¶</p>
> <p>The quick brown fox jumps over the lazy dog. The quick brown fox
> jumps
> over the lazy dog. The quick brown fox jumps over the lazy dog. The
> quick
> brown fox jumps over the lazy dog. The quick brown fox jumps over the
> lazy
> dog.¶</p>
> <p>The quick brown fox jumps over the lazy dog. The quick brown fox
> jumps
> over the lazy dog. The quick brown fox jumps over the lazy dog. The
> quick
> brown fox jumps over the lazy dog. The quick brown fox jumps over the
> lazy
> dog.¶</p>
> <p>The quick brown fox jumps over the lazy dog. The quick brown fox
> jumps
> over the lazy dog. The quick brown fox jumps over the lazy dog. The
> quick
> brown fox jumps over the lazy dog. The quick brown fox jumps over the
> lazy
> dog.¶</p>
> <p>The quick brown fox jumps over the lazy dog. The quick brown fox
> jumps
> over the lazy dog. The quick brown fox jumps over the lazy dog. The
> quick
> brown fox jumps over the lazy dog. The quick brown fox jumps over the
> lazy</p>
> </div>
> </div>
> </body>
> </html>
>
Murray *TMM* Guest
Reply With QuoteSimilar Questions and Discussions
Posting Permissions
- You may not post new threads
- You may post replies
- You may not post attachments
- You may not edit your posts
