Help please DIV Tags improperly centred..?

HTML & CSS
1

Hello,
while designing my website, I used div tags to contain elements of my website. I have my body, the a container for everything, then a container for everything except the header and footer, and then a container for the content.

So the layout would look something like this.

<body>
       <div id="container">
          <div id="header">
          </div>
            <div id="contentContainer">
              <div id="mainContent">
              </div>
            </div>
          <div id="footer">
          </div>
        </div>
</body>

If you have access to firebug for firefox or google chrome dev tools then one can see the divs and what they contain on my site (http://mysite.com/…)

So when the page is loaded the content (introduction paragraph) seems shifted to the right. In other words, it is as if the div which holds the dock, on the left, the content, and the iceberg.png background, which is identified as “contentContainer” is centered.
This div tag contains more than the container and it seems centered; thus, shifting my content, which is inside it, to the right.

Could someone please help me style my div tags so that only the container which holds the content, id=“mainContent”, is centered. and then if one’s screen resolution is not big enough then one would have to scroll left to see the lifesaver and vertical dock, or right to see the iceberg and flag.
It should make more sense if one visits my site

I hope i made my issue clear and hopefully someone can help me position my content in the centre.
Please repky with any questions, comments, concerns, or explanations, as well as solutions :slight_smile:

Hear from you soon and thanks in advance,
Regards,
Team 1504

2

Also, are the quizzes posted in the CSS forum every few weeks or so? Because I liked them as 1 & 3 were fun, but challenging and I learned some things.

I usually do about one about every six weeks (or more or less depending on what takes my fancy) :slight_smile: I am way for a couple of weeks soon so the next one will be in July.

3

oh cool, i like the link you posted which incorporates Erik J’s method.
I am going to play around with it and get back to you.

I understand that, fixed means fixed, but Ill try to incorporate Erik’s method. And tis true that then adding the dropdown would be quite a task :frowning:
But I am up to the task! :slight_smile:

Also, are the quizzes posted in the CSS forum every few weeks or so? Because I liked them as 1 & 3 were fun, but challenging and I learned some things.

Thanks for all your help & have a wonderful holiday

4

Hi,

If you want the top nav to be fluid then you would need to re-think a little as your example is too rigid.

I would move the nav above all three columns so that it stretched full width and use a method that Erik J suggested in this quiz to spread the nav out.

This is a rough example:

http://www.pmob.co.uk/temp/roundshadow-oneimage-centred-nav.htm

Obviously the styling can be changed but it would be quite a job to get your dropdown working with it although I didn’t look at that.

Alternatively just move the whole nav as it is above all three columns and then the page can be as small as the nav which will be better than it sitting between the two columns.

You can’t have it both ways. If you want a fixed width design then you have to live with a fixed width design. If you want it fluid then design accordingly.

5

Oh okay wow um I don’t mind u being straight to the point; in fact, I know that it may seem harsh but it is shaping me to become a better web designer :slight_smile:

hmm, I completley agree animations and js should never make a site. I love CSS, its just that recently I got a little JavaScript crazy— more like a lot lol

There will be a lot of more content later— right now im trying to designs template.

Hmm regarding the framesets in te header and doctype. I just added the doctype that w3schools said included all HTML tags even though I am not using <frame> or <frameset>

I understand the graphics are too much sorry.
I like designing graphics im sorry. Do u think getting rid of effects and filters do.making the images much smaller and exporting them as GIFs & lower quality JPEGs instead of larger formats

Basically what you digest I do is start from the begining and drawbacks wireframe of the site.
Also using CSS properties like roused corners instead of making rounded corner graphics right?

Finally, could u help me by showing me or telling me some of the goody two shoe animations it JavaScript that I have. Using the Javascript to style is a horrible thing and I understand not to do that. Also the hover event on he lfesver uses large images and JavaScript?

I apologise for being a noob :frowning:

Thanks and I hope u can help me become a more proper designer

Regards,
Team 1504

6

At first I read my last post and i was wondering why I was quoting myself and then I realised and remembered that you edited it :slight_smile:

I am actually reading the code of the view source right now.

But how does opening and closing do anything — wouldn’t I have to resise the viewport as well?

7

whoops I just edited your post instead of replying to it - sorry:blush:

It should make sense though if you read through it.

8

Hmm okay. I think i get it now :slight_smile:

Just open and close the page to see the effect. This is the best solution for most screen sizes.

And also I believe, for now as a temporary fix, u mentioned something about styling #container to have a margin:-700px; which would.push the dock and the lifesaver off the screen right?

Yes see post #4.

Oh but wouldn’t I still have to have a bloody if statement for media query checking if the resolution is small enough to then shove the unnecessary elements on the left of the screen…?!? :mad::mad::frowning:
Pardon my language and frustration please

You could implement that as well but only a few browsers will get it. You could implement it in the hope that mobile will get it but that’s a whole other issue.

I could always use js but there are people and devices that do not support scripting…

As long as it still works in some way without scripting then adding enhancements via script is not an issue.

9

This is the sort of thing I was thinking of.

http://www.pmob.co.uk/temp/roundshadow-oneimage-centred.htm

The whole thing is made by manipulating this image so the center section should never be allowed to be larger than that. It shouldn’t be an issue because at present you are just using a fixed size image of 100px x 450px anyway and the image in the fluid version is 2000x3000px.

You could make it scale forever if you used 8 little image and instead apply repeating top and side images and and four corners to 8 nested (or empty) divs but it does make the html mark up messy.

10

I understand it better now— thanks! However with your example the middle content had a gray background fill. But with mine the white area has a background of an image with a fixed pixel width… so when the container division changes size somehow I would have to have an image with every possible width?

No just create a fluid round corner effect rather than a single image. Your single image version breaks if text is resized anyway and is not really any good for various amounts of text content.

I’m out to watch the football now so back tomorrow :slight_smile:

11

So I understand safari partially and opera fully supports media queries…
For a js solution I’m thinking about writing a script that goes to the horizontal centre on document load.
Detecting viewport size and linking the proper stylesheet correspondingly was my alternative js option

However as a web designer I have learn javascript is not the best solution for various reasons, for some check out wtfjs.com , so I am still playing around with paul’s middle container min & max width method.

What dou guys think, am I on the right path?
If you all or anyone has any ideas, comments, or solutions please reply.

Regards & Respect,
Team 1504

12

So I understand safari partially and opera fully supports media queries…
For a js solution I’m thinking about writing a script that goes to the horizontal centre on document load.
Detecting viewport size and linking the proper stylesheet correspondingly was my alternative js option

However as a web designer I have learn javascript is not the best solution for various reasons, for some check out wtfjs.com , so I am still playing around with paul’s middle container min & max width method.

What dou guys think, am I on the right path?
If you all or anyone has any ideas, comments, or solutions please reply.

Regards & Respect,
Team 1504

13

Okay. Enjoy the world cup— i know I should be cheering for the country im in, but im sure the US will lose…

14

Yes the link us working now :slight_smile:
I understand it better now— thanks! However with your example the middle content had a gray background fill. But with mine the white area has a background of an image with a fixed pixel width… so when the container division changes size somehow I would have to have an image with every possible width?

So just as a review:
A js solution would be a script to scroll to the centre

           A unsupported CSS solution is the media query option— do u happen to know which browsers support it and which don't?

           Another CSS solution not supported by IE6 or IE7 is middle content maximum and minimum width

          For PHP, any clues on if one could use PHP to detect viewport size and dont link a style sheet accordingly.

After doing some research I found this here is false or improper coding. Or that Apple suggests a solution that only works for there browser on the iPhone?

Thank you, I appreciate it :slight_smile:
Hear from you soon,
Team 1504.

15

There is a resolution dependent layout here. I dislike it very much though because when I resize my window I do not want you to move the content around!

I arrange my windows to see the section of content I am interested in and if you then also resize the content with javascript the section I’m interested gets moved somewhere else and is extremely annoying.

Most people do not have their windows maxmised and in fact I never do and indeed on my 27" imac it would be very hard to view a site that way. Therefore basing your page on a users resolution is nonsense. I am constantly opening and closing the window every minute as I have multiple programs and browsers running and like to see them all.

The media queries could be used but are poorly supported so won’t really be much use yet.

In my opinion your best option is to create the middle content section with a min and max width so that it expands and collapses as the window is opened and then you will cater for most browsers with no extra work at all. (IE6 doesn’t understand min and max widths but you could just let it have a fluid margin-right and margin-left width or use an expression to mimic min-width.)

16

[QUOTE=team1504;4615924]hmm so are media queries not supported widley by most browsers ?

no

And im sorry if this makes me sound stupid Paul but it sounds good but could you explain this some more:
your last paragraph in your last post regarding Max & min widths for middle section— im just having some problems understanding it. :slight_smile:
Also the link u posted (mimic-min-width) seemed to be broken…

It seems to be working for me - are you still having trouble with it?

If you can see it then open the window and see how the middle section expands and contracts to a max and min width allowing it to be viewed in different sized browsers easily.

What I was suggesting for you is that you do much the same and make the round white content box in the middle of your page shrink and grow as the window is opened and closed. That way you won’t need to move the left and right elements as they will still fit reasonably well on smaller screens because the middle white round box will be narrower.:slight_smile:

17

ah okay
the wall of monitors seems is interesting. :smiley: 20,000 pixels… nice

Felgall, does that mean that something like this that I found by searching screen resolution change css

I found this link to this site, where I found this:
@import ‘main_styles.css’;
@media screen and (min-width: 800px) {
@import ‘thicker_sidebar.css’;
}

So is the above fake code then or is it possible?

I know this is not the javascript forums but is there some js we could come with that uses if statements to detect the screen or viewport size and then link a CSS stylesheet.

Thanks for all your help Felgall

18

A user’s screen resolution has no more relevance to how web pages are displayed than what they ate for breakfast. The browser viewport size is completely different from their screen resolution - usually slightly or a lot smaller but sometimes bigger if they have multiple monitors.

I once knew someone who had monitors all the way down their hallway and had the browser open across all of then (about 20000 pixels wide) to display an extra long stock market ticker. The screen resolution was only a small fraction of the browser width. The other alternative of having a screen say 2000 wide and the browser viewport say 950 wide is far more common.

Of course in all cases setting up the stylesheet based on the browser viewport size is trivial since you just specify the width as a percentage (eg. 100%).

19

hmm so are media queries not supported widley by most browsers ?

And im sorry if this makes me sound stupid Paul but it sounds good but could you explain this some more:
your last paragraph in your last post regarding Max & min widths for middle section— im just having some problems understanding it. :slight_smile:
Also the link u posted (mimic-min-width) seemed to be broken…

Hear from you soon and always thanks for all your help,
Team 1504

20

hello,
hmm the code from the CSS quiz works well, but it unfortunately is not what I was looking for exactly. I coded a slight variation of that in an older version of my site tho…

currently, I am working with the js code to see if there is another method that works in most browsers or if there is a jQuery substitute and jQuery usually works most everywhere.

Regarding, CSS, I have heard this, but I was wondering if you knew any way of possible achieving or approaching this: Having a stylesheet selected based on screen resolution.
As one can have a stylesheet for certain devices, could I have a specific stylesheet for certain resolutions and one for everything else.
So that if the user is using a smaller resolution, the styling for the page would come from a style sheet written for smaller resolutions…
I hope this is possible and please reply if I have not made what I think is possible, but do not know how to , clear… :slight_smile:
That is having a stylesheet for resolutions @1024 X 768 or below selected if the conidition is met or a default stylesheet for all resolutions greater than 1024 X 768

Thanks in advance

                 Regards,
                              Team 1504