zagat
I will be uploading the video this afternoon, had some internet troubles last night! sorry 🙂
the css
body { font-size: 62.5%;
}
#wrapper {
width:990px;
margin-left:auto;
margin-right:auto;
}
#header {
height: 150px;
background-color: #666;
}
#navigation {
width:22%;
float:right;
background-color: #999;
}
#content {
width:78%;
float:left;
top:0px;
background-color: #7FFF00;
}
#footer {
clear:both;
background-color: #F0FFFF;
}
h1 {
font-family:times,serif;
font-size:2.5em;
font-weight:bold;
letter-spacing:1px;
padding-left: 20px;
color:#FFFFFF;
}
h2 {
font-family:helvetica, arial, sans-serif;
font-size:1.6em;
font-weight:normal;
padding-left: 20px;
color:#00008B;
}
h3 {
font-family:helvetica, arial, sans-serif;
font-size:2em;
font-weight:normal;
padding-left: 20px;
color:#FFFFFF;
}
h4 {
font-family:helvetica, arial, sans-serif;
font-size:1.6em;
font-weight:normal;
padding-left: 20px;
color:#FFFFFF;
}
p {
font-family:Arial, Helvetica, sans-serif;
font-size:1.2em;
line-height:1.7em;
padding-left: 20px;
}
the html
<html> <head> <title> My first html </title> <link href="styles.css" rel="stylesheet" type="text/css"/> <style type="text/css"> </style> </head> <body> <div id="wrapper"> <div id="header"> <h1> Welcome to my <b>first</b> html coded site </h1> <p>Finally I have started to learn how to code and it isn't all too hard! Just have to start memorizing all the codes to make things work. The pig is <b>fat</b/> and the tower of Pisa <i>askew</i>. So what is <b><i>fat and askew</b></i>?</p> </div> <div id="navigation"> <h4>I'm not quite sure how to add <u>more</u> things on the navigation</h4>Â Â Â Â Â Â Â <h4>Maybe if I add another header?</h4>Â Â Â Â Â Â <h4>That seems to work</h4> </div> <div id="content"> <h3>This is my content</h3> <p>I want to figure out how to add color to a specific word. maybe if I just add the color in front of the word something will happen. nope that didn't work. I Think I have to google a bit to find out how. ok so all I have to do is add font color in front of it. so this is the <font color=#8A2BE2>word</font color> I want to change <font color=#2E8B57>color</font color>. I wonder if it works... AND IT DID!</p> <p>now I want to change color and add a blinking thing to <font color=#FF0000><blink><em><b>BLINK</font color></blink></em></b>. Yet I read this only works in firefox. Why do people still use explorer then?</p> <p>Now I'd like to know how to make my content div fluid to match the navigation - <i>I don't even know if that was correct languange</i> but maybe I'm overdoing it right now and should wait a bit- I already learned a lot today</p> <p> And I'm already very proud of myself handling this so well!!!! although positioning would be interesting too...</p> <p> ok taht was easy - just change the css positioning and my navigation is now on the right. so what a bout rollovers?</p> </div> <div id="footer"> <h2>this is a footer in a light azure blue box - that no one can really see </h2> </div> </html>
jamie’s server is down again….
my reply to question 2
http://www.arte.tv/de/70.html
this page is a great example of color usage. All the headlines are in purple and when using the navigation the drop down on “Themen” is indicated in which sections this TV Program site is divided into. The color schemes of the background and the headlines even change according to the specific topic/section.
Events have a different rollover color than Themen and Interaktiv. This is a great way of showing how color can guide a user and define places within a site!
Bianca's ID01 Blog 