SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Zealot
    Join Date
    Mar 2007
    Posts
    182
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Which is a more semantic approach to markup a navigation?

    i'm designing a 2-column layout website with a main 2-tier horizontal navigation bar and another navigation on the column on the right which is placed in a div #rightColumn. I've floated the #rightColumn to the right, centered the whole #content div by giving margin: 0 auto;

    Markup

    <body class="sectionHome">

    <div id="masthead">
    <div id="navContainer">

    <div id="mainNav">
    <ul>
    <li id="linkHome"><a href="#">Home</a></li>
    <li id="linkAbout"><a href="#">About Us</a></li>
    <li id="linkTeam"><a href="#">The Team</a></li>
    <li id="linkPackages"><a href="#">Packages</a></li>
    <li id="linkFacilities"><a href="#">Facilities</a></li>
    <li id="linkEvents"><a href="#">Events</a></li>
    <li id="linkAchievers"><a href="#">High Achievers</a></li>
    <li id="linkContact"><a href="#">Contact Us</a></li>
    </ul>
    </div><!--end of mainNav div-->

    <div id="subNav">
    <ul>
    <li><a href="#">Some link</a></li>
    <li><a href="#">In 2-tier</a></li>
    <li><a href="#">which</a></li>
    <li><a href="#">is the</a></li>
    <li><a href="#">subcategories</a></li>
    <li><a href="#">of the</a></li>
    <li><a href="#">main navigation</a></li>
    <li><a href="#">on this site</a></li>
    </ul>
    </div><!--end of subNav div-->

    </div><!--end of navContainer div-->
    </div><!--end of masthead div-->

    <div id="content">

    <div id="rightColumn">

    <h2>Quick Access</h2>
    <ul>
    <li id="qatimetable"><a href="#">Timetable</a></li>
    <li id="qanotice"><a href="#">Important Notices</a></li>
    <li id="qafees"><a href="#">Fees Structure</a></li>
    </ul>

    </div>

    <!--end of rightColumn div-->

    <div id="mainContent">

    <h1>The mother of all headers</h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras viverra. Nunc facilisis. Maecenas id sem sed dui vulputate viverra. Nam vulputate, sem sit amet molestie tempor, massa erat porttitor sem, a vehicula est lectus at dui. Cras et nulla sed velit iaculis faucibus. Nullam tempor tellus a nibh tincidunt ultricies. Donec feugiat tristique purus. Vivamus sed dui vitae ipsum elementum congue. Maecenas fermentum. In risus. Duis sed ante. In quis est ut lorem sodales vulputate. Vivamus mattis aliquam lacus.</p>

    </div><!--end of mainContent div-->


    </div> <!-- end of content div -->

    <div class="seperator">&nbsp;</div>


    <div id="footer">
    <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Events</a></li>
    <li><a href="#">Contact Us</a></li>
    </ul>
    </div>
    <!-- end of div id footer -->

    </body>


    Please take note of the #rightColumn that holds the quick access links. Now i wanted to do it a little differently and rather than just having vertical
    links that look common, i created icons using photoshop that are 130px by
    130 px (very thumnail like). Its very glossy and button like. I want to incorporate the icons on the list items in the <ul> (this icons are going to be placed horizontally side by side, display: inline; ) inside the #rightColumn. Is it more appropriate to put those iconic images in the background of the link?


    Example

    #qatimetable a: {
    background: url(assets/navigation/quickaccess/timetable.gif) no-repeat;
    padding: 100px 24px 0 24px;
    margin: 0 7px;
    }




    <div id="rightColumn">

    <h2>Quick Access</h2>
    <ul>
    <li id="qatimetable"><a href="#">Timetable</a></li>
    <li id="qanotice"><a href="#">Important Notices</a></li>
    <li id="qafees"><a href="#">Fees Structure</a></li>
    </ul>

    </div>

    <!--end of rightColumn div-->



    Or can we do it like this by changing the markup to place the image inside the list items like this?


    <div id="rightColumn">

    <h2>Quick Access</h2>
    <ul>
    <li id="qatimetable"><a href="#"><img src="assets/navigation/quickaccess/timetable.gif alt"#" width="130" height="130" /></a></li>
    <li id="qanotice"><a href="#"><img src="assets/navigation/quickaccess/notice.gif" alt="#" witdth="130 height="#" /></a></li>
    <li id="qafees"><a href="#"><img src="assets/navigation/quickaccess/fees.gif alt="#" width="130" height="130" />
    </a></li>
    </ul>

    </div>

    <!--end of rightColumn div-->


    What i'm worried is wether it is semantic and would screen readers read it properly because at the end of the day its a quick access navigation...Please advise.

    Thank you in advance for reading this

  2. #2
    masquerading Nick's Avatar
    Join Date
    Jun 2003
    Location
    East Coast
    Posts
    2,215
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    These icons are going to be used as the link anchor? Then I see no reason why you shouldn't just use the <img> tag inside of your list items. I've seen the technique of placing images as backgrounds and using an empty <span> or similar to create links, but under special circumstances. Besides, since you have a different image for each link, you'd have to create a different style definition for each link. So like I said, I see no reason why you shouldn't do it the img tag way.
    Nick . all that we see or seem, is but a dream within a dream
    Show someone you care, send them a virtual flower.
    Good deals on men's watches


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
  •