- This topic is empty.
October 15, 2012 at 4:26 pm #40309
I really struggle with css positioning and wonder if someone could recommend some resources that would explain the concepts of it to me. Everytime I read about flow, float, overflow, clear I think I understand it but when I try to put it into practice… well that’s another thing.
For example, take a look at [this page](http://www.kjx.me.uk/servicesTest.php). Initially I tried using position:relative on the parent div (servicesWrap) and position:absolute on the 5 child divs. Failed miserably. Then I read some threads here which suggested using margins and paddings and I have a passable result.
So a couple of questions:
1. Is this a good way to code this page? Please feel free to suggest improvements on the code and design.
2. Any suggestions for getting to grips with css positioning?
Thanks!October 15, 2012 at 4:43 pm #111931i3a1l3yMember
You need to elaborate if you want some help regarding some specific coding on that page.
For CSS resources you should google “W3 CSS” – that strips it right back to basics.
BOctober 15, 2012 at 4:47 pm #111932
Here’s Chris’ video on positioning: https://css-tricks.com/video-screencasts/110-quick-overview-of-css-position-values/
and another on floats: https://css-tricks.com/video-screencasts/42-all-about-floats-screencast/October 15, 2012 at 4:50 pm #111933
In general…for myself, I only use positioning if I cannot get an element in EXACTLY the place I want it in any other way.
I find floats, margins & padding can do the vast majority of the work for me.
That is not to say that positioning does not have its place but, again, for myself, I firmly believe that it should be used sparingly…if at all.October 15, 2012 at 4:55 pm #111934
In the page you referenced, the central element is perhaps the simplest.
Have a wrapping div with a background image and then four equal sized divs inside it.
If you float them they’ll just fall into place. Use percentages instead of px widths and it’ll be responsive too.
In fact, the only thing you will need to ‘position’ is the containing div’s background image.
Something like this: http://codepen.io/anon/pen/FKHoEOctober 15, 2012 at 6:53 pm #111940
Thanks @ Paulie_D, another elegant solution. I have viewed one of the videos you suggested and will have a look at the other. I hope you don’t mind all the questions, but its a great way to learn.
@i3a1l3y – thanks for your replyOctober 16, 2012 at 3:48 pm #112007
@Paulie_D, I tried the above solution on another page (actually the one you suggested I use figcaption).
Here’s [the before page](http://www.kjx.co.uk/case.php) where I’d used floats and the [the after page](http://www.kjx.co.uk/caseTest.php ). They behave similarly but I was wondering if it were possible to center the content and ensure that there are always 2 boxes on a line as the browser window is resized. The pertinent css is at the end of the css file, case and new case.
thanks for all your help!October 17, 2012 at 4:22 am #112044
On your linked After page, remove the max-width from #wrapper and everything is pretty much centered as far as I can tell.
At least as far as around 720px. If you need it to be even more responsive below that size then you will need to employ media queries.
I would remove the inline styling from the div holding the link. Just give it a class and apply the CSS in your stylesheet.October 17, 2012 at 12:20 pm #112119October 17, 2012 at 12:28 pm #112122
You can google it.October 17, 2012 at 3:13 pm #112139
Yeah, I had a feeling it was to do with the different heights. Thanks for all your help and patience, really appreciate it!October 18, 2012 at 3:56 am #112235
- The forum ‘CSS’ is closed to new topics and replies.