New layout Options

[fgfgfgrfg]

It was the first time using image maps for me=]
i might use it for my top 8 aswell.
but can someone help me?
for some reason is has a scrollbar on the main page but there is nothing underneath the image.
www.myspace.com/wrighty55

[xTHExDUDEx]

Fantastic, I really like this.
Nice colours, original concept, simple and functional; nice work.
I always say this but maybe some subtle hovers on the navigation would be nice but I definately think you should make your top 8 links, maybe some hovers there too?
Also, I think it would look cleaner if you moved the div up to hide the search bar.

Nice work bro.

EDIT: AND YOU ACTUALLY F**KING CENTERED IT!! YAY!!

[fgfgfgrfg]

Haha thanks i did center it, thats the first time i learnt how to do that too.
And how do i do hovers on image map? i have no idea=[

i hid the search bar

[xTHExDUDEx]

Aha, I'm glad you asked, I discovered how to do it not so long ago. I'll probably add it to the tutorial section aswell, I don't think it's there yet.

This article explains what I think is the best way of creating accessible image map rollovers using a tiny amount of HTML and a bit of CSS, very clever stuff.

There are other techniques but I'm pretty sure this is the cleanest and most compatible.

It involves creating hrefs and floating them over the desired part of the image, making them invisible and defining their click coordinates, have fun :D

SOURCE:
http://www.alistapart.com/articles/imagemap

[fgfgfgrfg]

Thanks i'll take a look then i'll test it out on my nav and if it goes well then i shall do the same for my top 8 :D.

edit: the hover thing didn't go well, i got stuck haha.

[KayleighKins]

I love how one of your favorite things is subway and your comment box "mmm *rubs matt*" hahahaha xD

I like your layout, sir.

Also: Go to google and download a freeware called imapic. It's an easy way to do image maps without all the actual fuss of doing image maps.

[dannyordinary]

the page is soo awsome
ii just added u =]

[fgfgfgrfg]

I love how one of your favorite things is subway and your comment box "mmm *rubs matt*" hahahaha xD

I like your layout, sir.

Also: Go to google and download a freeware called imapic. It's an easy way to do image maps without all the actual fuss of doing image maps.

Thanks haha
and thanks for the imapic thing but i like doing things myself so i can do it with ease everytime i try it. So i can learn something new and get that feeling i get once i have accomplished something :D

and thanks LO i accepted you=]

edit: i gave in i am using imapic :D

edit:grr i am still having trouble=[

[speakerboxx123]

i really like it but the top8 imagemap doesnt work
but other than that i like it

[fgfgfgrfg]

I haven't put a top 8 image map in yet :)

[heyyfrankie]

good job image mapping.
that was such a bitch for me to learn and do properly when i first learned it many years agoooo.

and the overall design is nice.
i would have smoothed out the white outlining around the objects, though.

[fgfgfgrfg]

I added a image map to the top 8, still struggling with rollovers though and i smoothed some areas out of the white outlining. And i also saved the image as a png so i don't get the rubbish jpg rendering.

[xTHExDUDEx]

Lookin good.
If you're still having problems in a few days or so I might have made another imap rollover or I could find my old test one for you to play with if ya want?

[fgfgfgrfg]

Yeh that'll be great:)
Thanks.

[xTHExDUDEx]

No worries, I'll have a root about for it later, if I can't find it I'll make a fresh one.

[fgfgfgrfg]

Ok cheers mate
in the mean time i will keep finding problems with my layout and fixing them :D

[xTHExDUDEx]

Finally found it!! Sorry it's kinda grave digging but I think you could use this, the only thing I would add to it is preload code for all the hover states, do this by simply adding all the hover states to a div and use CSS "visibility: hidden;" or "display: none;".
I'm extremely tired so do excuse if I don't make perfect sense just now.
Obviously you'd use properly fitting rollover states, this is just an example.
But yea, there it is :D

RAR'd HTML Sheet: http://www.fileden.com/files/2007/4/14/984...lover_test1.rar

Source:

CODE

<style type="text/css">
body {
  background-color: FFFFFF;
  margin: 0;
  padding: 0;
  }
  
  .hiddenPic {display: none;}
  
  a#left_stick:hover { background-image: url(http://img34.exs.cx/img34/9881/HaloLegendaryLogo.jpg); }
  a#right_stick:hover { background-image: url(http://img34.exs.cx/img34/9881/HaloLegendaryLogo.jpg); }
  a#dpad:hover { background-image: url(http://img34.exs.cx/img34/9881/HaloLegendaryLogo.jpg); }
  a#x_button:hover { background-image: url(http://img34.exs.cx/img34/9881/HaloLegendaryLogo.jpg); }
  a#b_button:hover { background-image: url(http://img34.exs.cx/img34/9881/HaloLegendaryLogo.jpg); }
  a#y_button:hover { background-image: url(http://img34.exs.cx/img34/9881/HaloLegendaryLogo.jpg); }
  a#a_button:hover { background-image: url(http://img34.exs.cx/img34/9881/HaloLegendaryLogo.jpg); }
  a#guide:hover { background-image: url(http://img34.exs.cx/img34/9881/HaloLegendaryLogo.jpg); }
  a#back:hover { background-image: url(http://img34.exs.cx/img34/9881/HaloLegendaryLogo.jpg); }
  a#start:hover { background-image: url(http://img34.exs.cx/img34/9881/HaloLegendaryLogo.jpg); }
  
  #book {
  background-image: url(http://www.gadgetsandgames.co.uk/images/xbox360controller.jpg);
  position: absolute;
  top: 75px;
  left: 50%;
  margin-left: -263px;
  width: 526px;
  height: 374px;
  }
  
  #menu a {
  position: absolute;
  height: 37px;
  width: 37px;
  top: 81px;
  left: 400px;
  text-decoration: none;
  }
  
  #menu a i { visibility: hidden; }
  
  a#left_stick { left: 65px; top: 65px; width: 69px; height: 65px; }
  a#right_stick { left: 305px; top: 161px; width: 65px; height: 65px; }
  a#dpad { left: 133px; top: 152px; width: 89px; height: 89px; }
  a#x_button { left: 357px; }
  a#b_button { left: 440px; }
  a#y_button { top: 40px; }
  a#a_button { top: 123px; }
  a#guide { left: 235px; top: 78px; width: 52px; height: 52px; }
  a#back { left: 191px; top: 93px; width: 28px; height: 23px; }
  a#start { left: 303px; top: 93px; width: 28px; height: 23px; }
</style>

<body>
<div id="book">
<div id="menu">
  <a href="lstick.html" id="left_stick"><i>Left Stick</i></a>

  <a href="rstick.html" id="right_stick"><i>Right Stick</i></a>
  <a href="dpad.html" id="dpad"><i>D-Pad</i></a>
  <a href="x.html" id="x_button"><i>X</i></a>
  <a href="b.html" id="b_button"><i>B</i></a>
  <a href="y.html" id="y_button"><i>Y</i></a>
  <a href="a.html" id="a_button"><i>A</i></a>

  <a href="guide.html" id="guide"><i>Guide</i></a>
  <a href="back.html" id="back"><i>Back</i></a>
  <a href="start.html" id="start"><i>Start</i></a>
  
  <img src="http://img34.exs.cx/img34/9881/HaloLegendaryLogo.jpg"
  alt="rollover" title="rollover"
    height="50" width="50" class="hiddenPic">
</div>
</div>
</body>
</html>

:D

[laxumaster8]

i like red

[Relentless]

It looks great! I love how the layout is a "personal" layout and STEWIE.