Positioning mess

[gunzelguy]

For a challenge, I tried coding my homepage from scratch and it is now a bit of a mess. It was designed for a desktop but it looks awful on an iPad and phone. I can't really get my head around when to use the various types of positioning.

Can someone advise what type of positioning the various elements need to always stay in the right place in relation to the other elements?

www.victorianrailways.net

Thanks for any help

Mark

[BenPleysier]

This is a great tutorial to get you started Bootstrap 4 Tutorial​

Edit: B.t.w, I am in Mount Eliza. If you are close by, give me a sign and we can get in touch with each other.

[BenPleysier]

To clarify why I suggested using Bootstrap: It is included as a free package in Dreamweaver. It is easy to implement as this document will show Design responsive websites using Bootstrap.

Bootstrap was created by the web developers of Twitter and is sometimes referred to as Twitter Bootstrap. See Bootstrap (front-end framework) - Wikipedia for more.

[ALsp]

With some due respect, Bootstrap is not good because it's included in Dreamweaver. We know that being included in Dreamweaver actually has been a bad thing more often than not. That Bootstrap was originally written by a group of coders working for Twitter is also not a barometer of its quality.

But the bottom line is that the original poster's page and site requirements seem quite easy to do with a couple of hundred lines of code, rather than miles of code 🙂

I did my job and offered a fair warning.

[osgood_]

BenPleysier  wrote

Bootstrap was created by the web developers of Twitter and is sometimes referred to as Twitter Bootstrap. See Bootstrap (front-end framework) - Wikipedia for more.

Probably a good reason to NOT use Bootstrap in my opinion. Most websites ARE NOT Twitter and don't require an huge obnoxious framework. The only reason for any website to be using Bootstrap is where team development is needed and where the team is producing a large website. The sad fact is Adobe intoduced Bootstrap as a lazy, last desperate resort because its own responsive solution failed miserably. Its pitiful that small independent developers think that Bootstrap is a good fit for a small site BUT I'm not surprised these days as web-develpment generally seems to be in a  huge mess where 'ignorant' developers are confused as to what is a good fit.

You know what, I was reading about Vuex the other day - state management - because state management is being used in websites such as Facebook, Twitter etc idiot developers who follow the sheep,  without a brain, think its a good idea to use it in 'Farmers Giles Porky Pig Snacks' website. Look for state mangement tutorials and the majority of examples show you a simple Todo list using state management - crap examples of where state management is best applied, the sheep follow.

[ALsp]

Bootstrap is not going to help you, unless you want to get into a bigger mess. You started coding that page yourself. It's a simple page. Using Bootstrap would be almost like driving a tractor trailer to pick up a few bags of mulch at the landscapers.

Be very wary and weigh all your options. Bootstrap is not Adobe, it is simply the only way Adobe gives Dreamweaver users to lay out a page right now. That does not make it the best solution.

[gunzelguy]

Sorry, I didn't mean to start a Bootstrap is good/bad war. I was just hoping to get some tips about what sort of positioning to apply to avoid the elements crashing about the screen on smaller devices, I'll just get back to ploughing through a few html/CSS books.

[osgood_]

gunzelguy  wrote

Sorry, I didn't mean to start a Bootstrap is good/bad war. I was just hoping to get some tips about what sort of positioning to apply to avoid the elements crashing about the screen on smaller devices, I'll just get back to ploughing through a few html/CSS books.

Bootstrap is a frequent topic of debate here.

To answer your question. Avoid position: absolute; which you seem to be using a lot in your css.

I really have no definitive answer how you would go about building a website without some knowledge of what you are using does, regardless of if you use Bootstrap or not, it will be a bit of a struggle. I struggle and I have years of coding experience, so how others cope who don't have much coding knowledge really baffles me unless they are just using a ready made template and changing up the images and colors.

I havent used extensions or products such as Webflow, Squarespace extensively enough to make a comment on such products.

[ALsp]

Bootstrap is promoted by Adobe and a few of the "ACP" folks. Not everyone endorses Bootstrap here and based on your page, you really should not be using it. The problem in this forum, is that if you post a simple question, as you did, instead of getting a proper error, you get steered into Bootstrap, and that is just so wrong. I'd love to help you, but I'd need the Dallas Cowboys offensive line to run interference just so I could get through to you. I'm sorry. I really am, but you would be better off getting the coding book out or trying to find a CSS forum or mail list not so fanatically in bed with Bootstrap.

Feel free to contact me off list and I'll be happy to help you.

[Nancy OShea]

In the interest of transparency, Al's  company makes wonderful commercial extensions for Dreamweaver if you can afford them.   Al is knowledgeable about many things but not nearly as knowledgeable about DW CC as one would expect.   By his own admission, he doesn't use DW CC  much except to test his company's extensions.   I doubt that he has ever used Bootstrap or any of the  non-Bootstrap starter templates in DW CC.   If you know how to work with them, starter templates can save you a huge amount of development time.    Or you can buy commercial templates or commercial extensions.  It's your choice.

[ALsp]

If you know how to work with them, starter templates can save you a huge amount of development time

In the interest of transparency, I gave the OP several options, one of which is related to Bootstrap. I did not, as you so blindly do, push him to Bootstrap. Your sensitivity is giving you away, Nancy.

