CSS, HTML & DIV IDs - html

I'm doing a sample webpage, but the results aren't coming along as I'd planned. What's supposed to happen is a black rectangular header box is supposed to show. I'll give you the sample code.
HTML CODE / learningcss.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="div.css" rel="stylesheet" type="text/css"
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>CSS Tutorial 1</title>
</head>
<p>
We are creating this page to see how to make a better looking website.
</p>
<p>
We are creating this page to see how to make a better looking website.
</p>
<div id="header">
This is a paragraph
</div id="header">
<body>
<div id="column 2">
<h1>The Header</h1>
</div>
<div id="Column 2">
This is a basic CSS<br>
<br>
Tokyo<br>
</div>
<div id="Column 3">
<h1><a href="<a href="http://gymforgeeks.userecho.com/http://gymforgeeks.userecho.com/">
This is GymForGeeks
</h1>
<p>
This is just a sample page using CSS.
</p>
<p>
Yet another sample text content.
</p>
</div>
<div id="footer">
Copyright Queensborough
</div>
</body>
<body>
<footer>
<p>Posted by: Mike</p>
<p>This is a test: <a href="mailto:someone#example.com">
someone#example.com</a>.</p>
</footer>
</body>
</html>
div.css
#Header {
background:#000;
height:100px
}
#header {
color: white
}

You have to close an opened div with only </div> not </div id="header">
CSS is is casesensitive so you have to use #header not #Header
And you can combine those two definitions:
#header {
background:#000;
height:100px;
color: white;
}
Hope i could help a little.
I cleaned up your mess a little further:
http://codepen.io/anon/pen/qacAg
Explanation:
after you closed the </head> you have to open a <body>
this is how a working link looks like: TEXT
you should only use id's for unique areas or divs not multiple times - use classes instead <div class="THECLASS">THE CONTENT</div>
dont use spaces in classes or id names it will create multiple classes

Your code is totally wrong:
1) body is the starting element, after /head, and that is the last element before /html and use it only once.
2) When you close the div, no need to add id.
3) Id should be one string
4) You use a href badly
5) You do not close your css
See this: http://jsfiddle.net/7uggw2x6/1/
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
....
</head>
<body>
<p>We are creating this page to see how to make a better looking website.</p>
<p>We are creating this page to see how to make a better looking website.</p>
<div id="header">This is a paragraph</div>
<div id="column_1"><h1>The Header</h1></div>
<div id="column_2">This is a basic CSS<br><br>Tokyo<br></div>
<div id="column_3">
<h1>This is GymForGeeks</h1>
<p>This is just a sample page using CSS.</p>
<p>Yet another sample text content.</p>
</div>
<div id="footer">Copyright Queensborough</div>
<footer>
<p>Posted by: Mike</p>
<p>This is a test: someone#example.com./p>
</footer>
</body>
</html>
CSS
#header {
background:#000;
height:100px;
color: white;
}

This is the valid version of your HTML:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>CSS Tutorial 1</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<p>We are creating this page to see how to make a better looking website.</p>
<p>We are creating this page to see how to make a better looking website.</p>
<div id="header">This is a paragraph</div>
<div class="column-2">
<h1>The Header</h1>
</div>
<div class="column-2">This is a basic CSS<br><br> Tokyo<br></div>
<div class="column-3">
<h1><a href="<a href="http://gymforgeeks.userecho.com">This is GymForGeeks</h1>
<p>This is just a sample page using CSS.</p>
<p>Yet another sample text content.</p>
</div>
<div id="footer">Copyright Queensborough</div>
<footer>
<p>Posted by: Mike</p>
<p>This is a test: someone#example.com.</p>
</footer>
</body>
</html>
Some things you should know:
you should not have multiple elements with the same id
any HTML page can only have 1 body element
id must be string and should not contain spaces. e.g. column-3
any HTML tag (p, div, footer, span, ..) must be inside <body></body> tag
use classes if you want to apply same style to multiple elements
In order to make your elements appear in columns you will need to use a grid framework (getbootstrap.com, 960.gs, ..) or create your custom CSS that will order your elements:
e.g. style.css:
.column-2 {
float: left;
width: 20%;
}
.column-3 {
float: left;
width: 30%;
}
This is only an example. You will need to do some digging until you get to your desired grid.

You should use in your CSS-File following style:
#header {
background-color: #000;
color: #FFF;
height: 100px;
}
You can learn the Basic of HTML and CSS at www.w3schools.com.
I hope I could solve your problem.
Regards
t.koelpin

you have a few problems. The structure of your html is incorrect. the footer element goes inside
the body tag. You have to have a closing tag for your divs and your content goes in the middle.
<!DOCTYPE html>
<html>
<head>
<link href="div.css" rel="stylesheet" type="text/css"
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>CSS Tutorial 1</title>
<!-- this section is for loading scripts, css and metadata -->
</head>
<body>
<!-- this section is for content -->
<div class='header'>
Header text
</div>
<footer>
<!-- footer tags are HTML5 Tags and should be used with the HTML5 doctype -->
</footer>
</body>
</html>
The css
#header {
background:#000;
height:100px;
color: white;
}

Related

Why we write header and footer element inside of the body element in HTML5?

