1 reply [Last post]
malz414
malz414's picture
Offline
newbie
Antigua
Last seen: 15 weeks 1 day ago
Antigua
Timezone: GMT+1
Joined: 2018-08-31
Posts: 1
Points: 2

I am a first year student in comp sci so I have the very basics of html and css down, but someone has asked me to make a site for them so I tried. The problem I am having with the layout which goes absolutely haywire when I zoom in/out or inspect the site on the mobile devices in chrome. And also I find that white space in the site looks off and I am not sure what to do there.

AttachmentSize
stitchcss.txt3.92 KB
stitchhtml.txt3.2 KB
site zoomed out.png145 KB
site zoomed in.png746.34 KB
site normal.png567.6 KB
mobile.png199.73 KB
gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 14 hours 25 sec ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9716
Points: 3792

Your instructor blew it

1) Your markup is non-semantic. I.e. it does not say what the content is. The DIV element denotes a container for multiple containers to be treated by the CSS as a group; it is an aggregator. Think chest of drawers. It has no semantic value. Assistive technologies often depend on semantic markup to tell the user what they are 'looking' at and for local navigation. The UK and the EU have strict laws regarding the accessibility of web sites. I don't know about Antigua.

2) A menu is a list, not a button followed by a bunch of links. Consider, too, that someone who has disabled javascript, maybe due to a low battery or security concerns, cannot expose those links unless they also disable CSS. If the page is not functional without client-side scripting, it is a failure.

3)There are two guaranteed ways to screw up responsiveness, use tables to lay out the page or use {position: absolute/fixed;}.

Initial debugging:

Refactor your html markup as semantic element tags. Remove all style elements in the body to the stylesheet and move all script elements to their own file/s.

As far as I can see, there are two legitimate div elements, the top banner and the footer. HTML5 has specific tags for these, but older browsers may not support them.

Make a bare naked html page that works before ever enhancing with css or javascript.

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.