- This topic is empty.
February 11, 2012 at 10:27 pm #36615
First time poster here. Hello! As the title implies I am presently working on my first design contract and boy was I ever not prepared. I was asked to set up an online cookie shop and we both agreed that a fluid/liquid layout would be nice. Little did I know what I was getting myself into. I’m a hobby-ist designer and everything I know comes from tinkering. On top of that Ive only had experience through my ipb and mediawiki sites. For this project I chose Prestashop for my clients shop. My client had been dabbling with photoshop and so we worked on the graphics together. He created the logo for himself, we built the elements together and then we created the layout that was to be rendered online after choosing a hosting package for him and setting it all up.
Shortly after this point is when I realized I was in for a lot of late nights… CSS positioning and whatnot was not something I knew much about. It has taken weeks to get to this point and it was tonight I finally had a breakthrough using @media queries. Whew!
From what I can tell the layout should work with all desktop and laptop screens. If I could now just make it fit nicely on an iphone my client and I would be very happy.
Does anyone have some advice for this novice designer. I would really appreciate it! :)February 13, 2012 at 1:22 pm #96630
Ooooook, well I thought I had this positioning stuff figured out but boy was I wrong. Help!
I’m having trouble positioning my content div so that it stays in the bottom right corner AND does not overlap header content when the browser window is made very small. How can I make a div position bottom right AND stop 200px before top when the browser window is made small?? I tried @media queries but it didn’t work in a scenario where the user is zoomed out AND there browser is made small. Argh! I really need help with this. Pretty please?February 13, 2012 at 4:27 pm #96643dfoggeParticipant
technically youre supposed to convert all elements from px to em. ethan marcotte introduced the idea here: http://www.alistapart.com/articles/responsive-web-design/
but since youre in a time crunch maybe try using a roughly guessed % instead of px, and if that helps go in and convert all the px to em later.
i just did something like this in firebug on your site and it seemed to help with the cloud overlapping your header.
background: url("../img/cloud_2.png") no-repeat scroll 0 0 transparent;
February 14, 2012 at 5:45 pm #96699
Wow, what an amazing article. Very engaging and informative. Only halfway through it too! Thank you so much dfogge. :)
I tried the %’s in Chrome’s editor and wasn’t able to get the same results. I normally use Firebug but my client uses Chrome to browse, drat him! So I’ve put the @media queries back in.
So now with @media queries preventing the position:absolute cloud graphic from overlapping other graphics I have just one major problem to resolve.
Oh wait a sec… I guess I need to change my media queries to % or em as well? I think that might be why my design is breaking.
Back to the drawing board!February 14, 2012 at 7:05 pm #96701joshuanhibbertMember
Actually, responsive design isn’t just about using percentages instead of pixels, that is called fluid design, and has been around for many years. Responsive design is about much more, such as device awareness and focusing on content. So in other words, you can certainly use pixels as you are doing, and use media queries to change sizing.
In the long run I would recommend looking into fluid layouts to compliment your responsive sites, but please don’t feel as though you don’t have a choice. Sometimes using pixels is the correct decision.February 15, 2012 at 3:30 pm #96759dfoggeParticipant
hey youre welcome schot! and just for the record i agree with joshua 100%. there are no hard rules to responsive design. do whatever works for you.
one school of thought is to have multiple fixed width layouts, other people aim to make everything fluid.
if you’re happy with the level of responsiveness in your site by just making one or two elements fluid then go with it, but if you’d like everything to resize up and down uniformly based on screen width, then you’d have to convert more elements to em or percentage.February 16, 2012 at 2:29 am #96789
Wow, it’s really coming along guys. Thanx so much for your nick-of-time advice. I’m so excited about this project and I’m loving the techniques for responsive design. Personally, responsive design is what I’ve always strove for, albeit without knowing what it was, lol.
The cloud is behaving much better now after simply changing a few queries to em though I’m still running into problems in specific situations. Like when I visit my page with zoom previously zoomed in. The page loads with the enlarged graphics overlapping. If I resize the browser then things snap into their proper places.
I had no idea that zoom could cause so much trouble… o.OFebruary 17, 2012 at 4:06 pm #96886
Ok, I think I might lose my mind. Can someone rub my back and tell me that everythings gonna be alright… This is just so wrong, lol. I can’t believe how hard it is to simply keep a perfectly defined shape in the bottom right corner. I think my heart is palpitating?!
Under normal circumstances, (“normal”… Ha!), the cloud shape sits pretty. But when zoomed out and then shrinking the browser window, the cloud hops up off and away from the corner showing it’s ugly jagged corners. Ack!
Is there some little thing I’m missing? Oh please lord show me a sign!
You know… In the old days a simple table layout would probably have been a perfect solution to this present day problem…February 23, 2012 at 3:15 pm #97309
Could someone have a look at my layout. I’ve been at the same problem for days and I think I’m losing perspective. I could use some fresh eyes please!
The problem is that I’m using @media queries to ensure my bottom right position:absolute cloud graphic does not overlap the top menu or the right side links. This works great in Firefox and IE but oddly not in Chrome or Safari.
1. In normal Zoom and Zoomed out all the way, view the layout in fullscreen using FF or IE
2. Now “restore/un-fullscreen” your browser
3. Grab the corner of the browser and compress the browser window
4. Notice that the cloud shape will stop and lock in place at the upper and left side when the window becomes too small
Now try the same thing with Chrome or Safari. In those browsers the point at which the cloud will lock in place is far off the mark, resulting in the cloud overlapping other elements and killing the layout.
Why is there such a difference? I just can’t seem to figure it out.
EDIT: Added an extra step for zoom…
- The forum ‘CSS’ is closed to new topics and replies.