Jump to content

Domain Name


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 post
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 post
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 post
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 post
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 post
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 post
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 post
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 post
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 post
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 post
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 post
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 post
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 post
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 post
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 post
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 post
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 post
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 post
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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...