Professional Web Applications Themes

Layout Problems - HTML & CSS

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]starsndmadwebdesign.com[/email]...

  1. #1

    Default Layout Problems

    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]starsndmadwebdesign.com[/email]


    starsnd webforumsuser@macromedia.com Guest

  2. #2

    Default Re: Layout Problems

    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" <webforumsusermacromedia.com> wrote in message
    news:bf6ddu$q4g$1forums.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]starsndmadwebdesign.com[/email]
    >
    >

    DiMa Guest

  3. #3

    Default Re: Layout Problems

    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]starsndmadwebdesign.com[/email]



    starsnd webforumsuser@macromedia.com Guest

  4. #4

    Default Re: Layout Problems

    On Mon, 21 Jul 2003 14:26:19 +0000 (UTC), "starsnd"
    [email]webforumsusermacromedia.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
    Gary White Guest

  5. #5

    Default Re: Layout Problems

    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" <webforumsusermacromedia.com> wrote in message
    news:bfgt6b$rl1$1forums.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]starsndmadwebdesign.com[/email]
    >
    >

    DiMa Guest

  6. #6

    Default Re: Layout Problems

    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" <webforumsusermacromedia.com> wrote in message
    news:bfh7hv$k2m$1forums.macromedia.com...
    > Thank you!
    >
    > Mike Madison
    >
    >

    DiMa Guest

  7. #7

    Default Layout problems

    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 Guest

  8. #8

    Default Re: Layout problems

    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 Guest

  9. #9

    Default Re: Layout problems

    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!
    queenliesel Guest

  10. #10

    Default Re: Layout problems

    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" <webforumsusermacromedia.com> wrote in message
    news:eda0cn$lcg$1forums.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* Guest

  11. #11

    Default Re: Layout problems

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

    [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" <webforumsusermacromedia.com> wrote in message
    news:ed9uef$j7m$1forums.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?
    >

    Murray *ACE* Guest

  12. #12

    Default Re: Layout problems

    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 Guest

  13. #13

    Default Re: Layout problems

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

  14. #14

    Default Layout problems

    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 Guest

  15. #15

    Default Re: Layout problems

    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 Guest

  16. #16

    Default Re: Layout problems

    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" <webforumsusermacromedia.com> wrote in message
    news:efme6d$i70$1forums.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?

    Murray *ACE* Guest

  17. #17

    Default Re: Layout problems

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

  18. #18

    Default Re: Layout problems

    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" <webforumsusermacromedia.com> wrote in message
    news:efmnu2$ska$1forums.macromedia.com...
    > Terrible things! lol. So what's the answer?

    Murray *ACE* Guest

  19. #19

    Default Re: Layout problems

    [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" <webforumsusermacromedia.com> wrote in message
    news:efmnu2$ska$1forums.macromedia.com...
    > Terrible things! lol. So what's the answer?

    [/q]

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

    Moydock Guest

Similar Threads

  1. Datalist Layout spacing problems, row space
    By NancyASAP in forum ASP.NET Data Grid Control
    Replies: 1
    Last Post: April 30th, 01:16 PM
  2. CFForm Layout Problems
    By DanCasper in forum Coldfusion Flash Integration
    Replies: 1
    Last Post: December 20th, 09:57 PM
  3. css layout problems - css and tables
    By hackdesigner in forum Macromedia Dynamic HTML
    Replies: 0
    Last Post: August 21st, 01:08 AM
  4. Problems with layout in (crappy) IE
    By Jansolo in forum Macromedia Dynamic HTML
    Replies: 5
    Last Post: August 15th, 02:07 PM
  5. problems with layout
    By Enchanted Graphics in forum Macromedia Dreamweaver
    Replies: 1
    Last Post: July 17th, 05:18 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139