Back To Website Design Forum

how's this for navigation?

  • Bogey
  • Bogey
  • Genius
  • User avatar
  • Joined: Jul 14, 2005
  • Posts: 8212
  • Loc: USA
  • Status: Offline

Post July 24th, 2008, 9:49 pm

not yet... didn't start. I think I will attempt right now
"Bring forth therefore fruits meet for repentance:" Matthew 3:8
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post July 24th, 2008, 9:49 pm

  • Bogey
  • Bogey
  • Genius
  • User avatar
  • Joined: Jul 14, 2005
  • Posts: 8212
  • Loc: USA
  • Status: Offline

Post July 24th, 2008, 10:01 pm

this was too easy Joebert. Surprised you didn't do it.
Code: [ Select ]
<!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>
    <title>Title</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <style type="text/css">
    body{text-align:center;}
    #blocks
    {
        /*background: #eee url("italian.gif");*/
        margin: auto;
        width: 500px;
        height: 525px;
    }
    #blocks a
    {
        /*display: block;*/
        float: left;
        width: 143px;
        height: 132px;
        background: transparent url("blocks.gif") 0 1px;
        text-decoration: none;
        position: absolute;
    }

    #blocks a span
    {
        display: block;
        margin-top: 50px;
    }
    
    #blocks a#one
    {
        margin-top: 340px;
        margin-left: 60px;
    }
    #blocks a#one span
    {
        margin-left: -200px;
    }
    #blocks a#two
    {
        margin-top: 340px;
        margin-left: 180px;
    }
    #blocks a#two span
    {
        margin-left: 150px;
    }
    #blocks a#three
    {
        margin-top: 225px;
        margin-left: 180px;
    }
    #blocks a#three span
    {
        margin-left: -200px;
    }
    #blocks a#four
    {
        margin-top: 225px;
        margin-left: 297px;
    }
    #blocks a#four span
    {
        margin-left: 150px;
    }
    #blocks a#five
    {
        margin-top: 110px;
        margin-left: 180px;
    }
    #blocks a#five span
    {
        margin-left: 150px;
    }
    #blocks a#six
    {
        margin-top: 135px;
        margin-left: 145px;
    }
    #blocks a#six span
    {
        margin-left: -200px;
    }
    #blocks a#seven
    {
        margin-top: 20px;
        margin-left: 145px;
    }
    #blocks a#seven span
    {
        margin-left: -200px;
    }
    
    #blocks a#one:hover
    {
        background-position: -144px 1px;
    }
    #blocks a#two:hover
    {
        background-position: -287px 1px;
    }
    #blocks a#three:hover
    {
        background-position: -430px 1px;
    }
    #blocks a#four:hover
    {
        background-position: -573px 1px;
    }
    #blocks a#five:hover
    {
        background-position: -716px 1px;
    }
    #blocks a#six:hover
    {
        background-position: -859px 1px;
    }
    #blocks a#seven:hover
    {
        background-position: -1002px 1px;
    }
    </style>
</head>
<body>
    <div id="blocks">
        <a href="#" id="one"><span>One</span></a>
        <a href="#" id="two"><span>Two</span></a>
        <a href="#" id="three"><span>Three</span></a>
        <a href="#" id="four"><span>Four</span></a>
        <a href="#" id="five"><span>Five</span></a>
        <a href="#" id="six"><span>Six</span></a>
        <a href="#" id="seven"><span>Seven</span></a>
    </div>
