Why wont my css change my div? - html

I am making a simple website and the writing I did in html in my div is showing up but the CSS is not effecting it.(ex. no colored box is showing up.)
this is the html
<div id=“hello”>hello</div>
this is the css
#hello {
background:#ccc;
width:200px;
height:200px;
}
this is the full code
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta charset="UTF-8">
<title>Website</title>
<meta name="author" content="WebDev">
<link href="example.css" rel="stylesheet" type="text/css" />
<style>
html {
font-family: "Open Sans";
font-size: 24px;
font-style: light;
font-variant: normal;
font-weight: 500;
line-height: 26.4px;
}
}
body {
background:#Fff; margin:0 ;
}
#container {
width:1300px;
margin:0 auto;
background:#iff;
}
#header {
width:100%;
height:170px;
background:#Fff;
}
#logo {
float:left;
width:400px;
height:40px;
margin:30px;
background:#Fff;
color: #000;
font-size: 40px;
line-height:38px;
}
span1 { font-size: 30px;
line-height: 18px;
}
#navbar {
height:40px;
clear:both;
background: #Fff;
}
#navbar ul {
margin:10px;
padding:1px;
list-style-type:none;
line-height: 40px;
}
#navbar ul li {
padding:px;
float:right ;
margin-top:20px;
}
#navbar ul li a {
font-size:24px;
float:right ;
float:right ;
padding:0 0 0 20px;
display:block;
text-decoration:none;
font-weight:100;
color:#000;
}
#banner {
background-image: url(pics/babypic.png);
background-repeat: no-repeat;
background-size:100%;
height:445px;
padding:20px;
clear: both;
}
#left_col {
float:left;
width:819px;
padding:20px;
height:600px;
color:#000;
background:#F0F8FF;
font-size:20px;
}
h1 {
font-size:35px;
text-align:center;
font-weight:300;
margin-top:50px;
}
p {
font-size:25px;
font-weight: 200;
margin-right:75px;
margin-left:90px;
line-height:40px;
margin-top:50px;
}
#right_col {
float:right;
width:400px;
height:600px;
color:#000;
background:#F0F8FF;
padding:20px;
}
h2 {
font-size:35px;
text-align:right;
font-weight:400;
margin-right:75px;
}
h3 {
font-size:25px;
font-weight: 200;
margin-right:70px;
margin-left:50px;
line-height:40px;
margin-top:30px;
text-align:right;
}
#hello {
height: 200px;
width: 200px;
background-color:#ccc;
}
#footer {
height:450px;
background:#F0F8FF;
float:bottom;
clear:both;
font-weight:100;
font-size:25px;
}
h5 {
font-weight:100;
font-size:25px;
margin-left:250px;
margin-right:250px;
line-height:40px;
}
#footer ul1 {
margin-left:400px;
list-style:none;
width:40%;
display:block;
}
h4 {
text-align:center;
margin: 70px;
font-weight:;
}
#end {
height:200px;
}
</style>
</head>
<body>
<!-- container -->
<div id="container">
<!-- header -->
<div id="header">
<div id="logo">
James Brewer, M.D. <span1> santa barbara pediatrician </span1>
</div>
<div id="navbar">
<ul>
<li>contact </li>
<li>gallery |</li>
<li>fees & insurance |</li>
<li>hours & location |</li>
<li>services |</li>
<li>about |</li>
</ul>
</div>
</div>
<!-- content area -->
<div id="content_area">
<div id="banner"></div>
<div id="left_col">
<h1>
What People Are Saying
</h1>
<p>
“Thank you so much for your kindness and support. We sincerely appreciate your assistance and professional courtesy” —C.S
</p>
<p>
“He is very understanding, explaining things very well and has patience with kids. I highly recommend him. —C.G
</p>
<p>
“Thank you so much for your guidance and wisdom.” —K.R
</p>
</div>
<div id="right_col">
<h2>
Call Us Today!
</h2>
<h3>
set up an appointment
<p2> 1-805-563-0167
</p2>
</h3>
<div id=“hello”>hello</div>
</div>
<!-- blurb area -->
<!-- footer -->
<div id="footer">
<h5>
Dr. Brewer has been practicing pediatrics in Santa Barbara since 2002.
The office is a solo practice–patients always see Dr. Brewer. <p>
The practice offers:</p>
</h5>
<ul1>
<li>•newborn hospital care</li>
<li>•well child care</li>
<li>•school, camp and sports physicals</li>
<li>•acute sick visits</li>
<li>•immunizations </li>
<li>•lab testing</li>
<li>•developmental or behavioral concerns</li>
</ul1>
</div>
</div>
<div id=end>
<h4>
<p>2421 Bath Street, Suite A
</p><p>
Call for an appointment today
1-805-563-0167
</p>
</h4>
</div>
</div><!-- end container -->
</body>
</html>

