Nested CSS boxes

Trying to get the hang of this CSS positioning thing...
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:
Test page of
bad divs
Thanks in advance for helping!

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
page element
(except for those contained within it, of course).
2. The absolutely positioned element takes its position from
the position of
its closest PARENT *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
layer'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).
Furthermore, the space in
which
this element would have appeared were it not positioned
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 the 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
relatively 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 element 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
offsets (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
content 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 -
http://www.great-web-sights.com/g_layersdemo.asp
You can see a good demonstration of why using layers for a
page layout tool
is dangerous here -
http://www.great-web-sights.com/g_layer-overlap.asp
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"JillTW" <[email protected]> wrote in
message
news:[email protected]...
> Trying to get the hang of this CSS positioning thing...
>
> 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:
>
>
http://www.susanchambersdance.com/cms/test_div.php
>
> Thanks in advance for helping!
>

Similar Messages

Override Link Class in "Other CSS" Box

Hi -is there a way to override the class of a link in the "other styles" box for a component?
My example is this:
I use a skin with a dark header. The text for the widgets in the header are white (Administration, etc)
The body of the site is white.
When I put another widget that uses the same class (x106 in this case) it makes the link color white and you can't see it on the page.
I've tried many ways to go into the "other CSS" box (under the style tab) and none seem to work.
Thanks.

Hi - thanks.
That's not exactly the problem. I know what the classes are (x106 and x107).
The problem is that I am trying to use two "widgets" or ADF components (like the login/logout or My Favorites links) on two different background colors.
I cannot get into the code of the ADF component to tell it to use a different class.
Also, if I change the class (x106 for example) it changes ALL of them.
What I think I need is a way to override the CSS for the link in the "Other CSS" box for that component somehow (I've tried many things - can't figure it out and not sure it can be done). I would think that this would override the class in the skin.
In short - what I'm asking, I guess, is this.
IS there a way to override the CSS LINK color for an ADF template component - OTHER THAN in the Skin's CSS file.
Thanks!

CSS Box Problem

Hi,
My site have a some problem in css box. Screen shot is attached for reference.
Please help for the same.
Weblink

Have some performance issues on Windows XP, too.
I am using d3d prism settings to render on Windows 7 and XP. On Windows 7 everything working fine.
On Windows XP it is slow and sometimes flickering.
I didn't find a solution.
1) Tried to start the application with other prism settings like -Dprism.order=d2d and OpenGL.
2) I changed the 3d graphic settings that made it better, but didn't solve the issue.
Someone knows the difference of rendering the javafx application in Windows 7 and XP (DirectX 11, DirectX9.0c)?

My CSS box doesn't seem to be pushing the text out of the way

Hi guys,
Have
a look here
I've just managed to get CSS boxes working on my site, and as
you'll see have applied them to the right hand side of a number of
pages and added links. I looked at the site locally and online last
night from my machine and everything seemed to be working as
expected.
However, I've just got to work and had a look at some of the
pages and the text box A - doesn't seem to have extended enough to
surround all of the linked text and B - doesn't seem to have pushed
the surrounding text out of the way enough so now there's a
horrible overlapping this going on.
As I have set the box's height properties to something like
150 (can't quite remem) I'm assuming this is what is causing A and
B? So, how do I then set the box's properties so that it will
shorten or lenghten depending on how much text I put inside it -
just leave the height property field blank?
Hope you can help guys!
Let me know if you need more info.
Cheers,
James

JamesFryer wrote:
So, how do I then set the
> box's properties so that it will shorten or lenghten
depending on how much text
> I put inside it - just leave the height property field
blank?
Yes. The answer is to never set the height of a box which
contains text
(unless its for a scrolling area). Let the amount of text
within the box
determine the height.

Adding a hyperlink to a css box

Hello !
I am trying to add a hyperlink to a css box so when clicked it redirects to a page: for example www.google.com
Also in the box i have an image.
This is the box:
CSS
#Box1 {float: left; background:url(butondesprenoi.jpg);background-size:contain; }
#Box1:hover {background:url(butondesprenoi2.jpg);background-size:contain; transform:rotate(7deg);
-ms-transform:rotate(7deg);
-webkit-transform:rotate(7deg); }
HTML
<div id="Box1">
<h2></h2>
So how can i do it ?

Valen90 wrote:
Hello !
I am trying to add a hyperlink to a css box so when clicked it redirects to a page: for example www.google.com
Also in the box i have an image.
So how can i do it ?
Add a hyperlink to a css box? not sure what exactly do you mean. However, you can add a hyperlink in your html code like this:
<div id="Box1">
<h2>Heading Level 2</h2>
<a href="http://google.com">
<img alt="image-inside-box" class="auto-style1" height="340" src="https://sc.imp.live.com/content/dam/imp/surfaces/mail_signin/v3/images/SISU_0003_SkypeMidEngaged_475x340.jpg" width="475"></a></div>
hope this is what you are after.