</body>
</html>
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <head>
  4.     <title>Title</title>
  5.     <meta http-equiv="content-type" content="text/html;charset=utf-8" />
  6.     <meta http-equiv="Content-Style-Type" content="text/css" />
  7.     <style type="text/css">
  8.     body{text-align:center;}
  9.     #blocks
  10.     {
  11.         /*background: #eee url("italian.gif");*/
  12.         margin: auto;
  13.         width: 500px;
  14.         height: 525px;
  15.     }
  16.     #blocks a
  17.     {
  18.         /*display: block;*/
  19.         float: left;
  20.         width: 143px;
  21.         height: 132px;
  22.         background: transparent url("blocks.gif") 0 1px;
  23.         text-decoration: none;
  24.         position: absolute;
  25.     }
  27.     #blocks a span
  28.     {
  29.         display: block;
  30.         margin-top: 50px;
  31.     }
  32.     
  33.     #blocks a#one
  34.     {
  35.         margin-top: 340px;
  36.         margin-left: 60px;
  37.     }
  38.     #blocks a#one span
  39.     {
  40.         margin-left: -200px;
  41.     }
  42.     #blocks a#two
  43.     {
  44.         margin-top: 340px;
  45.         margin-left: 180px;
  46.     }
  47.     #blocks a#two span
  48.     {
  49.         margin-left: 150px;
  50.     }
  51.     #blocks a#three
  52.     {
  53.         margin-top: 225px;
  54.         margin-left: 180px;
  55.     }
  56.     #blocks a#three span
  57.     {
  58.         margin-left: -200px;
  59.     }
  60.     #blocks a#four
  61.     {
  62.         margin-top: 225px;
  63.         margin-left: 297px;
  64.     }
  65.     #blocks a#four span
  66.     {
  67.         margin-left: 150px;
  68.     }
  69.     #blocks a#five
  70.     {
  71.         margin-top: 110px;
  72.         margin-left: 180px;
  73.     }
  74.     #blocks a#five span
  75.     {
  76.         margin-left: 150px;
  77.     }
  78.     #blocks a#six
  79.     {
  80.         margin-top: 135px;
  81.         margin-left: 145px;
  82.     }
  83.     #blocks a#six span
  84.     {
  85.         margin-left: -200px;
  86.     }
  87.     #blocks a#seven
  88.     {
  89.         margin-top: 20px;
  90.         margin-left: 145px;
  91.     }
  92.     #blocks a#seven span
  93.     {
  94.         margin-left: -200px;
  95.     }
  96.     
  97.     #blocks a#one:hover
  98.     {
  99.         background-position: -144px 1px;
  100.     }
  101.     #blocks a#two:hover
  102.     {
  103.         background-position: -287px 1px;
  104.     }
  105.     #blocks a#three:hover
  106.     {
  107.         background-position: -430px 1px;
  108.     }
  109.     #blocks a#four:hover
  110.     {
  111.         background-position: -573px 1px;
  112.     }
  113.     #blocks a#five:hover
  114.     {
  115.         background-position: -716px 1px;
  116.     }
  117.     #blocks a#six:hover
  118.     {
  119.         background-position: -859px 1px;
  120.     }
  121.     #blocks a#seven:hover
  122.     {
  123.         background-position: -1002px 1px;
  124.     }
  125.     </style>
  126. </head>
  127. <body>
  128.     <div id="blocks">
  129.         <a href="#" id="one"><span>One</span></a>
  130.         <a href="#" id="two"><span>Two</span></a>
  131.         <a href="#" id="three"><span>Three</span></a>
  132.         <a href="#" id="four"><span>Four</span></a>
  133.         <a href="#" id="five"><span>Five</span></a>
  134.         <a href="#" id="six"><span>Six</span></a>
  135.         <a href="#" id="seven"><span>Seven</span></a>
  136.     </div>
  137. </body>
  138. </html>

:D
"Bring forth therefore fruits meet for repentance:" Matthew 3:8
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Joined: Dec 29, 2003
  • Posts: 5169
  • Loc: SC-USA
  • Status: Offline

Post July 25th, 2008, 3:46 am

I'm going to be the dissenting opinion here, sorry. :P

The navigation is pretty/colorful/neeto, and all, but it seems cumbersome and impractical for the task of choosing a language. Especially when I regard the content you have in your site, currently.

Is this just a language toggle? Is it part of a presentation to show off your translation skills? Why is this so elaborate for such a small function?

Why the effort to streamline this? Who cares? The person making hiring/contract decisions won't.

Again, sorry. I'm trying to give you some feedback that's valuable. This just seems like more of a bleep than a big KA-BLAM!
- dM
  • joebert
  • Sledgehammer
  • Genius
  • No Avatar
  • Joined: Feb 10, 2004
  • Posts: 13458
  • Loc: Florida
  • Status: Offline

Post July 25th, 2008, 5:54 am

I see I wasted my time.
Strong with this one, the sudo is.
  • grinch2171
  • Moderator
  • Genius
  • User avatar
  • Joined: Feb 11, 2004
  • Posts: 6744
  • Loc: Martinsburg, WV
  • Status: Offline

Post July 25th, 2008, 6:02 am

As far as doing this kind of stuff with CSS, take a look at this stuff