When we code in html5 we usually write code in this format
<!DOCTYPE html>
<html>
<body>
<header>
<h1>What Does WWF Do?</h1>
<p>WWF's mission:</p>
</header>
</body>
</html>
And like this
<!DOCTYPE html>
<html>
<body>
<footer>
<p>Author: Hege Refsnes</p>
<p>hege#example.com</p>
</footer>
</body>
</html>
My question is why we do not write them separately when all the three tags has different semantic meaning? I mean this way
<!DOCTYPE html>
<html>
<head>
</head>
<header>
<nav>
<!-- Navigation Bar -->
</nav>
</header>
<body>
<p> Middle stuff of the website here. </p>
</body>
<footer>
<p>Author: Hege Refsnes</p>
<p>hege#example.com</p>
</footer>
</html>
My question is why we do not write them separately when all the three tags has different semantic meaning?
Because the semantic meaning they have isn't what you think it is.
The <head> contents data about the document while the <body> contains the parts of the data that get rendered.
A <header> and <footer> contain a header and footer for something which could be the <main> part of the document, or could be a <section> or something else.

HTML being changed in, footer being placed inside the body when coded outside the body

I'm just doing a personal project and learning about HTML.
I've got a basic HTML script (full)
<!doctype html>
<html lang="en">
<head>
<title>Frame_Test</title>
</head>
<body>
<p>PARAGRAPH FRAME</p>
</body>
<footer>
<p>Paragraph Footer</p>
</footer>
</html>
When i run the script, the footer is moved inside the body <body><footer></footer></body>. However when i do a fp = urllib.request.urlopen(url)it shows the footer being outside the body.
If the footer is outside the body the xpaths don't work. How do i fix this? I want to be shown the exact HTML code that is going to be shown to the user.
I am using HTML 5.
I have also used the request.get tool too and the results are the same
Edit:
When you compile the HTML file you are given this.
<!doctype html>
<html lang="en">
<head>
<title>Frame_Test</title>
</head>
<body>
<p>PARAGRAPH FRAME</p>
<footer>
<p>Paragraph Footer</p>
</footer>
</body>
</html>`
That's on purpose. The <footer> tag can only be used inside the <body> tag.

CSS Class Selector not functioning

Hello I am so sorry if this is a stupidly simple question but I am extremely new to html and css. The issue is I am trying to just add style to the div classes I have made in html and css seems to not recognize the file.
.main-content {
background-color: red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="second.css">
</head>
<body>
<div class="site">
<header class="masthead">
</header>
<h1 class="page-title">Hello
</h1>
<main class="main-content">
</main>
<aside class="sidebar">
</aside>
<footer class="footer">
</footer>
</div> <!-- .site -->
</body>
</html>
I have tried on both firefox and chrome so it does not seem to be an issue of using an outdated browser. Also copy and pasting the code into codepen.io also yields the same results. The only way I can style is by selecting general elements such as h1. I've also double checked to make sure first.html and second.css are indeed the correct file names.
Any suggestions as to what I am missing? If its something very simple could I also get some advice so that I don't go about asking a ton of really simple questions like this.
As you don't have content inside your main tag, the styling is not visible. Add some content to it and you will see the styles which you have applied.
And also you mentioned that you want to style your div and I see only one. You can style it as follows using its class name.
.site {
background-color: red;
}

HTML and CSS not working

I'm just trying to make my CSS work with my HTML code but it's not working for some reason. I think I did everything correctly...maybe its just my browser? I'm on a mac using TextWrangler, testing with Safari/Chrome. Here is the code:
<!DOCTYPE html>
<html>
<head>
<div id="heading" name="heading" title="topbar">
<h2> Welcome to our website </h2>
<style type="text/css">
#bottom{
width:70px
color:green
align-content:center
}
</style>
</head>
<body>
<div id="bottom" name="bottombar" title="bottombar">
<h2>Welcome to our website </h2>
</body>
</html>
You cannot put <div> in the head section, here is the modified code:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#bottom{
width:70px;
color:green;
align-content:center;
}
</style>
<title></title>
</head>
<body>
<div id="heading" title="topbar">
<h2>Welcome to our website</h2>
</div>
<div id="bottom" title="bottombar">
<h2>Welcome to our website</h2>
</div>
</body>
</html>
You forgot the closing semi-colons in the css ; and also forgot to close your divs, hope this helps.
There are so many things wrong:
Your head should not contain div tags
You forgot semicolons at the end of your CSS attributes
div should be closed (</div>)
Your divs are missing their closing tags i.e. </div>
I'm also not sure why you duplicate the div in the head. it should only be in the body.

Linking CSS to HTML using Aptana Studio 3

I want to link my css code with the html code for my website. I am using Aptana Studio 3. It appears to work, but when I preview it in Aptana my css styling does not show up. Here is my code:
<!DOCTYPE HTML>
<title>jampens</title>
<head>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div align="left">
About
Contact
Products
</div>
<div align="center">
<h1>JAM Pens</h1>
<div>
<p>Welcome to the official website of JAM Pens.</p>
</div>
</div>
</div>
</body>
</html>
And my css code:
.body {
font-family: cursive;
}
When I preview it, the css style doesn't show up.
All my files are saved in the same folder so I don't know why this is not working. Thanks in advance for your help.
.body refeers to a container with a body class, if you want to be applied to the body tag remove that dot
body { font-family: cursive; }
.some its applied to class="some"
#some its applied to id="some"
some its applied to <some></some>
You can not set the font family in the body.
Html code:
<!DOCTYPE HTML>
<title>jampens</title>
<head>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div align="left" class="navagation">
About
Contact
Products
</div>
<div align="center">
<h1>JAM Pens</h1>
<div>
<p>Welcome to the official website of JAM Pens.</p>
</div>
</div>
</div>
</body>
</html>
Css:
.navagation{
font-family: cursive;
}