New to HTML/CSS. Layout problems.

[gtp1013]

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.

 

[Yukky Korpulent]

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

 

[gtp1013]

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.

 

[dorayme]

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?

 

[gtp1013]

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?

 

[Beauregard T. Shagnasty]

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

 

[gtp1013]

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.