Simple Business Card Website

Problem

I have been learning to code for nearly a month now. Any tips on how I can improve with indenting to help future readers?

Snippet

` body

/ font & back clr /

{ font-family: verdana; background:whitesmoke ; color:black; }

.menu {

background: black;
width:100%;}

ul {
list-style-type: none;
margin: 0 auto;
display:table;
padding: 0;
z-index: 100;
overflow: hidden;
}

.logo {
height:
position: relative;
margin-bottom:-35px;

}

li {
float: left;
}

/ DROPDOWN Txt Color /

li a, .dropbtn {
display: inline-block;
color: whitesmoke;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

/ DROPDOWN Txt BOX Color /

li a:hover, .dropdown:hover .dropbtn {
background-color: #33383b;
}

li.dropdown {
display: inline-block;
}

/ DROPDOWN content clr /

.dropdown-content {
display: none;
position: absolute;
background-color: whitesmoke;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 100;
}

/ DROPDOWN TEXT CLR /

.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}

/ DROPDOWN COL BOX /
.dropdown-content a:hover {

background-color: whitesmoke}

.dropdown:hover .dropdown-content {
display: block;
}

@keyframes fade {
0% { opacity: 0; }
11.11% { opacity: 1; }
33.33% { opacity: 1; }
44.44% { opacity: 0; }
100% { opacit

Solution

I noticed that some of your HTML Tags are misplaced and will give you weird results if viewed in most browsers.

I went in and indented the tags the way I described below and noticed that you have

tags outside of ` tags which is syntactically incorrect.




This is your Menu Div after indenting, 


    
        Home
        
            Bewerber
            
                Info
                Jobs
            
        

        
            Kunde
            
                Personalverleih
                Werkzeuge Mieten
                Referenzen
                Qulität, Sicherheit und Weiterbildung

doesn't have an ending tag

you have outside of the end tag.

you should be using HTML5 which has a tag designed to take the place of tags like




You also have a Form Tag inside of a H2 tag, This doesn't make sense, I think you meant to style the Form Tag itself or put it inside of a Div.

You have a CSS Stylesheet, so you should not use

align

 in your tags.  Instead of align, you should be using CSS, especially if you want this site to show appropriately on Mobile as well.  you use it a bit, while it is available I would still Figure out the correct CSS to make it appear where you want it.  I left the Align attributes in the HTML, but it felt a little dirty to me.

Your Address HTML is a little odd as well, unless you are not using HTML5.  HTML5 has Address tags. w3schools.com  tag And MDN  tag

By using the Address tag you allow Search engines and Mobile Browsers to know that these are locations, meaning that people can find your business easier.

Google gives results based on location, and this is how it is done.

Another thing that I noticed is that you have a Script tag that is not inside of either the head tag or the body tag, this isn't compliant with standards either.

I found that your

 was missing the ending character on the tag and it was causing a mild irritant to the Browser

The ending

tag for the container was outside of the

 leaving the tag orphaned, I pulled it back inside.

I found it very curious that you used the HTML5 footer tag but you didn't use the Header tag or the Address Tag or the Nav tag.

I am uncertain where the div with the slideshow attribute is supposed to go so I left it just below your menu div.

I would not use all the Comment tags either, your classes and tags should really speak for themselves.

I have not implemented any HTML5 tags that I mentioned, I just indented and corrected tag placement, but I think it looks a little different already. (I may have done a little bit more...)

Here is what I have now

``

function _(id) { return document.getElementById(id); }
function submitForm() {
_("mybtn").disabled = true;
_("status").innerHTML = 'please wait ...';
var formdata = new FormData();
formdata.append("n", _("n").value);
formdata.append("e", _("e").value);
formdata.append("m", _("m").value);
var ajax = new XMLHttpRequest();
ajax.open("POST", "example_parser.php");
ajax.onreadystatechange = function () {
if (ajax.readyState == 4 && ajax.status == 200) {
if (ajax.responseText == "success") {
_("my_form").innerHTML = 'Thanks ' + _("n").value + ', your message has been sent.';
} else {
_("status").innerHTML = ajax.responseText;
_("mybtn").disabled = false;
}
}
}
ajax.send(formdata);
}

Home

