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;
Related
How do I extend the container around the wrapped elements so when I put in content it extends automatically? The container is stuck at the top of the page above the header even though the header is wrapped in the container div.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>basic</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container">
<div id="header">
<div class="nav_left">
Home
About
Download
Contact
</div>
</div>
<div id="bigbox">
</div>
</div>
</body>
</html>
CSS
html{
}
body{
margin: 0;
padding: 0;
background-color: grey;
}
#container{
width: 80%;
margin-left: 10%;
margin-right: 10%;
}
#header{
width:80%;
}
.nav_left{
float:left;
height:30px;
}
#bigbox{
width:80%;
}
You need to clear the floats in your #header element. I have my trusty .clear-floats class:
.clear-floats {
display: block;
}
.clear-floats:after
{
content: ".";
display: block;
width: 100%;
height: 0px;
visibility: hidden;
clear: both;
}
Add that to your stylesheet and then add class="clear-floats" to your header element.
I'm currently recreating the Google homepage for Odin and trying to set the logo as a background image. Whenever I put the background image and URL in the body for CSS - the logo will show. But when I then copy and paste the exact lines into logo, the image doesn't show up at all!
* {
padding: 0;
margin: 0;
border: 0;
box-sizing: border-box;
}
body {
width: 100%;
height: 100%;
}
#logo {
background: url("https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/2000px-Google_2015_logo.svg.png");
background-size: 272px 92px;
background-repeat: no-repeat;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title>Google</title>
</head>
<body>
<div class="main">
</div>
</body>
</html>
Any ideas where I am going wrong?
There is no content in the anchor tag.
If you do not want to give any content inside anchor tag you should make display block and provide and height Or you can also use inline-block providing width and height
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title>Google</title>
</head>
<body>
<div class="main">
</div>
</body>
</html>
* {
padding: 0;
margin: 0;
border: 0;
box-sizing: border-box;
}
body {
width: 100%;
height: 100%;
}
#logo {
background: url("imgs/google-logo.png");
background-size: 272px 92px;
background-repeat: no-repeat;
display: block;
height: 300px;
}
Anchors (a tag) are inline elements by default, i.e. the size is auto generated based on its contents. Since your tag is empty there's no size and nothing renders.
You can change the display to block or inline-block (read more about the both here) and provide width and height.
* {
padding: 0;
margin: 0;
border: 0;
box-sizing: border-box;
}
body {
width: 100%;
height: 100%;
}
#logo {
background: url("https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/2000px-Google_2015_logo.svg.png");
background-size: 272px 92px;
background-repeat: no-repeat;
display: block;
width: 272px;
height: 92px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title>Google</title>
</head>
<body>
<div class="main">
</div>
</body>
</html>
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;
This is my css file and my html file, i made a div tag inside my header and gave it a class name of zebusoft-logo so then i call that in css with the .zebusoft-logo but when i use the margin-left: 400px; it doesnt move the logo at all. Why is this and how can i fix it?
styles/main.css
html, body {
padding: 0;
margin:0;
}
header {
position:fixed;
top:0;
width:100%;
height:102px;
background-color:#222;
padding:20px;
}
footer {
background: #222;
width: 100%;
height: 370px;
bottom: 0;
position: fixed;
}
.zebusoft-logo {
padding: 0;
top: 0;
position: fixed;
margin-left: 400;
}
mypage.html
<!doctype html>
<html>
<title>Joes Nose</title>
<link href="styles/main.css" rel="stylesheet" type="text/css" />
<header>
<div class="zebusoft-logo"><img src="images/logo-3.png" alt=""></div>
</header>
<body>
<div></div>
</body>
Simplified tests indicate this should work, provided you put the units (px) for your margin.
You have:
margin-left: 400;
You need:
margin-left: 400px;
In your CSS...
.zebusoft-logo {
padding: 0;
top: 0;
position: fixed;
margin-left: 400;
}
You set the margin-left to 400 but you don't specify what unit to use. You must specify the units unless the value is zero, so padding: 0; is OK but margin-left: 400; is illegal.
See the definition of dimensions in CSS3 Values and Units ยง 4.4 Numbers with Units: dimensions.
I assume you want pixels, so your margin must be set as margin-left: 400px;
Your html is also not structured correctly...
<!doctype html>
<html>
<title>Joes Nose</title>
<link href="styles/main.css" rel="stylesheet" type="text/css" />
<header>
<div class="zebusoft-logo"><img src="images/logo-3.png" alt=""></div>
</header>
<body>
<div></div>
</body>
You are missing the <head> element which is where your <title> and your link to the stylesheet should be, and your <header> must be within the <body> of the page:
<!doctype html>
<html>
<head>
<title>Joes Nose</title>
<link href="styles/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header>
<div class="zebusoft-logo"><img src="images/logo-3.png" alt=""></div>
</header>
<div>...</div>
</body>
</html>
I think you may need to reformat your html and that will fix the problem.
<html>
<head>
<title>Joes Nose</title>
<link href="styles/main.css" rel="stylesheet" type="text/css" />
<style>
html, body {
padding: 0;
margin: 0;
}
header {
position: fixed;
top: 0;
width: 100%;
height: 102px;
background-color: #222;
padding: 20px;
}
footer {
background: #222;
width: 100%;
height: 370px;
bottom: 0;
position: fixed;
}
.zebusoft-logo {
padding: 0;
top: 0;
position: fixed;
margin-left: 400;
}
</style>
</head>
<body>
<header>
<div class="zebusoft-logo"><img src="images/logo-3.png" alt=""></div>
</header>
<div></div>
</body>
</html>
Hey everyone here's a picture of the problem:
I want it to fill the the whitespace on the left right and top of the green box.
HTML:
<!DOCTYPE HTML>
<html>
<head>
<LINK href="style.css" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Montserrat:700' rel='stylesheet' type='text/css'>
<title>Test page</title>
</head>
<body>
<div id="container" name="header">
<h1>Blegh</h1>
<style>
#container {font-family: 'Montserrat', sans-serif;}
</style>
</div>
</body>
</html>
CSS:
#container{
background-color: #58FA58;
margin-left: auto;
margin-right: auto;
text-align: center;
height: 100px;
width: 100%;
}
These two rules should do it:
html, body {
margin:0;
padding:0;
}
h1 {
margin:0;
}
jsFiddle example
that's because of browsers. default of browsers has margin and padding and you should set padding and margin to zero in all of your projects
body{
margin: 0px;
padding: 0px;
}
you set div heigt to 100 px :)
to make div like boddy wraper you shlud have this CSS
* {
margin: 0;
}
html, body {
height: 100%;
}
#container{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -20px;
}
.footer, .push {
height: 20px;
}
You have to remove the body margins. Add this to your css:
body {
margin: 0px;
padding: 0px;
}
Add this to your style.css:
html, body {
margin: 0;
padding: 0;
}
Applying a margin and padding of 0 will allow all of your elements to reach the borders of the page. But if you want the color to fill the entire page, which seems to be the actual question, apply your background-color to the body tag.
body {
margin: 0px;
padding: 0px;
background-color: #58FA58;
}