Re-code to get rid of Absolute Positioning?
-
hello... In my designs, I almost always create a Parent Layer (div)...w/ relative positioning; & w/ a margin of '0 auto' so it remains centered on the page (since I almost always use background images)...& then my other divs (nested inside the parent) are always positioned absolutely...the code of which would look something like this:
TITLE
Some Text
...with a result similar to this: http://www.moonjams.net/EXAMPLE.png So...I'm not a pro coder by a long shot...I design like a graphic illustrator would in laying out a magazine page...but...given the fact that I've been told never to use Absolute Positioning (on the Child divs inside the Parent), how would I now re-code that page (using I'm assuming CSS thrown in w/ the HTML) so that it looks like that until the browser gets resized...& then all the elements flow correctly, stacking the way they're supposed to...left to right, top to bottom...WITHOUT USING THE DREADED ABSOLUTE POSITIONING...??? [btw...not asking to have my work done for me...but if someone could please provide just a short code example using a couple fictitious image blocks, I would be appreciative...OR...direct me to an informational on the web detailing exactly how to do it...thanx]. thanx, dox
-
hello... In my designs, I almost always create a Parent Layer (div)...w/ relative positioning; & w/ a margin of '0 auto' so it remains centered on the page (since I almost always use background images)...& then my other divs (nested inside the parent) are always positioned absolutely...the code of which would look something like this:
TITLE
Some Text
...with a result similar to this: http://www.moonjams.net/EXAMPLE.png So...I'm not a pro coder by a long shot...I design like a graphic illustrator would in laying out a magazine page...but...given the fact that I've been told never to use Absolute Positioning (on the Child divs inside the Parent), how would I now re-code that page (using I'm assuming CSS thrown in w/ the HTML) so that it looks like that until the browser gets resized...& then all the elements flow correctly, stacking the way they're supposed to...left to right, top to bottom...WITHOUT USING THE DREADED ABSOLUTE POSITIONING...??? [btw...not asking to have my work done for me...but if someone could please provide just a short code example using a couple fictitious image blocks, I would be appreciative...OR...direct me to an informational on the web detailing exactly how to do it...thanx]. thanx, dox
There is nothing wrong with Absolute Positioning, this is a widely used property and is here to stay for a long time. The way you are using it is unnecessary that is if you don't display your layers above a fixed background image (<img src="">). If you want to move away from Absolute Positioning, use margins.
-
hello... In my designs, I almost always create a Parent Layer (div)...w/ relative positioning; & w/ a margin of '0 auto' so it remains centered on the page (since I almost always use background images)...& then my other divs (nested inside the parent) are always positioned absolutely...the code of which would look something like this:
TITLE
Some Text
...with a result similar to this: http://www.moonjams.net/EXAMPLE.png So...I'm not a pro coder by a long shot...I design like a graphic illustrator would in laying out a magazine page...but...given the fact that I've been told never to use Absolute Positioning (on the Child divs inside the Parent), how would I now re-code that page (using I'm assuming CSS thrown in w/ the HTML) so that it looks like that until the browser gets resized...& then all the elements flow correctly, stacking the way they're supposed to...left to right, top to bottom...WITHOUT USING THE DREADED ABSOLUTE POSITIONING...??? [btw...not asking to have my work done for me...but if someone could please provide just a short code example using a couple fictitious image blocks, I would be appreciative...OR...direct me to an informational on the web detailing exactly how to do it...thanx]. thanx, dox
Something like this: Edit fiddle - JSFiddle[^] HTML Responsive Web Design[^]
"These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer
-
hello... In my designs, I almost always create a Parent Layer (div)...w/ relative positioning; & w/ a margin of '0 auto' so it remains centered on the page (since I almost always use background images)...& then my other divs (nested inside the parent) are always positioned absolutely...the code of which would look something like this:
TITLE
Some Text
...with a result similar to this: http://www.moonjams.net/EXAMPLE.png So...I'm not a pro coder by a long shot...I design like a graphic illustrator would in laying out a magazine page...but...given the fact that I've been told never to use Absolute Positioning (on the Child divs inside the Parent), how would I now re-code that page (using I'm assuming CSS thrown in w/ the HTML) so that it looks like that until the browser gets resized...& then all the elements flow correctly, stacking the way they're supposed to...left to right, top to bottom...WITHOUT USING THE DREADED ABSOLUTE POSITIONING...??? [btw...not asking to have my work done for me...but if someone could please provide just a short code example using a couple fictitious image blocks, I would be appreciative...OR...direct me to an informational on the web detailing exactly how to do it...thanx]. thanx, dox
I am a heavy user of absolute positioning. It is used, in particular, to build what could be referred to as consoles. One could use relative positioning for this, too, but with a good deal more work (or just different adaptive habits). I use relative, too, in a situation where I produce additional input areas on demand. Content is absolute, out block is relative. These, in turn, as a block can also be positioned absolutely. Less of a problem now, but it was the only way to make a page design consistent across platforms only a few years ago (IE, for example, was was a horror story). Real lesson: Don't listen too hard to others' opinions on the latest fashion in HTML development. Tables are/were frowned upon. Snobbery! Sure - you can do more with div's, but if you don't need that "more", life with tables is easier to design and easier to modify. So - you need to meet your design needs - but only make changes that are either essential or that you perceive will come back and bite your backside sometime in the future.
**Above all, you need predictability!
**"The difference between genius and stupidity is that genius has its limits." - Albert Einstein
"If you are searching for perfection in others, then you seek disappointment. If you are seek perfection in yourself, then you will find failure." - Balboos HaGadol Mar 2010
