I wrote an html page, with some css in a separate file and it worked fine. Then i realized that i should add a doctype declaration to my html. I did that and my page was completely messed up! I tried all types of declarations but all ended up the same!!!
This is my html (currently only working with Chrome, and without doctype):
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Luca Rood - Home</title>
</head>
<body background="images\background.jpg">
<div id="header">
<div id="header-back"></div>
<div id="top-spacing"></div>
<div id="content">
<a href="index.html" title="Luca Rood - Home">
<img id="image" src="images\logo.png" alt="Luca Rood">
</a>
</div>
</div>
</body>
</html>
And this is my css:
body {
background-repeat: no-repeat;
background-position: center center;
background-size: 100% 100%;
margin: 0px 0px 0px 0px;
}
#header {
position: relative;
height: 15%;
}
#header-back {
position: absolute;
width: 100%;
height: 100%;
background: #000000;
opacity: 0.3;
z-index:1;
}
#top-spacing {
height: 20%;
width: 100%;
}
#content {
position: relative;
width: 80%;
height: 60%;
margin-top: 0px;
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
z-index:2;
}
#image {
height: 100%;
}
Please help.
Thanks in advance,
Luca
You are having the classic percentage heights problem. To fix it, you must add height:100% to the body style and add an style on the html element that has height:100% as well:
<style>
body{
/*...*/
height:100%;
}
html{
height:100%;
}
</style>
Hope it works!
Try this above < html > tag
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Related
I have some very simple HTML/CSS code, and no matter what I do, I always get an "invalid property value" exception by chrome, and the logo won't position properly.
Fixed the first problem, but now the image does not move related to the border.
<html lang="de" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>my website</title>
<style type="text/css">
*{ padding: 0; margin: 0; }
.header {
width: 100%;
height: 100px;
border: none;
border-bottom-style: solid;
border-bottom-width: 5px;
position: relative;
border-bottom-color: rgb(220,30,60);
}
.logo {
position: absolute;
padding-bottom:50px;
height: 150%;
width: auto;
}
</style>
</head>
<body>
<div class="header" id="header">
<img id="logo" class="logo" src="image.png"/>
</div>
</body>
</html>
I had a similar issue for me.
I wrote 10 (instead of 10px), this fixed the issue.
If you are using single quotes in your css, Please remove single quotes from your css file.
For Example
// Wrong
.row{
margin-left:'-16px !important';
margin-right:'0px !important';
}
// Right
.row{
margin-left:-16px !important;
margin-right:0px !important;
}
I just don't understand why you used padding-bottom instead of bottom in this case. Anyway:
<html lang="de" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>my website</title>
<style type="text/css">
*{ padding: 0; margin: 0; }
.header {
position: relative;
height: 100px;
border-bottom: 5px solid rgb(220,30,60);
}
.logo {
position: absolute;
bottom:50px;
height: 150%;
width: auto;
}
</style>
</head>
<body>
<div class="header" id="header">
<img id="logo" class="logo" src="image.png"/>
</div>
</body>
</html>
CSS bottom property: http://www.w3schools.com/cssref/pr_pos_bottom.asp
CSS padding-bottom property: http://www.w3schools.com/cssref/pr_padding-bottom.asp
There's a space before the px in padding-bottom:50 px;. Fix:
padding-bottom: 50px;
I am trying to make my #main div scroll on top of my #main2 div. I positioned both absolutely and used background-attachment: fixed on #main2, but the intended effect does not seem to be working. BY "scroll on top" I mean that when you scroll down on the mouse, #main should scroll down towards a fixed #main2. #main2 should be like the background image of the body while #main1 fluidly scrolls down to the bottom of the body.
https://www.youtube.com/watch?v=GJLzP_4bg3o #7:50 is what I am trying to replicate.
body {
margin: 0 auto;
}
#main {
position: absolute;
width: 100%;
height: 100%;
background-color: red;
}
#main2 {
position: absolute;
height: 100%;
width: 100%;
background-color: blue;
top: 100%;
background-attachment: fixed;
}
<!Doctype HTML>
<head>
<html lang="en"
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="clc.css">
<title>CLC Website</title>
</head>
<body>
<div id="main">
</div>
<div id="main2">
</div>
</body>
</html>
Just change #main to position: fixed; and give z-index: 1;
body {
margin: 0 auto;
}
#main {
position: fixed;
width: 100%;
height: 100%;
background-color: red;
z-index: 1;
}
#main2 {
position: absolute;
height: 100%;
width: 100%;
background-color: blue;
top: 100%;
background-attachment: fixed;
}
<!Doctype HTML>
<head>
<html lang="en"
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="clc.css">
<title>CLC Website</title>
</head>
<body>
<div id="main">
</div>
<div id="main2">
</div>
</body>
</html>
To get the parallax effect, I just changed the background-color to background-image and it works fine now.
Check this if help you out.
<head>
<style>
.main { height: 300px; width: 300px;background-color: blue; background-repeat: no-repeat; background-attachment: fixed;
position: fixed;}
</style>
</head>
<body>
<div class="main"></div>
<div style="background-color: red; height: 3000px; width: 300px"></div>
</body>
Here is the code:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link type="text/css" rel="stylesheet" media="all" href="page.css">
</head>
<body>
<div id="header"></div>
<div id="body"></div>
</body>
</html>
CSS
body{
background-color: cyan;
margin: 0;
padding: 0;
}
#header{
width: 100%;
height: 200px;
background-color: green;
}
#body{
width: 100%;
background-color: blue;
height: 500px;
position: relative;
top: -100px;
}
Rendered page looks like this:
The relatively positioned div#body is taken out of the normal flow, and we can see the cyan body at the bottom. Is it possible to fix it, so the body height ended where div#body ends?
I can't use margin-top: -100px, because on the real page it breaks the horizontal centering in Opera.
Fiddle: http://jsfiddle.net/xfqzqhws/
Can you check if this will work for you
#body{
width: 100%;
background-color: blue;
height: calc(100% - 100px);
position: absolute;
margin-top:-100px;
}
I don't want this scroll bar being here. I don't want it hidden but I want it disabled. No scrolling at all.
A screenshot: https://gyazo.com/22224e178263f80c25ecabb65c8ff77f.png
index.html and stylesheet.css:
HTML:
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title>Home</title>
</head>
<body>
<div id="white">
</div>
</body>
</html>
CSS:
html {
height: 100%;
background-color: #272C34;
margin: 0%;
padding: 0%;
}
body{
height: 100%;
margin: 0%;
padding: 0%;
}
#white {
width: 100%;
height: 76%;
background-color: #E8E8E7;
margin-top: 10%;
margin-left: 0%;
margin-right: 0%;
margin-bottom: 0%;
z-index: 1;
}
It is Problem of browser set default padding/margin. Apply any of CSS Reset to the website .
If Don't Add any one of them find here http://www.cssreset.com/
or Use this Universal CSS reset
* {
margin: 0;
padding: 0;
}
body usually has a margin set it, remove it and your div should be 100% of the screen:
body{
margin: 0;
}
Also be aware that more tags have margins/paddings applied by default, you could use a reset.css or normalize.css to remove margins/paddings/etc to make your page render the same on all browsers:
if You mean Space in right and left in your Tmp. Add this to your Style
Body{
margin:0;
padding:0;
}
HTML:
<html>
<head>
<meta charset="utf-8" />
<title>Test</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="nav">
<li>
<ul>
Hello
</ul>
</li>
</div>
</body>
</html>
CSS:
body{
margin: 0;
}
#nav{
width: 100%;
height: 80px;
background-color: #000000;
}
#nav ul{
list-style-type: none;
color:#ffffff;
font-weight: bold;
}
Screenshot:
See it Live.
Use: width: 100vw; overflow-X: hidden;
This should work. When there is a scrollbar, use overflow-X:hidden for width or overflow-y:hidden for height;
I have the following code but my image won't resize, how come? Does the image need to be bigger?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>blah</title>
<style type="text/css" media="screen, print, projection">
img#background {
position: absolute;
top: 0;
left: 0;
width: 100%
height: 100%;
}
</style>
</head>
<body>
<img id="background" src="greenbackground.png" alt="Background Image" />
</body>
</html>
You also need this:
html, body{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
img#background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
margin:0;
padding:0;
}
Note, using css3 you can do this:
body{
background:url(...) no-repeat;
background-size: 100%;
}
Edit: Missed a ;
Demo:
http://jsfiddle.net/jJT45/
You're setting it to 100%, but 100% of what? Try giving the body the same 100% height and width properties and see what happens.