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
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
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; }
Im trying to design this webpage with multiple pages. For example, when you scroll to the about page, its a different background color than the contact page. However, so far I only got the title of each page color. My webpage is where you scroll down it lands onto another page. I tried
#name{background-color:#ffffff;}
#Portfolio{background-color:#d5f4e6;}
#about{background-color:#fefbd8;}
#ContactMe{background-color:#ffffff;}
in the css style page based on its id. Any clue on how to get the different background color on different pages
html code:
<body id="Portfolio"></body>
<body id="about"></body>
<body id="Contact Me"></body>
When you say "multiple pages" it means "separate pages in separate files!" like "aboutpage.html" or "contact.html". In this case you can work with "body" tag:
<body id="about">
but then you said "when you scroll to the about page" that means "a page with different section that you can use like this:
<p id="about"></p>
<p id="contact"></p>
or
<div id="about"></div >
<div id="contact"></div>
You should specify that the elements containing your targets are 100vh height. With your (original posted) code you can do it like that:
body > div {min-height:100vh;}
This css will catch the container-* div that you use in the code you provide. I recomand continue learning the basics. Start here https://developer.mozilla.org/he/docs/Web/HTML
Enjoy code!
If it's a same page scroller, you should add
#Portfolio,#about,#ContactMe {min-height:100vh;}
To your css.
If you can provide the exact code its much easier to help you.
simple code
$(document).ready(function(){
startFromtop=$(".start").position().top
aboutFromtop=$(".about").position().top
contactFromtop=$(".contact").position().top
endFromtop=$(".end").position().top-100
$(window).scroll(function(){
windowformtop=$(this).scrollTop();
if(windowformtop>=startFromtop && windowformtop<aboutFromtop){
$(document.body).css("background-color","white")
}
else if(windowformtop>=aboutFromtop && windowformtop<contactFromtop){
$(document.body).css("background-color","red")
}else if(windowformtop>=contactFromtop && windowformtop<endFromtop){
$(document.body).css("background-color","green")
}else if(windowformtop>=endFromtop){
$(document.body).css("background-color","blue")
}
})
})
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title></title>
<style type="text/css">
div{height:700px;border:2px solid red;}
</style>
</head>
<body>
<div class="start">Start</div>
<div class="about">ABOUT</div>
<div class="contact">CONTACT</div>
<div class="end">END PAGE</div>
</body>
</html>
Replace <body> with the <div> tag and add the appropriate css. The pages should have the same class but unique ids. You change the background color with CSS property background-color.
HTML:
<html>
<head></head>
<body>
<div class=“page”id=“portfolio”>
</div>
<div class=“page” id=“about”>
</div>
<div class=“page” id=“contactme”>
</div>
</body>
</html>
CSS:
.page{
position:relative;
width:100%;
height: auto;
margin:auto;
}
#portfolio{
background-color:white;
}
#about{
background-color:red;
}
#contactme{
background-color:blue;
}
Hope this works for you.
I am new to programming and have a basic question. I have a background image on my web page, but I want the content area to have a white background. I see this very commonly on the web but being new I cannot seem to figure out how to do it. I have a #wrapper div that centers my content and a css rule to show the image, just can't get the content area background to be white. Help for this newbie is appreciated!
There are several ways to achieve this. You can either set the styles of your HTML tags (div, span, p etc...) by using the style attribute as in the example:
<div style="background-color: white;"></div>
or either define your styles inside the <head></head> tag as follows:
<html>
<head>
<style>
.your_class { background-color: #ffffff; }
</style>
</head>
<body>
<div class="your_class"></div>
</body>
</html>
or either use the link tag to put your CSS code inside a file and link to it as:
<head>
<link rel="stylesheet" type="text/css" href="your_file.css">
</head>
Or sometimes you will need to set your style dynamically. Then javascript enters into the picture:
<html>
<head>
<script>
function changeBg(id, color) {
document.getElementById(id).style.bgColor = color;
}
</script>
</head>
<body onload="changeBg('myDiv', 'white');">
<div id="myDiv"></div>
</body>
</html>
You should read more on HTML and CSS to understand how it works. There are plenty of tutorials on the web.
Assuming a structure like this :
<body>
<div id="wrapper">
<section id="content"> <!-- Or div or whatever -->
Lorem ipsum dolor sit amet
</section>
</div>
</body>
You should apply a background-color to #wrapper :
body{
background-image: url("your_url");
}
#wrapper{
background-color:white;
}
Check this fiddle for a working example.
Put your content inside a div and specify background:#fff; for that div in your CSS.
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.`