Quick CSS box question

Hi guys,
Firstly a very Merry Christmas to you all !
I'm just getting to grips with converting all the text on my
site to CSS and have a quick question.
On some of my pages I add an 'Also see' links box aligned to
the right - it's a CSS div tag thingy someone kindly talked me
through once. All of my pages are built from a template with an
editable region.
My question is, can I add this box (perhaps with a standard
'Also check out' title and then spaces for my links) at the
template level? This will save me having to go to Insert>Layout
Objects>DivTag on every page. I've tried simply adding this to
the editable region of the template but it simply pushed the
editable region box over to the right and then didn't appear on my
pages
Also, the links box would ideally appear about half way down
my pages on the right...
Hope you can help, many thanks in advance!
James
Here's an example page where I have manually added my link
box on the right of the page...
http://www.fyrne.com/james_journalism/Pages/Mosaic_of_the_med.html

Your CSS link implies that the CSS file is in the Templates
folder. You
shouldn't have anything there other than the template (dwt)
files
themselves. Please move it out to any other location in your
site.
<link href="../../Templates/Box.css" rel="stylesheet"
type="text/css">
Changes made to template editable regions would not propagate
to existing
child pages - that's why you aren't seeing that addition in
them....
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"JamesFryer" <[email protected]> wrote in
message
news:[email protected]...
> Hi guys,
>
> Firstly a very Merry Christmas to you all !
>
> I'm just getting to grips with converting all the text
on my site to CSS
> and
> have a quick question.
>
> On some of my pages I add an 'Also see' links box
aligned to the right -
> it's
> a CSS div tag thingy someone kindly talked me through
once. All of my
> pages are
> built from a template with an editable region.
>
> My question is, can I add this box (perhaps with a
standard 'Also check
> out'
> title and then spaces for my links) at the template
level? This will save
> me
> having to go to Insert>Layout Objects>DivTag on
every page. I've tried
> simply
> adding this to the editable region of the template but
it simply pushed
> the
> editable region box over to the right and then didn't
appear on my pages
>
>
> Also, the links box would ideally appear about half way
down my pages on
> the
> right...
>
> Hope you can help, many thanks in advance!
>
> James
>
> Here's an example page where I have manually added my
link box on the
> right of
> the page...
>
http://www.fyrne.com/james_journalism/Pages/Mosaic_of_the_med.html
>

How can I "nest" CSS span tags?

I have a piece of text to which I want to apply three successive CSS classes, making increasingly broad selections of the text. (Or, conversely, apply to the broadest span of text and then selectively style smaller subsets of the inner text.) Either way I try this, the "span" tags do not end up nested.
For example, I first select a single word and apply CSS style-1 to just the one word. Next, I select 3 words (one being the word I just styled) and apply CSS style-2 to that. Finally, I select the entire clause, which contains the 3 styled words, and apply style-3 to that.
The objective is to have the span tags "nest" -- but when I apply the styles in the Design view using the "Class" selector, the resulting HTML has the span tags starting and stopping for each bit of text, rather than being nested. Rather than that, I want to end up with the effect below:
<span class="style-1">a clause <span class="style-2">with <span class="style-3">some</span> words</span> within the clause.</span>
I can, of course, do this by hand in the Code view but it is very time-consuming. Is there a way to achieve this in the Design view?

Are you attempting something like this?
<!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=utf-8" />
<title>Span Tag Nesting</title>
<style type="text/css">
.style-1 {
    font-weight:bold;
.style-2 {
    color:green;
.style-3 {
    font-style:italic;
</style>
</head>
<body>
<span class="style-1">a clause <span class="style-2">with <span class="style-3">some</span> words</span> within the clause.</span>
</body>
</html>
I'm pretty sure you're going to be stuck adding the span tags in by hand. As far as I can tell, there's no way to get DW to nest <span> tags from within Design View. With the way span tags currently work in DW, there is no way for the program to know you want them nested or overwritten when you select an area of text in Design View.
That might be an interesting Feature Request: https://www.adobe.com/cfusion/mmform/index.cfm?name=wishform

IOS8 doesn't render CSS box shadows correctly

According to an article at "caniuse", iOS7.1, 8, and 8.1 are supposed to support the CSS3 property box-shadow. However, I have an html file to which I could direct you which shows that this is not the case. The file I have is simple-minded, containing CSS only for the box-shadow in question. When presented in iOS8 Safari, no box-shadow is rendered. When presented in MacOS Safari, Firefox, Chrome, or Opera, the box-shadow is rendered correctly. Is this (and are other) iOS8 CSS3 limitations documented?

It works for me, but its a little flaky when zooming in. It disappears after a certain zoom level is reached.

CSS box - hidden\show & overlapping

Hi!
We have 2 zones.
In one zone we have a box which contains a CSS navigation
list/buttons.
In the second zone we would like, when the mouse is over one
of the list item/button, to be able to show a specific box (with
identical sizes and position's definitions).
The required mechanism, from the user point of view, is
expected to be like the "show layers (visible/hidden property) on
mouse over behavior".
How we can stack more than one box, one on the top of each
other, in a way that we see all the time only one of the boxes
(overlapping), and that without disturbing the general layout of
the page.
I have tried to use the "visibility properties
(visible/hidden)" on two boxes with identical "box properties"
definitions and different visibility properties (visible/hidden).
The boxes were not stacked each on the top of the other, and the
second box have taken its natural "float place.
For example we have a container box with 3 boxes with the
following "box properties":
#ButtonFirstDetails {
height: 233px;
width: 516px;
margin-top: 2px;
margin-right: auto;
margin-bottom: 2px;
margin-left: 0px;float: left;
#FreeZone01 {
height: 153px;
width: 256px;
margin-top: 2px;
margin-right: auto;
margin-left: 0px;
float: left;
#FreeZone02 {
height: 153px;
width: 256px;
margin-top: 2px;
margin-right: auto;
margin-left: 4px;
float: left;
TIA
Nanu

Thanks
Nanu
>>> Murray
*ACE*<[email protected]> 23/02/2007 19:41:33
>>>
Then stick with the behaviors.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"Nanu Kalmanovitz" <[email protected]> wrote in
message
news:[email protected]...
> I'm a beginner, not understanding yet, completely, how
buttons change
> their fonts & colors when the mouse move over them.
>
> TIA
>
> Nanu
>
>>>> Murray
*ACE*<[email protected]> 22/02/2007 22:30:54
>>>
> It is possible to use CSS for this, but it's tricky.
What is your comfort
> level with CSS?
>
> --
> Murray --- ICQ 71997575
> Adobe Community Expert
> (If you *MUST* email me, don't LAUGH when you do so!)
> ==================
>
http://www.dreamweavermx-templates.com
- Template Triage!
>
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
>
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
>
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
> ==================
>
>
> "Nanu Kalmanovitz" <[email protected]> wrote
in message
> news:[email protected]...
>> Thanks,
>>
>> Is the DW "bahaviours" function , the only way to
switch between the
>> hidden\show boxes?
>> Is it possible to do the switch using definitions in
CSS same way as the
>> Hover made on bottons?
>>
>> TIA
>>
>> Nanu
>>
>>>>> Murray
*ACE*<[email protected]> 22/02/2007 17:45:39
>>>
>> Use absolute positioning on the stacked elements.
>>
>> --
>> Murray --- ICQ 71997575
>> Adobe Community Expert
>> (If you *MUST* email me, don't LAUGH when you do
so!)
>> ==================
>>
http://www.dreamweavermx-templates.com
- Template Triage!
>>
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
>>
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
>>
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
>> ==================
>>
>>
>> "Nanu Kalmanovitz" <[email protected]>
wrote in message
>> news:[email protected]...
>>> Hi!
>>>
>>> We have 2 zones.
>>> In one zone we have a box which contains a CSS
navigation list/buttons.
>>> In the second zone we would like, when the mouse
is over one of the list
>>> item/button, to be able to show a specific box
(with identical sizes and
>>> position's definitions).
>>> The required mechanism, from the user point of
view, is expected to be
>>> like the "show layers (visible/hidden property)
on mouse over behavior".
>>>
>>>
>>> How we can stack more than one box, one on the
top of each other, in a
>>> way
>>> that we see all the time only one of the boxes
(overlapping), and that
>>> without disturbing the general layout of the
page.
>>> I have tried to use the "visibility properties
(visible/hidden)" on two
>>> boxes with identical "box properties"
definitions and different
>>> visibility
>>> properties (visible/hidden). The boxes were not
stacked each on the top
>>> of
>>> the other, and the second box have taken its
natural "float place.
>>> For example we have a container box with 3 boxes
with the following "box
>>> properties":
>>>
>>> #ButtonFirstDetails {
>>> height: 233px;
>>> width: 516px;
>>> margin-top: 2px;
>>> margin-right: auto;
>>> margin-bottom: 2px;
>>> margin-left: 0px;float: left;
>>> }
>>> #FreeZone01 {
>>> height: 153px;
>>> width: 256px;
>>> margin-top: 2px;
>>> margin-right: auto;
>>> margin-left: 0px;
>>> float: left;
>>> }
>>> #FreeZone02 {
>>> height: 153px;
>>> width: 256px;
>>> margin-top: 2px;
>>> margin-right: auto;
>>> margin-left: 4px;
>>> float: left;
>>> }
>>>
>>> TIA
>>>
>>> Nanu
>>
>>
>>
>>
>>
>
>
>
>
>

Help with CSS Box

I am reading Dreamweaver CS3 Visual Quickstart Guide. Every
time I want to preview my page in a browser I have to save the
document. Is it possible to preview without saving? Can I design my
layout using CSS before I use CSS to design my type styles. I want
to create a box using CSS. Can I design my page and menus etc and
then add my text later?
I want to learn how to create a white box on a grey
background with round corners and a drop shadow. How would I do
this using the Dreamweaver interface in "Design" view and then how
to do in "Code" view?
Thankyou

If someone could help me I would really appreciate it!

CSS Box to Box - Redundancy

We have two CSS running in box to box redundancy in two-arm (router mode) on code 8.10.40. Master is running with ip redundancy master (causing it to always be master if it is up and running).
We had a need to reload a previous configuration. To do this I copied the configuration to startup-config under running boot-file. I then ran command copy start run (on the master). After doing so, we lost all VIPs, although servers on second arm of CSS were accesible as well as the interface on the same network as the VIPs.
There is a 6509 switch between our CSS and the Firewall (firewall's are running in same mode - box to box). Firewall team saw traffic destined for the VIPs leave their interface, but we never saw it hit the CSS. I think that we had an ARP issue, but nobody can attest to this 100%. We had to reboot both CSS's to get VIPs to respond properly.
What would be the normal expectations in this scenario?
What is best practice to reload a configuration?

the copy start run does not erase the running config. So, it tries to add whatever config you had in startup on top of the running config.
Personally I would have simply done a reload once the config was in startup.
Gilles.

Is there a way for converting this Photoshop drop shadow to CSS box shadow?

Here's my PSD: http://d.pr/f/ML9l
Here are the specs:
Color: #3b5c7f
Angle: 90 degrees
Distance: 2px
Size: 4px
Contour: Linear
Here's what I've come up with so far, and though quite similar, it is not exactly the same thing:
http://jsbin.com/akuleg/1/

Are you a Creative Cloud member? With the recent Photoshop update, you can use the tool "Copy CSS"
It copies the style to the clipboard and you can paste it into your code. Here is what your file generated:
.Shape_5 {
border-radius: 3px;
background-color: rgb( 228, 224, 223 );
box-shadow: 0px 2px 4px 0px rgb( 59, 92, 127 );
position: absolute;
left: 56px;
top: 123px;
width: 287px;
height: 54px;
z-index: 2;
Hope this helps!
Julia

Media Queries no CSS box in properties

When I open the media queries dialog box the css file name properties box does not appear and i get an error when i try to save saying i need to name the css file

When I open the media queries dialog box the css file name properties box does not appear and i get an error when i try to save saying i need to name the css file

CSS Box-to-Box software upgrade

I'm getting ready to upgrade two CSS's in box-to-box redundancy mode.
The upgrade is simple enough, but what are the best practices for two boxes in box-to-box?
I suppose I can copy the software up to the master box. Then force the standby box to be master and copy up the software to the standby.
Perform the upgrade/reboot on the standby. Then once the standby is again operational, do the master.
Seems cumbersome. Any suggestions?

I would suggest upgrading and rebooting the secondary CSS, then do the primary. Â However, I would suggest you verify the APP session status between the 2 CSS's BEFORE upgrading and rebooting the primary. Â If you can ensure APP session communication between the load balancers you should be okay to perform the upgrade on the primary device. Â In my opinion this is the better if the two options you have outlined.
- JasonÂ

CSS box to box redundancy redundant link

Hello,
Does CSS 15001 with firmware version sg0820001 (08.20.0.01) require gigabit link for box to box redundancy's redundant link?
Thank's
Raymond.

The crossover cable used for the redundant link can be connected to two Gigabit Ethernet or two Fast Ethernet ports.
See:
http://www.cisco.com/en/US/docs/app_ntwk_services/data_center_app_services/css11500series/v8.20_v8.10/configuration/redundancy/guide/Redndncy.html#wp1060803

Nested CSS boxes

Similar Messages

Maybe you are looking for