Block Elements

This is probably the best task yet on this course as it did help me learn a few new things.I still have a lot to learn about CSS and positioning of elements and although the code looks ok on the higher resolutions,it looks poor on the smaller resolutions as I don’t know enough CSS to rectify it.

Here is my HTML code for this project

<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Block Elements</title>
<link rel="stylesheet" href="Block/CSS/style.css">
</head>

<body>
<header id =”mainheader”>
<h1>This is how to stucture a HTML document in HTML5</h1>

<nav>
<h2>This is the Navigation</h1>
<ul>
<li><a href=”#”>Home</a></li>
<l1><a href=”#”>Contact</a></l1>
</ul>
</nav>
</header>

<article id=”mainarticle”>
<header id=”articleheader”>
<h2>This is a sub heading</h2>
</header>

<article id=”subarticle”>
<header id=”subheader”>
<h2>Another sub header</h2>
</header>
<p class=”paragraph”> Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
<aside>
<ul>
<li><a href=”#”>Contact</a></li>
<li><a href=”#”>About Us</a></li>
</ul>
</aside>
<p class=”paragraph”> Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>

<p class=”paragraph”> Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
<footer>
<h3>Here is the footer inside the article</h3>
</footer>
</article>
</article><!–main article closed –>

<footer id =”subfooter”><h3>Here is another footer outside the article</h3></footer>

</body>

</html>

Here is the CSS code

body {
background-color:#8FD8D8;
margin:0;
padding:0;
padding-top:10px;
text-align:center;
display:inline-block;
}

#mainheader {
background-color:#FF0000;
width:80%;
height:220px;
margin-left:auto;
margin-right:auto;
}

h1 {
font-size:40px;

}
h2 {
font-size:30px;
}

nav {
background-color:#FF8000;
font-size:30px;
margin-left:20px;
margin-right:20px;

}
li {
display:inline;
padding-right:10px;

}
a {
color:white;

}

#mainarticle {
height:800px;
width:80%;
margin:0 auto;
background-color:#00FFFF;
padding-top:20px;
}

#articleheader {
background-color:#FF0000;
width:84%;
height:50px;
margin-left:auto;
margin-right:auto;
}

#subarticle {
height:500px;
width:80%;
background-color:#00CC00;
margin:0 auto;
padding-top:10px;
padding-left:20px;
padding-right:20px;

}

#subheader {
background-color:#FF0000;
height:50px;

}
.paragraph {
background-color:beige;
}

aside {
height:100px;
width:150px;
background-color:navy;
color:yellow;
float:right;

}
aside ul li a {
display:block;
text-align:left;

}
footer {
background-color:maroon;

}

#subfooter {
display:inline-block;
padding:20px;
}

Here is what the code looks like in a browser http://racingfocus.x10.mx/Block/Block.html

Advertisements

One thought on “Block Elements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s