SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Nov 2010
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS <ol> grid help

    Hi all, I am attempting to make a link grid with minimal mark-up and I am not sure if what I am trying to do can be done without mucking up the code with lots of nested elements (plus this is going in a CMS).

    I could use a table but I wanted to see if anyone here had any idea's before I go adding nested unordered lists (ugly!!) or tables (not semantically correct :\ ??). The requirements are IE7+ and all the others from the same era. So the less css2+ psudo classes etc. the better unless you know of some really really good javascript plugins.

    This is what it should look like:

    Code:
                               0px
    ol___________________________|______
    | ____________       ______________ |
    ||            |     |              ||
    || First LI   | 6px |  second LI   ||--0px
    ||____________|     |______________||
    |    6px                            | 
    |                                   |
    | ____________       ______________ |
    ||            |     |              ||
    || third LI   | 6px |  fourth LI   ||
    ||____________|     |______________||
    |   etc.....                        |
    |___________________________________|
                                 |
                                0px
    (this form isn't very ascii friendly so I wrapped it in a code bracket, hope it comes out right! )

    This is as close as I can get.. but I wish I could get the margins to collapse and it does not work in IE7 anyway.

    Code:
    /* also using eric meyer's rest styles */
    
    .summery_sublinks li{
    	display: inline-block;
    	margin:6px;
    }
    
    .summery_sublinks a{
    	display: table-cell;
    	vertical-align: middle;
    	width: 124px;
    	height:39px;
    	text-align:center;
    	background-color:#72c6a1;
    	color:#fff;
    	font-size: 14px;
    	text-decoration:none;
    }
    
    
    
    
    <ol class="secondary_nav">
        <li>
            <a href="#">contact us</a>
        </li>
        <li>
            <a href="#">news</a>
        </li>
        <li>
            <a href="#">about us</a>
        </li>
        <li>
            <a href="#">another link example</a>
        </li>
    </ol>

    The only thing besides tables that I can think of is something like this:


    Code:
    <ul class="secondary_nav">
        <li>
            <ul style="float:left;">
                <li>
                    <a href="#">contact us</a>
                </li>
                <li>
                    <a href="#">news</a>
                </li>
            </ul>
        </li>
        </li>
            <ul style="float:left">
                <li>
                    <a href="#">about us</a>
                </li>
                <li>
                    <a href="#">another link example</a>
                </li>
            </ul>
        </li>
    </ul>
    or:

    Code:
    <div style="float:left;">
            <ul>
                <li>
                    <a href="#">contact us</a>
                </li>
                <li>
                    <a href="#">news</a>
                </li>
            </ul>
    </div>
    <div style="float:left">
            <ul>
                <li>
                    <a href="#">about us</a>
                </li>
                <li>
                    <a href="#">another link example</a>
                </li>
            </ul>
    </div>
    I am hoping for something simple so I don't have to rework some php plug-ins or find new ones. Thanks!

  2. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    I am hoping for something simple so I don't have to rework some php plug-ins or find new ones.
    Hi,
    Well if you need to support IE7 and you are wanting the text to be vertically centered then it will require some extra elements nested in either the <li> or the <a>. There's really not a simple way to do it, but it can be done.

    You are on the right track with display:table-cell; and vertical-align:middle; for modern browsers.

    There are three ways (that I know of) to do what you are wanting.

    The 1st method
    is what is sometimes called "The Double Relative Shift" and it requires two extra elements in the markup to make IE6/7 work.

    The 2nd method is to manually control your line breaks while using an oversized line-height and some margin/padding tricks.

    The 3rd method
    is to use an empty inline-block so you can set a height and v-align on it.

    Using the last two methods I merged them together and made a new example. I eliminated the need for the <br> tags from #2 but used the margin/padding trick and then I used the single empty element from #3 for the v-align.

    Keep in mind, those tricks are just for IE7 and modern browser get display:table-cell to do the job easily.

    Here is what I came up with -

    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Vertical-Centered Text</title>
     
    <style type="text/css">
    h1 {
        font-size:1.5em;
        text-align:center;
    }
    .nav {
        display:table;/*hide whitespace nodes for webkit*/
        width:286px;/*un-shrink table for all browsers*/
        word-spacing:-.25em;/*hide whitespace nodes in all but webkit*/
        margin: 0 auto;
        padding: 6px 0;
        list-style: none;
        text-align: center;
        background:#777;
    }
    .nav li {
        display:-moz-inline-box;/*FF2 and under*/
        display: inline-block;
        vertical-align: middle;
        margin: 6px;
        word-spacing:0;/*reset children from ul*/
    }
    .nav a {
        zoom:1;/*prep IE7 for tripswitch below*/
        display: table-cell;/*modern browsers v-align*/
        vertical-align: middle;
        width: 114px;/*124px total w/ side padding*/
        height: 40px;
        padding: 0 5px;
        background: #72c6a1;
        color: #fff;
        font: 14px/16px arial;
        text-decoration: none;
    }
    .nav a:hover {
        color: #000;
        background:lime;
    }
    .nav b {
        zoom:1;/*prep IE7 for tripswitch below*/
        display: none;/*hide the extra element in modern browsers*/
    }
     
    /*-- IE7 Rules Below --*/
    *+html .nav li {
        display:inline;/* inline-block tripswitch*/
        height: 40px;
        overflow: hidden;
    }
    *+html .nav a {
        display:inline;/* inline-block tripswitch*/
        height: auto;
        margin: -40px 0;/* soak up the extended padded area */
        padding: 40px 5px;/* extend the lowest link to cover the whole item height */
    }
    *+html .nav b{
        display:inline;/* inline-block tripswitch*/
        vertical-align:middle;
        /*width:1px;*/
        height: 40px;
        font-size:0;
        /*background:red;*/
    } 
    </style>
     
    </head>
    <body>
     
    <h1>List Items with V-Centered Text</h1>
    <ul class="nav">
        <li><a href="#">contact us</a><b></b></li>
        <li><a href="#">news</a><b></b></li>
        <li><a href="#">about us</a><b></b></li>
        <li><a href="#">text wrapping to two lines</a><b></b></li>
    </ul>
     
    </body>
    </html>

  3. #3
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    uhm... float 'em all left, class on all the odd ones that does margin-left:6px; clear:both; ?

    Though I'd probably also put a negative margin of 3px or more on the even ones right side just to avoid IE's perfect width float drop.
    Code:
    li {
      float:left;
      margin:0 -3px 6px 0;
    }
    
    li.odd {
      clear:both;
      margin-right:6px;
    }
    Seems the obvious answer -- plug in the class on every other one and poof... or if you don't care about old browsers you could use CSS3's nth-child(odd) instead of the classes.

    Or if the OL isn't receiving style, pad the LI instead of margin, apply styling to the tags inside the LI (since your example uses anchors) and then put a negative margin on the right side of the OL to suck up the excess width.

    Not that your example looks like an ordered list... seems rather unordered to me

  4. #4
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    uhm... float 'em all left...

    Not that your example looks like an ordered list... seems rather unordered to me
    Yeah, I did away with the <ol> also and made it a <ul>

    I think you've missed one important aspect of the OP's request though, vertical centered text. At least that's what I assumed from the table-cell and v-align styles on the <a>.

    That was the reason for all the extra code in my example which was needed for IE7. If v-center text is important then there's more to it than just floating the <li>.

  5. #5
    SitePoint Member
    Join Date
    Nov 2010
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Quote Originally Posted by deathshadow60 View Post
    uhm... float 'em all left, class on all the odd ones that does margin-left:6px; clear:both; ?
    I thought about doing that too, but I keep getting projects like this and I don't really like using odd, even, nth-child(3) etc. because I never know when a different client will want a grid of 5 big product pictures etc. and then I can't easily re-use a plug-in because of work arounds for older browsers.

    Thanks for the suggestion, and I did change the list to a <ul>, you are absolutely right it was not correct usage .

    Thanks Rayzur! The code is immensely helpful and so were the links, I made some adjustments to the css and it works great for what I need it to do, I might be able to make a grid plug-in that I wont have to rework for a while (until we are rid of IE7 in 10 more years).

  6. #6
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    I made some adjustments to the css and it works great for what I need it to do
    Glad you were able to work with it

    It's a shame about the extra elements in the html but that's what it takes to make ol' IE7 work. I set them to display:none; for all other browsers though.


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
  •