Layout Problems

[starsnd webforumsuser@macromedia.com]

Hi,
I create my designs in Fireworks and then set up the slices and move the pages over into Dreamweaver. After it's in Dreamweaver, I set up the Template and its Editable Regions. I keep running into a problem where if I put my navigation (usually they're in an imagemap) along the side of the page, everything gets stretched out once content is inserted in the page's middle region. How do I prevent my designs from getting stretched apart by text?

Thanks for your help,

J. Michael Madison
[email]starsnd@madwebdesign.com[/email]

[DiMa]

Can you show an example of this?

--
--
DiMa
--------------------
WEB FORUM USERS: Please log on to the Newsgroup for quicker replies to your
posts:
[url]news://forums.macromedia.com/macromedia.dreamweaver[/url]
For Answers, check here first:
[url]http://groups.google.com/advanced_group_search?q=+group:macromedia.dreamwea ver[/url]
[url]http://www.macromedia.com/support/dreamweaver/technotes.html[/url]
[url]http://www.projectseven.com/faqbase[/url]
[url]http://www.dreamweaverFAQ.com[/url]

[url]http://www.macromedia.com/support/forums/etiquette.htm[/url]
DiMa Design > From Lines...to Designs
[url]http://www.dimadesign.net[/url]


"starsnd" <webforumsuser@macromedia.com> wrote in message
news:bf6ddu$q4g$1@forums.macromedia.com...

> Hi,
> I create my designs in Fireworks and then set up the slices and move the

