I have been doing my best to learn css. Taking a course at the college and spending hours on w3schools.

I have a simple site at www.inthedogshouse.ca.

I am having trouble positioning the menu. I currently have it positioned using an absolute value which doesn't work in
most situations. I need to place it close to the "Content" element. That is the area with the text.

If I position in it in any way other than absolute it throws off the centering of the content element.

Here is the positioning code from the css

#content { margin-left: auto; margin-right: auto; max-width: 650px; border: 2px solid #ddd;}
#menu {position:absolute; left:100px; top:225px;}

If someone could steer me in the right direction I would be so happy. It's late. I'm tired. And I don't want to weep like a baby. lol

Alan

Alan,

Have you tried floats. I use these quite often. See my example below:

#nav{float:left; width:250px; height: auto; margin:0 0 0 0;}
#content{float:left; width: 500px; height: auto; margin:0 0 0 0; padding:0 0 0 0;}
#right{float:left; width:200px; height:auto; margin:0 0 0 0;}

Substitute 0 in the margin/padding values for whatever numbers you want. I use the margins to help me control the layout a little more.

This is just one example of many ways to do floats. Try it and see what you think.

I tried floating them and had some problems. Let me ask you a few questions to help me sort it out.

1) Will I have to set the width of the entire page? Using your numbers for an example. Would I give the body element a width of 950px and then float the elements?

2) I will have to set the nav element to a width much greater than the menu. Can I float the element left and align the menu right?

3) Some of the elements have a margin that is a negative (i.e. margin: -100%) I played with those values a little and lost the element altogether. I don't really understand a negative % for a margin. Can you shed a little light for me?

Thanks for your help and time

Well I got it working. Thanks for your help.

I am open to critiques, and criticisms. I am relatively new at coding html/css but I am determined to learn quickly.

Please feel free to give the page and code a view and tell me what you think.

Alan

1. you do not have to set the width for the whole page. I am more of a control freak over my own positioning, which is why I set so many perimeters.

2. Related to your menu - yes, you can do that. In fact, most people do that when positioning their menu. For example, if you want to align right within a div that is already positioned (in our case #nav), then you would set: #nav li{text-align:right;} The whole CSS would be:

#nav{float:left; width:250px; height: auto; margin:0 0 0 0;}
#nav li{text-align:right;}

3. Related to negative margins: I use this method quite a bit. Sometimes, when positioning your elements they don't end up where you want them. For example, in a three column layout I find myself oftentimes, having to set a negative margin to pull my third column back up inline with the rest.

Not sure if you know the four values in the margin so here they are: {margin:top right bottom left}
A negative margin merely moves the element you are trying to position in the opposite position. So if want to pull your right column up with the rest of the content you might see something like this: {margin:-100px 0 0 400px}. The -100 pulls the container up 100pixels.

Hope this helps a little. I am getting tired so I am not sure how cogent this sounds. You are asking good questions though. Let me know if you need anything else.

Dear Alan,

The Coffee Cup HTML Editor includes several multi-column layouts that use floats and strange-looking margin values to produce nice-looking results. You can load one of these and play with it over and over. Making small, incremental changes to things that are known to work sure beats starting from scratch, especially when one is trying to learn something entirely new!

As far as I'm concerned, access to these "canonical form" layout examples (from a company that will stick around to maintain and improve them) was by itself worth what I paid for the Editor. All of the bits are scattered around the Web, but here is the basic kit in one place!

To get at the layouts:

Pick the "File" menu tab;
Pick the "New from Layout ..." selection;
Step through the layout choices until you find one you like;
Click the "Open" button to load your choice into the Editor.

I have a couple of suggestions for improving the layouts, such as including CSS by <link> reference to file(s) rather than on the page, and formatting the dummy text (Lorem ipsum malodorus est!) and the markup to fit more nicely in the edit window's available space, but those are minor issues.

Mess with the markup and CSS to your heart's content with zero risk. If you get lost amidst the changes you've made, you can always discard the page and reload the layout afresh. I did this A LOT when I was starting out.

Once you have your feet beneath you a bit, have a look at the CSS Sticky Footer site at http://www.cssstickyfooter.com/. It is a clever piece of work that I have applied to Coffee Cup fluid layouts to nice effect. If Coffee Cup were to build this into a few of their layouts, it would be helpful, IMHO.

I also suggest you build your site upon a fairly strict document type, such as:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Then take advantage of the Editor's W3C Validator button. The Validator service will report an error that causes bizarre rendering of your page as the browser guesses what you actually intend it to do. To make matters worse, older and newer versions of one browser or another may handle standards violations differently. Avoid this whole mess by ensuring that your work meets current standards.

Yes, the preformatted css templates are a great way to start.

Thank you Eric and Jeff,.

This is by far the best forum I have been on. The Html Editor is so easy and intuitive. Looking forward to getting more CC software.

The layout I am using is a layout that came with the editor.

Your sticky footer looks interesting. I have bookmarked the site and will return when I need it.

Thanks again,

Alan

I am glad you are finding benefit in the forum. That is why it is here.

I must warn you though: exercise caution. For me it started with just the html editor, and now I own all but a couple of the CC software. Its addicting.

Save yourself from the misery (of dragging it out) make the plunge and get the total package!!! Then you can play with it all, anytime you want