There's just a little error in your div: If you look closely at the quotes around "hello" and the other quotes in your HTML file, they're not the same kind of quotes!
In the Firefox debugging tools (image), you can see that this causes the browser to interpret the class of the div incorrectly.
<div id=“hello”>hello</div>
vs
<div id="hello">hello</div>
Here's what your HTML looks like when it's fixed! (Just make the quotes different)
final_image
(Disclaimer: I just signed up on the site so my reputation isn't high enough to create in-post images :P, sorry about that)

The double quotes you are using around the "hello" are different than everywhere else in the HTML.
If you re-type those double quotes it'll work.
Here is how the quotes look like to the browser.
1) Shows how "hello" shows up in a code editor but 2) and 3) show what the browser sees. Notice the extra pair of "? Tricky!
DEMO of the problem
#hello {
height: 200px;
width: 200px;
background-color: #ccc;
}
<h3>BAD HELLO</h3>
<div id=“hello”>hello</div>
<h3>GOOD HELLO</h3>
<div id="hello">hello</div>

try to give it width and height..
div {
    height: 200px;
    width: 200px;
    background-color:blue;
}

Make sure to link the HTML file to the CSS file. You do that by adding a link tag to the top of the HTML file, like this:
<link type="text/css" rel="stylesheet" href="style.css" />
Where style.css is, you should write the path to your CSS file.

Related

Text doesn't get smaller on mobile

In my header, I added a zone where it shows a text. The problem is that the text doesn't get smaller on smaller devices so not all the text appears in its box. I would like to make the text fit in the box (get smaller so everything enter the box)
body{
margin:0;
padding:0;
font: 15px/1.5 Montserrat,sans-serif;
color:white;
background-color:#212121;
}
.container{
width:80%;
margin:auto;
overflow:hidden;
}
header #top-info{
background-color:#263238;
min-height:50px;
border-bottom:1px solid #546E7A;
}
header #top-info #online{
background-color:#558B2F;
float:left;
min-height:50px;
min-width:330px;
}
header #top-info #online p{
margin:0;
padding:0;
padding-top:12px;
padding-right:10px;
font-size:18px;
font-weight:bold;
text-shadow:1px 1px 1px #212121;
text-transform: uppercase;
}
header #top-info #online img{
padding-left:10px;
padding-right:10px;
padding-top:8px;
float:left;
width:10%;
}
header #top-info #online span{
color:#7CB342;
}
header #top-info #btn{
float:right;
margin-top:12px;
}
header #top-info #btn a{
text-decoration: none;
color:white;
text-shadow:1px 1px 1px #212121;
text-transform: uppercase;
}
header #top-info #btn img{
width:15%;
vertical-align: middle;
}
header #top-info #btn ul{
margin:0;
padding:0;
}
header #top-info #btn li{
float:left;
list-style-type:none;
}
header #navigation{
background-image:url('../img/background.png');
background-repeat: no-repeat;
}
#media only screen
and (min-device-width : 375px)
and (max-device-width : 667px){
header #online{
float:none;
text-align:center;
width:100%;
}
header #top-info #online img{
display:none;
}
header #top-info #online p{
margin:0;
padding:0;
text-align:center;
margin-right:26px;
margin-top:10px;
}
header #top-info #btn{
margin:auto;
text-align:center;
margin-bottom:10px;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width"/>
<meta name="description" content="Menoria siteweb officiel">
<meta name="keywords" content="menoria, pvpfaction, minecraft, 1.7.10, launcher">
<meta name="author" content="Simon Bolduc">
<title>Ménoria | Serveur 1.7.10</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/style.css"/>
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700%7cOpen+Sans:400,700" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<section id="top-info">
<div class="container">
<div id="online">
<img src="https://dev.menoria.com/img/online.png"/>
<p>Il y a <span>416</span> joueurs en ligne</p>
</div>
<div id="btn">
<ul>
<li>
<a href="#">
<img src="https://dev.menoria.com/img/login.png"/>
Se connecter
</a>
</li>
<li>
<a href="#">
<img src="https://dev.menoria.com/img/register.png"/>
S'inscrire
</a>
</li>
</ul>
</div>
</div>
</section>
<section id="navigation">
<div class="container">
<div id="logo">
<h1><span>M</span>enoria</h1>
<p><span>Ménoria</span> | Serveur Minecraft <span>1.7.10</span> sous launcher</p>
</div>
<nav>
<ul>
<li>
Accueil
<p>Page d'accueil</p>
</li>
<li>
Forum
<p>Communautaire</p>
</li>
<li>
Jouer
<p>Nous Rejoindre</p>
</li>
</ul>
</nav>
</div>
</section>
<section id="bottom-info">
Vous avez un problèmes? Contactez-nous sur le Teamspeak. <span>ts.menoria.com</span>
</section>
</header>
</body>
</html>
The problem appears there: Problem
I've tried to modify this with a media with custom width but I can't find how to correct this...
Well, my first idea is not about adjusting font size, I would handle this flaw from a different angle: remove min-width: 330px; on header #top-info #online and the text will naturally flow to the second line. You could align it as you wish.
Alternatively, add something like
#media only screen and (max-width: 374px) {
header #top-info #online p {
font-size: 14px;
}
}
to the end of your styles.
use font size 100% on all your text, it will respond according to the text size if it doesn't, you can tweak the font size with css media queries like this
<style>
#media screen and (max-width: 820px) {
header #top-info #online p{
font-size:14px; //edit this font size to fit your taste and also just copy and paste and use the sample format to tweak other codes. IF you want to add more css text to reduce size add in the media query
}
.container{
width:100%;
margin:auto;
overflow:hidden;
}
header #top-info #online{
background-color:#558B2F;
float:left;
min-height:50px;
}
}
</style>

