Adblock breaks this site

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

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

Thread Tools

Thread Tools

  • Thread ID:
  1. TDD

    TDD Web Design Expert
    Do Not Trade

    Joined:
    Nov 20, 2005
    Posts:
    3,191
    Referrals:
    2
    Sythe Gold:
    0
    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.

    :)
     
    TDD, Sep 29, 2008
    #1
  2. sUffer

    sUffer TDD's anal whore

    Joined:
    Mar 7, 2007
    Posts:
    171
    Referrals:
    0
    Sythe Gold:
    0
    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*
     
    sUffer, Sep 29, 2008
    #2
  3. M0rphine

    M0rphine Apprentice
    Banned

    Joined:
    Jul 11, 2007
    Posts:
    864
    Referrals:
    0
    Sythe Gold:
    0
    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.
     
    M0rphine, Sep 29, 2008
    #3
  4. biliyad1

    biliyad1 Liquid'mizU
    $200 USD Donor

    Joined:
    Jul 27, 2007
    Posts:
    704
    Referrals:
    0
    Sythe Gold:
    0
    Tier 1 Prizebox Tom Black MushyMuncher
    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
     
    biliyad1, Sep 30, 2008
    #4
  5. Fratal

    Fratal Apprentice
    Banned

    Joined:
    Sep 17, 2008
    Posts:
    766
    Referrals:
    0
    Sythe Gold:
    0
    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?
     
    Fratal, Sep 30, 2008
    #5
  6. Jansen

    Jansen Retired Admin :'(
    Retired Global Moderator

    Joined:
    Apr 22, 2005
    Posts:
    5,213
    Referrals:
    6
    Sythe Gold:
    11
    Discord Unique ID:
    1072865532082147429
    Discord Username:
    jan.sen.
    TDD's Web Design Series - Part 4, basic navigation
    protip:

    study this, don't copy and paste it.
     
    Jansen, Sep 30, 2008
    #6
  7. TDD

    TDD Web Design Expert
    Do Not Trade

    Joined:
    Nov 20, 2005
    Posts:
    3,191
    Referrals:
    2
    Sythe Gold:
    0
    TDD's Web Design Series - Part 4, basic navigation
    probably more then someone like you is willing to pay
     
    TDD, Oct 9, 2008
    #7
  8. javaboii

    javaboii Guest

    Referrals:
    0
    TDD's Web Design Series - Part 4, basic navigation
    javaboii, Oct 9, 2008
    #8
  9. 1337it

    1337it Guru

    Joined:
    Apr 23, 2007
    Posts:
    1,122
    Referrals:
    1
    Sythe Gold:
    0
    TDD's Web Design Series - Part 4, basic navigation
    Thanks mate, i'll give this ago tomorrow and edit by post :D
     
    1337it, Oct 23, 2008
    #9
  10. SuF

    SuF Legend
    Pirate Retired Global Moderator

    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
    TDD's Web Design Series - Part 4, basic navigation
    You is taught me what em means. I is in your dept.

    :D
     
    SuF, Nov 3, 2008
    #10
  11. Noob!

    Noob! Forum Addict
    Banned

    Joined:
    Aug 29, 2008
    Posts:
    322
    Referrals:
    0
    Sythe Gold:
    0
    TDD's Web Design Series - Part 4, basic navigation
    another great tut fromt tdd
     
    Noob!, Nov 3, 2008
    #11
  12. CLD'

    CLD' Active Member

    Joined:
    Dec 10, 2009
    Posts:
    133
    Referrals:
    0
    Sythe Gold:
    0
    TDD's Web Design Series - Part 4, basic navigation
    Goodguide man, thanks.
     
    CLD', Dec 12, 2009
    #12
< MLA Citations | >


 
 
Adblock breaks this site