I was wondering if someone had an answer as to why the CSS for my HTML file only appears to be formatted in Google Chrome, but appears not formatted in Microsoft Edge, or Internet Explorer. First time post over here, so feedback would be much appreciated.
Here's my CSS and then my HTML:
html {
margin: 0;
padding: 0;
background-color: #777;
}
body {
width: 70%;
margin: 0 auto;
font: 100% Arial, Helvetica, sans-serif;
padding: 1em 50px;
background: white;
border-bottom: 10px solid gold;
}
h1 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 2em;
font-weight: normal;
font-style: italic;
margin: 0 0 .4em;
color: #ddd;
background-color: rgb(44, 45, 140);
padding: 5px 10px;
}
p {
line-height: 1.6;
text-align: justify;
width: 60%;
margin: 0;
margin-bottom: 1em;
}
a {
text-decoration: none;
color: red;
}
a:hover {
color: black;
}
//And here's my HTMl
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>External styles</title>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>HTML and CSS</h1>
<p>Page 2</p>
<p>One way to visualize how HTML and CSS work together is to think about a new building under construction. As the building goes up, the structure of the building is built first. At just the structural level, all you see is the frame of the new building, and other than the basic shape, you don’t really know how the building is going to look. Once the frame is complete, the “skin” of the building is added. This could be brick, wood, glass, stucco, or any number of outer materials that determine what the final look of the building will be.</p>
<p>HTML and CSS work much the same way. HTML gives us the structure, or “frame”, of our pages. We can use CSS to then control how this structure looks, where elements are positioned, and add additional decorative styling. What’s more, much the same way a building can change dramatically by adding a new façade; web pages can change their visual design by simply changing the page’s CSS.</p>
<p>This separation of structure and presentation creates a very flexible and efficient workflow where the structure of pages is independent of how the pages are presented. This allows you to update styling without changing page content, and provide different visual designs based on the context of where the page is being displayed.</p>
</body>
</html>
if your structure project
root
index.html
style.css
If you include style.css,
<link href="style.css"/>
But if your structure project
root
index.html
assets
style.css
You can include location style.css
<link href="assets/style.css"/>
Related
Just starting out on html, how do I center the 'Webpage' Logo and remove margin to the right of that logo so the 'Home' can be in line to perform like a nav-bar. I added an image at the end of the code so you can look at the margin I'm trying to get rid of (don't know if that's even possible!).
……………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Design</title>
<link href="q1.css" rel="stylesheet"/>
<style>
body{
margin:0;
background-color: rgb(36, 37, 37);
}
.container{
padding-top:3px;
padding-bottom:3px;
width: 100%;
background-color:#003333;
height: 50px
}
.title-box{
margin-left: 20px;
}
.title-box label{
margin: 5px;
width: 130px;
text-align: center;
color:#E0E0E0;
border-color:rgb(11, 107, 19);
border-style:double;
border-width: medium;
width: fit-content;
}
.tasks{
float: right;
}
.para{
padding-left: 8px;
margin: 0%;
background-color: #515253;
padding-top: 10px;
padding-bottom: 10px;
width: fit-content;
}
.para p{
margin: 0%;
color: #e1f2f7;
}
</style>
</head>
<body>
<div class="container">
<div class="title-box">
<label>Webpage</label>
</div>
<div class="tasks">
HOME
</div>
</div>
<div class="para">
<p>The first web page went live on August 6, 1991.
It was dedicated to information on the World Wide Web project and was made by Tim Berners-Lee.
It ran on a NeXT computer at the European Organization for Nuclear Research, CERN.
The first web page address was http://info.cern.ch/hypertext/WWW/TheProject.html.
A web page or webpage is a document, commonly written in HTML, that is viewed in an Internet browser. A web page can be accessed by entering a URL address into a browser's address bar. A web page may contain text, graphics, and hyperlinks to other web pages and files.
<br><br>
A web page is often used to provide information to viewers, including pictures or videos to help illustrate important topics. A web page may also be used as a method to sell products or services to viewers. Multiple web pages make up a website, like our Computer Hope website.
<br><br>
When you click a link provided by a search engine, you are accessing a web page. The Internet consists of millions of web pages, with more being added every day.
</p>
</div>
</body>
</html>
Add flex and align-items: center; to .container.
Remove the height on .container and use padding instead.
Remove float from .tasks and use margin-left: auto;.
Then you can adjust spacing between the a's using margin-right: on .tasks a
body {
margin: 0;
background-color: rgb(36, 37, 37);
}
.container {
padding-top: 3px;
padding-bottom: 3px;
width: 100%;
background-color: #003333;
padding: 25px 0;
display: flex;
align-items: center;
}
.tasks {
margin-left: auto;
}
.tasks a {
color: #fff;
text-decoration: none;
margin-right: 1em;
}
.title-box {
margin-left: 20px;
}
.title-box label {
margin: 5px;
width: 130px;
text-align: center;
color: #E0E0E0;
border-color: rgb(11, 107, 19);
border-style: double;
border-width: medium;
width: fit-content;
}
.para {
padding-left: 8px;
margin: 0%;
background-color: #515253;
padding-top: 10px;
padding-bottom: 10px;
width: fit-content;
}
.para p {
margin: 0%;
color: #e1f2f7;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Design</title>
<link href="q1.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<div class="title-box">
<label>Webpage</label>
</div>
<div class="tasks">
HOME
HOME
HOME
HOME
</div>
</div>
<div class="para">
<p>The first web page went live on August 6, 1991. It was dedicated to information on the World Wide Web project and was made by Tim Berners-Lee. It ran on a NeXT computer at the European Organization for Nuclear Research, CERN. The first web page address
was http://info.cern.ch/hypertext/WWW/TheProject.html. A web page or webpage is a document, commonly written in HTML, that is viewed in an Internet browser. A web page can be accessed by entering a URL address into a browser's address bar. A web
page may contain text, graphics, and hyperlinks to other web pages and files.
<br><br> A web page is often used to provide information to viewers, including pictures or videos to help illustrate important topics. A web page may also be used as a method to sell products or services to viewers. Multiple web pages make up a
website, like our Computer Hope website.
<br><br> When you click a link provided by a search engine, you are accessing a web page. The Internet consists of millions of web pages, with more being added every day.
</p>
</div>
</body>
</html>
I just switched from VSC to Adobe Dreamweaver and i don't know if I should keep it or not; but that's besides the point.
When I try to add a background to some text, it fills the whole screen with the background with the background, and if I try to change the width it only adds on to the background which is filling the whole screen.
I don't know if it's user error, something changed in HTML/CSS overnight or if it's because of the Dreamweaver display box thing on the top of my screen
#charset "utf-8";
* {
margin: 0;
padding: 0;
}
.Container {
padding: 25%;
padding-left: 50%;
padding-right: 50%;
font-family: comfortaa;
font-style: normal;
font-weight: 600;
color: white;
background: #00C3FF;
margin: 0;
}
body {
background-image: url(http://www.incomeactivator.com/images/freebg5.jpg);
background-repeat: no-repeat;
background-size: 100%;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>index</title>
<link href="file:///C|/Users/REDACTED/Documents/style.css" rel="stylesheet" type="text/css">
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->
<script>
var __adobewebfontsappname__ = "dreamweaver"
</script>
<script src="http://use.edgefonts.net/comfortaa:n3:default.js" type="text/javascript"></script>
</head>
<body>
<div class="Container">
<h1>Hello</h1>
</div>
</body>
</html>
p.s: let me know if you need a ss of the results I get.
Instead of using the class, you can change the texts background color by adding
background-color: rgb(255, 236, 139)
in the h1 tag
Demo:
YOURTEXT
It should work as expected if you apply the css to the H1 tag:
.Container h1{}
You have used padding property incorrectly. Reference
Correct syntax: padding: top right bottom left
padding:0 50% 0 50%;
So the css should be:
.Container{ margin: 0; }
.Container h1{
padding:0 50% 0 50%;
font-family: comfortaa;
font-style: normal;
font-weight: 600;
color: white;
background: #00C3FF;
}
I'm not even sure how to link to show the problem since webpack and React combine all the CSS into one thing.
Here is a codepen of what the site shows: https://codepen.io/livebacteria/pen/bJpRxq
Code:
<html lang="en"><head>
<meta charset="utf-8">
<link rel="shortcut icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="/manifest.json">
<!--
Notice the use of in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
<style type="text/css">body {
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
monospace;
}
</style><style type="text/css">.App {
text-align: center;
}
.roomContent {
width: 85%;
}
.roomId {
width: 85%;
background-color: darkgray;
top: 0;
float: top;
text-align: center;
overflow: hidden;
}
.messageList {
margin-left: 15%;
}
#sign-in-button {
position: fixed;
left: 0;
bottom: 0;
height: 2%;
width: 5%;
background-color: red;
overflow-x: hidden;
}</style><style type="text/css">#room-list {
left: 0;
height: 100%;
width: 15%;
background-color: #797979;
overflow-x: hidden;
}
#rooms {
background-color: darkgray;
margin: .2em;
border: .2em solid black;
border-radius: .5em;
}
.active {
transition: background-color 0.2s ease-in-out;
background-color: white;
color: black;
}</style><style type="text/css">.message {
background-color: lightgrey;
}
.alter {
background-color: teal;
color: white;
}
ul {
list-style: none;
}
.username {
left: 0;
font-weight: bold
}
.msgContent {
text-align: justify;
}
.timestamp {
right: 100%;
}
li {
display: -webkit-flex;
display: flex;
}</style><script charset="utf-8" src="/main.301d260d2d5d7cc6e354.hot-update.js"></script><script charset="utf-8" src="/main.1b967c31a26f143b4c18.hot-update.js"></script><script charset="utf-8" src="/main.71fa75690276c3793425.hot-update.js"></script><script charset="utf-8" src="/main.bd4f9c2dd0d0d73a5767.hot-update.js"></script><script charset="utf-8" src="/main.674bf126f112209cc501.hot-update.js"></script><script charset="utf-8" src="/main.d51f6dd5d844ba3b041f.hot-update.js"></script><script charset="utf-8" src="/main.3b7da7fe7854caba082b.hot-update.js"></script><script charset="utf-8" src="/main.83cd193b84cfa377dad0.hot-update.js"></script><script charset="utf-8" src="/main.2a3407b574c86757e486.hot-update.js"></script><script charset="utf-8" src="/main.593394f8893e7c304918.hot-update.js"></script><script charset="utf-8" src="/main.ca86c32b9f61b8f0bb0b.hot-update.js"></script><script charset="utf-8" src="/main.8bbf712997dd0b0cc98c.hot-update.js"></script><script charset="utf-8" src="/main.8dc8d68395e79c2c6dbd.hot-update.js"></script><script charset="utf-8" src="/main.8f1d3411148d4555e4db.hot-update.js"></script><script charset="utf-8" src="/main.03f056389193af93776c.hot-update.js"></script><script charset="utf-8" src="/main.9cac50b16b883a71fef4.hot-update.js"></script></head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"><div class="App"><div class="roomListInfo"><div id="room-list"><section id="informationalHeader"><div><h1>Bloc Chat</h1></div></section><section id="rooms"><div><div class="active">room_1</div><div class="">room_2</div><div class="">room_3</div><div class="">Additional Information</div><div class=""></div><div class="">Mentor chat</div><div class="">retest</div><div class=""></div></div></section><section id="createRooms"><div><form><input type="text" id="nameEntry" value=""><input type="submit" disabled="" value="Create Room"></form></div></section></div></div><div class="roomContent"><h1 class="roomId">room_1</h1><div class="messageList"><div><div><ul><li class="username">LiveBactera</li><li class="msgContent">Testing</li><li class="timestamp">No Data</li></ul></div></div></div></div><div class="userInfo"><div><div><button>Sign Out</button><p>Tyler Poore</p></div></div></div></div></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
<script src="/static/js/bundle.js"></script><script src="/static/js/0.chunk.js"></script><script src="/static/js/main.chunk.js"></script><script src="/main.937734484660ad27272f.hot-update.js"></script>
</body></html>
But, my problem is that I'm trying to build a chat application / website that you know, looks like one. Perhaps like Slack of all things. I'm having major overlapping issues with different components. I want a top header bar to stay stuck to the top, a nav bar on the left side that is stuck as well and, finally, the content should be scrollable.
I don't even know where to start for CSS. I've done loads of tutorials but nothing makes sense. There feels like there is more to CSS than there is in JS. The only code that works to achieve the sidebar look I'd like to have is the position: fixed style in CSS. I've read that this can cause major issues with other /fixed/ elements and sure enough it has.
The more I mess with the CSS the worse it gets, I had to restart almost the whole project because it got so bad.
I am guessing you want roomListInfo on the left, and roomContent on the right?
Some quick fixes:
you need them to be side-by-side instead of stacked on top of each other. You could do this by making them both display: inline-block, and make roomListInfo have width: 15% to match the width: 85% on roomContent. It looks like you tried adding it on room-list instead, so you should undo that.
Next, to get roomContent to cling to the top of the "line" (cause both are now on a line, like a line of text) that both elements now exist on, instead of sitting on the bottom of it, add vertical-align: top to it.
There are different ways to solve this problem. CSS can be confusing to start out with but once you get the core concepts down (classes, Id, declarations) then this will become a lot easier.
A good tip is to separate your CSS into it's own file and then load it using
<head>
<link rel="stylesheet" type="text/css" href="YOUR_CSS_FILE_NAME.css">
</head>
I would definitely start one-by-by with this page. Don't try to do too many things at once and don't get overwhelmed.
Go through each section thoroughly before moving onto the next.
For the sample below I simulated putting the CSS into a different file, I moved it to the CSS Window and removed the Style Tags.
Then I went through and changes some of the HTML and added the appropriate styles based on what I think you are asking for.
This is just one way to solve this problem, it doesn't mean it's the best.
https://codepen.io/anon/pen/ROaZGo
Problem has been resolved, thank you to everyone who has helped me with this. The problem was that I was using <.style> tags in the css file which is a HTML tag, which is not read properly in the css making varying things happen.
I working on an assignment for my HTML class and were getting into .css for external setup.
What I've been noticing is when I move one block of code into anothers spot, the entirety of my webpage changes, but what I moved seems to "no longer exist".
My css code is
<style>
body { background-color: #6699ff;
color: #d5e3ff;
font-family: verdana; }
header { background-color: #6699ff;
color: #003366;
font-family: serif; }
h1 { line-height: 200%; }
nav { font-weight: bold; }
#category { font-style: bold;
background-color: #6699ff;
color: #003366;
font-size: 1.1em; }
footer { font-size: 0.60em;
font-style: italic; }
</style>
And the page looks like: http://i.imgur.com/eGthqWR.jpg
But when I move the the body to where the header is
<style>
header { background-color: #6699ff;
color: #003366;
font-family: serif; }
body { background-color: #6699ff;
color: #d5e3ff;
font-family: verdana; }
h1 { line-height: 200%; }
nav { font-weight: bold; }
#category { font-style: bold;
background-color: #6699ff;
color: #003366;
font-size: 1.1em; }
footer { font-size: 0.60em;
font-style: italic; }
</style>
The page ends up looking like this... http://i.imgur.com/GxTfpTs.jpg
I'm really confused as to why it only uses the second "block" to actually get what the page should look like.
I can edit in my index page if you need to see that as well, but I'm pretty sure it's just an issue with how I'm coding the css file.
Here's the Index.html
<!DOCTYPE html>
<html lang="en">
<link rel= "stylesheet" href="fishcreek.css">
<header>
<title> Fish Creek Animal Hospital </title>
<meta charset="utf-8">
<h1> Fish Creek Animal Hospital </h1>
</header>
<nav>
Home
Services
Ask the Vet
Contact
</nav>
<body>
<dl>
<dt><strong>Full Service Facility</strong></dt>
<dd>Veterinarians and staff are on duty 24 hours a day, 7 days a week.</dd>
<dt><strong>Years of Experience</strong><dt>
<dd>Fish Creek Veterinarians have provided quality, dependable care for your <br>
beloved animals since 1984.</dd>
<dt><strong>Open door Policy</strong></dt>
<dd>Our Professionals welcome owners to stay with their pets during any medical <br>
procedure.</dd>
<dl>
1-800-555-5555 <br> 1242 Grassy Lane <br> Fish Creek, WI 55534
</dl>
</dl>
</body>
<footer>
<small><i>Copyright © 2014 Fish Creek Animal Hospital <br>
Johnathon#Olivas.com</i> </small>
</footer>
</html>
If anyone knows whats wrong with mine, or why it seems to be doing that, I'd love to know! Thanks in advance -John
As a temporary fix to the problem, I was able to add a small single line of code as the "fodder" to being skipped and the header now works the way it's supposed to, and the rest is all according to plan!
THEFIX! {background-color: #6699ff;}
That's all I had to do and it works... kinda, I just hope that I can figure out how to get rid of "thefix" so it works without it.
Thanks for the help everyone, sorry that it wasn't worded very well and probably didn't make much sense, but yea... temporary workarounds ftw
You shouldn't use <style> and </style> in your css files — it's a html tags, not css syntax.
What's going on in your case:
You are trying to apply css rules to <style> body selector or <style> header selector depending on the order. There is no such elems in your html, so it in fact doesn't applies your first rule.
I try something like this, and change the order css code for header and body the result is same.
<!DOCTYPE html>
<html>
<head>
<style>
/*
body { background-color: #6699ff;
color: white;
font-family: verdana; }
header { background-color: #6699ff;
color: red;
font-family: serif; }
*/
header { background-color: #6699ff;
color: red;
font-family: serif; }
body { background-color: #6699ff;
color: white;
font-family: verdana; }
</style>
</head>
<body>
<article>
<header>
<h1>Most important heading here</h1>
<h3>Less important heading here</h3>
<p>Some additional information here.</p>
</header>
<p>Lorem Ipsum dolor set amet....</p>
</article>
</body>
</html>
I'm sorry, I'll admit I'm a bit of a newbie when it comes to HTML. But I can't see where I'm going wrong. I've declared the page to be aligned center, but for some reason invisible to me, it won't actually align!
My code is here...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
<!--
body,td,th {
font-size: 14px;
text-shadow: inherit;
max-width: 1000px;
min-width: 600px;
float: none;
vertical-align: central;
position: absolute;
width: auto;
}
h1 {
font-size: 40px;
color: #FFF;
}
h1,h2,h3,h4,h5,h6 {
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
}
h2 {
font-size: 16px;
color: #666;
}
h3 {
font-size: 24px;
color: #FFFFFF;
}
.Headertext2 {
}
h5 {
font-size: 16px;
color: #666;
}
h6 {
font-size: medium;
color: #000;
}
h4 {
font-size: 12px;
color: #FFF;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
color: #999;
}
a:active {
text-decoration: none;
}
</style> <title>We'll fix your Potholes!</title>
</head><center>
<body bgcolor="#B90D32"> <div id="container" width "1200" align="center" >
<h1>A1Jay Pothole Solutions</h1>
<h3><strong>Permanent Pothole Repair that lasts</strong></h3>
<div id="content" align="center" bgcolor="#FFFFFF" width"600" class="content">
<h6>Potholes are a growing problem and cause lasting damage to your vehicle.
We here at A1JAy Pothole Solution have the solution. We use only the best products on the market to repair potholes ensuring that the problem is fixed permanently and never returns. Our repairs are professional water tight and permanent. We replace any road markings that may be removed. We respond quickly to repair any holes, therefore stopping the damage to your vehicle.
Our products are cold lay, fully graded to PSV-60 and all packaging is recyclable.
We have different rates depending on the amount of potholes you require permanently repairing, get in touch for details.
If you have a pothole on your drive, street, place of work, car park, walkway or anywhere else, please get in contact and I will happily give you a free, no obligation quote.. </h6>
<p> </p>
</div>
</div>
</body>
</html>
I apologise if this question has already been asked, I'm still getting to know Stack Overflow. Thanks in advance :).
Let's start with a stripped down (and working) solution: http://jsfiddle.net/WDTCK/1/
Major Points
<center> is obsolete* (it's also an illegal parent for body, and unclosed in your example)
align=center is obsolete*
A simple way to center something using CSS is to assign a container element a width and margin: 0 auto
Like this:
#container {
margin: 0 auto;
width: 600px;
}
Minor Points
Always prefer styles declared separate from the markup
Always declare styles using CSS (not deprecated properties like bgcolor="#B90D32")
Make sure you are using headings correctly. I see H1, H3, and H6. Headings should represent the outline of your document; they should not be used just for formatting.
Here's a cleaner example which demonstrates better semantics: http://jsfiddle.net/WDTCK/2/
* "obsolete and non-conforming, and [...] must not be used by authors."
Put this inside the body
<div align = "center">
<!--somecodes-->
</div>