I offered to help gunzelguy. That would involve learning how to code. I don't do mindless, Nancy. There are enough folks inn this forum qualified in that area.

Go ahead and lock this thread, because it's pointless and I'm sick of reading your posts.

[Nancy OShea · Accepted solution]

I never steered anyone to Bootstrap, blindly or otherwise, Al.   I suggested the free starter templates in DW CC as a means to an end.   If you look closely at the UI, there are 4 categories to choose from --  Basic Layouts to Responsive Starters.    Bootstrap is one category but not the only one.

For anyone interested in learning to code layouts manually,  I recommend this video intoduction to Flexbox.  6 examples are covered in a little over 20 minutes.

[osgood_]

https://forums.adobe.com/people/Nancy+OShea  wrote

For anyone interested in learning to code layouts manually,  I recommend this video intoduction to Flexbox.  6 examples are covered in a little over 20 minutes.

I've not looked at the video BUT its from October 2016. I would be looking to learn from something more current. Personally I ignore almost any video tutorial which is over about 18 months to 2 years old.

[Nancy OShea]

You can't judge a book by its cover can you?  .   That tutorial is still relevant today.  CSS & HTML have not changed much in the last 2-1/2 years.   

[BenPleysier]

osgood_  wrote

I've not looked at the video BUT its from October 2016. I would be looking to learn from something more current. Personally I ignore almost any video tutorial which is over about 18 months to 2 years old.

What about a book that was published 24th August 2015?

[osgood_]

I would NOT recomend that either, I didn't check the link. I'm familar with the youtube channel that Nancy posted and know he hasnt posted anything about Flexbox recently, so checked it out to see what date it was published. I still maintain that personally, even as an experienced coder, I would NOT be viewing a video or book that is over 2 years old. Beginners will NOT know if the content is up-to-date or not. The more recent a video then the greater chances you can be more assured the content is relevent to what is hapening NOW, not a few years ago.

I really 'liked' the thought behind both answers I marked as 'helpful' and 'liked' - the OP expressed a willingness to code their own website, so rather than try to struggle with Bootstrap, which will lock them into a very shallow way of thinking and working, learn the basics of html/css - Flexbox would be a good suggestion, also Grid, which is why I marked Jons post as helpful/liked too in this particular instance, as it seemed to fit the OPs thinking.

But you must take into account the date any tutorials were published especially more so IF you are a beginner as you will not have the knowledge to make a judgement if the content is still relevant. There are so many outdated videos and information where it concerns techniques used for building a website, its unreal.

[pziecina]

The problem with anything html/css(3), is deciding when something is stable and has enough browser support to use.

Flexbox and all the css in the book I linked to, are stable and well supported by browsers/devices. The only parts that are wrong is when it comes to 'future' css, (which are not included in the code used). But in order to know if the 'future' css is now usable the coder would have to be well above beginner level.

Another example is when any book/video says use css grid layouts, but not to use css variables. Both have about the same browser/device support, but if a css variable fails the default will be used, if a css grid layout fails the entire page/site fails.

[osgood_]

pziecina  wrote

The problem with anything html/css(3), is deciding when something is stable and has enough browser support to use.

Flexbox and all the css in the book I linked to, are stable and well supported by browsers/devices. The only parts that are wrong is when it comes to 'future' css, (which are not included in the code used). But in order to know if the 'future' css is now usable the coder would have to be well above beginner level.

Another example is when any book/video says use css grid layouts, but not to use css variables. Both have about the same browser/device support, but if a css variable fails the default will be used, if a css grid layout fails the entire page/site fails.

Agreed.

Actually the video Nancy posted a link to, after watching it, is still very relevant today. It's a bit of a shame that it's not been re-tweaked slightly with a more recent publication date to keep it 'fresh', rather than information which might have gathered dust from 2 years back should anyone new to Flexbox be searching youtube for a current tutorial.

[Nancy OShea]

Position: absolute for primary layouts will not work in responsive web design.  Why? Because positioning  removes content from the normal document flow which causes total chaos when elements are re-distributed to fit smaller devices.    It's best to forgo any forced positioning  and just allow elements to flow naturally.

Start over with one of the free Responsive Starter Templates in DW.   Go to File > New > HTML.  See screenshot.  Select one of the layouts and hit Create button.   Save and name your newly created document as index.html.   This should give you a good starting point from which to build your website.

One final word about code errors.   Do not use special characters or spaces in web file names.  Spaces cause code validation errors and could potentially lead to other problems.   See validation results below.

Showing results for http://www.victorianrailways.net/ - Nu Html Checker

[Jon Fritz]

If you can already work with css in general, it shouldn't take you too insanely long to work through css flexbox...

https://internetingishard.com/html-and-css/flexbox/

Another option is CSS Grid:

CSS Grid Layout

Use the best parts of both and you can make really any layout you want, and have it break down gracefully on smaller devices, regardless of the program you're using to input the code.

[pziecina]

gunzelguy​

If you wish to learn how to do rwd layouts, (complete with all modern methods, including srcset for images) and you are willing to learn using a book, then try -

https://www.amazon.co.uk/Responsive-Web-Design-HTML5-CSS3/dp/1784398934/ref=dp_ob_title_bk

I can recommend this book, (having read and tried the examples).