position:absolute css menu hides my h2 element, how to overcome this?

I made a menu and used width: 100% to make sure it comes across the entire page but there were white spaces on the right and left side (looks more like width:95%?) So I then tried using position:absolute top:0 left:0 which solved the problem and made the menu look like width 100%,
Unfortunately, this operation caused my h2 header element to disappear and I cannot find a way to properly place it now?
JSBin code of my html and css code
#mainMenu {
font-family:Arial, Times, sans-serif;
list-style-type:none;
padding:0;
}
#mainMenu a {
text-decoration:none;
margin:5px;
padding:2px;
color:SeaGreen;
font-weight:bold;
}
#mainMenu a:hover {
color:Teal;
}
#menu {
text-align:center;
width:100%;
height:50px;
background-color:paleGoldenRod;
position:absolute;
left:0;
top:0;
}
li {
display:inline;
}
footer {
background-color:SlateGray;
height:150px;
width:100%;
position:absolute;
bottom:0;
left:0;
}
<!DOCTYPE html>
<html>
<head>
<title>Miko</title>
<link href="#" rel="stylesheet" type="text/css">
</head>
<body>
<div id="menu">
<ul id="mainMenu">
<li>HOME</li>
<li>ABOUT</li>
<li>CONTACT ME</li>
</ul>
</div>
<h2>About The Page</h2>
<p>To Be Added</p>
<footer>
<p>Web Design</p>
</footer>
</body>
</html>
How come position:absolute makes my h2 disappear?
To avoid the default margins in general, you can add margin: 0; to html and body.
To place your absolutely positioned menu behind the h2element, you can apply z-index: -1, which moves it behind its parent element.
In my snippet below I also changed the text-centering to right alignment and added a padding-right on the ul. You can play around with those values so they fit your needs.
html, body {
margin: 0;
}
#mainMenu {
font-family:Arial, Times, sans-serif;
list-style-type:none;
padding-right: 30px;
}
#mainMenu a {
text-decoration:none;
margin:5px;
padding:2px;
color:SeaGreen;
font-weight:bold;
}
#mainMenu a:hover {
color:Teal;
}
#menu {
text-align:right;
width:100%;
height:50px;
background-color:paleGoldenRod;
position: absolute;
z-index: -1;
}
li {
display:inline;
}
footer {
background-color:SlateGray;
height:150px;
width:100%;
position:absolute;
bottom:0;
left:0;
}
<!DOCTYPE html>
<html>
<head>
<title>Miko</title>
<link href="#" rel="stylesheet" type="text/css">
</head>
<body>
<div id="menu">
<ul id="mainMenu">
<li>HOME</li>
<li>ABOUT</li>
<li>CONTACT ME</li>
</ul>
</div>
<h2>About The Page</h2>
<p>To Be Added</p>
<footer>
<p>Web Design</p>
</footer>
</body>
</html>
Add padding-top: 50px (the menu height) to body.
body {
padding-top: 50px;
}
#mainMenu {
font-family:Arial, Times, sans-serif;
list-style-type:none;
padding:0;
}
#mainMenu a {
text-decoration:none;
margin:5px;
padding:2px;
color:SeaGreen;
font-weight:bold;
}
#mainMenu a:hover {
color:Teal;
}
#menu {
text-align:center;
width:100%;
height:50px;
background-color:paleGoldenRod;
position:absolute;
left:0;
top:0;
}
li {
display:inline;
}
footer {
background-color:SlateGray;
height:150px;
width:100%;
position:absolute;
bottom:0;
left:0;
}
<!DOCTYPE html>
<html>
<head>
<title>Miko</title>
<link href="#" rel="stylesheet" type="text/css">
</head>
<body>
<div id="menu">
<ul id="mainMenu">
<li>HOME</li>
<li>ABOUT</li>
<li>CONTACT ME</li>
</ul>
</div>
<h2>About The Page</h2>
<p>To Be Added</p>
<footer>
<p>Web Design</p>
</footer>
</body>
</html>
JSBin
Position in css is tricky thing, everyone uses absolute positioning for placement of element.but before using it. you need to know about what the position is all about. when we use position:absolute then element act like it is floating on top of all element.while using absolute positioning element goes out from html normal flow.
you have used position absolute for both menu links and footer, So these elemment are floating on top of other elements.enter code here
use position absolute and fixed when you want to stick element to specific position.
#mainMenu {
font-family:Arial, Times, sans-serif;
list-style-type:none;
padding:0;
}
#mainMenu a {
text-decoration:none;
margin:5px;
padding:2px;
color:SeaGreen;
font-weight:bold;
}
#mainMenu a:hover {
color:Teal;
}
#menu {
text-align:center;
width:100%;
height:50px;
background-color:paleGoldenRod;
}
li {
display:inline;
}
footer {
background-color:SlateGray;
height:150px;
width:100%;
position:absolute;
bottom:0;
left:0;
}
if you still want to use position absolute for menu, so you need to use proper margin for h2 tag.so that h2 tag will not be hidden beside menu links.

My nav bar isn't according appropriately to my div.container?

header {
background-color:black;
color:white;
text-align:center;
padding:5px;
}
nav {
line-height:30px;
background-color:gainsboro;
height:548px;
width:100px;
float:left;
padding:px;
}
body {
background-color:Lavender;
}
article {
float:right;
height:1250px;
width:580px;
text-align:center;
padding:1em;
background-color:#5DADE2;
}
section {
float:left;
height:1320px;
width:600px;
text-align:center;
padding:0em;
background-color:#ECF0F1
}
footer {
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
}
div.container {
width:100%;
border:2px solid purple;
}
.clearfix {
overflow: auto;
}
.clear {
clear:right;
line-height:0;
}
<!DOCTYPE HTML>
<html>
<head>
<title>Links - Bannerlord Assignment</title>
<link rel="stylesheet" type="text/css" a href="BannerlordTheme2.css">
</head>
<div class="container">
<body>
<header>
<h1>Further Information</h1>
</header>
<nav>
Home<br>
About<br>
Media<br>
</nav>
</body>
</div>
<br class="clear" />
</html>
Please do bear with me I am aware this is mind-numbingly basic but I need to start somewhere and I both can't find an answer and can't find a reason why.
My nav bar does not correspond to my div's border and this is less of a problem but how do I get it so that the nav bar and the header don't overlap when I use the border because as of now the div border is only working on the header.
you need overflow hidden to container.
header {
background-color:black;
color:white;
text-align:center;
padding:5px;
}
nav {
line-height:30px;
background-color:gainsboro;
height:548px;
width:100px;
float:left;
padding:px;
}
body {
background-color:Lavender;
}
article {
float:right;
height:1250px;
width:580px;
text-align:center;
padding:1em;
background-color:#5DADE2;
}
section {
float:left;
height:1320px;
width:600px;
text-align:center;
padding:0em;
background-color:#ECF0F1
}
footer {
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
}
div.container {
width:100%;
border:2px solid purple;
overflow: hidden;
}
.clearfix {
overflow: auto;
}
.clear {
clear:right;
line-height:0;
}
<!DOCTYPE HTML>
<html>
<head>
<title>Links - Bannerlord Assignment</title>
<link rel="stylesheet" type="text/css" a href="BannerlordTheme2.css">
</head>
<div class="container">
<body>
<header>
<h1>Further Information</h1>
</header>
<nav>
Home<br>
About<br>
Media<br>
</nav>
</body>
</div>
<br class="clear" />
</html>
Have you thought about adding a 5px top margin to your nav bar, this will account for the 5px border... I think. I'm also still learning. Best of luck, I'll be watching.
Also you always want body to be the outer most thing of what is rendered on the page. So any containers need to be inside of it.
Problem is a) your body tag is in the wrong place (should start just before head, and end just before html tag and b) there is no height declaration on the container.
Adding this code to the CSS:
html,body {
background-color:Lavender;
height:100%;
}
div.container {
width:100%;
height:100%;
border:2px solid purple;
}
and having this to html should work.
<body>
<div class="container" style = "border: solid yellow;">
<header>
<h1>Further Information</h1>
</header>
<nav>
Home<br>
About<br>
Media<br>
</nav>
</div>
<br class="clear" />
</body>
</html>

