First completed webpage

Here is what the site looks like with the icons/images:



#firstpic {
margin: 0px;
padding: 0px;
display: inline;
}

#propic {
width: 15%;
}

#somed {
float: right;
padding-right: 5%;
display: inline;
}

#somed ul {
list-style: none;
padding-top: 30px;
}

#sp {
padding-bottom: 10px;
}

#navigation {
border-bottom: 2px dotted #000000;
padding-bottom: 20px;
}

#box {
background-color: #224466;
width: 80%;
height: 300px;
margin-top: 50px;
margin-left: 10% ;
}

#divP {
float: left;
height: 290px;
width: 47%;
margin: 5px 5px 5px 5px;
}

#divP p {
margin: 55px;
font-family: Courier;
text-align: center;
color: #ffffff;
}

#divP2 {
float: right;
height: 290px;
width: 47%;
margin: 5px 5px 5px 5px;
}

#divP2 p {
margin: 55px;
font-family: Courier;
text-align: center;
color: #ffffff;
}

#divI {
padding-left: 60%;
padding-top: 1%;
}

#divI2 {
padding-left: 10%;
padding-top: 2%;
}

#divI3 {
padding-left: 66%;
padding-top: 2%;
}

.bh {
border-right: 2px solid black;
padding-right: 20px;
}

.navbar {
font-size: 400%;
text-align: center;
font-family: Courier;
display: inline;
padding-left: 90px;
}

.navbar li {
display: inline;
}

.navbar a {
text-decoration: none;
color: #000000;
}

.navbar a:hover {
color: #224466;
}
`

Tyler Tilton













-





Home
About Me

• Contact

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.





Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore

Your CSS is validates perfectly, you can validate it at the W3C CSS validator here

Your HTML has a few problems the validator finds here. First, you need to specify a doctype, like this:

Second, it doesn't like the absolute location of the image. What you should do is use relative links, like this: src="myimage.png"

Third, all images need to have an alt attribute. This is some plain text that screen readers use to help people with seeing disabilities, and search engines use to find images:

alt="Image description..."

Fourth, you cannot have multiple id's with the same name. If you want multiple instances of data with that style, use a class. An id specifies a single, unique location on the page.

Fifth, do not use spaces in your URI's. Represent spaces with %20, like this:

href="My%20Image.png"

Sixth, you might as well use HTML5 formatting. This would change the ` into a . Then, just change the name of your style to:

nav {
    /* ... */
}

Seventh, you do not need to identify each block on the page with an id or class. If you wish to style all HTML elements of a certain type, you can do so like I show above. The nav in the example can be replaced with body, div` or any element you wish.

StackExchange Code Review Q#82069, answer score: 8