My html page is:
<html>
<head>
<title>Hello there</title>
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="content">
Hello world
</div>
</body>
</html>
My css file is:
html, body{
width: 100%;
height: 100%;
}
div#content{
width: 80%;
display: block;
margin: 0 auto;
height: 90%;
border: 1px solid red;
}
But the content div is not centered properly.
I am using IE7 to view this page.
You should add a <!doctype> to the beginning of your document, also remove the display: block; from your div selector, a div is by default a block level element so this declaration has no meaning. (this won't break the layout, it just makes no sense to tell an already block level element to be block again.)
Other than that, your CSS is perfectly fine :)
HTML:
<!doctype html>
<html>
<head>
<title>Hello there</title>
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="content">
Hello world
</div>
</body>
</html>
CSS:
html, body{
width: 100%;
height: 100%;
}
div#content{
width: 80%;
margin: 0 auto;
height: 90%;
border: 1px solid red;
}
http://jsfiddle.net/u5w8F/
For IE 7 quirksmode (and IE 6) you can add
html, body{
text-align: center;
}
div#content{
text-align: left;
}
to center the div... (old skool)
Related
It does show background color and top div tag but background image is not visible up. I'm pretty new at html and css so kindly explain a little too.
here is my html and css code
body {
background-image: url("https://i.giphy.com/media/H75Lo6V4M5pWrDo8mZ/giphy.webp") no-repeat;
background-color: Linen;
padding: 0;
margin: 0;
}
<!doctype html>
<html>
<head>
<title>Train of Thoughts</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="top">
<h3 style="float: left">M</h3>
<h3 style="float: right">F</h3>
</div>
<br>
</body>
</html>
html{
}
body{
background: url("https://i.giphy.com/media/H75Lo6V4M5pWrDo8mZ/giphy.webp") no-repeat;
background-color: Linen;
padding: 0;
margin: 0;
}
.top{
background-color: Black;
overflow: hidden;
color: White;
border: solid 5px Black;
border-radius: 0 0 25px 25px;
padding: 0 25px 0 25px
}
<!doctype html>
<html>
<head>
<title>Train of Thoughts</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="top">
<h3 style="float: left">M</h3>
<h3 style="float: right">F</h3>
</div>
<br>
</body>
</html>
You can try using
background-size: cover;
which will stretch the image to cover the page, but since the resolution of the gif is rather different than the screens, it will look kinda weird.
Also, the no-repeat is the reason, it doesnt show at all. Without it, it will show, but several times next to each other.
I am trying to figure out how to test how my code works but I cant seem to figure out why they wont link. They are in the same folder. I am also trying to add a facebook pixel and analytics to this page. Would I embed that code into my HTML file?
Thanks in Advance
Here is my code
Html
<!DOCTYPE html>
<head>
<title>Full Screen Landing Page</title>
<link href rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<section class="intro">
<div class="inner">
<div class="content">
<h1>Welcome To The Tribe</h1>
<a class="btn" href="#">Get Started</a>
</div>
</div>
</section>
</body>
</html>
#import url('https//fonts.googleapis.com/css?family=Raleway');
#import url('https//fonts.googleapis.com/css?family=Oswald');
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.intro{
height: 100%;
width: 100%;
margin: auto;
background: url() no-repeat 50% 50%;
display: table;
top: 0;
background-size: cover;
}
.intro .inner{
display: table-cell;
vertical-align: middle;
width: 100%;
max-width:none;
}
it not <link href rel="stylesheet" href="style.css">
its
<link rel="stylesheet" href="style.css">
it read the initial href value as it is empty its not reading any css file
You shouldn't need to have href before rel when you link your stylesheet. Also, you have a closing html tag but no opening html tag.
Either put your custom css classes into the style.css file, or use style tag to include them, also you have duplicate href attribute inside link tag
<head>
<title>Full Screen Landing Page</title>
<link rel="stylesheet" type="text/css" href="style.css">
<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.intro{
height: 100%;
width: 100%;
margin: auto;
background: url() no-repeat 50% 50%;
display: table;
top: 0;
background-size: cover;
}
.intro .inner{
display: table-cell;
vertical-align: middle;
width: 100%;
max-width:none;
}
</style>
</head>
<body>
<section class="intro">
<div class="inner">
<div class="content">
<h1>Welcome To The Tribe</h1>
<a class="btn" href="#">Get Started</a>
</div>
</div>
</section>
</body>
So i have been trying to remove the space between my div elements and iframe to no success for an hour. Any help will be greatly appreciated. This is what I have done so far.
css:
h1 {
text-align: center;
color: white;
}
.d1 {
border-style: none;
background-color: blue;
}
iframe {
width: 50%;
height: 50%;
display: block;
margin: 0;
}
Here is my html: I am trying to to remove the white space between the the 2 divs elements on the top and bottom.
<!DOCTYPE html>
<!-- By Christian Soto -->
<html>
<head>
<meta charset="UTF-8">
<title>Event Driven JS</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div class="d1">
<h1>Using JavaScript to Change the HTML</h1>
</div>
<iframe id="section">
<!-- Will be loading different html pages into here -->
</iframe>
<div class="d1">
<h1>Christian Soto</h1>
</div>
</body>
</html>
You need to remove the default margin from the <h1> tag,
all HTML headings have a default margin style.
h1{
text-align: center;
color: white;
margin: 0;
}
I am planning to add colour to the center of the html page. I have tried this:
My html file
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div id="v">
</div>
</body>
</html>
My styles.css
#v {
background: red;
position: center;
}
You can set a height and a width to the div and add a margin like this:
#v {
height: 100px;
width: 100px;
background-color: red;
margin: auto;
}
I would assume that you mean to center an element on the page and then add a background color to that element. Your CSS is not valid although you did come close. if you want to add a background then you need to use background-color instead. If you want to center that element then you can adjust the margin of said element here. is an example that may help.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>center a div and add background color</title>
<style type="text/css">
.wrapper{
width: 100%;
height: 400px;
background-color: blue;
margin: 0 auoto;
}
.centered-element{
width: 50%;
height: 200px;
margin: 0 auto;
background-color: red;
}
p{
text-align: center;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="centered-element">
<p>this div is centered!</p>
</div>
</div>
</body>
</html>
what i have done is gave the div that i wanted to center align a margin of 0 auto; this will center align the div. I hope that helped!
I would like to have the text My homepage in the middle of the box I made. I saw an example on a web site but this does not work properly, as the text is on the left. How can I fix the code?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/1998/REC-html40-19980424/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>
My homepage
</title>
<style type="text/css">
body {
background-color: #d2b48c;
margin-left: 20%;
margin-right: 20%;
border: 1px dotted gray;
padding: 10px 10px 10px 10px;
font-family: sans-serif;
}
</style>
</head>
<body>
<div style="width: ???px; position: relative; margin-top: 0px; margin-left: auto; margin-right: auto;">
<h1 id="begin"> My homepage </h1>
</div>
You see also: Block-level and inline elements
HTML
<div id="container">
<h1>My homepage</h1>
</div>
CSS
#container h1 {
text-align: center;
}
I also recommend reading: Descendant selectors, Child selectors and Adjacent sibling selectors
One simple line of CSS:
#container > h1 { text-align: center; }
<h1> is a block level element, so you can simply style it with text-align in your CSS:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/1998/REC-html40-19980424/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>
My homepage
</title>
<style type="text/css">
body {
background-color: #d2b48c;
margin-left: 20%;
margin-right: 20%;
border: 1px dotted gray;
padding: 10px 10px 10px 10px;
font-family: sans-serif;
}
h1 {
text-align: center;
}
</style>
</head>
<body>
<h1 id="begin"> My homepage </h1>
</body>
</html>
Maybe setting all text to be centered at the beginning and decide later what you want not centered,
* { text-align: center;
margin: 0;
padding: 0;
}
you could also center some or all elements at the beginning with the universal selector (*).
Or fix initially any propoerty that is very common on your page.
You can simply style h1 with css text-align :
text-align: center;
You don't need to wrap your h1 into div because h1 is a block level element
DEMO : http://jsfiddle.net/Vinyl/Ltqyfwn0/