TDD's Web Design Series - Part 4, basic navigation

Discussion in 'Guides' started by TDD, Sep 29, 2008.

Sign in to Post
Thread Tools

Thread Tools

  • Thread ID:
TDD's Web Design Series - Part 4, basic navigation
  1. Unread #1 - Sep 29, 2008 at 10:32 AM
  2. TDD
    Joined:
    Nov 20, 2005
    Posts:
    3,191
    Referrals:
    2
    Sythe Gold:
    0

    TDD Web Design Expert
    Do Not Trade

    TDD's Web Design Series - Part 4, basic navigation
    Alright kiddies, it's been a while since I wrote a guide on web design, completely forgot I even wrote them :p

    Today, we are going to make a very basic hover navigation using pure HTML and CSS.

    Before we start, you should know and understand something; Internet Explorer 6 will not apply a css :hover to anything but the <a> tag, sadly, so this makes it difficult to do some more fun techniques.

    first, you'll need the starting xHTML and CSS, so if you've read the first few tuts of mine, you'll know how to make a reset.css file, make the basic xHTML setup, etc. so do all this.

    Whip up the following within your xHTML:

    HTML:
    <div class="navigation">
<ul class="navigation">
<li><a href="#"><em>home</em> Go to homepage</a></li>
<li><a href="#"><em>page2</em> Go to Page2</a></li>
</ul><!-- end of ul -->
<div class="clear"></div>
</div><!-- end of navigation -->
    so far, we've got a box model that will look like this:
    [​IMG]

    this is perfect in the HTML, it is logically ordered and has meaning, now we can apply CSS to make this a half-decent navigation:

    HTML:
    <style type="text/css">
body {
background-color: #111111;
}

div.navigation {
position: relative;
width: 100%;
margin-top: 0.4em;
border-top-color: #333;
border-bottom-color: #333;
border-style: solid;
border-width: 1px;
}

ul.navigation {
position: relative;
margin-left: 20%;
margin-right: 20%;
width: 60%;
height: 2.4em;
}

ul.navigation li {
float: left;
margin-right: 1em;
position: relative;
margin-top: 0.1em;
}

ul.navigation li a {
position: relative;
display: block;
font-family: "Calibri", Arial, Tahoma, Helvetica, Geneva, sans-serif;
color: #999999;
text-decoration: none;
font-size: 0.8em;
}

ul.navigation li a:hover {
color: #fff;
}

ul.navigation li a em {
font-family: "Calibri", Arial, Tahoma, Helvetica, Geneva, sans-serif;
font-size: 1.4em;
font-style: normal;
font-weight: bold;
text-transform: uppercase;
position: relative;
display: block;
width: 100%;
color: #fff;
}

div.clear {
clear: both;
}
</style>
    Here is an explanation of what each rule does:

    Code:
    body {
background-color: #111111;
}
    This applies a dark gray background over the entire document (<body>).

    Code:
    div.navigation {
position: relative;
width: 100%;
margin-top: 0.4em;
border-top-color: #333;
border-bottom-color: #333;
border-style: solid;
border-width: 1px;
}
    The <div class="navigation"> in our code has this CSS, which positions the div and it's contents relative to the parent, which in this case is <body>, the div is the full width of <body>, and is positioned 0.4ems from what is above it. It also has a 1 pixel gray border that applies only to the top and bottom.

    Code:
    ul.navigation {
position: relative;
margin-left: 20%;
margin-right: 20%;
width: 60%;
height: 2.4em;
}
    the <ul class="navigation"> has been placed relative to the parent tag, which is <div class="navigation"> and has been placed 20% to the left and right, with a width that is 60% the total width of the div it is inside of, so basically it's centered no matter what. It also has a total height of 2.4em.

    Code:
    ul.navigation li {
float: left;
margin-right: 1em;
position: relative;
margin-top: 0.1em;
}
    these are the list items within the <ul>, they are to always float to the left, with a space of 1em to their right, again - relative to their parent which is the <ul> from above, and are to be positioned 0.1em from the top of the <ul>

    Code:
    ul.navigation li a {
position: relative;
display: block;
font-family: "Calibri", Arial, Tahoma, Helvetica, Geneva, sans-serif;
color: #999999;
text-decoration: none;
font-size: 0.8em;
}
    this is the <a> tag and it's contents, within the <li> inside the <ul>, it is placed relative to the <li> but has a display:block, which means that there is a line break both before and after it, so basically, it displays it all vertically, which is why the <li> is floated to the left, to display those horizontally whilst having line break in the <a>. it uses the custom font "Calibri" (This is abundant on all office 2007 XP systems, or the XP Systems with the update for office 07 files, and all vista systems, so it is safe to use as a first choice, as long as there is a fall back like I have). The text is a gray and has no decoration (no underline that is automatically applied to <a> elements), it has a font size of 0.8em.

    Code:
    ul.navigation li a:hover {
color: #fff;
}
    This says that when the <a> is rolled over, the text turns white.

    Code:
    ul.navigation li a em {
font-family: "Calibri", Arial, Tahoma, Helvetica, Geneva, sans-serif;
font-size: 1.4em;
font-style: normal;
font-weight: bold;
text-transform: uppercase;
position: relative;
display: block;
width: 100%;
color: #fff;
}
    this says that the contents of the <em> withing the <a> above is 1.4em in height, is not italicised like it would normally (<em>, better known as the emphasis tag is auto applied with italics text). The font shall be bold and automatically converted to uppercase (Capitals).

    Code:
    div.clear {
clear: both;
}
    This just clears the floats from the <li>, it is needed to fix browser bugs.

    But Mat, WHAT THE FUCK IS ALL THIS "EM" SHIT YOU SAY AS SIZES IN THE CSS!?!?!?!

    em is a relative value to the end user's default font size, which usually is 16pt, so "1em = 16pt in font size", it means that the layout is elastic according to the user's preferences, it helps prevent breakage in the layout on larger-font browsers and whatnot - just a technique I wanted to show you :)

    Hopefully, you got a navigation like this below:

    [​IMG][/IMG]

    and there you have it, a simple yet effective navigation that works. No tables, no images, pure xHTML/CSS.

    :)
     
    Share
  3. Unread #2 - Sep 29, 2008 at 10:34 AM
  4. sUffer
    Joined:
    Mar 7, 2007
    Posts:
    171
    Referrals:
    0
    Sythe Gold:
    0

    sUffer TDD's anal whore

    TDD's Web Design Series - Part 4, basic navigation
    Thank you, thank joo soo much TDD, your tutorials haff taught me sooo much about web design, you are a god amongst all men.

    *Prays to Mat*
     
    Share
  5. Unread #3 - Sep 29, 2008 at 11:39 AM
  6. M0rphine
    Joined:
    Jul 11, 2007
    Posts:
    864
    Referrals:
    0
    Sythe Gold:
    0

    M0rphine Apprentice
    Banned

    TDD's Web Design Series - Part 4, basic navigation
    Nice tut! im trying to get into web design, this will help make things a little easier.
     
    Share
  7. Unread #4 - Sep 30, 2008 at 12:38 AM
  8. biliyad1
    Joined:
    Jul 27, 2007
    Posts:
    704
    Referrals:
    0
    Sythe Gold:
    0
    Tier 1 Prizebox Tom Black MushyMuncher

    biliyad1 Liquid'mizU
    $200 USD Donor

    TDD's Web Design Series - Part 4, basic navigation
    GREAT tut! Thanks.
    I plan to use it later in other CSS things, like skinning. :D
     
    Share
  9. Unread #5 - Sep 30, 2008 at 12:15 PM
  10. Fratal
    Joined:
    Sep 17, 2008
    Posts:
    766
    Referrals:
    0
    Sythe Gold:
    0

    Fratal Apprentice
    Banned

    TDD's Web Design Series - Part 4, basic navigation
    Wow, this is really good. How much would it cost to hire you to make a website for me, TDD?
     
    Share
  11. Unread #6 - Sep 30, 2008 at 1:28 PM
  12. Jansen
    Joined:
    Apr 22, 2005
    Posts:
    5,213
    Referrals:
    6
    Sythe Gold:
    11
    Discord Unique ID:
    1072865532082147429
    Discord Username:
    jan.sen.

    Jansen Retired Admin :'(
    Retired Global Moderator

    TDD's Web Design Series - Part 4, basic navigation
    protip:

    study this, don't copy and paste it.
     
    Share
  13. Unread #7 - Oct 9, 2008 at 5:01 AM
  14. TDD
    Joined:
    Nov 20, 2005
    Posts:
    3,191
    Referrals:
    2
    Sythe Gold:
    0

    TDD Web Design Expert
    Do Not Trade

    TDD's Web Design Series - Part 4, basic navigation
    probably more then someone like you is willing to pay
     
    Share
  15. Unread #8 - Oct 9, 2008 at 3:17 PM
  16. javaboii
    Referrals:
    0

    javaboii Guest

    TDD's Web Design Series - Part 4, basic navigation
    Share
  17. Unread #9 - Oct 23, 2008 at 8:23 AM
  18. 1337it
    Joined:
    Apr 23, 2007
    Posts:
    1,122
    Referrals:
    1
    Sythe Gold:
    0

    1337it Guru

    TDD's Web Design Series - Part 4, basic navigation
    Thanks mate, i'll give this ago tomorrow and edit by post :D
     
    Share
  19. Unread #10 - Nov 3, 2008 at 10:08 AM
  20. SuF
    Joined:
    Jan 21, 2007
    Posts:
    14,212
    Referrals:
    28
    Sythe Gold:
    1,234
    Discord Unique ID:
    203283096668340224
    <3 n4n0 Two Factor Authentication User Community Participant Spam Forum Participant Sythe's 10th Anniversary

    SuF Legend
    Pirate Retired Global Moderator

    TDD's Web Design Series - Part 4, basic navigation
    You is taught me what em means. I is in your dept.

    :D
     
    Share
  21. Unread #11 - Nov 3, 2008 at 4:04 PM
  22. Noob!
    Joined:
    Aug 29, 2008
    Posts:
    322
    Referrals:
    0
    Sythe Gold:
    0

    Noob! Forum Addict
    Banned

    TDD's Web Design Series - Part 4, basic navigation
    another great tut fromt tdd
     
    Share
  23. Unread #12 - Dec 12, 2009 at 9:01 PM
  24. CLD'
    Joined:
    Dec 10, 2009
    Posts:
    133
    Referrals:
    0
    Sythe Gold:
    0

    CLD' Active Member

    TDD's Web Design Series - Part 4, basic navigation
    Goodguide man, thanks.
     
    Share
< MLA Citations | >

Users viewing this thread
1 guest


 
 
Adblock breaks this site