How to make a h1 tag in html touch the edges of the screen?

I just started learning HTML and just created this static:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="../css/classes.css">
<link rel="stylesheet" type="text/css" href="../css/ids.css">
<title>Total Devastation</title>
</head>
<body>
<h1 class="header-main">Total Devastation</h1>
<div id="mainmenu">
<ul>
<li>
Hello!
</li>
<li>
How
</li>
<li>
Are
</li>
<li>
You
</li>
</ul>
</div>
<div id="body-main">
<p>
Hi there! Welcome to this newly created static RPG.
</p>
</div>
</body>
</html>
I want to make the h1 container (class header-main) touches the edges of the screen like it touched the right-side here
And here is the css part:
body {
background:#aaa;
}
.header-main {
background:#555;
font-family:calibri;
font-size:32pt;
color:#eee;
text-align:center;
margin-left:0;
padding:10px;
width:100%;
}
By default body will have margin of 8px set it 0..so your h1 container touches the screen
Css
body{
background:#aaa;
margin:0;
padding:0;
}
if you want h1 to touch the top of browser... set the h1 margin to 0
.header-main {
background:#555;
font-family:calibri;
font-size:32pt;
color:#eee;
text-align:center;
margin:0; /*changes done */
padding:10px;
width:100%;
}
Make margin, padding to 0 in html,body tags
html, body
{
margin: 0;
padding: 0;
}
DEMO
try this
body {
background: #aaa;
margin: 0;
}
h1 {
margin: 0;
}
.header-main {
background: #555;
font-family: calibri;
font-size: 32pt;
color: #eee;
text-align: center;
margin-left: 0;
padding: 10px;
width: 100%;
}
<h1 class="header-main">Total Devastation</h1>
<div id="mainmenu">
<ul>
<li>
Hello!
</li>
<li>
How
</li>
<li>
Are
</li>
<li>
You
</li>
</ul>
</div>
<div id="body-main">
<p>
Hi there! Welcome to this newly created static RPG.
</p>
</div>
What is happening here is simple, your browser automaticly adds 8px margin to the entire document, so when you remove this from your html by the following CSS:
html{
margin: 0;
}
Your problem should be solved.
Just add this css:
body{
margin:0
}
h1{
margin:0
}
Because of the default css of browser.
.header-main {
background:#555;
font-family:calibri;
font-size:32pt;
color:#eee;
text-align:center;
margin-left:0;
padding:10px;
width:100%;
position:relative;
left:0;
top:0;
}

Trying to get a multi colored background

