[hawken]

making a site for some crazy cosplay bitches, being paid in Bose speakers. I love helvetica too much. Comments welcome.

[sean_r]

haha, nice logo!

[Andy]

the links don stand out at all from the background.
text seems too big in the text box, but then again I can't really tell as it's japanese or whatever.
How about giving the models a slight pink tint?

[cam]

Originally Posted by hawken

being paid in Bose speakers

[hawken]

yeah japanese love big text. kanji is almost unreadable at what we would consider to be a nice size. I always got moaned at when I first made Japanese sites that no one could read the copy.

links. suggestions?

[pat]

agent provocateurs old site was slightly similarish - can only find a little gif, sorry:

[hawken]

ok, 5am here, gonna hit my sack now.

http://www.vagina-dentata.com/

if this breaks in anyones browser, please comment below:

(Also, I used javascript for the rollovers because css was making my buttons' bg images sink by 10 pixels or something. Is it even possible to make css buttons with no text inside?)

[jthomas]

Originally Posted by hawken

Is it even possible to make css buttons with no text inside?)

Yes. Your links should be "display:block; width: ... ; height: ... ; etc..." And you may want to put them in an unordered list. And why even use images? If it's helvetica, just use helvetica.

Can't see menu worth a darn. Why all the inline styles?

The scrolling="auto" on your iframe is giving an unnecessary horizontal scroll. May want to check on that.

[hawken]

Originally Posted by jthomas

Yes. Your links should be "display:block; width: ... ; height: ... ; etc..." And you may want to put them in an unordered list. And why even use images? If it's helvetica, just use helvetica.

Can't see menu worth a darn. Why all the inline styles?

The scrolling="auto" on your iframe is giving an unnecessary horizontal scroll. May want to check on that.

hmm yes do need to view this on a PC... Fixed the scroll thing, I hope.

You don't happen to have a link to a CSS menu without text do you? AFAIK That sort of stuff only works on IE6, right? Using Helvetica would be a no no.

(inline styles; not worth a style sheets becuase theres only 3 pages. Often I build sites like that and then dump the styles into a sheet, but in this instance it wasn't really warranted.)

[jthomas]

Originally Posted by hawken

You don't happen to have a link to a CSS menu without text do you? AFAIK That sort of stuff only works on IE6, right? Using Helvetica would be a no no.

No. But I suppose you could try using   in your links if the method I mentioned doesn't seem to work for you.

Originally Posted by hawken

(inline styles; not worth a style sheets becuase theres only 3 pages.)

I disagree. I really enjoy being able to change all common elements once rather than multiple times, no matter what the size of the site. But, like you said, you can always dump them into a stylesheet.

[pgo]

Here's what you do - you create your menu as a simple unordered list:

<ul id="nav">
  <li><a href="#">News</a></li>
  <li><a href="#">Concept</a></li>
  <li><a href="#">Gallery</a></li>
</ul>

Use your favorite method of image replacement to display Helvetica. I use the Dwyer method usually, so it'd be something like:

<ul id="nav">
  <li><a id="menuNews" href="#"><span>News</span></a></li>
  <li><a id="menuConcept" href="#"><span>Concept</span></a></li>
  <li><a id="menuGallery" href="#"><span>Gallery</span></a></li>
</ul>

#nav { list-style: none; }

#nav li {
  display: inline;
}

#nav a {
  float: left;  (remember, floating also turns the element into a block)
}

#nav a#menuNews { 
  background: url(/path/to/image.gif) no-repeat top left #BGCOLR; 
  width: (width-of-image)px;
  height: (height-of-image)px;
}

#nav a#menuConcept {
  background: url(/path/to/image.gif) no-repeat top left #BGCOLR; 
  width: (width-of-image)px;
  height: (height-of-image)px;
}

#nav a#menuGallery {
  background: url(/path/to/image.gif) no-repeat top left #BGCOLR; 
  width: (width-of-image)px;
  height: (height-of-image)px;
}

#nav a span {
  display: block;
  width: 0;
  height: 0;
  overflow: hidden;
}

This is the basic setup. Should work for your purposes and remain accessible and well-spidered (not to mention maintaining content/presentation separation).

Add paddings/margins to taste.

[stevo]

Can you change the logo? That type fette faktur type font is too condensed. Would like to see more flourishes in it too. My laptop bleaches out the screen a wee bit –*more contrast would help.

[jthomas]

Originally Posted by pgo

#nav a span {
display: block;
width: 0;
height: 0;
overflow: hidden;
}[/code]

Is a negative text-indent unneeded in this case?

[pgo]

Yeah, it's just a separate method. No text indents - it simply makes the text (within the span) into a 0px by 0px box (i.e. invisible).

[hawken]

Originally Posted by pgo

Here's what you do - you create your menu as a simple unordered list:

<ul id="nav">
  <li><a href="#">News</a></li>
  <li><a href="#">Concept</a></li>
  <li><a href="#">Gallery</a></li>
</ul>

Use your favorite method of image replacement to display Helvetica. I use the Dwyer method usually, so it'd be something like:

<ul id="nav">
  <li><a id="menuNews" href="#"><span>News</span></a></li>
  <li><a id="menuConcept" href="#"><span>Concept</span></a></li>
  <li><a id="menuGallery" href="#"><span>Gallery</span></a></li>
</ul>

#nav { list-style: none; }

#nav li {
  display: inline;
}

#nav a {
  float: left;  (remember, floating also turns the element into a block)
}

#nav a#menuNews { 
  background: url(/path/to/image.gif) no-repeat top left #BGCOLR; 
  width: (width-of-image)px;
  height: (height-of-image)px;
}

#nav a#menuConcept {
  background: url(/path/to/image.gif) no-repeat top left #BGCOLR; 
  width: (width-of-image)px;
  height: (height-of-image)px;
}

#nav a#menuGallery {
  background: url(/path/to/image.gif) no-repeat top left #BGCOLR; 
  width: (width-of-image)px;
  height: (height-of-image)px;
}

#nav a span {
  display: block;
  width: 0;
  height: 0;
  overflow: hidden;
}

This is the basic setup. Should work for your purposes and remain accessible and well-spidered (not to mention maintaining content/presentation separation).

Add paddings/margins to taste.

very interesting way of going about it, but does it handle roll overs?
Also, the goal here is not to display any text at all, which I can it's doing, is that working on all browsers?

[hawken]

Originally Posted by stevo

Can you change the logo? That type fette faktur type font is too condensed. Would like to see more flourishes in it too. My laptop bleaches out the screen a wee bit –*more contrast would help.

ah, changing a clients logo.

if only eh?

[pgo]

Originally Posted by hawken

very interesting way of going about it, but does it handle roll overs?
Also, the goal here is not to display any text at all, which I can it's doing, is that working on all browsers?

Yeah, you could add rollovers no problem. There's a CSS rollover thing - one image, two states - and the hover and active states merely change the position of the background image.

This should work in IE5+ (with a bit of hackery for the 5's) and all modern browsers without problem.