pages over into Dreamweaver. After it's in Dreamweaver, I set up the Template
and its Editable Regions. I keep running into a problem where if I put my
navigation (usually they're in an imagemap) along the side of the page,
everything gets stretched out once content is inserted in the page's middle
region. How do I prevent my designs from getting stretched apart by text?

>
> Thanks for your help,
>
> J. Michael Madison
> [email]starsnd@madwebdesign.com[/email]
>
>

[starsnd webforumsuser@macromedia.com]

I've uploaded an example of the problem to my website at:

[url]http://madwebdesign.com/sga/about.htm[/url]

There is a copy of the design without content at:

[url]http://madwebdesign.com/sga/blank.htm[/url]


I've tweaked enough of the design so that it only stretches at the bottom of the text, but this still creates major problems. Any idea on how to avoid it? My Templates are located at:

[url]http://madwebdesign.com/sga/Templates/[/url]

Thank you!

J. Michael Madison
[email]starsnd@madwebdesign.com[/email]

[Gary White]

On Mon, 21 Jul 2003 14:26:19 +0000 (UTC), "starsnd"
[email]webforumsuser@macromedia.com[/email] wrote:

>I've tweaked enough of the design so that it only stretches at the
>bottom of the text, but this still creates major problems. Any idea
>on how to avoid it? My Templates are located at:

What you have is a classic example of the problems encountered when
you allow an image editor to write the HTML code for the page. As long
as the content remains exactly the same size, the page holds together
fairly well. As soon as the size of the content increases, the page
begins to explode.

For an explanation of why this happens, see
[url]http://apptools.com/rants/spans.php[/url]. You will also find a couple of
links there that will teach you to use tables better.


Gary

[DiMa]

Gary is right. But there are about a million other things gone wrong here, too,
I'm afraid. First you need to stop exporting HTML from fireworks. Very bad.
Second, you need to get the heck out of layout view...you're going to drive
yourself insane in there. Third, you need to look at your code when it's not
going right. If you'd looked, you'd have seen about 100 (no exaggeration!!)
empty table cells, nearly all the cells with something in them have heights and
widths set (neither should be set), colspans and rowspans in the double-digits,
etc...

Here's what ya do: Dip your finger tips in very strong cleaning solution to rid
them of any bacteria left by layout view and run fast as you can back to
standard view and never look back. Then do this:

table1: 1 row, 2 col > cell 1: draftInit_r2_c1.gif > cell 2:
draftInit_r2_c14.gif

table 2: 1 row, 3 col > cell 1: draftInit_r3_c1.gif > cell 2:
draftInit_r3_c15.gif > cell 3: draftInit_r3_c17.gif

table 3: 2 rows, 2 columns:
Row 1, Cell 1: a 10 row 1 col table > put your menu in this table.
Then give the cell a bg color of: ##001f7c.
Row 1, Cell 2: Put the content in this cell

Row 2, Cell 1: Give the cell a bg color of: ##001f7c.
Row 2, Cell 2: Put a 1 row, 6 col table in there and put in your first 6
links.
Directly beneath the first table put a second table:
1 row, 3 col > put your last 3 links in there
NOTE: The links in the bottom of the page should be text links, not images or
rollovers. If someone has javascript turned off they have no way to navigate
your page. That is what those wee bottom-of-the-page links are for.

Remember to NEVER split cells, never MERGE cells, NEVER EVER EVER use Layout
tables (you've just seen a classic example of why!!), NEVER give a table or
cell a height attribute, NEVER leave cells empty (there are about 100 empty
cells on the page in question), NEVER export HTML from Fireworks, unless you
are darn sure you know how to make it valid when you get it into your page
(which is more time consuming than actually using dreamweaver to create the
correct HTML & JavaScript).
ALWAYS:
Nest tables
Stack tables
Use the content to hold cells open instead of using invalid code (esp.
heights!)

This concludes our lesson on tables and the evils of layout view.

--
--
DiMa
--------------------
WEB FORUM USERS: Please log on to the Newsgroup for quicker replies to your
posts:
[url]news://forums.macromedia.com/macromedia.dreamweaver[/url]
For Answers, check here first:
[url]http://groups.google.com/advanced_group_search?q=+group:macromedia.dreamwea ver[/url]
[url]http://www.macromedia.com/support/dreamweaver/technotes.html[/url]
[url]http://www.projectseven.com/faqbase[/url]
[url]http://www.dreamweaverFAQ.com[/url]

[url]http://www.macromedia.com/support/forums/etiquette.htm[/url]
DiMa Design > From Lines...to Designs
[url]http://www.dimadesign.net[/url]


"starsnd" <webforumsuser@macromedia.com> wrote in message
news:bfgt6b$rl1$1@forums.macromedia.com...

> I've uploaded an example of the problem to my website at:
>
> [url]http://madwebdesign.com/sga/about.htm[/url]
>
> There is a copy of the design without content at:
>
> [url]http://madwebdesign.com/sga/blank.htm[/url]
>
>
> I've tweaked enough of the design so that it only stretches at the bottom of

the text, but this still creates major problems. Any idea on how to avoid it?
My Templates are located at:

>
> [url]http://madwebdesign.com/sga/Templates/[/url]
>
> Thank you!
>
> J. Michael Madison
> [email]starsnd@madwebdesign.com[/email]
>
>

[DiMa]

Quite welcome!

--
--
DiMa
--------------------
WEB FORUM USERS: Please log on to the Newsgroup for quicker replies to your
posts:
[url]news://forums.macromedia.com/macromedia.dreamweaver[/url]
For Answers, check here first:
[url]http://groups.google.com/advanced_group_search?q=+group:macromedia.dreamwea ver[/url]
[url]http://www.macromedia.com/support/dreamweaver/technotes.html[/url]
[url]http://www.projectseven.com/faqbase[/url]
[url]http://www.dreamweaverFAQ.com[/url]

[url]http://www.macromedia.com/support/forums/etiquette.htm[/url]
DiMa Design > From Lines...to Designs
[url]http://www.dimadesign.net[/url]


"starsnd" <webforumsuser@macromedia.com> wrote in message
news:bfh7hv$k2m$1@forums.macromedia.com...

> Thank you!
>
> Mike Madison
>
>

[Prez_750]

I originally had all my elements on the page using absolute positioning. Later,
I realized that the lower section would have to move down based on the amount
of content above. I grouped sections together into a larger div container
(right word?), and used relative positiong to have one section stacked on top
of the other. There was still some overlapping happening in sections, but
specifying a height in my grouped oblects container fixed that. Unfortunately,
Netscape 4.0 doesn't like that according to my bug report. I took out all the
height tags, and things were overlapping again. There is one odity though, the
main body section of text is NOT beoing overlapped by the container containing
graphics below, and works fine, however, the next container I made for the text
under those graphics is overlapping. It seems as if graphics below text is OK,
but text below graphics is not. Any ideas?

[queenliesel]

I've run into a similar problem before where some of my layers ("div
containers") overlapped when I viewed them on some computers, and it turned out
just being an issue of the text size that's simply a browser preference. A lot
of older people set their browser text size to "large" when you've been
designing it to be viewed in "medium" size, so because the text is larger and
comes further down the page it will overlap the area where the new layer
starts. If there's anyway for you to use one layer or at least as few as
possible it would help your problem and it would have a higher chance of being
viewed properly. This is what I'm talking about:

[url]http://www.rjjazz.com/troubleshoot.html[/url]

[queenliesel]

Sorry if that's not any help, I'm not sure if that's what's causing your problem... but regardless, I think using fewer layers would remove some of the conflict. Good luck!

[Murray *ACE*]

To read about layers, go here -

[url]http://www.great-web-sights.com/g_layerlaws.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
==================


"queenliesel" <webforumsuser@macromedia.com> wrote in message
news:eda0cn$lcg$1@forums.macromedia.com...

> I've run into a similar problem before where some of my layers ("div
> containers") overlapped when I viewed them on some computers, and it
> turned out
> just being an issue of the text size that's simply a browser preference.
> A lot
> of older people set their browser text size to "large" when you've been
> designing it to be viewed in "medium" size, so because the text is larger
> and
> comes further down the page it will overlap the area where the new layer
> starts. If there's anyway for you to use one layer or at least as few as
> possible it would help your problem and it would have a higher chance of
> being
> viewed properly. This is what I'm talking about:
>
> [url]http://www.rjjazz.com/troubleshoot.html[/url]
>

[Murray *ACE*]

From your descriptoin, I'd say you don't need positioning at all.

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
==================


"Prez_750" <webforumsuser@macromedia.com> wrote in message
news:ed9uef$j7m$1@forums.macromedia.com...

>I originally had all my elements on the page using absolute positioning.
>Later,
> I realized that the lower section would have to move down based on the
> amount
> of content above. I grouped sections together into a larger div container
> (right word?), and used relative positiong to have one section stacked on
> top
> of the other. There was still some overlapping happening in sections, but
> specifying a height in my grouped oblects container fixed that.
> Unfortunately,
> Netscape 4.0 doesn't like that according to my bug report. I took out all
> the
> height tags, and things were overlapping again. There is one odity though,
> the
> main body section of text is NOT beoing overlapped by the container
> containing
> graphics below, and works fine, however, the next container I made for the
> text
> under those graphics is overlapping. It seems as if graphics below text is
> OK,
> but text below graphics is not. Any ideas?
>

[Prez_750]

Thank you for your advice queenliesel. I guess I didn't explain my problem well
enough. I have two pages, one with text in the middle, and the other one with
some graphics. The one with text works fine, and the lower section does not
overlap. The one with graphics however, has the lower section overlap it for
some strange reason. When I had height specifications in the CSS, everything
worked fine. Your solution of different sized fonts in different browsers is
something I should keep in mind, so your advice is still useful.

[Prez_750]

Thank you for your advice and links on the subject. I will take another look and see what I can change.

[Moydock]

Okay so I made my website design in fireworks and i sliced it up and put it
into dreamweaver in a table. But how do I add content like typing over the
graphic? I can put the text into fireworks and do it that way but i know that's
not how you're suppose to do it. I've tried a layer but when you resize the
window the layer doesn't move with the graphic below it. Am I doing this all
backwards? Any help would be great, thanks.

[Moydock]

Okay i figured out i could make the background of one of the cells of a table and just type over that. Is that a good way to go?

[Murray *ACE*]

Perhaps - what will happen when I enlarge the type in my browser, forcing
the cell to increase in height, though?

--
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
==================


"Moydock" <webforumsuser@macromedia.com> wrote in message
news:efme6d$i70$1@forums.macromedia.com...

> Okay i figured out i could make the background of one of the cells of a
> table and just type over that. Is that a good way to go?

[Moydock]

Terrible things! lol. So what's the answer?

[Murray *ACE*]

Design the page's layout so that its appearance does not depend on the
aligment of text content with background images.

Can you post a link to your page?

--
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
==================


"Moydock" <webforumsuser@macromedia.com> wrote in message
news:efmnu2$ska$1@forums.macromedia.com...

> Terrible things! lol. So what's the answer?

[Moydock]

[q]Originally posted by: Newsgroup User
Design the page's layout so that its appearance does not depend on the
aligment of text content with background images.

Can you post a link to your page?

--
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
==================


"Moydock" <webforumsuser@macromedia.com> wrote in message
news:efmnu2$ska$1@forums.macromedia.com...

> Terrible things! lol. So what's the answer?

[/q]

Sure. [url]http://artizone.awardspace.com/[/url]
Appreciate the help.