SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Dec 2006
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    positioning and microformats and...I'm lost

    I'm still new to CSS, and I have to do a portfolio site for a class. I just bought Transcending CSS by Andy Clarke and in reading it I realized I did everything wrong before -- used too many divs, floats instead of positioning, too many IDs and classes, etc. So I am trying to do it the right way...and I'm lost and frustrated. I've embraced microformats but now I'm not sure what selectors/combinations of selectors to use...

    HTML Code:
    <div id="content">
    <p>Riveting position statement goes here. How wunnerful, wunnerful.</p>
    <h2 id="content_header">Portfolio Topics</h2>
    <ul id="content_items">
    <li id="content_words"><h3><a href="#">Words [wurds]</a></h2>
    <p>Something pithy </p>
    </li>
    <li id="content_graphics"><h3><a href="#">Graphics [graf<em>-iks</em>]</a></h2>
    
    <p>Something pithier</p>
    </li>
    <li id="content_motion"><h3><a href="#">Motion Graphics [moh<em>-sh<span style="font-style:italic;">uh</span> n</em> graf<em>-iks</em>]</a></h2>
    <p>Something even pithier</p>
    </li>
    </ul>
    
    </div>
    #content {
    position: relative;
    z-index: 5;
    height: 500px;
    /*margin: 0 5px 0 5px;*/
    }

    #content p {
    position: absolute;
    margin: 0;
    top: 35px;
    left: 50px;
    }

    #content h2 {
    position: absolute;
    text-indent:-9999px;
    }

    ul#content_items {
    position: absolute;
    margin: 0;
    top: 70px;
    left: 100px;
    width: 600px;
    height: 400px;
    }

    The first p is where I want it to be, but the Ps that are inside the li inside the ul are all on top of each other, 70px by 100px from the first p, instead of under the h3 where they belong...I've tried every combination I can think of, but I can't seem to fix it.

    describe.org/projects/site

  2. #2
    SitePoint Addict
    Join Date
    Apr 2001
    Location
    Devon, UK
    Posts
    333
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Concentrate on your HTML first, and don't worry too much about microformats unless it's for something like an hCard in your page. I don't think you should have an <h3> as a child of an <li> for example.

    Finally, reduce the number of IDs and classes to a minimum. You shouldn't need that many.

  3. #3
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by warrior rabbit View Post
    I just bought Transcending CSS by Andy Clarke and in reading it I realized I did everything wrong before -- used floats instead of positioning...
    Bear in mind that there is more than one way to skin a cat - the approach that Andy advocates in that book (absolute positioning and Shaun Inman's JS-based clearing technique) is only one way to create a layout, and may not be the best way for you. There's nothing wrong with using floats - in fact I'd go as far as saying that I think Andy's technique here is not best practice.

  4. #4
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Interesting.. I haven't seen markup quote like this before. I'm guessing the naming convention of the id's are where the microformats come in..

    I'd use a definition list if it were me
    Code:
    <div id="content">
      <p>Riveting position statement goes here. How wunnerful, wunnerful.</p>
      <h2>Portfolio Topics</h2>
      <dl>
        <dt>
          <h3><a href="#">Words [wurds]</a></h3>
        </dt>
        <dd>
          <p>Something pithy</p>
        </dd>
        <dt>
          <h3><a href="#">Graphics [graf<em>-iks</em>]</a></h3>
        </dt>
        <dd>
          <p>Something pithier</p>
        </dd>
        <dt>
        <dt>
          <h3><a href="#">Motion Graphics [moh<em>-sh<span style="font-style:italic;">uh</span> n</em> graf<em>-iks</em>]</a></h3>
        </dt>
        <dd>
          <p>Something even pithier</p>
        </dd>
      </dl>
    </div>
    It's basically the same markup you have as before - only now you have a semantic link between the paragraphs and their headings.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •