Right now as you can see the divs are overlapping. I want the content to be centered and the menu to the left of it but not flush with the side of the page. I will be using the menu on several of the pages, so I want it to appear in the same spot on each page.

abduraooft

11-21-2008, 04:58 PM

Drop the absolute positions and apply float to one of your column. Have a look at http://bonrouge.com/2c-hf-fluid(r).php

Ahhh! This is frustrating. I fix one issue and another is created. Flip back and forth between the index and contacts. Both are still not aligning properly.

Avril

11-24-2008, 05:38 PM

The body is like a "wall" on which you place your frame (wrapper - I've given it a width of 750px and height of 600px but you can change these). Within the wrapper are the three divs: header, leftpane and rightpane. The "header" is the full width of the wrapper with the logo centred. The "leftpane" is floated left, "clear: right" to make place for the "rightpane". The rightpane has been given a padding so that the content does not stay flush against the margins.

I am a bit confused, hence the long explanation - do you want the left content to align with the right content? Then add a padding to the left div as well and subtract it from the width and height.

Stryker412

11-24-2008, 06:58 PM

The body is like a "wall" on which you place your frame (wrapper - I've given it a width of 750px and height of 600px but you can change these). Within the wrapper are the three divs: header, leftpane and rightpane. The "header" is the full width of the wrapper with the logo centred. The "leftpane" is floated left, "clear: right" to make place for the "rightpane". The rightpane has been given a padding so that the content does not stay flush against the margins.

I am a bit confused, hence the long explanation - do you want the left content to align with the right content? Then add a padding to the left div as well and subtract it from the width and height.

Here is my last project but it was done using HTML alignment not CSS. This is how I want my final project to look in regards to alignment.

http://users.ettc.net/mait119/activity2/

The menu is in the same place one each page and the content area is centered on the banner.

For my final project, I have the CSS just how you all have suggested yet I'm still having major alignment issues. Also, if you click on the Contacts link it is way out of wack.

Rowsdower!

11-24-2008, 09:14 PM

So should I delete the body portion? I thought that was needed to get IE to align properly?

Edit: I used your code and it did move the page content better but I need the page content to be more or less centered under the logo graphic. How can I do that?

So were we close with my code? What exactly needed to be different with the code I provided? One major issue with centering the text under your logo is that your logo was page-centered (as opposed to the div centering the content takes on) which means after adding a left-side navigation panel the content is all centered further to the right than page center. In other words, your logo would always appear to the left of the content center. To fix that, just plop the image into the wrapper <div> and be done with it.

Also, your wrapper div should go AFTER your navmenu div. Putting the navmenu inside of the wrapper defeats the purpose.

Make all of this validate if it doesn't already and you should be good to go. On my IE7 (for what that's worth) this seems like it gives exactly the same performance as your Steeler's page.

Is this what you're looking for?

Stryker412

11-24-2008, 09:47 PM

So were we close with my code? What exactly needed to be different with the code I provided? One major issue with centering the text under your logo is that your logo was page-centered (as opposed to the div centering the content takes on) which means after adding a left-side navigation panel the content is all centered further to the right than page center. In other words, your logo would always appear to the left of the content center. To fix that, just plop the image into the wrapper <div> and be done with it.

Also, your wrapper div should go AFTER your navmenu div. Putting the navmenu inside of the wrapper defeats the purpose.

Make all of this validate if it doesn't already and you should be good to go. On my IE7 (for what that's worth) this seems like it gives exactly the same performance as your Steeler's page.

Is this what you're looking for?

YES!!! That's what I wanted. One small change is that I'd like the menu and pagecontent to come closer to each other. The menu is too far to the left of the page and the page content looks slightly to the right of center.

Stryker412

11-25-2008, 07:54 PM

I was able to get a few more pages finished (meetings and about us), does anyone have ideas on how I can move the menu over to the right a little more?

Rowsdower!

11-25-2008, 07:57 PM

YES!!! That's what I wanted. One small change is that I'd like the menu and pagecontent to come closer to each other. The menu is too far to the left of the page and the page content looks slightly to the right of center.
Hmm, well I think we're talking in circles around one another here. Let me try to clarify what we are talking about (or else expose my misunderstanding of it).

As for the gap between content and the menu...

If you add some text (and change the font color to a color other than black) you can see that the content actually doesn't pull away from the menu. Since your image is centered (as opposed to left-justified) and is a fixed width it necessarily moves away from the menu as the screen size gets bigger. If you are intent upon having that image fill the entire content area then you can rewrite your java code like so:

This could make some of your images a little unsightly but it will eliminate any gap with the menu.

As for the center alignment of the content on screen...

Well, as I said, the content WILL be to the right of center (by 122 px in fact) because you have a left-hand navigation pushing everything that way. Your content will be center aligned to the wrapper <div>, but since the wrapper <div> is bumped over to the right of the page-center by the menu... You get the idea.

The only way I know of to center the content on page-center again without wrapping the content under the bottom of the menu would be to add padding (equal to the menu width of 244px) to the right-hand side of the wrapper <div>. You can do that, but again, you'll have to have your images resize with the window (as above). If you don't resize with the window after adding this padding your images will be off-center when the window size gets down to a certain width on-screen. For instance, at my resolution your existing image breaks that alignment when I add right hand padding to the wrapper because the image is bigger than the wrapper <div>'s total width.

Instead let me have you try this to see if this is what you're after:

Move your header inside the wrapper <div>. You don't need to change any code, just make the adjustment in the HTML. After you have done that, make the changes in bold red text below into the css sheet from my last post:

#navmenu {
float: left;
width: 244px;
height: 100%;
border: 2px solid blue;
padding-top:300px;
}
If 300px pushes the menu further down than you would like you can fiddle with it until the distance from the top looks right.

