1
Anyways, this should be EXTREMELY simple...as I want NO rollovers, no fancy hovers, no current-page differences...I just want the navigation bar image to be "click-able" where the words are.
You can see the site as it stands today here:
http://www.functiont.net/2.0/index.html
You can see an image of the navigation bar at the following url:
http://www.functiont.net/2.0/images/navigation.gif
Below you can see both the (X)HTML and the CSS of my site as it stands today (I use an external CSS file):
(X)HTML:
Expand|Select|Wrap|Line Numbers
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
- <head>
- <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
- <title>Function T .:. Home</title>
- <style type="text/css" media="all">@import "css/master.css";</style>
- </head>
- <body>
- <div id="entire-page">
- <div id="page-container">
- <div id="ghost"></div>
- <div id="header"></div>
- <div id="navigation-bar">
- <ul id="navigation>
- <li id="navhome"><a href="#"></a></li>
- <li id="navbio"><a href="#"></a></li>
- <li id="navmedia"><a href="#"></a></li>
- <li id="navcontact"><a href="#"></a></li>
- <li id="navreviews"><a href="#"></a></li>
- <li id="navtutorials"><a href="#"></a></li>
- <li id="navlinks"><a href="#"></a></li>
- </ul>
- </div>
- <div id="content">
- <h1>New Website Launched!</h1>
- <h2>10.01.2008</h2>
- Lorem ipsum debet tritani forensibus et nam, ex solet splendide mea, at cum menandri consetetur conclusionemque. Ocurreret persecuti eum at, intellegat temporibus cu sea. Tale modus mei cu, mucius offendit id mea, id consul urbanitas vis. Ius te alii deseruisse, at mea veri illum perfecto. Per iudico commodo blandit ea, mel eu illum sonet efficiantur, tota delenit splendide at qui.<br/><br/>
- No vel ridens labores percipitur. Ad eum homero percipitur. Sit stet vero ex. In nec volumus explicari.<br/><br/>
- Pro puto tempor cu, vix in populo doming legendos, ut has regione suavitate. Nec ea movet omnium assentior, ius solum feugiat no, ut est quem putant mollis. Eu simul suscipiantur has, equidem ornatus ea vel. Cu noluisse placerat nec, nostrum probatus eloquentiam cu sed. Lorem dicunt et pri, magna ubique no sed, in solum decore quidam pro.<br/><br/>
- Ad blandit antiopam pri. Meliore necessitatibus et quo. Qui fabellas torquatos an. Id vel tantas recusabo, ex eos natum simul mentitum. Ea nostrud takimata iudicabit vel. <br/><br/>
- <h1>This is Only a Test</h1>
- <h2>10.01.2008</h2>
- Id sit minimum patrioque ullamcorper, vix prompta intellegat at. Mea vidisse admodum denique in, at eam graecis expetendis referrentur, ancillae prodesset ut eam. Meliore luptatum appellantur duo eu. Cu dicam invenire has, ex affert pertinacia vis, ut impetus mandamus sea. Pri nisl atomorum ex, nam te eripuit numquam docendi. <br/><br/>
- Est stet albucius maluisset id, et habeo graece molestie mel, adhuc nonumy eloquentiam ea vel. Ubique takimata persequeris ne his, pro an augue feugiat efficiendi, eu eam unum nominavi mediocritatem. Corpora disputando eloquentiam ex quo, cu prima choro salutandi his. Has eirmod regione accumsan eu. Cum ea wisi scripta, veritus assentior complectitur pro ea, mea cu aeterno vocibus eligendi. Ei eam maiorum perfecto. <br/><br/>
- Et eam eius nostro. In alienum definitiones nec, sed wisi mentitum incorrupte ea, ei per quando appetere. Eu dicta vitae ignota vel. Eu qui quot aperiri adipiscing, eu vim novum deleniti, quod kasd eu has. Copiosae incorrupte neglegentur mea cu, sit adolescens elaboraret constituam te, ea sea tamquam molestie definiebas. Rebum harum labore pro ex, ex soluta contentiones vix, no usu esse nominati mandamus. <br/><br/>
- Et pro aliquando expetendis theophrastus. Mei ne errem consequat, mei ut sonet singulis indoctum. Alia nihil civibus per ei. Ei sed mucius perfecto elaboraret, invidunt neglegentur ei mel, at vide tota quo. <br/><br/>
- <h1>New Site Coming Soon!</h1>
- <h2>09.29.2008</h2>
- Id placerat phaedrum per. Nec ut persius legimus conceptam, ius no ludus clita consul. At atomorum voluptatum cum, duo cibo putant reprimique ne. Ea mei hinc eros noluisse, ad sea ipsum dicunt, alii debet tamquam te nam. <br/><br/>
- Essent labores explicari cu duo. Ius causae copiosae an. Ex omnium diceret maluisset vim. Ad mel vivendo disputationi. Hendrerit democritum id cum, quodsi molestiae duo te.
- </div>
- <div id="content-bottom"></div>
- <div id="footer">
- Home - Bio - Media - Contact - Reviews - Tutorials - Charts - Links <br/>
- All information Copyright 2008 Tom Winchester unless otherwise specified. All original artists <br/>
- and labels retain their full respective rights and royalties to all copyrighted material. Mixes are presented <br/>
- for promotional purposes only. Duplication of any material in part or in whole without the <br/>
- express written consent of Tom Winchester is strictly prohibited.
- </div>
- </div>
- </div>
- </body>
- </html>
CSS:
Expand|Select|Wrap|Line Numbers
- html, body {
- margin: 0px;
- padding: 0px;
- background: url(../images/bgpattern.gif);
- }
- #entire-page {
- }
- #page-container {
- margin: auto;
- width: 750px;
- }
- #ghost {
- height: 15px;
- }
- #header {
- height: 110px;
- background: url(../images/headers/rotator.php);
- background-repeat: no-repeat;
- }
- #navigation-bar {
- width: 750px;
- height: 40px;
- background: url(../images/navigation.gif);
- margin: 0px;
- padding: 0px;
- position: relative;
- }
- #content {
- background-image: url(../images/contentbg.gif);
- background-repeat: repeat-y;
- padding-top: 0px;
- padding-left: 10px;
- padding-right: 245px;
- padding-bottom: 0px;
- font-family: "Trebuchet MS", Verdana, Helvetica, Arial, Times;
- font-style: normal;
- font-size: 12px;
- color: #858585;
- }
- #content-bottom {
- height: 5px;
- background-image: url(../images/contentbgbottom.gif);
- background-repeat: no-repeat;
- }
- #footer {
- height: 80px;
- padding: 5px;
- text-align: center;
- font-family: "Trebuchet MS", Verdana, Helvetica, Arial, Times;
- font-style: normal;
- font-size: 11px;
- color: #cfcfcf;
- }
- h1 {
- margin-top: 0px;
- margin-bottom: 0px;
- font-family: "Trebuchet MS", Verdana, Helvetica, Arial, Times;
- font-size: 24px;
- font-weight: 200;
- color: #1c2939;
- }
- h2 {
- margin-top: 0px;
- margin-bottom: 7px;
- font-family: "Trebuchet MS", Verdana, Helvetica, Arial, Times;
- font-size: 12px;
- font-weight: 200;
- color: #c49271;
- }
If anyone would be able to take the time to explain these steps to me (apparently the other "definitive" sources couldn't get it through my head)...it would be greatly appreciated.
THANK YOU!!!
-Tom Winchester-
