I'm using a website to help me to found speed issues on my website.
This problem occurred but I don't know how to solve this
Specify a character set early The following resources have no character set specified in their HTTP headers. Specifying a character
set in HTTP headers can speed up browser rendering.
My code is this:
<!DOCTYPE html>
<html>
<meta name=viewport content="width=device-width, initial-scale=1">
<meta name=description content="EFR3SXZ's personal site">
<meta property=og:title content=EFR3SXZ>
<meta property=og:description content="EFR3SXZ's personal site">
<meta property=og:image content=http://richpreview.com/richpreview.png>
<link rel="shortcut icon" href=http://richpreview.com/favicon.ico type=image/x-icon>
<head>
<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1">
<title>Dead Centre</title>
<style type="text/css" media="screen">
<!-- body {
color: white;
background-color: #003;
margin: 0px
}
#horizon {
color: white;
background-color: transparent;
text-align: center;
position: absolute;
top: 50%;
left: 0px;
width: 100%;
height: 1px;
overflow: visible;
visibility: visible;
display: block
}
#content {
font-family: Verdana, Geneva, Arial, sans-serif;
background-color: transparent;
margin-left: -125px;
position: absolute;
top: -35px;
left: 50%;
width: 250px;
height: 70px;
visibility: visible
}
.bodytext {
font-size: 14px
}
.headline {
font-weight: bold;
font-size: 24px
}
#footer {
font-size: 11px;
font-family: Verdana, Geneva, Arial, sans-serif;
text-align: center;
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 20px;
visibility: visible;
display: block
}
a:link,
a:visited {
color: #06f;
text-decoration: none
}
a:hover {
color: red;
text-decoration: none
}
-->
</style>
<title>EFR3SXZ</title>
</head>
<body>
<div id="horizon">
<div id="content">
<div class="bodytext">
Incarnoob
<br>
<span class="headline">EFR3SXZ</span>
<br>website</div>
</div>
</div>
<div id="footer">
Incarnoob's Dofus page</div>
</body>
</html>
The HTML you use is largely irrelevant to the HTTP headers. How you set those depends on the HTTP server you are using and (if applicable) the server side programming language that is generating the response.
If you were (for example) using Apache HTTPD, you might edit your server configuration file to include:
AddDefaultCharset ISO-8859-1
(NB: I'd suggest moving away from legacy encodings and use UTF-8 now it is the 21st century).
Related
I need some help with my messy code (excuse me for having lot of text in my native language). I need to fit the IFRAME in between head and footer of the site, so it will look the same on every monitor (resolution).
Thanks!
body {
margin: 0;
background-image: linear-gradient(to right, #292c33, #a0b2d0, #dee9f6, #a0b2d0, #292c33);
}
p{
color: #272727;
text-align: left;
display: block;
font-family: 'Montserrat', sans-serif;
padding-left: 14px;
font-size: 12px;
text-decoration: none;
// nadefinování písma na stránce
}
.nav{
background-color: #eaeaea;
overflow: hidden;
}
.nav a{
float: left;
display: block;
color: #272727; // barva fontu
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 100%;
border-bottom: 3px solid transparent;
font-family: 'Montserrat', sans-serif;
height: 30px;
}
.nav a:hover{
border-bottom: 3px solid #310a0b;
}
.nav a.active{
border-bottom: 3px solid #b50c0f;
}
.fotka{
display: block;
float: right;
width: 5%;
height: 5%;
margin: 12px;
}
footer{
padding: 1px;
background-color: #eaeaea;
color: #272727;
font-family: 'Montserrat', sans-serif;
font-size: 12px;
position: fixed;
bottom: 0;
width: 100%;
}
.zvideo{
display: block;
margin-left: auto;
margin-right: auto;
padding-top: 0%;
}
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='icon' href='favicon.ico?' type='image/x-icon'/>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
<title>Hlavní stránka</title>
</head>
<body>
<div class="nav">
<a class="active" href="index.html">Domů</a>
Zaklínač
Hry
Knížky
<img class="fotka" alt="logo stránky" src="logo.png">
</div>
<!--NÁSLEDUJE DIV IFRAMU-->
<div class="zvideo">
<iframe class="zvideo" src="https://www.youtube.com/embed/hquuwfa3FCo?autoplay=1&mute=1" width="1152px" height="648px" frameborder="0" allow="autoplay"></iframe>
</div>
<footer>
<p>Autor: Jan Michalisko</p>
<p>Můj email: hachikolp#gmail.com</p> <!--mailto: mi přišel velmi barbarský, takže jsem tam nechal jenom paragraf-->
</footer>
</body>
</html>
I hope that you will be able to identify what is footer, head etc., i am really not a good at coding yet, lol. Thank you for help!
According to the comments, you just trying to center an iframe. The I in iframe stands for inline. So the correct name for the <iframe> tag is: inline frame. As the name indictaes, it is not a block level element but an inline element. As such it can not be centered by using margin: 0 auto; by default. So you need to add display: block; first, in order to change the iframe into a block level element.
iframe {
display: block;
margin: 0 auto;
background-color: blue;
}
<iframe src="">Just a Test</iframe>
My html form arpitpkh.pythonanywhere.com works fine on pc but not responsive on mobile phones(I'am using iphone7) even though i've added the <meta> tag.
Here's my html code for 'home.html'
What's wrong with my code?? What should i change in my code?
body {
background-image: url("/static/grey.jpg");
background-size: cover;
background-repeat: no-repeat;
overflow: hidden;
}
h1 {
font-family: Arial, Helvetica, sans-serif;
font-weight: bolder;
text-align: center;
margin-top: 250px;
font-size: 70px;
color: coral;
}
.input2:hover {
background-color: coral;
color: white;
}
.input1 {
position: absolute;
top: 60%;
left: 37%;
width: 250px;
height: 30px;
}
.input2 {
position: absolute;
top: 59.4%;
left: 59%;
width: 87px;
height: 35px;
background-color: #ddd;
border: none;
color: black;
padding: 10px 5px;
text-align: center;
font-size: 16px;
margin: 4px 2px;
transition: 0.3s;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Weather Forecast</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" media="screen" href="/static/main.css" />
<script src="main.js"></script>
</head>
<body>
<p>
<form action='/weather' method="post">
<h1>City Name:</h1><input class="input1" type="text" name="city_name"> <br/>
<input class="input2" type="submit" name="form" value="Submit">
</form>
</p>
</body>
</html>
You're using absolute positioning and defining sizes in px which stays the same on all screen sizes, making your design unresponsive.
You need to use responsive units like ems and media queries.
Check out this article on responsive design principles and this quick tutorial.
i'm working on doing a website and i can't seem to make my css apply and everything appears as plaintext to the side. i've been searching for over an hour, i can't figure out what i've done wrong.
<!DOCTYPE html>
<html>
<head>
<title>SOLAR RECORDS</title>
<meta name="viewport" content="width=device-width.intial-scale=1.0"
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Jura" rel='stylesheet'>
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet">
<style type="text/css">
body {
background-color: #0c0c0c;
padding: 0;
margin: 0;
}
.sidenav {
height: 100%
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111
overflow-x: hidden;
padding-top: 60px;
transition: 0.5s;
here's the full text
You've missed the closing } in .sidenav. Because of this, all of the styles that come after this do not get applied. Adding this in correctly applies the styles that follow it.
In addition to this, you've also missed the closing > in your <meta name>, meaning your Google Font is not getting applied either.
Finally, your colours all have five characters. You either need to use 3 letters (shorthand) or 6 characters for the full hex value.
You can avoid these mistakes by validating your code with the W3 Markup Validation Service.
Here's a working example:
<!DOCTYPE html>
<html>
<head>
<title>SOLAR RECORDS</title>
<meta name="viewport" content="width=device-width.intial-scale=1.0">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Jura" rel='stylesheet'>
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet">
<style type="text/css">
body {
background-color: #0c0c0c;
padding: 0;
margin: 0;
}
.sidenav {
height: 100% width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111 overflow-x: hidden;
padding-top: 60px;
transition: 0.5s;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
font-family: 'Opens Sans Condensed', sans-serif;
color: #ffffff;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #cccccc;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
img.center {
display: block;
margin: 0;
}
h1 {
font-size: 25px;
font-family: 'Jura', sans-serif;
color: #ffffff;
text-align: center;
}
</style>
</head>
<body>
<h1>SOLAR RECORDS™</h1>
<div style="text align: center"><img src="the.png" alt="Records"></div>
<div id="mySidenav" class="sidenav">
×
HOME
RELEASES
ARTISTS
EVENTS
MIXES
NEWS
LABEL
CONTACT
</div>
<span onclick="openNav()">OPEN</span>
</body>
</html>
I try to make the content div of my page expand according to the content that is loaded in it due to a script. I've tried everything I know and everything I have found on the internet, but nothing has the result I want.
HTML:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>index</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(function(){
$('#nav a').click(function(e) {
$('#content').hide().load( $(this).attr('href') , function(){
$('#content').show()
})
return false
})
})
</script>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="nav">Home
The Band  
News  
Gallery Merchandise
Contact</div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body>
</html>
CSS:
div#container {
height: 100%;
width: 100%;
}
div#header {
top: 0px;
width: 100%;
height: 80px;
position: fixed;
background-color: transparent;
text-align: center;
}
div#nav {
font-family: MgSouvenirLight;
font-size: 18pt;
color: #FF0;
top: 120px;
width: 100%;
height: 40px;
position: fixed;
text-decoration: none;
text-align: center;
font-weight: bolder;
font-variant: normal;
}
div#content {
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size: 12px;
position: absolute;
top: 200px;
bottom: 40px;
left: 200px;
right: 200px;
}
div#footer {
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
bottom: 0px;
position: fixed;
height: 30px;
width: 100%;
text-align: center;
color: #fff;
}
.ttdesign {
font:"Arial Black", Gadget, sans-serif; color: #09F;
}
a:link {
font-family: MgSouvenirLight;
font-size: 18pt;
color: #FF0;
}
a:visited {
font-family: MgSouvenirLight;
font-size: 18pt;
color: #FF0;
}
a:hover {
font-family: MgSouvenirLight;
font-size: 18pt;
font-style: italic;
color: #FC0;
}
The demo link is: http://thodoris.esy.es/is/
Right now, the problem that occurs, is that the content that is loaded, does not make the #content expand, but it seems to load over it... Any ideas?
If you want your page to be responsive you may be better of using bootstrap as using there grid system will allow you to make all aspects of your page responsive depending on the content and screen size.
You can get it here
And here are some free templates to show you how it all fits together here
This is my first week of programming in CSS, HTML and PHP... I realized when beginning my site that when i scaled my site by window size that all the text would begin to overlap, cause issues and look terrible.
I was wondering if i could get a clear answer on what i am doing horribly wrong. I have tried methods such as media queries but i still don't understand it at all.
Here is my HTML...
<!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" lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style/style.css" />
<title>replay.sc</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
a:link { color: grey; }
a:visited { color: grey; }
a:hover { color: white; }
a:active { color: grey; }
text-decoration: none;
}
}
</style>
</head>
<body font="sans-serif" id="container">
<!--- BEGIN: STICKY HEADER -->
<div id="header_container">
<div id="header">
<p><a id="headertext" a href="replay.sc"> replay.sc </a><p>
</div>
</div>
<!-- END: STICKY HEADER -->
<!-- BEGIN: Sticky Footer -->
<div id="footer_container">
<div id="footer">
</div>
</div>
<!-- END: Sticky Footer -->
<div id="home_container">
<h1 id="hometext" > Upload your replay here to generate a page containing a download link and various information on the replay. </h1>
<p id="hometext2"> When the page is generated you will have the option to select which information on the replay you want to display to the public, if you are logged in you will be able to edit this in the future.</p>
<h1 id="hometext3"> Upload a replay pack here to generate a page containing download links for every replay or for a .rar file of every replay. </h1>
<p id="hometext4"> Only basic information for each replay will be made to conserve server load. </p>
</div>
</body>
and my CSS
/* Reset body padding and margins */
body { margin:0px; padding:0px; }
/* Make Header Sticky */
#header_container { background:black; border:1px solid #666; height:40px;left:0;position:fixed; width:100%; top:0; }
#header{ line-height:5px; margin:10px; auto:width:940px; text-align:left;}
#headertext {
font-family: "sans-serif";
size: 20px;
padding: 2px;
font-size: 120%;
text-decoration: none;
}
/* CSS for the content of page. I am giving top and bottom padding of 80px to make sure the header and footer do not overlap the content.*/
#container{ margin:auto; overflow:auto; padding:80px ; width:100%; height: auto; }
#content{
}
/* CSS FOR HOME PAGE CONTENTS */
#hometext{
font-family: "arial";
padding: 1px;
font-size: 100%;
text-decoration: none;
position: absolute;
top: 5em;
left: 4em;
color: #585858;
margin-right: 850px;
}
#hometext2 {
font-family: "arial";
padding: 10px;
font-size:80%;
text-decoration: none;
position: absolute;
top: 7em;
left: 4.24em;
color: #585858;
margin-right: 1200px;
}
#hometext3 {
font-family: "arial";
padding: 1px;
font-size:100%;
text-decoration: none;
position: absolute;
top: 5m;
left: 65em;
color: #585858;
margin-right: 0;
}
#hometext4 {
font-family: "arial";
padding: 18px;
font-size:80%;
text-decoration: none;
position: absolute;
top: 10m;
left: 80em;
color: #585858;
margin-right: 0;
}
#home_container