Ask a Question related to Macromedia Dynamic HTML, Design and Development.
-
JillTW #1
Nested CSS boxes
Trying to get the hang of this CSS positioning thing... :confused;
Need to have a large centered box (main div) with several (2 to 4) small boxes
within it. Essentially, the only text in the first box (main div) is a H2.
I want the "big" box to have a height that will adjust to the content of the
smaller boxes within it. The small boxes will have several to many lines of
text or table data. The content will be php-extracted from a mysql database, so
it will vary in nbr of rows returned.
Using DW MX 2004. I have the "main1" div, then used the DW "Draw Layer" for a
couple of the boxes. You'll see the in-line CSS that was created with that...
once I figure everything out I'll move all CSS to the external sheet. Right now
it's either in the page head or in-line with the divs.
My problem is: the main div (Manage Content) is not adjusting in height to be
a background for the divs within it. I read several suggestions about setting
the properties of html and body to 100% height (that's why it's in the CSS in
the head). I thought that if I postioned the main div as relative, then I can
position the nested divs as absolute off of the main? Doesn't seem to be the
right answer.
Test page:
[url]http://www.susanchambersdance.com/cms/test_div.php[/url]
Thanks in advance for helping!
JillTW Guest
-
White boxes
When I publish a Director 8.5 file to Shockwave, I frequently get white boxes around graphics and film loops. How can I eliminate these? -
Text boxes like this...
Hi there, does anyone know if there is Flash drawing tool used to create static text boxes like this: http://www.aroots.com/ If not in... -
Arrays and DD boxes
Hi All: I am trying to set up a drop-down box in a web page, which gets populated by information from a database. I'm using the getrows method to... -
boxes ??
how do i get them boxes back up, ive turned them ff by accident the colour one and the one that shows the 'layers', 'history' an all that, if ye know... -
2 SSA boxes for SSA boxes physical redundancy
Dears, I want some quick help from you all guys as customer now want me to respond as soon as possible......and i think preobably no one in RISC... -
Murray *ACE* #2 Re: Nested CSS boxes
You do NOT want to use Layers for this. Since absolutely positioned page
elements are removed from the normal flow of the page, they cannot cause
containers to expand. That's why using layers as a page layout method is so
seriously flawed.
The term "CSS positioning" does not refer to just using layers. It refers
to the use of CSS to place elements on the page with margins, paddings,
floats, and occasionally, with positioning, but only occasionally.
This may help you understand positioning a bit -
There are 4 different types of positioning:
Absolute
Relative
Fixed
Static
Here is a brief explanation of each kind of positioning (with regard to
placement of elements on the page only)....
Position:absolute (or A/P elements)
-----------------------
This does several things -
1. It 'removes' the element from the flow of the code on the* page so that
it can no longer influence the size or position of any other pa*ge element
(except for those contained within it, of course).
2. The absolutely positioned element takes its position from the position of
its closest PA*RENT *positioned* element - in the absence of any explicitly
positioned parent, this will default to the <body> tag, which is always
positioned
*at 0,0 in the browser viewport.
This means that it doesn't matter where in the HTML code the laye*r's code
appears (between <body> and </body>), its location on the screen will not
change (this assumes that you have not positioned the A/P element within
a table or another A/P element, of course). Furthe*rmore, the space in
which
this element would have appeared were it not positi*oned is not preserved
on the screen. In other words, absolutely positioned elements don't take
up any space on the page. In fact, they FLOAT over the page.
Position:relative (or R/P elements)
----------------------
In contrast to absolute positioning, a relatively positioned page element is
*not* removed from t*he flow of the code on the page, so it will use the
spot
where it would have* appeared based on its position in the code as its
zero point reference. If* you then supply top, right, bottom, or left
positions
to the style for this *element, those values will be used as offsets from
its
zero point.
This means that it DOES matter where in the code the relativ*ely positioned
element appears (, as it will be positioned in that location (*factoring in
the offsets) on the screen (this is true for any placement in the code).
Furthermore, the space where this e*lement would have appeared is
preserved in the display, and can therefore* affect the placement of
succeeding elements. This means that the taller a relatively
positioned element is, the more space it forces on the page.
Position:static
-------------------
As with relative position, static positions also "go with *the flow". An
element with a static position cannot have values for offset*s (top, right,
left, bottom) or if it has them, they will be ignored. Unless explicitly
positioned, all div elements default to static positioning.
Position:fixed
------------------
A page element with this style will not scroll as the page c*ontent scrolls.
Support for this in elements other than page backgrounds is *quirky
There are several other things you need to know:
1. ANY page element can be positioned - paragraphs, tables, images, lists,
etc.
2. The <div> tag is a BLOCK level tag. This means that if it is not
positioned or explicitly styled otherwise, a) it will always begin on a new
line on the screen, and b) it will always force content to a new line below
it, and c) it will always take up the entire width of its container (i.e.,
width:100%).
3. The placement of A/P elements *can* affect the BEHAVIOR of other
elements
on the page. For example, a 'layer' placed over a hyperlink will mask that
hyperlink.
You can see a good example of the essential difference between absolute and
relative positioning here -
[url]http://www.great-web-sights.com/g_layersdemo.asp[/url]
You can see a good demonstration of why using layers for a page layout tool
is dangerous here -
[url]http://www.great-web-sights.com/g_layer-overlap.asp[/url]
--
Murray --- ICQ 71997575
Adobe Community Expert
(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
==================
"JillTW" <webforumsuser@macromedia.com> wrote in message
news:em8tqd$nvl$1@forums.macromedia.com...> Trying to get the hang of this CSS positioning thing... :confused;
>
> Need to have a large centered box (main div) with several (2 to 4) small
> boxes
> within it. Essentially, the only text in the first box (main div) is a H2.
>
> I want the "big" box to have a height that will adjust to the content of
> the
> smaller boxes within it. The small boxes will have several to many lines
> of
> text or table data. The content will be php-extracted from a mysql
> database, so
> it will vary in nbr of rows returned.
>
> Using DW MX 2004. I have the "main1" div, then used the DW "Draw Layer"
> for a
> couple of the boxes. You'll see the in-line CSS that was created with
> that...
> once I figure everything out I'll move all CSS to the external sheet.
> Right now
> it's either in the page head or in-line with the divs.
>
> My problem is: the main div (Manage Content) is not adjusting in height to
> be
> a background for the divs within it. I read several suggestions about
> setting
> the properties of html and body to 100% height (that's why it's in the CSS
> in
> the head). I thought that if I postioned the main div as relative, then I
> can
> position the nested divs as absolute off of the main? Doesn't seem to be
> the
> right answer.
>
> Test page:
>
> [url]http://www.susanchambersdance.com/cms/test_div.php[/url]
>
> Thanks in advance for helping!
>
Murray *ACE* Guest
-
JillTW #3 Re: Nested CSS boxes
Well. I've got some reading to do! Thanks!
I'll go back to my original layout, which was a single div with some
paragraphs, UL's & a table thrown in! Sticking stuff from a database into an
html table fits better in my head anyway... I like the visual concept of
table-to-table!
JillTW Guest
-
Murray *ACE* #4 Re: Nested CSS boxes
Be pragmatic....
--
Murray --- ICQ 71997575
Adobe Community Expert
(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
==================
"JillTW" <webforumsuser@macromedia.com> wrote in message
news:em9a5n$9h6$1@forums.macromedia.com...> Well. I've got some reading to do! Thanks!
>
> I'll go back to my original layout, which was a single div with some
> paragraphs, UL's & a table thrown in! Sticking stuff from a database into
> an
> html table fits better in my head anyway... I like the visual concept of
> table-to-table!
>
Murray *ACE* 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
