mccloud

Heh, exactly the things I wasn't sure about I'll remove the logo hover effect. And for the content.. I am not sure what to write really. Since I am only starting out, I don't have strong reference or 'real-life projects' that I could comment and give background on. Is your monitor screen wider than 1600px? I was having some issues with that email form, but for me it works now on every browser from my screen width (1600px) down to mobile version. Thanks

Hey, After quite a long time I've finished my site. I'll be grateful for any critique and tips. So far I've noticed some technical issues.. for example, on mobiles (tested only on my iPhone) all the images look a bit blurred, low quality. Also when I tested the site on a 2nd notebook, the text was really jaggy and harsh. http://fldesign.sk/index-en.html Thanks

Thanks. I'll look into that and hopefully will solve some of the problems. But even your example in codepen flickered when I hover.. must be something wrong in Chrome.

So the margin stuff didn't work... As for the flickering, I found out that it happens for me only in chrome (but it's not connected to the transitions). I don't know if it's just me, or chrome in general has some bug. Here's a good example: http://codepen.io/thebabydino/pen/dsIAg When I hover over the image I get a quick white flash. I found that apparently this type of transition only works in Chrome...

Wow, thanks a lot for your answer! I'll go through the points you listed and will see what happens

Hey guys, so I have this problem with my hover images. I want to get rid of the initial flicker as they load. But since I got a transition on them, I cannot use sprites. I also tried placing the images in html (and hiding them) but that doesn't work either. I didn't even expect this to happen, because I use an image proloading script. Also, when I test the website in IE and Firefox, the transition (on logo and the arrow at the bottom) doesn't work. Another problem is when I put 'margin: auto' on the logo, in Firefox it ignores the margin-top: 40px so the logo is right at the top of the site. But when I don't include margin: auto, the logo isn't centered in IE. I don't know how to deal with this browser compatibility BS, because there is no way of using vendor prefixes on things like margin. Here's the whole code as a file, since it is quite long: http://www.mediafire.com/view/5j1ho4...nr9/index.html http://www.mediafire.com/view/jn2dp7i5c5ugm70/main.css To sum it up, I need to: 1. fix the flickering of the images the first time I hover over them 2. 'enable' transitions in other browsers. 3. fix the position of the logo, as I described above. I'd really appreciate any help, because I want to get this done finally, but there's always something that comes in the way. Thank you

First off, I want to apologize for the 2 previous posts. There were some loading problems on the page and when I got back to the main forum, I saw I made 3 copies by accident. Admin please delete those two. Thanks. Hey guys, I've been trying to figure this stuff out for quite some time before I post here, but no luck... Basically, I am building a flexible/responsive website and I need to center the content. Here's what it looks like with this code: display: -webkit-box; -webkit-box-orient: vertical; -webkit-box-pack: center; -webkit-box-align: center; http://i.stack.imgur.com/dIgNM.jpg Although the logo and the footer is centered, the main content is messed up. I also tried the 'traditional' method: width: 960px margin: auto and that seems to work fine with some tweaks on the content objects. However I need to use either the flexbox model or give the width in % so that way it's all responsive. And here's an issue again. I managed to fix all the content with % widths, but the images are problem, since they are in css, as background of a div. I have no way of giving them width, without interfering with the fixed div width that is necessary. And I need them to be in CSS instead of HTML, because I want to overlap some of them later on. Is there a workaround for this? http://i.stack.imgur.com/xdZ0A.jpg Thanks a lot for your help

Hah, I was about to post a reply since the image didn't display and then it suddenly came to me that I'll try to remove the 'no-repeat' and now it works. Although I have to specify the exact dimensions, otherwise it would repeat all over. This happened to me in the past as well, that in some situations, when the no-repeat was there, the image didn't display at all. I am curious why... #submit{ background: url('../images/submit.png'); width: 96px; height: 29px; position: relative; left: 140px; bottom: 10px; } But anyway, thanks for help. Now it's working as it should be

Hey guys, I tried to figure this out by myself, but I wasn't successful. Basically, what I want to do, is replace a submit button/image when I hover over it. Looks like this: And I need to replace it with a slightly different image: This is the CSS: #submit{ position: relative; left: 140px; bottom: 10px; z-index:1; } #submit:hover{ position: absolute; z-index:2; width: 96px; height: 29px; top: 435px; left: 1110px; background-image: url('../images/submit-hover.png') no-repeat; I messed with everything, but didn't work. And I guess this is a pretty common thing in webdesign so I want to learn this technique. Do you have any ideas on how this could be done? Thanks a lot