I was doing research and found out that you are only supposed to have one <body> tag, which after learning that I proceeded to clean up my code because I had 3 different set of body tags and by removing the tags to where I only had one set I messed it up to where it no longer aligns my footer properly.
Sorry if this is a silly issue, I am 15 and I started learning html 3 days ago at this point.
I have tried putting the footer outside of the boundary of the <body> tag and tried putting the class within a div tag right after the first footer tag.
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<title> Hub </title>
<h2 style="text-align:center">Home</h2>
<p style="text-align:center"> Welcome to my test website.
<i><b><br> (Currently Under construction) </b></i>
</p>
<p> </p>
<p style="text-align:center">
<a href="https://youtube.com">
<img border=0 src="youtube.png" width="100" height="70"> </a>
</p>
<p></p>
<p class="center">
<img src="razer.jpg" width="640" height=360>
</p>
<br>
<footer class="footer">
Home
About
Contact
Projects
</footer>
</body>
</html>
Here is the css class
.footer {
background-color: white;
color: Orange;
margin: 20px;
padding: 20px;
align-items: center;
text-decoration: none;
}
I expected it to stay aligned with the center, but it ended up reverting to text with no alignment.
Welcome!
Here's a little jsFiddle to help simplify the code a bit - and just to show you how that works.
https://jsfiddle.net/sheriffderek/5Lros2h4/
Here's the basic HTML structure:
<!doctype html>
<html>
<head>
<title>My project</title>
<link rel="stylesheet" href="styles.css">
<style>
.site-footer {
border: 1px solid red;
text-align: center;
}
</style>
</head>
<body>
<header>
<h1>Header stuff</h1>
</header>
<main>
<p>Stuff</p>
</main>
<footer class="site-footer">
<nav class="main-menu">
Home
About
</nav>
</footer>
</body>
</html>
You'll spend most of your time in the body - and like you said - you wouldn't have more than one of those tags.
I suggest you keep you css in the css file - or in the styles tag in the head.
For your question - we basically just need to see this in order to help:
<footer class="site-footer">
<nav class="main-menu">
Home
About
</nav>
</footer>
Your align-items: center is a flex-box declaration. You might mean text-align: center
Check out these resources:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
Learn about the box-model and the display types first - and then position and you'll be on the right path. Join a chat-room for something like CSS https://discord.gg/pFc6XmH
and later... when you're feeling ready - watch this: https://flexbox.io
Keep your examples as simple as possible and you'll get the most help. : )
I'm not actually what you mean, but if you want to make the a-tag to be in the middle, you can use
footer{text-align:center;}
But if you want to make each of your a-tag to be separated and in the middle. you should just make the a-tag a block element. You can put it by adding in css
a{ display:block; }
Related
I have checked the file order and closed off tags. It seems whatever I put at the top of the CSS file will not be read, however, everything below the very top segment of cod ,in this case, #tribute-info will not be applied to the HTML. If I moved #title to the top and refreshed the browser #title will not have its CSS anymore. Same situation for #img-caption.
<style>
#tribute-info{ /* <-- anything I put at the top of the file is not getting read. If I moved #img-caption here, and #tribute-info below it, #img-caption will not work. */
color: blue;
}
#img-caption{
color: red;
}
#title{
text-align: center;
color: red;
}
</style>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style/design.css" />
<meta charset="utf-8">
</head>
<body>
<div id="main">
<h1 id="title">History´s First Programmer</h1>
<div id="img-div">
<div class="row">
<div class="column">
<img src="images/ada_lovelace_house_emblem.jpg" alt="Ada Lovelace depicted in an emblem" id="image">
</div>
</div>
<p id="img-caption">The Mother of computer programming</p>
<div id="tribute-info">
<p>“The more I study, the more insatiable do I feel my genius for it to be.”</p>
<p>“Your best and wisest refuge from all troubles is in your science.”</p>
<p>“Mathematical science shows what is. It is the language of unseen relations between things.
But to use and apply that language, we must be able to fully to appreciate, to feel, to seize the unseen, the unconscious.”</p> <!-- this segment of code is not changing -->
</div>
<a href="https://en.wikipedia.org/wiki/Ada_Lovelace" target="_blank" id="tribute-link">Click here to learn
more about Ada Ada_Lovelace</a>
</div>
</div>
</body>
</html>
The code works fine if you remove the <style> tag from your css file
In CSS I'm having an issue where the footer isn't being included with the body when in html, the footer is in between the body tags. I have a box-shadow border for the whole body, but the footer doesn't have the box shadow around it. As seen below the footer tags are in between the body tags and in the CSS code the body has box shadows, but the footer doesnt have a box shadow. Here's the code:
body {
font-size: 87.5%;
width: 800px;
display: block;
margin: 0px auto;
box-shadow: 3px 3px 3px black;
border: 3px solid black;
background-color: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title> The Halloween Store </title>
<link rel="stylesheet" href="main1.css">
<link rel="stylesheet" href="normalize.css">
<meta charset="utf-8">
</head>
<body>
<header>
<img src="favicon.ico" alt="Pumpkin" height="80">
<h2>The Halloween Store</h2>
<h3>For the little Goblin in all of us!</h3>
</header>
<main>
<h1> Welcome to my site. Please come in and stay awhile. </h1>
<p>I started this website because Halloween has always been my favorite holiday. But during the last year, I started selling some of my favorite Halloween products, and they've become quite a hit.
</p>
<p>If you click on the Personal link, you can browse my favorite Halloween pictures, stories, and films. And if you join my email list, I will keep you up-to-date on all things Halloween.
</p>
<h3>Product categories</h3>
<ul>
<li>Props</li>
<li>Costumes</li>
<li>Special Effects</li>
<li>Masks</li>
</ul>
<h3>My guarantee</h3>
<p>If you aren't completely satisfied with everything you buy from my site, you can return it for a full refund. <b>No questions asked!</b> </p>
</main>
<footer>
<p>© 2016 Ben Murach</p>
</footer>
</body>
</html>
A box-shadow is outside the border. So if it's on the bodyelement, and that body fully fills or even overflows the screen (fully filling the html element), the box-shadow will be cut off, even if box-sizing is defined as border-box, since that only includes the content area, the padding and the border, but not margins and box-shadows.
The snippet area here is less wide than the 800px you defined as width for body, so that already extends the width of the viewport (i.e. the snippet area), and also the height is more than the default height of the snippet area.
However, if you make your body element narrower than the screen or the html element, and apply some padding-bottom to the html element, there will be space for the bodys box-shadow:
html {
padding-bottom: 6px;
}
body {
font-size: 87.5%;
width: 550px;
display: block;
margin: 0px auto;
box-shadow: 3px 3px 3px black;
border: 3px solid black;
background-color: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title> The Halloween Store </title>
<link rel="stylesheet" href="main1.css">
<link rel="stylesheet" href="normalize.css">
<meta charset="utf-8">
</head>
<body>
<header>
<img src="favicon.ico" alt="Pumpkin" height="80">
<h2>The Halloween Store</h2>
<h3>For the little Goblin in all of us!</h3>
</header>
<main>
<h1> Welcome to my site. Please come in and stay awhile. </h1>
<p>I started this website because Halloween has always been my favorite holiday. But during the last year, I started selling some of my favorite Halloween products, and they've become quite a hit.
</p>
<p>If you click on the Personal link, you can browse my favorite Halloween pictures, stories, and films. And if you join my email list, I will keep you up-to-date on all things Halloween.
</p>
<h3>Product categories</h3>
<ul>
<li>Props</li>
<li>Costumes</li>
<li>Special Effects</li>
<li>Masks</li>
</ul>
<h3>My guarantee</h3>
<p>If you aren't completely satisfied with everything you buy from my site, you can return it for a full refund. <b>No questions asked!</b> </p>
</main>
<footer>
<p>© 2016 Ben Murach</p>
</footer>
</body>
</html>
In my code below my id and classes are not being shown on my page (i.e the color green etc), how do I solve this?
They were both working before until I added the div and now it does not work.
<!doctype html>
<head>
<title> CSS </title>
<style type="text/css">
<!-- Note the . which refers to a class -->
.large{
font-size:300%;
}
<!-- Note the # which refers to a single id -->
#green{
color:green;
}
.underline{
text-decoration:underline;
}
.bold{
font-weight:bold;
}
div {
background-color:blue;
}
</style>
</head>
<body>
<h1> Example heading </h1>
<div>
<p class="large"> This is a bit of text </p>
</div>
<p id="green" class="large"> A bit more... </p>
<!-- Note how it's possible to refer to 3 classes at the one time, seperated by spaces -->
<p> The third <span class= "underline large bold">word</span> in this paragraph is underlined. </p>
</body>
</html>
It's a silly problem, took me a while to understand it because I was looking for something else!
The problem are the comments. In CSS you comment with
/* comment */
and not <!-- --> like in HTML. Just modify the comments and it should works without problems.
More info: http://www.w3schools.com/css/css_syntax.asp
Not all of my text is aligning the way I want it to the second line that I want to align in at the bottom of the image still but I want it to be on the next line beneath the first. I am new to all of this CSS stuff and this project is for my history class so help is very appreciated as always!
This is my HTML:
<html>
<head>
<title>Biography</title>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
</head>
<a href = home.html>Home</a>
<a href = bio.html>Biography</a>
<a href = campaign.html>Campaign</a>
<a href = pp.html>Political Platform</a>
<body>
<p>
<img src= images/william.jpg/ height = 300 width = 300>
Sir William Higgins was born on 02/02/1987. He was top of his class at Horn E.U.He was the number one draft choice for the MLB in 2000 and has won every golden globe award ever.
</p>
</body>
</html>
This is the code on my CSS stylesheet:
img {
border: solid 2px black;
vertical-align: text-top;
}
a {
display: inline-block;
font-family: curier;
}
p {
vertical-align: text-top;
}
There are a number of problems with your code:
The <a> tags must be in the <body> tag.
The <img> tag must be outside of the <p>.
To separate the links and the image, I put in a <br>.
All attributes must MUST be in double quotes. For example, on the href attribute, the URL must be in quotes.
Here is a working JSFiddle
Here is what the HTML should be:
<html>
<head>
<title>Biography</title>
<link type="text/css" rel="stylesheet" href="stylesheet.css" />
</head>
<body>
Home
Biography
Campaign
Political Platform
<br>
<img src="images/william.jpg/" height="300" width="300">
<p>Sir William Higgins was born on 02/02/1987. He was top of his class at Horn E.U.He was the number one draft choice for the MLB in 2000 and has won every golden globe award ever.</p>
</body>
Your CSS is fine.
If you also want your links to be on top of each other, add a <br> after each </a>.
EDIT: To make the links appear on top of one another, it would be better if you put the links into a <nav> tag like this:
<nav>
<li>Home</li>
<li>Biography</li>
<li>Campaign</li>
<li>Political Platform</li>
</nav>
and then style them using this CSS:
nav li {
display: block;
}
nav {
list-style-type: none;
}
JSFiddle with nav tag.
As said your markup is not valid.
If you want your links under each other, just insert a <br> after each link
I'm not sure what is going on here, I made a very basic HTML/CSS page and it just displays an empty page in my browsers.
<HTML>
<head>
<style type="text/css">
#sidebar {float:left; width:20%;}
.post {float:right; width:79%;}
#footer {clear:both;}
</head>
<body>
<div id="header">
<h1>My interesting life</h1>
</div>
<div id="sidebar">
<h2>Menu</h2>
<ul>
<li>Place Link Here</li>
<li>Place Link2 Here</li>
</ul>
</div>
<div class="post">
<h2>Yesterday</h2>
<p>Today I drank coffee for breakfast. 14 hours later, I went to bed. </p>
</div>
<div class="post">
<h2>Yesterday</h2>
<p>Ran out of coffee, so had orange juice for breakfast. It was from concentrate.</p>
</div>
<div id="footer">
<p><small> This is copyright by Monu. Contact me to negotiate the movie rights. </small></p>
</div>
</body>
</HTML>
You need to close your <style> tag:
<head>
<style type="text/css">
#sidebar {float:left; width:20%;}
.post {float:right; width:79%;}
#footer {clear:both;}
</style>
</head>
You did not close the <style> tag after the CSS. This makes the browser think the entire rest of the page is CSS. So you need to add a </style> tag after the CSS. Hope that helps.
Indeed, you must close the style tag.
To find these errors quickly in the future, consider:
(1) Using HTML and CSS validators such as http://validator.w3.org/
(2) Using Firebug, a Firefox extension, to examine your code for unclosed tags or other oddities.
Please close the style tag. </style> .........
<style type="text/css">
#sidebar {float:left; width:20%;}
.post {float:right; width:79%;}
#footer {clear:both;}
</style>
Use some text editor then it help to solve this kind of error....
You need to close the <style> tag. Another thing several developers swear by is adding the <!DOCTYPE html> before the normal <HTML> tag.`