i'm running some basic beginner tutorials in order to learn how to properly run html. I've come to the portion where i'm using a div tag in css to center the content. However, once i open the test page, everything stays locked to the right of the browser. I've been scouring the forums for any solution and nothing seems to fix the issue. Tested in Chrome and IE.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>My First Website</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div>
<h1> My Website </h1>
<p>Learn more about me.</p>
<img src="img/lady.jpg" alt="skyrim">
<h2>My New Section </h2>
</div>
</body>
</html>
Here's the CSS:
a {
color: red;
text-decoration: none;
}
h1 {
font-family: sans-serif;
}
div {
width: 500px;
margin: 0 auto;
background: red;
text-align: center;
}
You have no Doctype. This puts you in Quirks mode (the land of incompatibility).
Add one as the very first thing in your document.
<!DOCTYPE html>
It looks fine in my end:
http://jsfiddle.net/Riskbreaker/JH7NK/
If you mean that extra space you have vertically on top its your h1.
I edited to show you:
div h1 {margin: 0}
You need to add a DOCTYPE. This is an example of the HTML5 DOCTYPE
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
HTML here
</body>
</html>
Related
Is there a way to be able to have HTML / CSS just warp the lines on the same line?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.MYDIV {
overflow-x: auto;
white-space: pre-line;
border: 1px solid #cccccc;
height: auto;
width: 320px;
}
</style>
<body>
<div class="MYDIV">
Look I really just want to be able to write this like this in html.
And have this be on the same line in the browser and wrap. I know
it's weird but it would make my life easier.
</div>
</body>
</html>
What the HTML CSS gives me
What I want without having to write everything in one line.
If this is imposable I can accept that.
Remove white-space: pre-line from your code and it will give you the desired output.
Because when using pre-line lines are broken at newline characters, at <br>, and as necessary to fill line boxes.
Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space
Also add padding-top: 10px; for the space above the content (I spotted this on the screenshot).
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.MYDIV {
overflow-x: auto;
/*white-space: pre-line;*/
border: 1px solid #cccccc;
height: auto;
width: 320px;
}
</style>
<body>
<div class="MYDIV">
Look I really just want to be able to write this like this in html.
And have this be on the same line in the browser and wrap. I know
it's weird but it would make my life easier.
</div>
</body>
</html>
The solution has already been given, I just want to mention one thing. It's always a good practise to use a paragraph tag for this sort of writing. That will adjust many issues by itself.
So remove white-space: pre-line; and use
<p class="MYDIV">
Look I really just want to be able to write this like this in html.
And have this be on the same line in the browser and wrap. I know
it's weird but it would make my life easier.
</p>
This is surely a good practise to write HTML codes.
I am using Codepen and the textbox should be in the center with a smaller width, but no matter what I add to the .box area of the CSS, it doesn't respond. I can confirm that this isn't a web browser issue as I've tried both Google and Brave
You are using html tag in css. It won't work anymore. Style tag is used when you want to write css in your html file internally. Like this -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 10%;
text-align: center;
}
</style>
</head>
<body>
</body>
</html>
But if you write css in a separate file, you needn't use the <style></style> tag. Just write the css like this -
.box {
width : 10%;
text-align : center;
}
And codepen gives you the ability to write HTML, CSS, and javascript separately. So, don't use tag.
I have built a WebGL game using Unity, and I put it on a domaine, everything is working fine, but I want to center the game screen in the webpage like in thisimage.
here is the index.html code:
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Game Title</title>
<script src="Build/UnityLoader.js"></script>
<script>
var gameInstance = UnityLoader.instantiate("gameContainer", "Build/WebGL.json");
</script>
</head>
<body style="background-color:black;">
<div id="gameContainer" style="width: 1024px; height: 576px; margin: auto "></div>
</body>
</html>
I found the answer for this i just added a this style to head
<style>
.container {
width: 80%;
margin: 0 auto;
padding: 20px;
}
</style>
and I put the div gameContainer inside another div with the style above. Not sure if this is the right solution, but it works
I encountered a similar issue, my WebGL build was suddenly left aligned. Found out that I mistakenly changed the WebGL template setting on Player Settings from Default to Minimal. Default is centered aligned.
So this is a weird one, I'm getting a small margin at the very top of my page even though I've applied the standard CSS reset. If I open the inspector in Chrome / Firefox / or even gasp IE, I see that the body is reading my margin:0 reset, but still adding a gap regardless.
Gap:
Chrome Web Inspector that shows margin:0 is being honord:
So, the super duper weird part here is that if throw an important like margin: 0 !important; , the gap goes away. I've used this exact template set up many many times without issue. Hopefully someone sees something that is eluding me right now.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link href="/Content/css/Reset.css" rel="stylesheet"/>
<link href="/Content/css/bootstrap-theme.css" rel="stylesheet"/>
<link href="/Content/css/bootstrap.css" rel="stylesheet"/>
<link href="/Content/css/Site.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.6.2.js"></script>
<script src="/Scripts/jquery-1.9.0.js"></script>
<link href='//fonts.googleapis.com/css?family=Ubuntu:300,400,500' rel='stylesheet' type='text/css'>
<script type="text/javascript">var base_url = 'http://localhost:64789/';</script>
</head>
<body>
<div id="wrap">
<h2>Index</h2>
</div>
</body>
</html>
CSS
Note: Site.css is an empty file at this point, as I just started this project.
html,body,p,div,img,h1,h2,h3,h4,li,ul,ol,dl,dd,dt,form {
margin:0;
padding:0;
border:0;
border-collapse:separate;
border-spacing:0;
}
a {
text-decoration: none;
}
* {
font-family: 'Ubuntu', sans-serif;
}
body {
background: #f0f6e8 url(../images/gradbackground.jpg) repeat-x 0 top;
}
#wrap {
width: 100%;
background: transparent url(../images/leaves.jpg) no-repeat center top;
}
The margin is on the <h2>, not the <body>. There must be some other selector for h2 that is adding the additional top margin. In your own Site.css styles, include margin-top: 0 for the h2
Bootstrap is probably overriding it from another element. Check the elements it is nested in for margin being set in main.css.
I'm building a web app and unfortunately I have a white border around the top and left of the page. I have set the html and body padding and margin to 0px but it doesn't seem to be having any effect on it. Inside of the body is a single iframe and when I preview the site and I go on inspect element it shows that the padding is on the body...
Here is the code - if anyone could take a look that would be great!
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="chrome=1,IE=edge" />
<title>index</title>
<style>
html {
height:100%;
}
body {
background-color: #FFFFFF;
margin: 0px !important;
padding: 0px !important;
height:100%;
}
</style>
<!-- copy these lines to your document head: -->
<meta name="viewport" content="user-scalable=yes, width=320" />
<!-- end copy -->
</head>
<body>
<!-- copy these lines to your document: -->
<div id="index_hype_container" style="margin:auto;position:relative;width:100%;height:100%;overflow:hidden;" aria-live="polite">
<script type="text/javascript" charset="utf-8" src="index.hyperesources/index_hype_generated_script.js?4823"></script>
</div>
<!-- end copy -->
</body>
</html>
JSFiddle
Try setting the margins of the #my-iframe to a negative number, e.g. -10px:
#my-iframe {
width: 100vw;
height: 100vh;
border: 0;
padding: 0;
margin: -10px;
}
This may cut a small section of the iframed site off, but judging by the look of the site a few pixels off the edge won't do much damage.