How Do I Design This Simple (yet Responsive) Site...???
-
hello again... Attempting to design a site for my local area of NA [from scratch...(now in Pinegrow)...one that had previously been designed in Macromedia DW 2004...whereby all the child divs were of 'absolute' positioning; & resided inside a parent div set to margin: 0 auto...so everything was centered on the page (over a background image)]...but absolute positioning is horrible for responsive code construction; & I want our new site to be up to protocol for browser resize & smaller devices. So...given the conspicuous lack of templates around the web (& in the app) that actually look like what I want to do...I worked up a rough sample of what the site should look like...roughly...(it's very simple, so this should be easy, right?): http://www.moonjams.net/BurlCoNA.png Keep in mind that all that you see above is always centered on the page (w/ a background image behind it)...& the page has to be responsive, whereby everything is distributed/flows correctly for browser resize & smaller devices. ALSO: 1) The oval image block must be positioned where you see it on the page...top/left (in the parent)....over the gray rectangle. ALSO 2) Speaking of which...the first child block (gray rectangle) is just that...a rectangular element filled w/ gray...not a header or paragraph or anything. ALSO 3) Please don't send me to such-and-such tutorial or such-and-such code learning online seminar...I just want to do this on my own, so as to learn the basics of coding a responsive site along the way...(& if it turns out I'm too stupid for this task...if someone could put together a starter code page, where I could then place my own blocks/images/text...I would be happy to pay you, in kind...I just need to get this done; & my local area is waiting). thanx, dox
-
hello again... Attempting to design a site for my local area of NA [from scratch...(now in Pinegrow)...one that had previously been designed in Macromedia DW 2004...whereby all the child divs were of 'absolute' positioning; & resided inside a parent div set to margin: 0 auto...so everything was centered on the page (over a background image)]...but absolute positioning is horrible for responsive code construction; & I want our new site to be up to protocol for browser resize & smaller devices. So...given the conspicuous lack of templates around the web (& in the app) that actually look like what I want to do...I worked up a rough sample of what the site should look like...roughly...(it's very simple, so this should be easy, right?): http://www.moonjams.net/BurlCoNA.png Keep in mind that all that you see above is always centered on the page (w/ a background image behind it)...& the page has to be responsive, whereby everything is distributed/flows correctly for browser resize & smaller devices. ALSO: 1) The oval image block must be positioned where you see it on the page...top/left (in the parent)....over the gray rectangle. ALSO 2) Speaking of which...the first child block (gray rectangle) is just that...a rectangular element filled w/ gray...not a header or paragraph or anything. ALSO 3) Please don't send me to such-and-such tutorial or such-and-such code learning online seminar...I just want to do this on my own, so as to learn the basics of coding a responsive site along the way...(& if it turns out I'm too stupid for this task...if someone could put together a starter code page, where I could then place my own blocks/images/text...I would be happy to pay you, in kind...I just need to get this done; & my local area is waiting). thanx, dox
Re: Re-code to get rid of Absolute Positioning? - Web Development Discussion Boards[^]
"These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer
-
hello again... Attempting to design a site for my local area of NA [from scratch...(now in Pinegrow)...one that had previously been designed in Macromedia DW 2004...whereby all the child divs were of 'absolute' positioning; & resided inside a parent div set to margin: 0 auto...so everything was centered on the page (over a background image)]...but absolute positioning is horrible for responsive code construction; & I want our new site to be up to protocol for browser resize & smaller devices. So...given the conspicuous lack of templates around the web (& in the app) that actually look like what I want to do...I worked up a rough sample of what the site should look like...roughly...(it's very simple, so this should be easy, right?): http://www.moonjams.net/BurlCoNA.png Keep in mind that all that you see above is always centered on the page (w/ a background image behind it)...& the page has to be responsive, whereby everything is distributed/flows correctly for browser resize & smaller devices. ALSO: 1) The oval image block must be positioned where you see it on the page...top/left (in the parent)....over the gray rectangle. ALSO 2) Speaking of which...the first child block (gray rectangle) is just that...a rectangular element filled w/ gray...not a header or paragraph or anything. ALSO 3) Please don't send me to such-and-such tutorial or such-and-such code learning online seminar...I just want to do this on my own, so as to learn the basics of coding a responsive site along the way...(& if it turns out I'm too stupid for this task...if someone could put together a starter code page, where I could then place my own blocks/images/text...I would be happy to pay you, in kind...I just need to get this done; & my local area is waiting). thanx, dox
I wasn’t able to see your image but understand you want a responsive website and to author it yourself. Well there’s two ways to do it but it requires starting from scratch with a complete new way of thinking that defies your current method of HTML. You have two ways here, one is using Bootstrap which is a framework of CSS and JQuery that covers almost everything. The other is creating your own framework from scratch. In other words writing your own responsive CSS system and JQuery. Bootstrap looks easy but the examples are minimalist and a poor way to learn. Your website will look fine but will bomb on certain devices and no one will tell you. Then search engines will sort of look the other way and ignore you. I’m on my 4th gen responsive design framework that is an hybrid of bootstrap, or a more complex overlay over the entire bootstrap package. You might want to look at Mobirise [Free Website Builder Software] (https://mobirise.com/) It’s a Windows app where you can select a template and drag sections onto the page and generate pure HTML. It’s actually pretty neat and makes good HTML. But the huge drawback is that you won’t really learn anything and you’ll paint yourself in the corner with it. You can look at my website, for it’s a hybrid that uses some of the technology they used, only I cooked it up myself. I took the time to reverse engineer what they output and used some of the public components to fix my problems with the viewport and device display compatibility issues I had. Keep in mind this is 4th gen for me, but I know the framework really well now. And I write stuff scratch on Visual Studio 2017 [Discover my world - Shameless hack and web contractor for hire - jkirkerx](https://jkirkerx.com/)
If it ain't broke don't fix it Discover my world at jkirkerx.com