http://www.cssplay.co.uk/menus/hexagon.html
http://www.cssplay.co.uk/menus/cross.html
http://www.cssplay.co.uk/menus/jigsaw.html
http://www.cssplay.co.uk/menus/olympic.html
‎"Be polite, be professional, but have a plan to kill everybody you meet." Maj. Gen. James Mattis
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Joined: Dec 29, 2003
  • Posts: 5169
  • Loc: SC-USA
  • Status: Offline

Post July 25th, 2008, 6:27 am

joebert wrote:
I see I wasted my time.


Not at all, sir. As a matter of learning experience in development methods, and such, this is great. I'm questioning the usefulness of the product from a design stand point and its value as apart of information delivery.

//I hope I haven't offended you, celandine. :cry:
- dM
  • celandine
  • Mastermind
  • Mastermind
  • User avatar
  • Joined: Oct 30, 2007
  • Posts: 2008
  • Loc: Belgrade, Serbia
  • Status: Offline

Post July 26th, 2008, 12:54 am

dM - no offense taken, I come here to get different opinions :D

the idea wasn't to make a language toggle, in fact I don't know what the navigation would be used for - it was simply an exercise in creativity. I'm going to use it somewhere at some point, but it might not have languages attached to it. the reason I put languages was because it's a little more fun than 'home', 'about us', 'contact' etc etc, and a friend of mine was thinking of starting her own translation website so I was thinking she might have a page for each language. (she probably wouldn't though :D)

thanks to everyone who made efforts to help - I'll check it all out and see what I can do with it. I really want to streamline this thing - if I can make it work I can make hundreds of other creative navs in the future on the same principles...

sorry I haven't been checking back here for a bit, but the day job got really rough lately and I'm just so miserable most of the time, no enthusiasm for anything....... this is the one thing that gives me some stress relief though.

again, thanks everybody :D I'll post edits as they come.....

EDIT: I must admit I feel exceptionally thick at the moment, but Joe, what did you do? I see bogey's code (which I'm currently trying to unravel) and I see from the comments that you did something, but I can't find what where....? (I can see this is going to be one of those d'oh moments...)

EDIT 2: grinch, those links look really interesting. I'll definitely give that a go :D
Eagles may soar in the sky but weasels don't get sucked into jet engines.

celandine designblog
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Joined: Dec 29, 2003
  • Posts: 5169
  • Loc: SC-USA
  • Status: Offline

Post July 26th, 2008, 3:34 am

I think with the concept you have, an hour in a recording studio and Adobe Flash, you could have one fine translation-themed multimedia presentation. :D
- dM
  • joebert
  • Sledgehammer
  • Genius
  • No Avatar
  • Joined: Feb 10, 2004
  • Posts: 13458
  • Loc: Florida
  • Status: Offline

Post July 26th, 2008, 12:13 pm

Quote:
I must admit I feel exceptionally thick at the moment, but Joe, what did you do?


You're not crazy, I nuked my replies.
Strong with this one, the sudo is.
  • Bogey
  • Bogey
  • Genius
  • User avatar
  • Joined: Jul 14, 2005
  • Posts: 8212
  • Loc: USA
  • Status: Offline

Post July 26th, 2008, 5:47 pm

celandine wrote:
EDIT: I must admit I feel exceptionally thick at the moment, but Joe, what did you do? I see bogey's code (which I'm currently trying to unravel) and I see from the comments that you did something, but I can't find what where....? (I can see this is going to be one of those d'oh moments...)


I didn't do anything different tat what Joe did. The code I have is actually Joe's with one line commented out and moved somewhere else. (Well, and some other lines added).

But it's the positioning, margins and display that is doing the job (well, heights, widths, the image and those stuff add to the effect :lol: ).

I think I understand it :lol:
"Bring forth therefore fruits meet for repentance:" Matthew 3:8
  • celandine
  • Mastermind
  • Mastermind
  • User avatar
  • Joined: Oct 30, 2007
  • Posts: 2008
  • Loc: Belgrade, Serbia
  • Status: Offline

Post July 28th, 2008, 5:17 am

I'm not sure I do yet :D but by god I will....

thanks again, one and all....
Eagles may soar in the sky but weasels don't get sucked into jet engines.

celandine designblog

1, 2

Post Information

  • Total Posts in this topic: 26 posts
  • Users browsing this forum: No registered users and 116 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.