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>
Related
I have a springboot application which has an endpoint which would load a freemarker template(abc.ftlh). It looks like this
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js" type="text/javascript"></script>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#300;500&display=swap" rel="stylesheet">
<style type="text/css">
.topRight {
position:absolute;
top:0;
right:0;
}
.data-body {
font-family: 'Roboto', sans-serif;
background-color: #f7f7f7
}
.option, .span {
font-size: 14px;
}
.p {
font-weight: 300;
font-size: 16px;
color: #333333;
line-height: 1.22;
}
.h1, .h2 {
font-weight:normal;
font-size: 18px
}
.h3 {
color: #9b9b9b;
font-size: 16px;
font-weight: 300;
line-height: 1.22;
}
</style>
</head>
<body class="data-body">
<br /><br />
<div class="topRight">
</div>
<div>
${databody}
</div>
</body>
</html>
the variable databody is being set from the backend. It has content like
<h1>Something</h1>
<h2>foo bar</h2>
css is applied to elements which are present in the template for example data-body and topRight is applied. But css is not applied for the elements which are rendered from backend. For example <h1>, <h2> are not applied.
How can I get this working.
It's simply because in your css you have .h1 instead of just h1, etc. The .h2 selector matches <... class="h1">, not <h1> itself.
Also, in CSS issues it never matters if something was generated by FreeMarker or not, as the browser can't tell the difference.
.h1 means that you want to select all class="h1" elements.
.h1, .h2 {
font-weight:normal;
font-size: 18px
}
.h3 {
color: #9b9b9b;
font-size: 16px;
font-weight: 300;
line-height: 1.22;
}
You can select the <h1> directly and apply css to it via h1{...}
It would be easier if you place these css files under resouce/static folder, and reference in the HTML head.
There are couple of issues here.
The css for html tags should be named without the preceding dot.
For example .h1 should be h1
Most important thing here is to tell freemarker to not not escape the value. By default auto escaping is enabled.
If the string value to print deliberately contains markup, auto-escaping must be prevented like ${value?no_esc}.
So the solution here is ${databody} should be ${databody?no_esc}
More on this topic here https://freemarker.apache.org/docs/dgui_quickstart_template.html#dgui_quickstart_template_autoescaping
I've been doing HTML and CSS for a few months and as a part of my website I made a joke fake sales website. I am sort of basing it on the Amazon pages, with a picture on the left, a header on the right, and a product description on the right underneath the heading. Now yes I know what you're thinking looking at my code "He hasn't even done anything to his description!", well there's nothing there because I got angry and got rid of my CSS for the description. You can see a class .description for putting CSS and whatever there. I've tried floating it to the right (it doesn't work), floating to the right and then using padding to push it in a certain direction (it doesn't work), E.T.C. If you want the full code I'll put that at the bottom or something. Please show me how I can get my description under the title?
(For this chunk of code I have removed a few bits that were unnecessary)
<!DOCTYPE html>
<html>
<head>
<title>merch for sale</title>
<style>
#merch{
float:right;
padding-right:100px;
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.description{
}
</style>
</head>
<body>
<h1>
<div id="merch">
Hamsterlover606 merchandise for sale
</div>
</h1>
<div class="description">
<h3>
Merchandise for Hamsterlover606.
<br>
<br>
Perfect condition, hardly used. Comes with a t-shirt, a hat, and a pillow.
<br>
<br>
</h3>
</div>
</body>
</html>
The output of the code
Here is the full code:
<!DOCTYPE html>
<html>
<head>
<title>Hamsterlover merch for sale</title>
<style>
#merch{
float:right;
padding-right:100px;
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #4CAF50;
color: white;
}
.description{
}
</style>
</head>
<body>
<div class="topnav">
<a class="active" href="#home">Home</a>
Buy
Sell
About
</div>
<h1>
<div id="merch">
Hamsterlover606 merchandise for sale
</div>
</h1>
<img src="https://cdn.glitch.com/d006369a-81f1-413d-a5cd-ce34e241b87c%2F775B0830-9365-46FF-AEF7-66F8939D8617.jpeg?v=1575572530269" height="500">
<div class="description">
<h3>
Merchandise for Hamsterlover606.
<br>
<br>
Perfect condition, hardly used. Comes with a t-shirt, a hat, and a pillow.
<br>
<br>
</h3>
</div>
</body>
</html>
Use div to order and group your code. Try to think of the elements on your page as different groups in a box, and create a div for every group.
To make the div with the text appear right next to the image, make the image float: left.
` <!DOCTYPE html>
<html>
<head>
<title>Hamsterlover merch for sale</title>
<style>
#merch{
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #4CAF50;
color: white;
}
#img {
float: left;
}
}
</style>
</head>
<body>
<div class="topnav">
<a class="active" href="#home">Home</a>
Buy
Sell
About
</div>
<div id="img">
<img src="https://cdn.glitch.com/d006369a-81f1-413d-a5cd-ce34e241b87c%2F775B0830-9365-46FF-AEF7-66F8939D8617.jpeg?v=1575572530269" height="500">
</div>
<div>
<h1>
Hamsterlover606 merchandise for sale
</h1>
<div class="description">
<h3>
Merchandise for Hamsterlover606.
<br>
<br>
Perfect condition, hardly used. Comes with a t-shirt, a hat, and a pillow.
<br>
<br>
</h3>
</div>
</div>
</body>
</html>`
To explain what I wish to achieve, lets say I have a long css document with many classes. I have several different "h1" tags and "h2" tags, "iframe", "ul", and many have different classes. Is it possible for all "h1" or other tags, regardless of class, to be grouped together and all "iframe" are grouped together in one group in Notepad++.
h1.left {
font-family: Papyrus;
font-size: 45px;
color: white;
margin-left: 15px;
}
h1.center {
font-family: Papyrus;
font-size: 30px;
color: white;
text-align: center;
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<pre>PS: All code in this document is just
so it would be seen as I meant it to be,
and I hope you can read it right.<pre>
<!--For example:-->
+ h1
<!--And if i roll the h1 down, i can get all h1 in the document:-->
<ul>
<li> h1.left</li>
<li>h1.center <li>
<li>h1.right<li>
<!--And if i open those again, I will get all the code that is inside them-->
</body>
</html>
Not sure whether Notepad++ can run SASS but it sounds like what you are after.
h1 {
color: white;
font-family: Papyrus;
text-align: center;
&.left {
font-size: 45px;
}
&.center {
font-size: 30px;
}
}
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"/>
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>