Help - Search - Members - Calendar
Full Version: Latest Design .. Mtz
Zymic Webmaster Forums > Web Design & Development > Reviews > Website Reviews
MrTouz
For about 2 3 weeks i did not get any inspiration and i was starting to feel scared :/ each time i opened ps i was just closing it.. and i am dead serious... NOTHING was good enough to have an other version or to be saved.

Well after some 'music' tongue.gif and a lots of Soda (coca cola) i think i got it.

It is valid HTML and (almost) valid CSS, reason its not is because i wanted to have it working in IE6 and i had to use the trick : '_' so only IE reads it... but it does not validate.. other than that it is valid.

It is working in FF IE6 and latest Safari, i dunno about FF3 and IE7, i think it should be good for FF3 since codes are displayed the same over there but for IE7.. i am not sure, (if anyone sees a bug just post it here ? thanks)

Again this is my latest layout since around 3 to 5 weeks (can't really remember) and i think it turned out pretty well !.. tell me what you think tongue.gif ?

MTZ Prod
k.digennaro
very nice MrT, I especially like the effect in the header. May i ask how you created that? Its an awesome effect
Jacob
Good to see you got your creative flair back. I like your nav the best. It is very abstract sort of thing isn't it?

Jacob.
k.digennaro
i didnt notice this the first time i looked at it, but if you hover your cursor over the design on the right in the nav, that section of the nav moves to the right, im not sure if that was intentional or a mistake. thought id point it out
MrTouz
QUOTE(k.digennaro @ Sep 6 2008, 12:49 AM) *
i didnt notice this the first time i looked at it, but if you hover your cursor over the design on the right in the nav, that section of the nav moves to the right, im not sure if that was intentional or a mistake. thought id point it out


Can you please show me a preview of it ? (also give me your browser info)
It might be a bug.

And yes Narzy its abstract brushes that i modified a bit.

Thanks both for the comments !
k.digennaro
I cant really show you a preview because its a movement, I guess I could show you a before and after but I dono if it would help. it looks like some where you messed up the width of your image by maybe just 3-5px. Im using FF3. Looks like its a FF problem, I pulled it up in IE and no problems

-Kevin
MrTouz
Are you talking about the Latest Entries area ? or the TOP nav ?
k.digennaro
right above latest entries and to the right of the "contact" button, its that far part of the nav bar with the image on it. Is that image attached to the hover for the "contact" button? i guess that wouldnt make sense though that it only showed in FF
MrTouz
Weird because my code looks clean.
I don't want to DL FF3 coz i don't like it but i guess ill check it out tomorow at my cousins. The contact code is not dealing with the right side of the nav its a totally diffrent class. And its not moving in FF2 :/

Wierd.
k.digennaro
before its 933px wide.


after its 932px wide.


The red line is what I measured.

Maybe that will help smile.gif.

-Kevin

Edit: Not really sure what caused that glitch, ill look around and see if i find anything
MrTouz
Ok now you got me by the balls tongue.gif I really dunno where it comes from tongue.gif
k.digennaro
yeah lmao i just looked through your code, I have no idea lmao i wish i could be more help
MrTouz
Changed the url, i did set the layout into my old site www.mtzprod.com is the bug still here in FF3 ?
k.digennaro
nope, problem is still visible in both urls sad.gif
MrTouz
Than i guess i just have to hang my self ?
Dunno where it comes from but i think my position bottom with a links over css is messed up. I will re code it to see how it runs. (hope ofr the best)... we will see tomorow night. its 4 am here... and i am tired. tongue.gif
k.digennaro
haha sounds good, ill keep up with the thread smile.gif maybe i can be of more help lol

edit: although IN YOUR FACE JACOB!! Haha sorry smile.gif just i noticed something before any one else smile.gif iono just let me have my moment ill be better by tomorrow smile.gif lol
MrTouz
QUOTE
edit: although IN YOUR FACE JACOB!! Ha ha sorry smile.gif just i noticed something before any one else smile.gif iono just let me have my moment ill be better by tomorrow


LOL!
Yea its hard to be here before Narzy... just look at his post count... he is everywhere !!! he registered almost a year after me but has almost twice as much posts as me.
Andrew
Well I hate to bring up another bug or annoyance, but the nav is not as wide as your body content. I suggest you download jruler I use it all the time to make sure things line up properly. (Yea the guides in photoshop help while designing, this helps while coding)

http://www.spadixbd.com/freetools/jruler.htm


And as for your nav problem, I assume it's your css coding, because you're using <a tags for non linkable items, and your css code a:hover has the style, background-position:bottom; and that might be messing it up. Try making the <a tag for the right image, a div tag just to see.

And also kevin said it moved to the right, it moves to the left for me. And when I hover over the home image it moves to the left also. So both your beginning and end images are doing it.

It's also doing that in IE7 Mr. Touz
k.digennaro
im sorry it does move to left for me also lol, got my directions messed up smile.gif lol

thanks for the tool trippin, havent heard of that, but im gona try it out aswell.

also i didnt see the problem in ie7
Andrew
Weird it's doing it for me in IE7 and FF3 but not google chrome.
EMOruffino
very clean layout.... i love the spirals.... makes me feel sexy....


though i think the BG could be darker....
MrTouz
Thanks for the comments guys i really appreciate the help and the review.

QUOTE
Try making the <a tag for the right image, a div tag just to see.


Yea well i was having a problem with the width of the nav because IE calculates differently, it should be 962px width, but if i set the #nav to 962 in IE its making the right image go down... its to small. So i tricked it and its working on both, but it appears that using A tags was a bad idea... thought it would save me some time but not tongue.gif Ill change that now and see how it runs.
Brandon
I like it very much cause its clean, but the bg could be darker as matt said.

Good work.
MrTouz
Actually found my error, oh FUCK i am saying oh FUCK. I set the home button to 74px instead of 75. The page loaded 74on mouseout but loaded 75 on mouse in... which made it move :/

I am re cleaning everything and adding the divs it should be working fine now (i hope tongue.gif)
MrTouz
Can anyone tell me how it is now over FF3 and IE7 ?
The left image and the right image were messed up by 1 pixel (i guess its because i was not focused much while being 3am), so now its fixed.

I changed the look of it, instead of having : leftimage rightimage bgrepeat & menu buttons i have : menu image & menus. Only elements that have a hover are the menu.

I think its fixed. probably messy by moving left or right because of the different browser but i will fix if anyone tell me that messes up.

Thanks again for the comments and the help !
k.digennaro
haha!!! wow i actually figured out what was wrong smile.gif just didnt see it in the code smile.gif. Works in FF now MrT nice job smile.gif
MrTouz
Well i found a IE7 bug the right nav moves to the right... weird. Ill fix that as well.

I will try to make the BG darker... and see how it runs.
Andrew
Found another error, looks like your widths are setup weird, or you've coded it weird. The nav and header are smaller width than the content area because they auto center when the browser is not maximized, and therefore doesn't center right and looks malaligned. Check the screen shot for details. It does this in IE7 Chrome AND FF3.

MrTouz
Yea text are is 1002 and nav is 960, ill make it bigger because of the gradient i need a 1002 width for the content area...

Damn, looks like i coded it in a rush. Never had that many problems in a code before... remind me not to code after 1am.
Andrew
Hey MrTouz.....

Don't code after 1am.
MrTouz
Lol, i fixed the width problem.
I am installing wordpress now. Im so tired. im going to bed.

Thanks again for the help.
wozzym
Its terrible, I hate it tongue.gif

Its pretty good, well done, but the blue line under the navigation seems weird to me for some reason. I dont know why.
IamShipon1988
This is what I get for not having much time for anything. Anyhow, excellent work on the template. However, there are a few things that need to be looked over. Hope you don't mind if I speak my mind on this as I believe it will be the best in critiquing.

1. The favicon sucks. It needs to be changed. Not sure why you used a blue solid box, maybe as a place holder?
2. The header is really nice. I love the choice of color and the contrast used there. The vector shapes are great additions and makes the entire header fall together. The flame effect was nicely executed and I don't know any way I could have done it better. Must have taken a lot of time to get that portion done.

Now the negative side. Although the header is very attractive, it does not suit the body. The body uses a light color in addition to a bright blue. That to me is a bit random. I don't know why you decided to use that.

Also the layout is distorted in Firefox 3 and IE7 just like Trippin said.
MrTouz
Thanks for the comment.

For the favicon it is to hold the place but in addition i really have no idea what to put up there. I have small ideas but really ? its so small that you can really put anything but again favicons are really important.

While i made the body i felt it was empty, like really empty i guess it is why most people preferred darker. I wanted to check the content area with some text and some content to see how it runs and if it looks darker. I think it does but it feels still empty... i will see how my imagination takes me and see if i can find something to make it darker and more full. (i take suggestions for that part)

As for the header, well it was not that hard, well yea it was but just like any other site you have to work hard on some parts and not work at all on others tongue.gif

As for the coding, i only have IE6 on my PC and i fixed it for IE6 but the problem is that the fix for IE6 makes a bug for IE7. Well i know i have to remove the fix so it looks good in IE7.. IE6 sucks anyways.
But for your distortion... is it only the right bar ? because its the only problem i get in IE7.
And i do not have FF3 (i don't like the graphics of it.)

Thanks a lot for the feedback, wordpress was installed correctly and is looking better with content.
swordz
Also, you need to redo your validation, or remove the link to the validator.

swordz
IamShipon1988
Well have a special stylesheet for IE6 and IE7
MrTouz
Yea don't worry for the validation, its a XHTML dtd but my layout is HTML.. its because of Wordpress since its valid Xhtml 1.0 but i don't code xhtml... just find it kind of weird and not that different.
I will just change the coding... that is really not a problem.

@ IAS, i guess you want me to use the IF statement, problem is i dunno how to use it :/ you have an example ?
flyboy
You should try to be coding in html to be honest. Theres html 5 tho. Which is stricter than 4.1. But for the sake of you having semantically clean code (proper code) you should be using an xhtml strict doctype. Unless you are mixing presentation with structure .
MrTouz
Well i always code in 4.1 never saw any doctypes of html 5 but i will try that one... question : why create a fifth version of HTML if its going to be replaced by XHTML ?
swordz
They don't necessarily think it is yet - until they persuade browsers to fail when they come across bad code, they can't make xhtml the standard, and that won't happen for a while.

swordz
IamShipon1988
I'm pretty sure you will understand the following, so there is no need to explain why it works. If you don't, just ask.

For IE6
CODE
<!--[if IE 6]>
    <link rel="stylesheet" type="text/css" href="IE-6-SPECIFIC.css" />
<![endif]-->


For IE7
CODE
<!--[if IE 7]>
    <link href="IE-7-SPECIFIC.css" rel="stylesheet" type="text/css">
<![endif]-->


Specific Div Tag for IE7 ONLY
CODE
* html #div {
    height: 300px;
}


Hide Something From IE6 and Lower
CODE
#div {
   height/**/: 300px;
}

OR
CODE
html > body #div {
      height: 300px;
}


Reference
http://css-tricks.com/how-to-create-an-ie-only-stylesheet/
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2012 Invision Power Services, Inc.