diff --git a/.DS_Store b/.DS_Store
index b65264e1f975cd737ccd2bc7be1a05bd780b857b..236520e238c9d14e881cca2097f8774e5ac99b80 100644
Binary files a/.DS_Store and b/.DS_Store differ
diff --git a/Web Week 8 - CSS Example 1/CSS Example 1/style/main.css b/Web Week 8 - CSS Example 1/CSS Example 1/style/main.css
index 88dfbb7a857bfff81edb6d511280fcae2450fe8d..ebb8738fdf8ba082b3aca7c25a33a2c411573b39 100644
--- a/Web Week 8 - CSS Example 1/CSS Example 1/style/main.css
+++ b/Web Week 8 - CSS Example 1/CSS Example 1/style/main.css
@@ -1,7 +1,7 @@
body{
width: 90%;
- margin: auto;
- background-color: #8a2be2;
+ margin: auto; /*using the auto, it will divide the space equally between left and right*/
+ background-color: #8a2be2;/*you should use the hex value so colours are absolute*/
}
header{
@@ -10,13 +10,12 @@ header{
footer{
background-color: #ff7f50;
-
}
p{
- padding-left: 3em;
+ padding-left: 3em; /*remember em is a measure of the distance of 'M', so this would space 'MMM'*/
}
-a.navigation{
+a.navigation{ /*removes underline and makes Black nav hyperlinks*/
text-decoration: none;
color: #000000;
margin: 5%;
@@ -24,6 +23,15 @@ a.navigation{
#logo{
width: 30%;
+ display: block; /*groups things in the tag as a block*/
+ margin-left: auto;
+ margin-right: auto;
+
+ padding: 3px;
+
+ border-style: solid;
+ border-width: 3px;
+ border-color: #00008b; /*logo is now centre of available space*/
}
.main_article{
diff --git a/Web Week 8 - CSS Example 1/CSS Example 1/template.html b/Web Week 8 - CSS Example 1/CSS Example 1/template.html
index 83128d24a1e6091022a058dff2c0f65f547ea387..a12eae9d6d82f781b4c7484da12b49c181275268 100644
--- a/Web Week 8 - CSS Example 1/CSS Example 1/template.html
+++ b/Web Week 8 - CSS Example 1/CSS Example 1/template.html
@@ -4,14 +4,14 @@
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- <link rel="stylesheet" href="style/main.css">
+ <link rel="stylesheet" href="style/main.css"><!-- links the stylesheet-->
<title>Example_CSS</title>
</head>
<body>
<header>
<a href="http://uwe.ac.uk" target="_blank"><img id="logo" src="images/logo.png" alt="UWE Logo" srcset=""></a>
<nav>
- <a class="navigation" href="http://uwe.ac.uk">UWE</a>
+ <a class="navigation" href="http://uwe.ac.uk">UWE</a> <!-- using the class ="navigation" i am able to set different styles to other hyperlinks-->
<a class="navigation" href="http://linkedin.co.uk">Linkedin</a>
</nav>
</header>