Jump to content

Domain Name


vchris

Recommended Posts

I like the slide-panel. Though the red looks a bit strange in my opinion, I would have stuck to blue.

Link to comment
Share on other sites

  • Replies 231
  • Created
  • Last Reply

Top Posters In This Topic

I like the slide-panel. Though the red looks a bit strange in my opinion, I would have stuck to blue.
Don't worry about that. I'm just creating 2 other styles (R,G,B ).
Link to comment
Share on other sites

  • 2 weeks later...

Looks good. But you seem to have many images. I don't have that good internet connection, so when I switch the theme for a first time, I download it for quite some time (a few seconds really, but the experience is "this is veeery slow" like).You could reduce all of your buttons in the navigation to a single background-image with the gradient in it (2px wide, repeated), and CSS for the letters. If you want to preserve the fancy letters too, you could use a span, which you'll hide, but preserve it's background image which would be the fancy letters themselves as an alpha transparent PNG (for IE6, you may want to reshow the span text).Also, why use JS for the menu effect? Why not just :hover?You should add "title" attributes to the images that are links (mainly, the color themes), as only IE expands the "alt" attribute to a tooltip.

Link to comment
Share on other sites

Thank you for your suggestions.I wanted to use :hover instead of js and only have the arrow appear on hover but didn't find a way to do it. I know I can change background image with css but I need the image to be clickable... If you know of a way please let me know.

Link to comment
Share on other sites

Thank you for your suggestions.I wanted to use :hover instead of js and only have the arrow appear on hover but didn't find a way to do it. I know I can change background image with css but I need the image to be clickable... If you know of a way please let me know.
If you make each <li> use a background-image instead as I suggest, you could apply a background-image with the arrow on a link with :hover.
Link to comment
Share on other sites

but then how could they be clickable?
What's a link (<a> element) for? To be clicked on in order to take you to another page. A link is by definition clickable. Expanding it 100% height and width of it's container (and perhaps making it a block) should ensure the link is clickable anywhere within the list item, rather then only when the mouse is over the text.
Link to comment
Share on other sites

I don't really want to make the text on the buttons just text. Is there a way I could make only the arrow appear on the button instead of loading the same button but with the arrow?

Link to comment
Share on other sites

I don't really want to make the text on the buttons just text. Is there a way I could make only the arrow appear on the button instead of loading the same button but with the arrow?
Without making the main image a background-image of the list item, I don't think there's a way. None that I could image anyway.If you really don't want to leave just text, that's OK. You could hide the text by placing it in a span with display:none;. Applying a background-image on the link with only the arrow on :hover would then result in exactly what you have but with only using CSS and no JS. Still, image usage would be heavy, and that's your bigger problem.
Link to comment
Share on other sites

What if I add a background image (arrow) to my a element. Would it load the arrow in front of the button?
If the image is made a background-image of the <li>, yes. That's exactly the point I'm trying to make.Example:
<li id="startPage"><a href="/"><span>start page</span></a></li>

and

#startPage {background-image: url(startpage.png);}li {width: 200px; height: 100px;}li a {width: 100%;height:100%;display:block;}li a:hover {background-image: url(arrow.png);}li a span {display:none;}

Note that I haven't reviewed your URLs and that you'll need to make all "li" elements with their right size. This was just a sample of the idea.

Link to comment
Share on other sites

Interesting... So basically I have text in the a element but it's not displayed but the a element is the same size as the <li>.
Right, and while the link is transparent, the <li> uses the image as it's background, meaning you'll always see the background as if it's an image. With CSS off, the image is replaced with a plain text link.
Link to comment
Share on other sites

It doesn't seem like I'm able to set a width and height for an li element. So when display:none; is set, the li is not visible, including the background image.

Link to comment
Share on other sites

It doesn't seem like I'm able to set a width and height for an li element. So when display:none; is set, the li is not visible, including the background image.
Your li elements should probably already be display:block;. If so, you should be able to set height and width as well.
Link to comment
Share on other sites

Your li elements should probably already be display:block;. If so, you should be able to set height and width as well.
What if my li are inline. Block would cause to be one underneath the other.
Link to comment
Share on other sites

:-O Jaw-dropping site ... very nicely done. I especially loved the sliding panel on your about page. I did notice two things though. Just like what boen_robot said, when switching between your color schemes, it did take a while to load the images. Your CSS validation link seems to be a bad url. That's it, other than that, it's simply perfect.

Link to comment
Share on other sites

:-O Jaw-dropping site ... very nicely done. I especially loved the sliding panel on your about page. I did notice two things though. Just like what boen_robot said, when switching between your color schemes, it did take a while to load the images. Your CSS validation link seems to be a bad url. That's it, other than that, it's simply perfect.
Thanks for you feedback, I appreciate! :)The sliding panel was a pain but I got it working in all browsers correctly. I'll look into the css validation link. I know that w3c changed their validation page since so that might have something to do with it.
Link to comment
Share on other sites

I have to say I am impressed as well. Even from where you started with you first launched this site - you've made good judgements on how to enhance it without getting too out of control. Its a great design with plenty of subtle complimentary elements - like the icons in the footer that mimic the header navigation.Here are my only criticisms:(and its just me being picky since you're that good)

  • I'd like to see you use the "title" attribute in your links as they can used to describe the target in more detail than the images it wraps. Like the footer links - the house icon could have "title='Return to my homepage.'" let alone all your <a> tags.
  • The change theme idea is nice and well done but I thin the icons are a little over powering. I almost see them being no bigger than the flags - to keep elements proportionate throughout the site. I'm not sure if that would be a good place to keep them, but toning them down might keep them from being distracting or otherwise seem to be an after thought.
  • I like "lightboxes" alot but I've always disliked scrolling down to close the window - I'm on 1024x768, but thats more of a personal thing
  • this may take the idea to far, but a prompt to remember (by way of cookie) the theme that I select might add a little value to the feature so I do not have to select it each time I return to admire design that I am not capable of myself.
  • On your about page the profile div (i didn't check) might do better absolutely positioned and put at the bottom of the page but only (and just only) for the sake of printing. Or the print.css might need to be modified so the content shows up in the big white space it renders now.

Again, great work all around, these are just cosmetics in my opinion.

Link to comment
Share on other sites

I have to say I am impressed as well. Even from where you started with you first launched this site - you've made good judgements on how to enhance it without getting too out of control. Its a great design with plenty of subtle complimentary elements - like the icons in the footer that mimic the header navigation.Here are my only criticisms:(and its just me being picky since you're that good)
  • I'd like to see you use the "title" attribute in your links as they can used to describe the target in more detail than the images it wraps. Like the footer links - the house icon could have "title='Return to my homepage.'" let alone all your <a> tags.
  • The change theme idea is nice and well done but I thin the icons are a little over powering. I almost see them being no bigger than the flags - to keep elements proportionate throughout the site. I'm not sure if that would be a good place to keep them, but toning them down might keep them from being distracting or otherwise seem to be an after thought.
  • I like "lightboxes" alot but I've always disliked scrolling down to close the window - I'm on 1024x768, but thats more of a personal thing
  • this may take the idea to far, but a prompt to remember (by way of cookie) the theme that I select might add a little value to the feature so I do not have to select it each time I return to admire design that I am not capable of myself.
  • On your about page the profile div (i didn't check) might do better absolutely positioned and put at the bottom of the page but only (and just only) for the sake of printing. Or the print.css might need to be modified so the content shows up in the big white space it renders now.

Again, great work all around, these are just cosmetics in my opinion.

Nice criticism, some of those things are funny lolI've been meaning to fix some of those things. Thanks for pointing some of these out.
Link to comment
Share on other sites

Here is a test page with the new navigation. I haven't included the style change to it yet. Works awesome! I should have it setup on the whole set some time this week.http://www.vchris.net/contact/contacttest_e.php
There's only one thing I see missing, and that's the arrow on the current page (contacts in this case). Oh, and the title attributes too.The navigation looks as great as before. Now I only hope it would load everything at least slightly faster.
Link to comment
Share on other sites

Done. Let me know if there is any issues in IE6. I just need to fix the breadcrumb now... Oh yes and let me know if the load time has been reduced.I also noticed something weird not related to the nav. It seems when you view the first website, deep coding (big planet and blue theme), in FF it's fine but in IE there's some white spots over the image. I resaved the image so it can't be that. Something must be adding these shapes...

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...