Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- /* Universal selector. Giving all elements an initial 5 pixel padding and no margin */
- * {
- padding: 5px;
- margin: 0;
- }
- /* body selector. Setting the font family to Arial (hopefully), in the normal style and
- at the default size. Also setting the background colour of the whole page to white */
- body {
- font-family: Arial, Verdana, sans-serif;
- font-style: normal;
- font-size: 100%;
- background-color: white;
- }
- /* Selecting the 'container' division. Setting a centralised fixed-width layout for all
- elements within the 'container' */
- #container {
- margin: 0 auto;
- width: 100%
- }
- /* Selecting the 'container' and setting a solid black border */
- /* Selecting the header, 'main_body' and the footer. Giving each of these elements a
- light blue background colour */
- header, #main_body, footer {
- background-color: black;
- }
- /* header selector. Setting it to have a minimum height of 40 pixels and a bottom margin
- of 5 pixels in order to put some space between it and the 'main_body' */
- header {
- min-height: 40px;
- position: middle;
- margin-bottom: 5px;
- width:100%;
- }
- /* Selecting 'main_body' division. Setting it to have a minimum height of 200 pixels and
- a bottom margin of 5 pixels in order to put some space between it and the 'main_body' */
- #main_body {
- min-height: 200px;
- margin-bottom: 5px;
- background-image: url('power_on_-_texture.jpg');
- }
- /* footer selector. Setting it to have a minimum height of 20 pixels */
- footer {
- min-height: 20px;
- }
- header h1 {
- color: white;
- font-size: 24pt;
- display: inline-block;
- vertical-align: middle;
- opacity: 0.5;
- }
- header img {
- height: 40px;
- vertical-align: middle;
- }
- #main_body h2 {
- color: white;
- font-size: 18pt;
- }
- #main_body p {
- color: white;
- font-size: 12pt;
- }
- footer ul {
- text-align: center;
- }
- footer ul li {
- list-style-type: none;
- display: inline;
- font-size: 10pt;
- color: white;
- }
- #left_col, #right_col {
- width: 475px;
- padding: 0;
- float: left;
- }
- .keep_clear {
- clear: both;
- }
- .headerRight {
- padding: 0;
- float: right;
- }
- .headerFloatRight {
- float: right;
- }
- .headerFloatLeft {
- float: left;
- }
- /* Following from w3schools: http://www.w3schools.com/css/css_image_transparency.asp */
- div.background {
- width: 500px;
- height: 250px;
- background: url('Circuit.png') repeat;
- border: 2px solid black;
- }
- div.transbox {
- width: 400px;
- height: 180px;
- margin: 30px 50px;
- background-color: #000000;
- border: 1px solid black;
- opacity: 0.6;
- filter: alpha(opacity=60); /* For IE8 and earlier */
- }
- div.transbox p {
- margin: 30px 40px;
- font-weight: bold;
- color: #000000;
- }
- /* Above from w3schools: http://www.w3schools.com/css/css_image_transparency.asp */
- //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
- <!DOCTYPE html>
- <html>
- <head>
- <!-- This is a comment tag -->
- <meta charset="UTF-8" />
- <title>Lecture 4</title>
- <link rel="stylesheet" href="ok.css" type="text/css" media="screen,projection" />
- </head>
- <body>
- <div id="container">
- <header>
- <img src="logo.jpg" alt="company logo" /><h1>Mega Computers</h1><img src="twitter.png" alt="company logo" float = right/><img src="facebook.png" alt="company logo" float = right/><img src="flickr.png" alt="company logo" float = right />
- </header>
- <div id="main_body">
- </div>
- <footer>
- <ul>
- <li>© Alec Brice-Bateman 2015</li>
- <li>Contact Me</li>
- <li>Legal Information</li>
- </ul>
- </footer>
- </div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment