Search the site:

Browse by category:

This article's comments feed.

css confoozled

May 23, 08:12 PM · from the mouth of Jim

Oh great Yakipoo,

I’m perplexed… how are you making your #container sit in the middle of the browser? And maybe this is part of the answer, but why do you have it relatively positioned with left and right auto margins (why relative positioning at all?) I’m still purty green in css and I’m trying to get a center container like you’ve done here, but the only way I can figure out to do it is to do a text-align center in the body, but that’s ugly cuz you have to un-inherit it later. So, logically, I decided to try to steal code from you, but I’m a terrible thief! :)

Any help would be appreciated. I learned more about css this last weekend than I ever thought possible, but it sucked my intelligence out my nose.

Dude… the visual model requires drugs to understand… relative positioning, float, normal flow, etc. have my brain aching so badly. The page that I’m designing is kicking my butt. Theory has it that if your content is structured properly, then normal flow should work for you – but it’s killing me.

Anyway… ramble… moo? Much appreciated, the help is. (awwww crap, episode 3 influenced me.)

Love,
Jim

 

Comment [8]

  1. Jim responds with:

    K – so something was just odd with my test run and it worked fine last night when I sat down to design our new and improved Under Construction page.

    I’m still tripping on some of the content flow and float rules, but I think I’m beginning to get a tolerable grasp on CSS. The page’s html, as it is right now, won’t validate since I’m using a strict dtd and I’ve apparently broken a rule with one of my spans… but it renderes Ok on every browser I’ve checked so far, so I’ll try to fix it tonight (the css validates, so maybe that’s why it wurks.)

    Girls with Macs – can you check our page out with Safari and see if it looks like dooky? I don’t have access to any evil ‘puters. ;)

    Thanks – and this is a work in progress… We’ll be adding some more quick content (like the pdf of our brochure and pricing sheet) to it through the week so that we can have a tiny bit of a useful web presence until I am done with the full site. Someday I hope that we will be making enough money to start paying people like Yakipoo and TyTy to save me this type of suffering, but for now, this price is right and I’ll keep hacking… :) I guess I’m expanding my brain or something.

    ::hacks up a hairball and shudders::

    Love,
    Jimmyboy
    · May 24, 12:46 PM
  2. jake responds with:

    Hmm… I’ll try to explain without going too overboard.

    The worst part is that over the years tweaks and rewrites have muffled everything. It’s difficult to find a “best practices” version usually.

    Auto-Margin

    Basically there are two primary methods for centering content. The first is what we have here. It’s fairly simple and only works horizontally. It’s auto margins.

    You start by creating a wrapper element. As you’ve already figured out #container does that here. Then we style it.

    html, body {
    	text-align: center;
    }
    
    #container {
    	width: 400px;
    	margin: 0 auto;
    	text-align: left;
    }

    And then just add in the correct simple html.

    <body>
    <div id="container">
    	<div id="content">
    		<p>Lorem ipsum dolor 
    		sit amet, consectetuer dipiscing elit. 
    		Vestibulum risus massa, interdum ac,
    		 consectetuer vitae, ultricies in, wisi. 
    		Fusce pharetra massa id metus. 
    		Vivamus venenatis, eros non facilisis 
    		pharetra, lorem metus vestibulum 
    		massa, in venenatis lacus mi a arcu. 
    		Mauris ornare, dui ac scelerisque 
    		rutrum, urna quam tempor arcu, 
    		vitae lobortis tortor turpis et lorem. 
    		Quisque lobortis mollis turpis. 
    		Pellentesque habitant morbi tristique 
    		senectus et netus et malesuada 
    		fames ac turpis egestas. Nunc 
    		ligula neque, varius vitae, adipiscing 
    		id, placerat vel, magna.</p>
    	</div>
    </div>
    </body>

    Negative Margin

    The other method is a little trickier but it works both horizontally and vertically if you do it right.

    html, body {
    	
    }
    
    #container {
    	position: relative;
    	width: 100%;
    }
    
    #content {
    	position: absolute;
    	width: 400px;
    	left: 50%;
    	margin-left: -200px;
    }

    This works with the same html…

    The big part of this is the relative position. It’s not quite related to what I’m doing with relative position. Basically when you give something a relative position anything contained inside of it can be positioned “relative” to the containers box. So when you say, top: 40; left: 100; it positions it those values within the container instead of the browser window.

    CSS can be a pain to figure out when you’ve learned other methods, but it has a lot of benefits.

    Floating is a whole other can of worms I can cover at a later date if you need.


    · May 24, 01:07 PM
  3. jake responds with:

    Darn you, after I wrote that whole thing up… well let me know if you can’t figure something else out and I’ll try to help.
    · May 24, 01:18 PM
  4. Jim responds with:

    No no no!!! You didn’t waste any time dude. I seriously don’t know how I got it to work! :) Seriously, every time I try a test document, it doesn’t work, yet the one I created last night does! It’s like css elves sprinkled magic dust on my design last night.

    Would you have a second to take a quick looksy at my page and see if you can figure out why it works?

    And don’t feel obligated… it’s just that every time I think I understand, some wrench goes and jams up the gears. My head hurts…
    · May 24, 01:58 PM
  5. Jim responds with:

    And not that it wouldn’t take you two seconds to get at my css, here’s a quick link to it.
    · May 24, 02:05 PM
  6. Jim responds with:

    oy – this is what happens when i can’t resolve a problem; i obsess.

    let’s hear it for working at work. ;)

    i figured out why my test wasn’t working. (i thought that my test was identical to the page – same content, etc. blah blah blah.) i was wrong. when i was pecking out the quick test page, i never declared my DTD. apparently this will make or break it for IE.

    i was doing a side by side vimdiff of my test page and the one i created last night (that works) and was making them identical when i finally thought to myself, “k, well, the only thing left diff. between them is the lack of a DTD.”

    BAM! it works in test now.

    so, at least i have some consistency and can stop obsessing. between what you wrote and reading more in the visual formatting details section of the CSS spec., i think i’m getting a better grasp of how the relative positioning works to create a centered container.

    blah. can i just say that a LOT has changed since ‘97? :)

    Jimmyboy
    · May 24, 03:19 PM
  7. jake responds with:

    Basically the margins are how it’s working as best I can tell. Ya know, I actually thought of that whole doc-type thing, but I forgot to actually mention it in my post. I’d say mimic what I have on these pages “for best results” and a good idea is to declare UTF-8 for the content. It’s a little more universal than the Windows English one.

    Both of those together have been working well for me, the only gotcha is making sure your documents are also UTF-8. I actually had a script that was supposed to encode all the weird characters, like — (em dashes) or · (Interpuncts). It wasn’t working because I had the page declared UTF-8 and the actual file was ISO-8859-1. It’s getting late, was there anything else? Did I miss something I should have answered?
    · May 25, 01:09 AM
  8. Tyler responds with:

    Duh, you guys are smarter than me.

    I tried to learn a little about CSS a while ago, and it only confused me. All hail Yimmy and Iacky.
    · May 25, 11:49 AM
Name
E-mail
http://
Message
  Textile Help
 
 

More Goofiness.