I am making a personal bio site, and I want different color backgrounds for the header, body, and footer. I found this website, http://www.chimengxi.com/ and that is kinda what I am going for. In the end, I hope to get my header to be horizontal, instead of stacked. Some 3 toned color scheme would be awesome if its doable.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="main.css">
<meta charset="utf-8">
<title>My Personal Website</title>
</head>
<body>
<div class="wrapper">
<ul class="navbar">
<li>Home
</li>
<li>About Me
</li>
<li>School
</li>
<li>Contact Information
</li>
</ul>
<h1>Terrence Horgan <br> Information Science Major </h1>
<h2><u>My Personal Website...About ME!</u></h2>
<p id="summary">Here is a little about myself....</p>
<p>My name is Terrence Horan, I love in Montour Falls, NY, not to far from Ithaca, NY. I attend Cornell University and am majoring in Information Science, and hopefully will get a minor in Computer Science. I love anything that involves technology,however if you would like to read more, dont be shy! Come in a browse my website!</p>
<div class="footer">Call me (607-425-0760)<address>Email Me tmh233#cornell.edu.<br></address>
</a>Copyright # 2014 Terrence Horgan</div>
</div>
</body>
</html>
CSS
body {
background-color:orange;
height:100%
}
ul.navbar {
background-color:orange;
text-align:right;
font-size:175%
}
.navbar ul {
height:auto;
padding:0;
margin:0;
background-color:#f2f2f2;
border-bottom:1px solid #ccc;
display:inline-block
}
.navbar li {
display:inline-block;
padding:20px;
margin-left:auto;
margin-right:auto
}
h1 {
position:relative;
bottom:85px
}
h1 a:hover, a:active {
color:#FFF;
background-color:#3CF;
text-decoration:none
}
h1 a:visited, a:link {
color:#F36;
text-decoration:none
}
p {
width:30%;
font-size:120%
}
#summary {
font-size:135%;
font-weight:700
}
.footer {
display:inline-block;
position:relative
}
Wrap your navbar in a div. Style the div background-color however you want.
Wrap the content below the navbar and above the footer in another div. Style accordingly.
Set background-color of footer to whatever you want.
Here is an example of changing the colors. I made them quite noticeable by coloring them green and yellow and adding a few simple CSS styles to make them fit accordingly (floats, text-aligns). Look at the code below, and please note I pasted your CSS at the top. All you need to do is paste the code between the tags into your CSS file.
<!DOCTYPE html>
<html>
<head>
<style>
body {
height:100%
}
ul.navbar {
background-color:green;
text-align:right;
font-size:175%;
padding-bottom: 10px;
text-align: center;
}
.navbar ul {
height:auto;
padding:0;
margin:0;
background-color:#f2f2f2;
border-bottom:1px solid #ccc;
display:inline-block;
float: left;
}
.navbar li {
display:inline-block;
padding:20px;
margin-left:auto;
margin-right:auto;
font-size: 25px;
margin-top: 20px;
}
h1 {
float: left;
font-size: 24px;
text-align: left;
}
h1 a:hover, a:active {
color:#FFF;
background-color:#3CF;
text-decoration:none
}
h1 a:visited, a:link {
color:#F36;
text-decoration:none
}
p {
width:30%;
font-size:120%
}
#summary {
font-size:135%;
font-weight:700
}
.footer {
display:inline-block;
position:relative;
background-color: yellow;
width: 100%;
text-align: center;
}</style>
<meta charset="utf-8">
<title>My Personal Website</title>
</head>
<body>
<div class="wrapper">
<ul class="navbar">
<h1>Terrence Horgan <br> Information Science Major </h1>
<li>Home
</li>
<li>About Me
</li>
<li>School
</li>
<li>Contact Information
</li>
</ul>
<h2><u>My Personal Website...About ME!</u></h2>
<p id="summary">Here is a little about myself....</p>
<p>My name is Terrence Horan, I love in Montour Falls, NY, not to far from Ithaca, NY. I attend Cornell University and am majoring in Information Science, and hopefully will get a minor in Computer Science. I love anything that involves technology,however if you would like to read more, dont be shy! Come in a browse my website!</p>
<div class="footer">Call me (607-425-0760)<address>Email Me tmh233#cornell.edu.<br></address>
</a>Copyright # 2014 Terrence Horgan</div>
</div>
</body>
</html>