Grow your CSS skills. Land your dream job.

Grid?

  • # December 2, 2010 at 2:56 pm

    how do you set up a website with grid structure?

    like sure i know how to do the photoshop mockup. but to actuially implement it, i dont know how, i think thats the real reason im havingproblems with my site.

    http://attilahajzer.pcriot.com/

    because everything is being floated. instead of grid like (im assuming) this website.

    anyone wanna help me out on this one?

    # December 2, 2010 at 8:14 pm

    A grid typically will have a set width for a website, and then columns that include margins built into them. you can apply the grid like so:


    What this does is create a generic “content” and “sidebar”. A grid the width of 8 columns, another the width of 12, and a total of 12 columns wide. This markup is based on http://960.gs/ by Nathan Smith, I recommend checking it out. It can help a lot if you are in a hurry!

    # December 2, 2010 at 9:59 pm

    and how about for wordpress. im thinking omg i have to declare / start and end the div multiple times because of the posts, pages, etc. know whati mean? so with wordpress it can get a lot tougher.

    and so im assuming Position:absolute is a no no

    # December 2, 2010 at 10:07 pm

    I would assume so, I am by all means no wordpress pro though, I have barely touched any kind of CMS, most of the sites I design have no need for it. But I have more recently started to look into it. But it is more about setting up the css with the grid markup and then using those selectors in your normal code to align it the way you want it to. Again, I am not very savvy with WordPress, that could be a different beast entirely.

    # December 2, 2010 at 11:34 pm

    Don’t think about WordPress as an obstacle. I recommend everyone develop HTML Templates that are fully functional and tested before converting them over to WordPress Templates.

    If you can do it in a static site, you can do it in WordPress.

    # December 2, 2010 at 11:46 pm

    its what im trying :)

    while your here, im having trouble with my jQuery on this site:

    http://intricatetattoodesigns.pcriot.com/






    i dont know weather to put it in header or footer, ive tried a lot! putting it in seperate folder root directory, changing the extention, putting them in header, footer, BOTH, but it just doesn’t seem to work!

    # December 3, 2010 at 12:50 am

    Have you tried using an updated Google API instead? I see that you are using the 1.3 library, a more current and stable version is 1.4.4 or 1.4 if you prefer not to use that cache.

    # December 3, 2010 at 1:17 am

    are you supposed to put it in the header? or footer?

    # December 3, 2010 at 5:37 pm

    You really need to validate your site, you have some issues.

    # December 3, 2010 at 6:43 pm

    do i really? i honestly havn’t even checked it yet. let me do that now.

    # December 3, 2010 at 6:59 pm

    hey, so i just checked that out, there was some errors,

    the only css errors and / warnings that were present were the border-radius, and then web hacks for it.

    the HTML ones were because of the different pages like sidebar.and im still changing an ID to Class.

    and also i had a Centertag in there just for a reminder that ive got to do it in CSS. so thanks!

    is there a way around the moz- border raduis hacks? (without images). OTHER then JQuery, cause i can’t seem to Impliment my jquery in wordpress, it just wont work. im not sure if its supposed to go in Head, or footer.

    # December 3, 2010 at 8:00 pm

    Not that I know of, those are the two best ways. And images inside of a div would be the alternative old way of doing this for IE and older browsers. I would continue trying, it should work in wordpress if it can work in HTML, just a different way of marking it up.

    # December 3, 2010 at 8:03 pm

    Keep using the border-radius. No point in overloading the site with JS or images to make rounded corners work. Some users that choose to use older versions of IE will see squared corners, such is life.

    # December 3, 2010 at 8:07 pm

    I agree with doc, not everything has to look the same in every single browser. If they choose not to update to a more modern browser, so be it.

Viewing 15 posts - 1 through 15 (of 15 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".