I have made an HTML file (code will be shown below for reference) using some images and style sheet (from local filesystem).
My Folders are as follows:
Main (contains the StyleSheet Style1.cs and HTML file Page1.html)
Images are placed in folder Main/pics
The style is perfectly visible in Code Editor (VS 2010), but whenever I run the file on Mozilla or Edge, etc, its failing to show any image or even style. Here is screenshot of html in editor:
Yes I have seen the question here but my problem is not fixing even though I tried it on both IE and Mozilla (Edge as well). (And I have followed the preventive measures as prescribed by the question above)
My code is pretty simple:
<!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>
<title>Untitled Page</title>
<link rel="stylesheet" type="text/css" href="/Style1.css" />
</head>
<body>
<div id="HeaderDiv" class="top-header-blue">
Header
</div>
<div id="CentreDiv" class="content-header-white">
Test
</div>
<div id="footerDiv" class="footer-centre">
CopyRights 2015 -
</div>
</body>
</html>
Any help will be so valuable. Thanks
you have given the wrong path in style as / in before the Style1.css just replace
<link rel="stylesheet" type="text/css" href="Style1.css" />
Related
I've been working on pre html tag and came across an issue while switching from Bootstrap 3 to Bootstrap 4.
If I run the this code using Bootstrap 3.3.7,
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<title>Pre html tag sample</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<body>
This is a normal content
<pre>Hello there.
This is a content inside the pre html tag test.
This is a pre html tag test.
</pre>
</body>
</html>
I get the following output
If I run the this code using Bootstrap 4.5.2,
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<title>Pre html tag sample</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<body>
This is a normal content
<pre>Hello there.
This is a content inside the pre html tag test.
This is a pre html tag test.
</pre>
</body>
</html>
I get the following output
I want to get the same pre html tag output of Bootstrap 3 (the first screenshot) using the Bootstrap 4. How can I accomplish that?
Both versions look similar in appearance but I guess it's the padding that is bothering you ?
If we compare both style sheets we can indeed see differences in the way the tag is styled.
In the 3.3.7 version there is this:
pre{display:block;padding:9.5px;margin:0 0 10px;font-size:13px;line-height:1.42857143;color:#333;word-break:break-all;word-wrap:break-word;background-color:#f5f5f5;border:1px solid #ccc;border-radius:4px}
In 4.5.2 padding seems to be missing but it's possible that I missed something as I only had a cursory look:
pre{display:block;font-size:87.5%;color:#212529}
Note that there are few more relevant styles like:
code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}
I have only singled out the one I think is important.
Seeing that you use a CDN to retrieve the style sheets you could override some tags with a custom style sheet hosted on your site. For example redefine the pre tag like this:
pre {
display:block;
padding:9.5px;
font-size:87.5%;
color:#212529
}
And you add your style sheet after the Bootstrap import like this:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://yoursite.com/custom.css">
Note that the margins are also different between both versions. For instance 3.3.7 has this:
pre{display:block;padding:9.5px;margin:0 0 10px;font-size:13px;line-height:1.42857143;color:#333;word-break:break-all;word-wrap:break-word;background-color:#f5f5f5;border:1px solid #ccc;border-radius:4px}
While 4.5.2 has:
pre{margin-top:0;margin-bottom:1rem;overflow:auto;-ms-overflow-style:scrollbar}
Otherwise I suggest that you use the inspector function of your browser while browsing the site in version 3.x, and focus on a pre tag, then copy the applied styles.
The <pre> tag in 3 obviously just has some padding and a border. You can use the utility classes for border and for padding.
The line below appears to give the result you seek.
<pre class="p-4 border">
I used this bootstrap classes, for my case it looks close enough to bootstrap 3:
<pre class="border rounded bg-light">
So I don't need custom CSS.
I started learning HTML and CSS, I write an HTML code but the expected result is not appearing on chrome or internet explorer, I made sure that the code syntax is correct and the file saved with its name .html, everything appears normal and good with the code but why there is nothing appearing on chrome??
thank you.
This is a simple code that I'm trying to see on chrome.
<!DOCTYPE html>
<html>
<!-- HTML Project-->
<head>
<meta keywords="htmls, teach, learn" />
<link rel="stylesheet" type="text/css" href="style.css">
<title> HTML WEBSITE </title>
</head>
<body>
<div style="color : blue;">
THIS IS MY NEW WEBSITE
</div>
</body>
</html>
Editing a README.md for a git repository. But I want to embed raw HTML into the the readme. I'm using Markdown, which is an excellent tool. Yet, the code just keeps showing up as rendered HTML.
How do I keep it Raw?
And formatted like code?
Here it is if you're curious:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome</title>
</head>
<body>
<h1>Django Site</h1>
<hr />
<p>Thanks for visiting.</p>
</body>
</html>
The heck? It works here.
I suppose you are on GitHub.
GitHub only allows certain HTML elements and attributes inside their markdown: all others are stripped to prevent XSS and defacing.
And of course, <body> is one of the forbidden tags as it would make the HTML invalid if present (a body inside a body)
This is documented at: https://help.github.com/articles/github-flavored-markdown/#html
Use "`" This Sign To Use Raw Code Snippets
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome</title>
</head>
<body>
<h1>Django Site</h1>
<hr />
<p>Thanks for visiting.</p>
</body>
</html>
It Will Allow A User To Copy Your Code Directly From Your README.md File In Github By Just Pressing A Button !!!
Why is the favicon on this webpage not working in IE10 and lower? The webpage is here. It works in IE11 as well as other major browsers.
Here is the code on the top of the page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>...</title>
<meta http-equiv="X-UA-Compatible" content="IE=8,IE=9" >
<!-- (various stylesheet, script, and meta declarations) -->
<link rel="Shortcut Icon" href="/riteAid-theme/images/custom/riteaid.ico" />
<!-- (more stylesheets and scripts) -->
<link rel="canonical" href="..." />
</head>
Things I have tried (to no avail):
Setting type="image/x-icon" in the link declaration.
Setting rel="icon" in the link declaration.
Setting the declaration higher up in the head.
Changing the name of the icon to favicon.ico
I am using a new virtual machine instance between attempts, so caching is not the issue.
It looks like the .ico file is in the wrong format (PNG or GIF). See this question.
i'm trying to implement various semantic links on the website I'm working on.
For that, i try to put
<link rel="start" href="index.html" />
In my head section.
Although the data is present in the web page, Opera does not seems to see it to show the navigation bar that should however be present.
Here is my full head section.
<!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"/>
<title>Amnistie et compagnie</title>
<link rel="start" href="index.html" />
<link rel="previous" title="aaaa" href="365-gestes-pour-sauver-la-planxc3xa8te-2.html" />
<link rel="next" title="aaa" href="5-best-data-visualization-proj.html" />
</head>
Furthermore, when replacing urls with absolute ones, it seems to work correctly. is there something I did wrong ?
I even tried using code samples like this one, but my navigation bar (which is set to show automatically) never appears, except when a href is an absolute url, what I radically don't want.
So, how can i specify link elements with relative urls ?
what happens if you try the following doctype?
<!DOCTYPE html>