positioning & padding in DIV elements ...

Discussion in 'HTML' started by Ralf, Sep 2, 2007.

  1. Ralf

    Ralf Guest

    hi folks,

    trying to evolve from table-based design to using DIV-ID's etc for
    positioning of elements. having a nasty time getting the right edges of
    elements on my page to "behave" in terms of placement and padding to make
    text content sit symetrically.

    here's my URL: http://www3.telus.net/peaklong/test/intro.htm

    my INTRO & BACKGROUND pages behave fine except for mysterious extra
    padding-right in my outer content box; all other site pages, the outer box
    sits fiine but this mysterious extra padding is now added to my inner
    content box.

    My bottom nav-bar was meant to follow the page-width of my Mainbody area,
    but the only way I can approximate that is by bumping up the width to 103%
    in the CSS.

    any help with these items would certainly be appreciated....

    Ralf
     
    Ralf, Sep 2, 2007
    #1
    1. Advertising

  2. Gazing into my crystal ball I observed "Ralf" <>
    writing in news:SXuCi.9913$Pd4.1430@edtnps82:

    > here's my URL: http://www3.telus.net/peaklong/test/intro.htm
    >
    > my INTRO & BACKGROUND pages behave fine except for mysterious extra
    > padding-right in my outer content box; all other site pages, the outer
    > box sits fiine but this mysterious extra padding is now added to my
    > inner content box.
    >
    > My bottom nav-bar was meant to follow the page-width of my Mainbody
    > area, but the only way I can approximate that is by bumping up the
    > width to 103% in the CSS.
    >


    Validate your CSS and see what happens.

    --
    Adrienne Boswell at Home
    Arbpen Web Site Design Services
    http://www.cavalcade-of-coding.info
    Please respond to the group so others can share
     
    Adrienne Boswell, Sep 2, 2007
    #2
    1. Advertising

  3. Ralf

    Ralf Guest

    > > my INTRO & BACKGROUND pages behave fine except for mysterious extra
    > > padding-right in my outer content box; all other site pages, the outer
    > > box sits fiine but this mysterious extra padding is now added to my
    > > inner content box.
    > >
    > > My bottom nav-bar was meant to follow the page-width of my Mainbody
    > > area, but the only way I can approximate that is by bumping up the
    > > width to 103% in the CSS.
    > >

    >
    > Validate your CSS and see what happens.
    >
    > --
    > Adrienne Boswell at Home
    > Arbpen Web Site Design Services
    > http://www.cavalcade-of-coding.info
    > Please respond to the group so others can share


    thanks Adrian. missing some ALT image tags - seems the only problem W3C
    pointed out; filled most of them in - no effect on errant padding ...

    R
     
    Ralf, Sep 2, 2007
    #3
  4. Gazing into my crystal ball I observed "Ralf" <>
    writing in news:ZovCi.9914$Pd4.8416@edtnps82:

    >> > my INTRO & BACKGROUND pages behave fine except for mysterious extra
    >> > padding-right in my outer content box; all other site pages, the

    outer
    >> > box sits fiine but this mysterious extra padding is now added to my
    >> > inner content box.
    >> >
    >> > My bottom nav-bar was meant to follow the page-width of my Mainbody
    >> > area, but the only way I can approximate that is by bumping up the
    >> > width to 103% in the CSS.
    >> >

    >>
    >> Validate your CSS and see what happens.
    >>

    > thanks Adrian. missing some ALT image tags - seems the only problem

    W3C
    > pointed out; filled most of them in - no effect on errant padding ...



    Note: I said to validate the _CSS_ http://jigsaw.w3.org/css-validator/


    --
    Adrienne Boswell at Home
    Arbpen Web Site Design Services
    http://www.cavalcade-of-coding.info
    Please respond to the group so others can share
     
    Adrienne Boswell, Sep 2, 2007
    #4
  5. Ralf

    John Hosking Guest

    Ralf wrote:
    >
    > here's my URL: http://www3.telus.net/peaklong/test/intro.htm
    >
    > my INTRO & BACKGROUND pages behave fine except for mysterious extra
    > padding-right in my outer content box; all other site pages, the outer box
    > sits fiine but this mysterious extra padding is now added to my inner
    > content box.


    When you say "extra padding-right", I think you really mean "space on
    the right side (of something) that you didn't expect." I'm not sure it's
    really padding-right. It's often hard to tell from behavior whether one
    is looking at an element's right margin or its container's right padding
    (or both).

    IAC: Your #header-graphic { width: 100%; } makes it try to be the same
    full width as div.content2, but you're starting it 10px to the right
    because of the left margin in margin: 5px 10px 9px 10px;. So one obvious
    workaround/solution is to remove the width declaration from #header-graphic.

    Or maybe you want to try adding right padding to your outer box, and
    resize the contents accordingly: .content2 { padding-right: 20px; }

    BTW, I didn't detect a difference between the Intro and Background pages
    relative to any of the others. They all look the same (content excepted)
    to me in FF.

    >
    > My bottom nav-bar was meant to follow the page-width of my Mainbody area,
    > but the only way I can approximate that is by bumping up the width to 103%
    > in the CSS.


    You're mixing percentages with pixels, and doing it with elements that
    have differing margins, padding, and/or borders. If you aim at margins
    and padding, and let the widths come naturally, maybe you'll see better
    results. As it is, I get a permanent horizontal scrollbar (I suspect the
    following ruleset:
    #page-header {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 100%;
    ...etc. }
    Leave the left and top if you want, but get rid of at least one of the
    other declarations.)

    BTW #2: For CSS issues, make sure you read (and post in) the NG
    comp.infosystems.www.authoring.stylesheets.

    HTH.

    --
    John
    Pondering the value of the UIP: http://improve-usenet.org/
     
    John Hosking, Sep 2, 2007
    #5
  6. Ralf wrote:
    > hi folks,
    >
    > trying to evolve from table-based design to using DIV-ID's etc for
    > positioning of elements. having a nasty time getting the right edges of
    > elements on my page to "behave" in terms of placement and padding to make
    > text content sit symetrically.
    >
    > here's my URL: http://www3.telus.net/peaklong/test/intro.htm


    One thing I noticed:

    p.top-para {
    padding-bottom: -5px;
    ....

    "Unlike margin properties, values for padding values cannot be negative.
    Like margin properties, percentage values for padding properties refer
    to the width of the generated box's containing block." from:
    http://www.w3.org/TR/CSS21/box.html#propdef-padding

    Also you have such a mishmash of inline CSS and old HTML styling
    attributes plus and external stylesheet that appears just as haphazardly
    composed with pixels and points and em's oh my!

    I'd recommend stripping is all out all the inline style and deprecated
    attributes to get the page in a clean and well formed state. Then add
    style via your stylesheet. Start with the bold strokes first in other
    words define the most general rules first. Then judiciously add more
    specific one for those special parts within your page...

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Sep 2, 2007
    #6
  7. Ralf

    Ralf Guest

    >> > my INTRO & BACKGROUND pages behave fine except for mysterious extra
    >> > padding-right in my outer content box; all other site pages, the

    outer
    >> > box sits fiine but this mysterious extra padding is now added to my
    >> > inner content box.
    >> >
    >> > My bottom nav-bar was meant to follow the page-width of my Mainbody
    >> > area, but the only way I can approximate that is by bumping up the
    >> > width to 103% in the CSS.


    > > thanks Adrian. missing some ALT image tags - seems the only problem

    > W3C
    > > pointed out; filled most of them in - no effect on errant padding ...

    >
    >
    > Note: I said to validate the _CSS_ http://jigsaw.w3.org/css-validator/


    Hi, well, my CSS had a few glitches; mostly negative top/bottom padding
    values which I changed to zero. The CSS is now clean, but no effect on the
    right padding inconsistencies I mentioned above.

    Interestingly enough, both Opera and Firefox render my bottom nav bar @ 100%
    width, consistent - as desired -with my page content. However both Opera and
    FF do bizarre things with the right-page margins and paddings which I won't
    attempt to solve. I'm happy for now if I can get any consistency for IE on
    the padding issue.

    It's this very thing that makes me want to run back to the safety and
    predictibility of table formatting.

    Ralf

    (testing site: http://www3.telus.net/peaklong/test/intro.htm )
     
    Ralf, Sep 3, 2007
    #7
  8. Ralf

    Ralf Guest

    > IAC: Your #header-graphic { width: 100%; } makes it try to be the same
    > full width as div.content2, but you're starting it 10px to the right
    > because of the left margin in margin: 5px 10px 9px 10px;. So one obvious
    > workaround/solution is to remove the width declaration from

    #header-graphic.

    Hi John,

    I removed the "width: 100%" item on the top page graphic; this made my outer
    box padding totally disapper; I then added the padding to the outer box
    again and that right padding issue is "solved" (in fact, 'perfect' on the
    intro and bkg pages), but on the other site pages, the header graphic is now
    "short" but about 12 px and the "extra space" or padding on the inner box
    still sits there.

    tried removing the width declaration from the bottom nav, but it makes it
    even shorter (all browsers); at least before Opera & FF rendered it @ 100%.

    Ralf
     
    Ralf, Sep 3, 2007
    #8
  9. Ralf

    John Hosking Guest

    Ralf wrote:
    >> IAC: Your #header-graphic { width: 100%; } makes it try to be the same
    >> full width as div.content2, but you're starting it 10px to the right
    >> because of the left margin in margin: 5px 10px 9px 10px;. So one obvious
    >> workaround/solution is to remove the width declaration from
    >> #header-graphic.


    >
    > I removed the "width: 100%" item on the top page graphic; this made my outer
    > box padding totally disapper; I then added the padding to the outer box
    > again and that right padding issue is "solved" (in fact, 'perfect' on the
    > intro and bkg pages), but on the other site pages, the header graphic is now
    > "short" but about 12 px and the "extra space" or padding on the inner box
    > still sits there.


    Well, I still don't see any difference between the pages.

    IAC, have you tried taking away the width: 100%; from .content2?


    --
    John
    Pondering the value of the UIP: http://improve-usenet.org/
     
    John Hosking, Sep 3, 2007
    #9
  10. Ralf

    Ralf Guest

    Ralf wrote:
    >
    > here's my URL: http://www3.telus.net/peaklong/test/intro.htm
    >
    > my INTRO & BACKGROUND pages behave fine except for mysterious extra
    > padding-right in my outer content box; all other site pages [snip]


    > IAC, have you tried taking away the width: 100%; from .content2?


    thanks to John & others for your patience with this: it seems what was
    causing a lot of the "padding-chaos" was the width declarations on my
    'inner' text boxes, as opposed to controlling width by margin attributes.
    When I removed these declarations, all falls into place (even the bottom nav
    bar). what a learning curve.

    one further minor dilemma; in "cleaning up" my CSS, I removed the "negative
    padding" values for the paragraph declaration that had "snugged" the
    paragraphs a little closer together, as per my client's wish. How can I now
    go about shortening the spacing between paragraphs without resorting to a
    negative bottom margin or padding?

    thanks all for your help ...

    Ralf
     
    Ralf, Sep 5, 2007
    #10
  11. Ralf

    John Hosking Guest

    Ralf wrote:
    [without attributions AGAIN and with garbled quotes so cut it out]
    > John Hosking wrote:


    >> Ralf wrote:
    >>> here's my URL: http://www3.telus.net/peaklong/test/intro.htm


    >> IAC, have you tried taking away the width: 100%; from .content2?


    > When I removed these declarations, all falls into place (even the bottom nav
    > bar). what a learning curve.


    Yes. It's easy to get tangled up in all the fiddly things one can do
    with CSS, and lose sight of the bigger picture. I see a lot of pages
    (mostly though these NGs) which are way overspecified. Simplify and improve.


    > one further minor dilemma; in "cleaning up" my CSS, I removed the "negative
    > padding" values for the paragraph declaration that had "snugged" the
    > paragraphs a little closer together, as per my client's wish. How can I now
    > go about shortening the spacing between paragraphs without resorting to a
    > negative bottom margin or padding?


    Well, I don't completely understand. I mean I don't understand why you
    think you need negative margins when you haven't even tried zero values
    yet. Here are your paragraph styles, with your crazy indents removed:

    p.top-para { margin: 10px 0px 7px 0px;
    padding: 0px; }

    p.dent { text-indent: 2em;
    margin: 10px 0px 7px 0px;
    padding: 0px; }

    Simply reduce the values for top- and bottom-margins from
    margin: 10px 0px 7px 0px; to something like
    margin: 0px 0px 0px 0px; (or, of course, margin:0;).

    But having said that, I personally don't think the spacing between
    paragraphs should be reduced at all. That's good spacing already, except
    that it really ought to be in ems, not px. margin:.8em 0px .5em 0px; ?

    And here's something I meant to include in a previous post, but forgot.
    I don't see why you added the height: 40px; to the #header-graphic rule.
    It used to fit nicely, but with the height specified (too small), the
    header doesn't fit in its space. Simplify and improve.

    >
    > thanks all for your help ...


    You're welcome. In future, please try to keep track of attributions and
    quoted texts.


    --
    John
    Pondering the value of the UIP: http://improve-usenet.org/
     
    John Hosking, Sep 5, 2007
    #11
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Replies:
    11
    Views:
    3,187
    Steve Pugh
    Dec 14, 2003
  2. Replies:
    16
    Views:
    730
    Stephen Sprunk
    Jul 24, 2006
  3. K Viltersten

    <div ... /> and <div ...></div>

    K Viltersten, Mar 30, 2009, in forum: ASP .Net
    Replies:
    4
    Views:
    755
  4. Dwayne Madsen

    Q: Div A inside Div B is larger than Div B

    Dwayne Madsen, Jun 1, 2005, in forum: Javascript
    Replies:
    1
    Views:
    194
    David Dorward
    Jun 1, 2005
  5. mscir
    Replies:
    3
    Views:
    317
    Martin Honnen
    Jun 26, 2005
Loading...

Share This Page