Bewerber

Info
Jobs

Kunde

Personalverleih
Werkzeuge Mieten
Referenzen
Qulität, Sicherheit und Weiterbildung

Home·
Zertifikate·
Datenschutz-Bestimmungen·
©2016 A.Willi A.G

Wasgenring 94 CH-4055 Basel

Fax +41 (0)61 856 14 38
Tel. +41 (0)61 646 18 18
info@awilliag.ch

Code Snippets

<div class="menu">
    <ul>
        <li><a href="index.html">Home</a></li>
        <li class="dropdown">
            <a href="" class="dropbtn">Bewerber</a>
            <div class="dropdown-content">
                <a href="info.html">Info</a>
                <a href="jobs.html">Jobs</a>
            </div>
        </li>

        <li class="dropdown">
            <a href="#" class="dropbtn">Kunde</a>
            <div class="dropdown-content">
                <a href="personnel.html">Personalverleih</a>
                <a href="rental.html">Werkzeuge Mieten</a>
                <a href="refrences.html">Referenzen</a>
                <a href="quali.html">Qulität, Sicherheit und Weiterbildung</a>
    </ul>
    </li>
</div>

<body>
    <script>
        function _(id) { return document.getElementById(id); }
        function submitForm() {
            _("mybtn").disabled = true;
            _("status").innerHTML = 'please wait ...';
            var formdata = new FormData();
            formdata.append("n", _("n").value);
            formdata.append("e", _("e").value);
            formdata.append("m", _("m").value);
            var ajax = new XMLHttpRequest();
            ajax.open("POST", "example_parser.php");
            ajax.onreadystatechange = function () {
                if (ajax.readyState == 4 && ajax.status == 200) {
                    if (ajax.responseText == "success") {
                        _("my_form").innerHTML = '<h2>Thanks ' + _("n").value + ', your message has been sent.</h2>';
                    } else {
                        _("status").innerHTML = ajax.responseText;
                        _("mybtn").disabled = false;
                    }
                }
            }
            ajax.send(formdata);
        }
    </script>
    <div class="container">
        <div class="logo">
            <h1 align="center"><img src="logo2.png" height="110" width="500" alt="A.Willi A.G" /></h1>
        </div>
        <div class="menu">
            <ul>
                <li><a href="index.html">Home</a></li>
                <li class="dropdown">
                    <a href="" class="dropbtn">Bewerber</a>
                    <div class="dropdown-content">
                        <a href="info.html">Info</a>
                        <a href="jobs.html">Jobs</a>
                    </div>
                </li>
                <li class="dropdown">
                    <a href="#" class="dropbtn">Kunde</a>
                    <div class="dropdown-content">
                        <a href="personnel.html">Personalverleih</a>
                        <a href="rental.html">Werkzeuge Mieten</a>
                        <a href="refrences.html">Referenzen</a>
                        <a href="quali.html">Qulität, Sicherheit und Weiterbildung</a>
                    </div>
                </li>
            </ul>
        </div>
        <div class="slideshow">
            <img src="panorama.jpg">
            <img src="panorama.jpg">
            <img src="panorama.jpg">
        </div>
        <content align="center">
            <form id="my_form" onsubmit="submitForm(); return false;">
                <p><input style="font-size: 20px" id="n" placeholder="Vorname" required></p>
                <p><input style="font-size: 20px" id="x" placeholder="Nachname" required></p>
                <p><input style="font-size: 20px" id="z" placeholder="Telefon" required></p>
                <p><input style="font-size: 20px" id="z" placeholder="Email Address" required></p>

                <textarea style="font-size:20px" id="m" placeholder="write your message here" rows="10" required></textarea>

                <div class="g-recaptcha" data-sitekey="6LfAMQ0UAAAAAHqX2HDLeV8nggkLrBNwR9pi

<html>
    <body>
        <h1>
            Heading Text here.
        </h1>
    </body>
</html>

ul {
    list-style-type: none;
    margin: 0 auto;
    display:table;
    padding: 0;
    z-index: 100;
    overflow: hidden;
}

.menu { 

background: black; 
width:100%;}

Context

StackExchange Code Review Q#148349, answer score: 6

Revisions (0)

No revisions yet.