Try one, the other, or both of these changes together (or pad the wrapper div by 244px) and let me know if any of this is what you're after.

Rowsdower!

11-25-2008, 08:08 PM

Also, FYI your conjunction image (VenusandJupiterConjunction3.jpg) isn't loading properly. Check your external url for that one as it may have moved.

Stryker412

11-25-2008, 08:39 PM

Doesn't the wrapper tag start after the header and end before the /html tag?

Avril

11-26-2008, 05:19 AM

Could you post your code?

Rowsdower!

11-26-2008, 03:03 PM

Doesn't the wrapper tag start after the header and end before the /html tag?

It depends on what you're going for, but I usually use a pretty traditional setup with a header, left navigation, and a footer. Call it boring if you like, but it works. I usually place the code in order like so:

DOC TYPE...
<html>
<head>
</head>
<body>
<div id="header">
Header stuff goes in here...
</div>
<div id="main">
<div id="menu">
Menu stuff goes in here... Menu div is styled to float left
</div>
<div id="wrapper">
Content goes in here... Wrapper div does not have float or position, so it just fits itself in to the right of the menu
</div>
</div>
<div id="footer">
Footer stuff goes in here...
</div>
</body>
</html>
It gives an appearance like this:

This works fine for me since I am not trying to center a logo in my header. Since you are trying to center a logo, I am just recommending that you put the header into the wrapper so that it will be centered along the same axis as your content. Like this:

I have to say I am still a little confused about what you are trying to accomplish so please let me know if I have things wrong.

@ Avril: his site is here: http://users.ettc.net/mait119/final/

Stryker412

11-26-2008, 03:21 PM

Your second example is basically what I am trying to do. However I'd like to cater to those who user lower resolutions so I thought moving the content in on both sides might be best, similar to how SDTV looks on an HDTV (ie. bars on the sides).

Also, running into a small issue with the navmenu height. If you click on about us or meeting info you'll see what I mean. The main content starts to move into the nav area once the height of the menu has been reached.

Rowsdower!

11-26-2008, 04:17 PM

Your "aboutus" page does not use the wrapper div. If you add
<div id="wrapper"> just before your
<div id="info"> section and then close your wrapper div (using </div> of course) just after
<center><p>"THANK YOU FOR YOUR SUPPORT"</p></center> you should be fixed up as far as that goes.

I haven't checked your other page but I would suspect the same issue is at play there as well.

Stryker412

11-26-2008, 05:28 PM

I put the wrapper in there on both pages and it works fine in IE but not FF.

P.S. It works on Safari and FireFox and most probably needs a separate stylesheet for IE.

I used your CSS code, and these are the results:

http://users.ettc.net/mait119/final/newsindex.html

Stryker412

12-02-2008, 02:41 PM

I have one small lingering issue. The content from the right column if longer than the navmenu will move under it.

http://users.ettc.net/mait119/final/

Click the about us link, and you'll see what I mean.

Rowsdower!

12-02-2008, 02:48 PM

I have one small lingering issue. The content from the right column if longer than the navmenu will move under it.

http://users.ettc.net/mait119/final/

Click the about us link, and you'll see what I mean.

Use this in to your "#info" style in your CSS:

margin-left: <insert menu width here>px;

I think that should do it... Works in IE7 and FF.

Stryker412

12-02-2008, 03:14 PM

Use this in to your "#info" style in your CSS:

margin-left: <insert menu width here>px;

I think that should do it... Works in IE7 and FF.

That worked great thanks! One more simple thing I noticed since I wasn't testing on IE. On the contacts page I have a break in between each name to space them out, but on IE the breaks are not being used. Why is that?

Rowsdower!

12-02-2008, 03:25 PM

Hey Stryker, hang around here long enough and somebody will throw these eggs at you sooner or later (unless you learn by example as I have):

1) Never use tables for layout - tables are only meant for data tables, not graphical layout.
2) Never use <br> for vertical spacing - it is meant only to end text wrapping.

What you are seeing here I believe is a consequence of the second point above. I don't think the <dt> element breaks its own line for text wrapping (at least maybe not in all browsers) so your <br> is not vertically spacing as you had hoped in IE. This much is just my guess.

What I know is, if you add some padding to your <dt> elements in your style sheet (say 4px or so to the bottom of each <dt>) and get rid of those <br>'s you should be in good shape. Give it a try and let me know if it doesn't work out.

Stryker412

12-02-2008, 04:00 PM

I was able to get it to work by adding:

dt {
margin-bottom: 1.4em;

}

My question is, why didn't it work when I added .info dt or #info dt?

abduraooft

12-02-2008, 04:24 PM

I was able to get it to work by adding:

dt {
margin-bottom: 1.4em;

}

My question is, why didn't it work when I added .info dt or #info dt?Because, in that page (http://users.ettc.net/mait119/final/contacts.html), there is no container element having an id or class value of info

Stryker412

12-02-2008, 04:39 PM

Because, in that page (http://users.ettc.net/mait119/final/contacts.html), there is no container element having an id or class value of info

Ok I see, sorry about that. So if I had a CSS style that I wanted to apply to one page's element but not necessarily all of the other pages, how would I do that?

jerry62704

12-02-2008, 04:49 PM

1. Use a unique tag ID for the specific page.
2. Use a unique css style on that page.
3. Use a style at the header of that page.

Say you wanted <p> on page z to be different from pages a-y. Have a ID on there ("pagez" for example):

#pagez p {some stuff}

with a <div id="pagez"> only on that page as a wrapper of the stuff you want unique.

Or have a unique style sheet with that specific stuff and include it in only that page: