Re:Centering Stuff with CSS

I'm still learning CSS. All of my content is sliding off the page. I'd like all the type and buttons to sit on top of the lace bubble in the center of the box. The navigation's javascript toggles the opacity of the different sections and it requires each div to carry an id that corresponds to it's section. I'd appreciate any suggestions or help.

www.chuckmcquilkin.com/chuckmcquilkin.com/CleanIndex.html

Hi and welcome. Interesting design. Do you have a jpeg mockup of what you're trying to do you can post? I think that would help me understand what's it's all supposed to look like!

Basically though, I think you need to get all of your content area in a single div. Give that div a width that's thinner then the shoe lace area. Next assign margin-left and margin-right as "auto" like:



The "auto" property is what centers it, but you'll also need to specify a width that's thinner then the container's width. You can assign this class to each "page" and have the javascript still work by the way. A div can have both an Id and a class(es) assigned to it.

p.s. it's a neat design, just be aware that because of the background image you're making it so each page has a fixed height. But what if you need to add more content to a page in the future (like when your portfolio gets long

Hi Jason, thanks for getting back to me. Here's a jpeg of what I'm after. I'm kind of stuck because margin 0 auto is where I am right now. I'm trying to attach a couple of jpegs. Right now the lace is a background image on the main div and the different sections are separate divs grouped along with the background div. I'll try putting the contents of each section in a single div but I don't think I'll have any control over how the pieces are organized. Do you have any advice on how to arrange the content like it appears in the jpegs? Thanks.

Here's a couple more images. Thanks!

First jpeg.

No problem. Well, these types of more complicated layout issues (not to mention with a tricky javacript animation) tend to be a little hard to explain over a forum, especially if you aren't already really familiar with basic html and css.

At this point I highly recommend at least going through the w3schools tutorials (start with HTML then CSS): www.w3schools.com/

I mean I'm a big fan of just diving into things but as it turns out, with web development it's actually quite tricky if you aren't familiar with the basics and general theory of it (which you can't really get by diving in). That doesn't mean you don't still have to dive in... and of course the challenges never end...

I should mention that I now see two problems with your design. One that already pointed out, the design has no vertical flexibility. You could always add scroll bars, but the website will appear tiny on larger screens. Probably a bigger issue (unless you don't care about IE6, I do but some don't anymore) is the transparent PNG. It's not going to be transparent on that browser or older.

So moving ahead, after using Firebug to look more closely at your code, my suggestion once again is to put all of your content for each "page" into a single DIV. By content I mean all of the text and accompanying graphics (not background) from each "page". Right now you have multiple divs but you only need one (per page) unless the page has a tricky layout. And now I'm thinking an absolute div would be a lot easier. So make it absolute...

position: absolute;

You don't actually need to "center" it. Just give it a width that's no bigger than the inside of the shoelace area (a little thinner for breathing room). To give the illusion of it being centered, you would use the "left" and "top" properties like:

.content {
position: absolute;
width: 350px;
height: 350px;
left: 40px;
top: 60px;
overflow: auto; (this last one will add the scrollbars if (only if) needed.
}

Lastly, you'd need to assign position: relative; to the parent div (the one that has the background). Position: relative will make the top left of the background be the "zero point" or the starting point for the content (absolute) div (otherwise it would start from the top-left of the screen).

As far as the animation, I'm not sure I understand what you're trying to do so that's going to a tougher thing to help with. But my instructions shouldn't mess it up.

Let me know if you can get it to work!

Jason

I have gotten it to work: chuckmcquilkin.com/chuckmcquilkin.com/NewIndex1.php

Unfortunately some things, the contact button at the bottom, is positioned too low in Safari...but I have a couple of other issues that are aren't positioning related. For some reason it opens on "contact" instead of "about", and if you click contact twice it triggers the twitter button, for some reason the button's target area is huge.

I'd appreciate any help/advice/pointers you could give me!

Thanks!

Chuck

Hi there, I see some progress being made over at chuckmcquilkin.com/chuckmcquilkin.com/pixelTest2.php ...

Well, because of the complexities of the 2-3 jquery plugins you've got going, this is definitely out of scope of an easy advice session here at the forum.

First thing I notice is that background from the shoelace kind of pops around, a bit ungraceful I think you'd agree. That might be fixed by making some adjustments to the markup and css. I'd suggest trying to make the #content div (the main container for all the pages) the absolute div. Either that, or get rid of it (is it really needed?). It's hard for me to trouble shoot this without spending a good deal of time with a working copy.

Another tip: you can make conditional comments for different browsers. I recommend always optimizing for a standards compliant browser first like Firefox or Safari. Once it's working well in that browser, you can make a conditional style sheet for IE versions. That said, you have some problems that we can't just blame on IE... these should probably be solved.

About your emailed questions, I think we are going to have to go to a tutoring session for this. I'm happy to help here for the smaller stuff, but getting the site done probably needs a good amount of help. Go ahead and shoot me another email or call if you're interested.

Thanks,

Jason

Here's a decent link to learn about conditional comments for IE: www.quirksmode.org/css/condcom.html.

This page doesn't mention it, but you can also put a link to a separate style sheet within a conditional comment. That way, you are linking rather than embedding the css (usually the way to go).

I've got something that works and I'm happy with it. There are just one detail I'd like to fix.

Here's the latest version: chuckmcquilkin.com/chuckmcquilkin.com/gb...3/gbcf-v3/index1.php

If you mouse over the first work button (AICP), the tool tip that pops up is missing the sides, any idea why? Here's an example of it working in a separate file:

chuckmcquilkin.com/chuckmcquilkin.com/coda-bubble1.html

Thanks in advance!

Hi, I had a chance to see a bit ago... but now the links are down and I can't dig in

Looked great by the way! Much better use of screen real estate now. I hope the site gives you some good business.

Let me know if you get it back up and still need some help.

Jason

Thanks. It's up on the root now: www.chuckmcquilkin.com/

The tool-tip is the only issue with firefox, with IE the tail of the twitter bubble falls down a bit. Any idea why?

Thanks.

Try changing the tool tips themselves to divs instead of tables. Therein lies the problem... Some css attributes don't work on tables as you would expect. Once you turn it into divs, make sure the width is set to allow enough room for the full background image.

By the way it doesn't look right on either Firefox or IE7 on PC...

Actually, there are some big issues with the whole site and IE7 on PC. Some of the pages are running into each other and forming columns. You'll really need a PC to do accurate testing, but my guess is that you need clearing divs after each "page's" float. That might fix the main problem. On the twitter bubble, try assigning a width.

Hope that helps...

Here's a screen shot of one of the pages in IE7:

It works. I'm happy with it. Thanks for your help!