bellow are my html and css files where my header div disappearing when added position fixed. i even specified top and left but no luck. please help.
body {
margin: 0px;
padding:0px;
background-color:whiteSmoke;
}
.header {
height: 60px;
background-color: pink;
box-shadow: 3px 3px 5px silver;
position: fixed;
top:0;
left:0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>the title</title>
</head>
<body>
<div class="header"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>the title</title>
<style>
body {
margin: 0px;
padding: 0px;
background-color: whiteSmoke;
}
.header {
height: 60px;
width: 100%;
background-color: pink;
box-shadow: 3px 3px 5px silver;
position: fixed;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="header"></div>
</body>
</html>
In your original code, there is no content in the div with the class "header". Therefore, its width is 0.
I've added "width: 100%" to the class header so that it can gain width and appear.
You can run the code to see the result. I hope it helps.
As an alternative to declaring a specific width property to the fixed element, a right property with the value of 0 can also be declared, effectively "expanding" the fixed element width from left-to-right of the screen.
body {
margin: 0;
padding: 0;
background-color: whiteSmoke;
}
.header {
height: 60px;
background-color: pink;
box-shadow: 3px 3px 5px silver;
position: fixed;
top: 0;
left: 0;
right: 0;
}
<body>
<div class="header"></div>
</body>
Because a fixed element doesn't have a width.
So it has a height of 60px and becaus eyou didnt specify a width, so it appears hidden. Adding content, or something along the lines of width: 100%; will show the div again.
Please add some content or width to header.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>the title</title>
</head>
<body>
<div class="header"></div>
</body>
</html>
body {
margin: 0px;
padding:0px;
background-color:whiteSmoke;
}
.header {
width:60px;
background-color: red;
height: 60px;
background-color: pink;
box-shadow: 3px 3px 5px silver;
position: fixed;
top:0;
left:0;
}
Running Expample
Related
/* body{
overflow-x: hidden;
} */
.divOne{
/* overflow-y: hidden; */
position: relative;
background-color: aqua;
height: 100px;
width: 100%;
}
.divTwo{
background-color: red;
height: 300px;
width: 300px;
position: absolute;
top: -30px;
right: -80px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./index.css" />
<title>learning about canvas</title>
</head>
<body>
<div class="container-div">
<div class="divOne">div1</div>
<div class="divTwo">div2</div>
</div>
</body>
</html>
I want to make it so that the horizontal scroll bar wouldn't appear below. I want to make the overflowing 2 div overflow: hidden . but overflow : hidden only works when its applied to body and that causes a lot of problems.
You need to add absolute positioning rules for the container-div class, relative positioning for the body tag, with the overflow-x: hidden rule.
Now your block .divTwo is hidden in the viewing area, I have a width of 300x300.
body {
position: relative;
overflow-x: hidden;
}
.container-div {
position: absolute;
left: 0;
right: 0;
}
.divOne{
/* overflow-y: hidden; */
background-color: aqua;
height: 100px;
width: 100%;
}
.divTwo{
background-color: red;
height: 300px;
width: 300px;
position: absolute;
top: -30px;
right: -80px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./index.css" />
<title>learning about canvas</title>
</head>
<body>
<div class="container-div">
<div class="divOne">div1</div>
<div class="divTwo">div2</div>
</div>
</body>
</html>
So I want to achieve the following which i drew:
and the green div is the outer div and inside the div, there is a div which i plan to use for a map. Now the problem I'm facing now is how to I place the div at the bottom of the outer div? I want it to be somehow locked in that position so when I resize the browser, it would stay at its current position and the map div won't move around.
I tried using "margin-top: 59vh" but when i adjust the height of my browser it overflows and becomes weird:
Would appreciate some help on this.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
height: 100%;
font-size: 1vw;
}
body {
height: 100%;
}
#outer {
border: 1px solid black;
height: 90vh;
width: 35%;
}
#map_div {
border: 1px solid blue;
height: 300px;
margin-top: 59vh;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href = "style.css">
<title>Document</title>
</head>
<body>
<div id = "outer">
<div id = "map_div"></div>
</div>
</body>
</html>
Remove margin-top: 59vh from #map_div and add display: flex, flex-direction: column, and justify-content: flex-end to #outer
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
height: 100%;
font-size: 1vw;
}
body {
height: 100%;
}
#outer {
border: 1px solid black;
height: 90vh;
width: 35%;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
#map_div {
border: 1px solid blue;
height: 300px;
}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href = "style.css">
<title>Document</title>
</head>
<body>
<div id = "outer">
<div id = "map_div"></div>
</div>
</body>
</html>
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;
I am looking to add a header to my webpage for a current campaign. I have the code up until this point but it covers my logo and the other header when I add it in. How do I fix this so that it pushes the rest of the page down?
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Test</title>
<style type="text/css" media="screen">
* {
margin: 0;
padding: 0;
}
div#banner {
position: absolute;
top: 0;
left: 0;
background-color: #00AD83;
width: 100%;
}
div#banner-content {
width: 200px;
margin: 0 auto;
padding: 10px;
border: 1px solid #000;
}
div#main-content {
padding-top: 70px;
}
</style>
</head>
<body>
<div id="banner">
<div id="banner-content">
Banner content will go here
</div>
</body>
</html>
Add a top margin to the content that follows:
#banner + * {
margin-top: 70px; /* or whatever the banner's actual height is */
}