New to HTML/CSS. Layout problems.

Discussion in 'HTML' started by gtp1013, Apr 4, 2006.

  1. gtp1013

    gtp1013 Guest

    I am having trouble getting the backgrounds of some of my css elements
    to line up flush with one another on the right side of this page...

    http://www.maptech-inc.com/CSS_Setup.htm

    The problem is even more noticeable when I view the page in 800x600
    than in higher resolution settings. If I view the page in 1024x768,
    with the browser maximized, the elements do line-up "properly" on the
    right side. However, if the browser window is not maximized, then the
    elements do not line up. The banner at the top always seems to be wider
    than the elements below. Is there something simple that I'm missing?

    I am essentially trying to use css instead of table elements to get the
    layout to look like this...

    http://www.maptech-inc.com/index_test.htm

    Any help would be graciously appreciated.

    -gtp

    ps This is my first posting venture into Google Groups, so I apologize
    in advance for my ignorance when it comes to proper etiquette on here.
    gtp1013, Apr 4, 2006
    #1
    1. Advertising

  2. Your white background DIV (where the page content will go) is set, like
    the banner DIV, to be 100% width. Because the banner DIV contains an
    image that is apparently 800 pixels wide, this DIV cannot be resized to
    a smaller width, while the white content DIV can. An easy fix here
    would be to make the content DIV a fixed width to match the fixed width
    of your banner.

    Yucky,
    Yukka
    Yukky Korpulent, Apr 4, 2006
    #2
    1. Advertising

  3. gtp1013

    gtp1013 Guest

    Thanks for the response. That makes sense, and it is enough to change.
    I'm still wondering if there is any way to achieve the same setup that
    I have using tables here..

    http://www.maptech-inc.com/index_test.htm

    by using CSS. If I simply change my the DIV content a fixed width of
    800, everything is going to look "bunched" over on the left when
    viewing the page at resolutions higher than 800x600. I'm looking to
    have the blue "bar" on the left remain at a fixed-width of 150px and
    for that "bar" and the banner up top to be left-justified with respect
    to the browser window. I'd also like to keep the drop-down menu in the
    same position relative to the banner, but I would like to have the
    content of the large "box" (where the white background is in my css
    example) be centered within that box. And while doing this, I would
    like to have the "primary" DIV elements to span the width of the entire
    browser window, so that there doesn't appear to be a large block of
    "dead space" on the right of the screen in higher resolution settings.
    Essentially, what I'm trying to accomplish is setting the "main" DIV to
    a width of 100% unless the browser width falls below 800px, at which
    point I would like the DIV widths to be 800px. Is this possible? It's
    not imperative that I set the page up using primarily CSS, so if I have
    to, I'll go with the table setup, but I'm trying to learn how to do
    things, so if it's possible to achieve the same layout design CSS, I'd
    love to know how to do so. Any suggestions or even a "nope, can't be
    done" would be appreciated. Thanks.
    gtp1013, Apr 5, 2006
    #3
  4. gtp1013

    dorayme Guest

    In article
    <>,
    "gtp1013" <> wrote:

    > Thanks for the response. That makes sense,


    What makes sense? It would be helpful for you to quote the bits
    you are referring to.


    > Essentially, what I'm trying to accomplish is setting the "main" DIV to
    > a width of 100% unless the browser width falls below 800px, at which
    > point I would like the DIV widths to be 800px. Is this possible?


    What is possible, in many non IE browsers and maybe in IE7
    coming, is to set a max width for some elements,

    div.dontBeTooBig {max-width: 800px; border:1px red solid}

    and a minimum one (that should then trigger scrollbars below 800
    wide)

    div.dontBeTooSmall {min-width:800px; border:1px red solid}

    Try these and see the effects, watch the horizontal scrollbar,
    put lots of text in the divs and watch the wrap, and see the
    borders (to see the extent of the actual div). Do this in
    Firefox, for example.

    BTW, talking about scrollbars, I do think your design needs a
    small rethink. It is true that it is practical to have a longish
    page sometimes, even for a home page. But give the viewer
    something whole to look at as it loads and in a 800 by 600
    window. Your main MapTech globe image is too big, one sees only
    some of it (not the best) and this is a very different thing from
    seing only some of a page (not the worst).

    Clear as mud?

    --
    dorayme
    dorayme, Apr 5, 2006
    #4
  5. gtp1013

    gtp1013 Guest

    My apologies, my "That makes sense." statement was in reference to the
    response about the banner DIV containing an 800px-wide image, which is
    actually larger than the specified 100% width, hence, the banner DIV is
    not flush with the other DIV elements.

    Thanks for the advice about the image size of the MapTech globe. That
    is actually just a "filler" image that I stuck in there so that it the
    space wasn't empty when I presented that particular proposed layout
    design to the rest of the office. Regardless, your advice will be
    applicable to whatever image or image-map that does ultimately end up
    in that space.

    I do have another CSS-based question, which I think is likely just an
    IE issue, but if I view the following...

    http://www.maptech-inc.com/IE_vs_FF.html

    in Internet Explorer 6.0 the larger image (the globe) appears below the
    smaller image on the left, yet in Firefox the tops of each image are
    flush. Is there something that I'm missing that will remove the
    cross-browser difference?
    gtp1013, Apr 5, 2006
    #5
  6. gtp1013 wrote:

    > My apologies, my "That makes sense." statement was in reference


    See this page:
    http://safalra.com/special/googlegroupsreply/
    ....

    > I do have another CSS-based question, which I think is likely just an
    > IE issue, but if I view the following...
    >
    > http://www.maptech-inc.com/IE_vs_FF.html
    >
    > in Internet Explorer 6.0 the larger image (the globe) appears below
    > the smaller image on the left, yet in Firefox the tops of each image
    > are flush. Is there something that I'm missing that will remove the
    > cross-browser difference?


    You have padding set to zero; also set margin to zero.

    ... padding: 0; margin: 0;

    No need for the four zeros when you want to set all sides, and stop
    using the HTML comment tags in the CSS, the <!-- and the -->

    --
    -bts
    -Warning: I brake for lawn deer
    Beauregard T. Shagnasty, Apr 5, 2006
    #6
  7. gtp1013

    gtp1013 Guest

    Beauregard T. Shagnasty wrote:
    > See this page:
    > http://safalra.com/special/googlegroupsreply/


    Thanks! I'm a slow learner sometimes. :)

    > You have padding set to zero; also set margin to zero.
    >
    > ... padding: 0; margin: 0;


    Setting the margin to 0 moves the larger image underneath smaller one.
    Is there a way to have them appear side-by-side in Internet Explorer
    the way that they currently appear in Firefox?

    > No need for the four zeros when you want to set all sides, and stop
    > using the HTML comment tags in the CSS, the <!-- and the -->


    Ah, okay. GoLive CS2 dropped the <!-- and --> in there. I used one of
    their pre-built CSS layouts. I will get rid of them. I didn't really
    know what their purpose was. I think it had something to do with older
    browsers not recognizing the CSS, but I'm not sure.
    gtp1013, Apr 5, 2006
    #7
    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. Eric
    Replies:
    4
    Views:
    697
    clintonG
    Dec 24, 2004
  2. Guybrush Threepwood

    Table-based layout to CSS layout

    Guybrush Threepwood, Jun 6, 2006, in forum: HTML
    Replies:
    20
    Views:
    979
  3. Replies:
    1
    Views:
    561
    John Timney \(MVP\)
    Jun 19, 2006
  4. Habib

    Css-Layout vs Table-Layout

    Habib, Jun 19, 2006, in forum: HTML
    Replies:
    15
    Views:
    984
    Wÿrm
    Jun 20, 2006
  5. Replies:
    29
    Views:
    850
    Ben C
    Mar 21, 2008
Loading...

Share This Page