I have been working on a website for the past few weeks and i've run into a problem. I have a header centered then body called .content a few inches underneath. The problem is that they both scroll when I scroll and i'd rather that not be a thing.
<style type="text/css">
body{
margin:0px;
background:#000;
}
.header-cont {
width:100%;
position:fixed;
top:0px;
}
.header {
height:50px;
background:#000;
border:1px solid #fff;
width:960px;
margin:0px auto;
}
.content {
width:960px;
background: #000;
border: 1px solid #fff;
height: 4000px;
margin: 70px auto;
}
</style>
I think you want a fixed header with a scrolling body. Your CSS is right this far as it works.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
margin: 0px;
background: #000;
}
.header-cont {
width: 100%;
position: fixed;
top: 0px;
}
.header {
height: 50px;
background: #99ff00;
border: 1px solid #fff;
width: 960px;
margin: 0px auto;
}
.content {
width: 960px;
background: #33ff99;
border: 1px solid #fff;
height: 4000px;
margin: 70px auto;
}
</style>
</head>
<body>
<div class="header-cont">
<div class="header">Test</div>
</div>
<div class="content">test test test</div>
</body>
</html>
could it be that you got your .header-cont class at the wrong position?
Related
I have main outer div.
----Inside that I have outer div
--------and inside that I have inner search menu div
--------and search menu content list div
Now I have given fixed position to inner search menu div.
When I scroll outer div part It's position is fixed correctly.
The problem is when I scroll the main div [outer most]then also menu item div is still fixed and it is not scrolling with its outer div.
How can I make it scroll with outer div.
.main{
width:600px;
height: 700px;
border:1px solid black;
position:relative;
}
.outer{
width:500px;
height: 500px;
border:1px solid black;
position:relative;
overflow:scroll;
}
.inner{
width:400px;
height: 40px;
border:1px solid black;
position:fixed;
}
.content{
margin-top:45px;
height:600px;
border:1px solid red;
width:100px
}
<html>
<head>
</head>
<body>
<div class="main">
<div class="outer">
<div class="inner">
</div>
<div class="content">
</div>
</div>
</div>
</body>
</html>
You could use position: sticky instead of fixed and define top and left:
.inner {
...
position: sticky;
top: 0;
left: 0;
}
In this case .main doesn't need a position.
Working example:
.main {
width: 600px;
height: 700px;
border: 1px solid black;
}
.outer {
width: 500px;
height: 500px;
border: 1px solid black;
position: relative;
overflow: scroll;
}
.inner {
width: 400px;
height: 40px;
border: 1px solid black;
position: sticky;
top: 0;
left: 0;
}
.content {
margin-top: 45px;
height: 600px;
border: 1px solid red;
width: 100px
}
<div class="main">
<div class="outer">
<div class="inner"></div>
<div class="content"></div>
</div>
</div>
You could also use position: absolute and define top and left:
.inner {
...
position: absolute;
top: 0;
left: 0;
}
In this case you have to define position: relative for .main but not for .outer.
Working example:
.main {
width: 600px;
height: 700px;
border: 1px solid black;
position: relative;
}
.outer {
width: 500px;
height: 500px;
border: 1px solid black;
overflow: scroll;
}
.inner {
width: 400px;
height: 40px;
border: 1px solid black;
position: absolute;
top: 0;
left: 0;
}
.content {
margin-top: 45px;
height: 600px;
border: 1px solid red;
width: 100px
}
<div class="main">
<div class="outer">
<div class="inner"></div>
<div class="content"></div>
</div>
</div>
Fixing some existing code, the two divs align ok on Firefix/IE but NOT on Chrome.
Have tried playing with padding, though fixing it on Chrome then it breaks elsewhere.
Might me a simple overlooked settings that I can't seem to fix for days now.
Code: (works fine, on firefox and not so well on chrome)
Any tips of fixing this?
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
body {}
.autocomplete {
/*the container must be positioned relative:*/
position: relative;
display: inline-block;
}
#media (max-width: 680px) {
.autocomplete {
/*the container must be positioned relative:*/
position: relative;
display: inline-block;
width: 70% !important;
}
}
input {
border: 20px solid transparent;
border-left: 0px solid transparent;
background-color: #f1f1f1;
font-size: 24px;
border-radius: 25px 1px 1px 25px;
display: inline-block;
}
#media (max-width: 680px) {
input[type=text] {
border: 20px solid transparent;
border-left: 0px solid transparent;
background-color: #f1f1f1;
margin-left: 0px;
font-size: 14px;
border-radius: 25px 1px 1px 25px;
display: inline-block;
}
input[type=submit] {}
}
input[type=text] {
background-color: #F4F7FA;
width: 100%;
border: 21px solid transparent;
border-right: 0px solid transparent;
}
input[type=submit] {
background-color: #ef7023;
color: #fff;
cursor: pointer;
border-radius: 1px 25px 25px 1px;
width: 30%;
height: 100% !important;
}
</style>
<div style="padding-top:60px;background-color:grey;">
<form style="padding-left:33%;padding-right:30%;">
<div class="autocomplete" style=" max-width:67%;width:100%;">
<input class="search" type="text">
</div>
<div style="display:inline-block;">
<input value="" style="width:100px; max-width:100%;" type="submit"></div>
</form>
</div>
For inline-block elements you should add padding-top and padding-bottom to your element for vertical alignment.
add this to your css :
form {
padding-top: 50px;
padding-bottom: 50px;
}
I set value 50px but you can set appropriate value by yourself.
Also remove padding-top: 60px from your main div.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
body {}
.autocomplete {
/*the container must be positioned relative:*/
position: relative;
display: inline-block;
}
#media (max-width: 680px) {
.autocomplete {
/*the container must be positioned relative:*/
position: relative;
display: inline-block;
width: 70% !important;
}
}
input {
border: 21px solid transparent;
border-left: 0px solid transparent;
background-color: #f1f1f1;
font-size: 17px;
border-radius: 25px 1px 1px 25px;
display: inline-block;
}
#media (max-width: 680px) {
input[type=text] {
border: 20px solid transparent;
border-left: 0px solid transparent;
background-color: #f1f1f1;
margin-left: 0px;
font-size: 14px;
border-radius: 25px 1px 1px 25px;
display: inline-block;
}
input[type=submit] {}
}
input[type=text] {
background-color: #F4F7FA;
width: 100%;
border: 21px solid transparent;
border-right: 0px solid transparent;
}
input[type=submit] {
background-color: #ef7023;
color: #fff;
cursor: pointer;
border-radius: 1px 25px 25px 1px;
width: 30%;
height: 100% !important;
}
form {
padding-top:50px;
padding-bottom: 50px;
padding-right: 15%;
padding-left: 15%;
}
</style>
<div style="background-color:grey;">
<form>
<div class="autocomplete" style=" max-width:67%;width:100%;">
<input class="search" type="text">
</div>
<div style="display:inline-block;">
<input value="" style="width:100px; max-width:100%;" type="submit"></div>
</form>
</div>
Here is a complete guide to center elements vertically and horizontally : centering elements complete guide
Hello Stackoverflow Team,
How can the child div inside the parent div with overflow have a right and left margin? I'm trying to solve the issue but it does not give a clean solution for it.
Attempt:
margin-right wont work
div {
border: 1px solid black;
}
.parent {
width: 300px;
height: 300px;
margin: auto;
position: relative;
overflow: auto;
}
.child {
width: 350px;
height: 150px;
top: 50px;
margin-left: 20px;
margin-right: 20px;
position: absolute;
display: inline-block;
}
<div class="parent">
<div class="child"></div>
</div>
My unclean Solution:
div {
border: 1px solid black;
}
.parent {
width: 300px;
height: 300px;
margin: auto;
position: relative;
overflow: auto;
}
.child {
width: 350px;
height: 150px;
top: 50px;
margin-left: 20px;
border-right: 20px solid red;
position: absolute;
display: inline-block;
}
<div class="parent">
<div class="child"></div>
</div>
any better way to solve the issue?
Since you are using position: absolute for the child, best way to achieve what you want is remove position: absolute then add the margins you need.
div{
border: 1px solid black;
}
.parent {
width:300px;
height:300px;
margin:auto;
position: relative;
overflow: auto;
}
.child {
width:350px;
height:150px;
top: 50px;
margin: 50px 20px 0;
display: inline-block;
}
<div class="parent">
<div class="child"></div>
</div>
Update
If you need the child div to be position: absolute you will have to wrap it in another div as follow:
div{
border: 1px solid black;
}
.parent {
width:300px;
height:300px;
margin:auto;
position: relative;
overflow: auto;
}
.child {
border-color: red;
position: absolute;
top: 20px;
height: 150px;
}
.sub-child {
width:350px;
height:150px;
margin: 0 20px;
display: inline-block;
}
<div class="parent">
<div class="child">
<div class="sub-child"></div>
</div>
</div>
CSS:
.main{
width: 500px;
margin: 0px auto;
overflow-x: scroll;
background: #ccc;
min-height: 500px;
position: relative;
}
.inner{
position: absolute;
top: -20px;
width: 50px;
height: 50px;
background: blueviolet;
left: 200px;
display: none;
}
.menu{
color: #000;
text-decoration: none;
font-size: 14px;
padding:0px 0 0 10px;
}
.main .menu:hover >.inner{display: block !important;}
HTML:
<div class="main">
Menu <div class="inner"></div>
</div>
help me if Anyone can...
Please find fiddle
i have doubt, why you putting css top: -20px;,
if u change top:0; visible correctly
Im wondering if anybody know if at all possible, how to create a trapezium using CSS/Html/Canvas.
I've tried to sort of hash one together only its very messy and would be unusable in the real world.
div {
width:0;
margin-left:-1000px;
height:100px;
border-right:1000px solid lightblue;
border-top:60px solid transparent;
border-bottom:60px solid transparent;
padding-left:1000px;
white-space:no-wrap;
}
Heres my jsFiddle...
http://jsfiddle.net/Liamatvenn/WWYYM/
I can do it with 2 extra divs as wrappers.
CSS
.trapezium {
position: absolute;
left: 40px;
top: 40px;
width: 300px;
height: 200px;
-webkit-transform: skewY(6deg);
overflow: hidden;
}
.trapezium > div {
background-color: yellow;
position: absolute;
left: 0px;
top: 50px;
width: 300px;
height: 200px;
-webkit-transform: skewY(-12deg);
overflow: hidden;
}
.trapezium > div > div {
font-size: 60px;
background-color: yellow;
position: absolute;
left: 0px;
top: -30px;
width: 300px;
height: 200px;
-webkit-transform: skewY(6deg);
overflow: hidden;
}
demo
Are you speaking for something like this please ? Check this fiddle: jsfiddle.net/WWYYM/3/ . Let me know if it works for you. I have edited your code like the following:
div {
border-bottom: 100px solid lightblue;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0;
width: 500px;
white-space:no-wrap;
text-align:center;
}
i don`t know what you want. so i guess this will help you little.
div {
width:0;
margin-left:-100px;
height:100px;
border-right:100px solid lightblue;
border-top:60px solid transparent;
border-bottom:60px solid transparent;
padding-left:100px;
white-space:no-wrap;
}
you can addition transform alike below:
div {
width:0;
margin-left:-50px;
margin-top: -500px;
height:100px;
border-right:100px solid lightblue;
border-top:60px solid transparent;
border-bottom:60px solid transparent;
padding-left:1000px;
white-space:no-wrap;
transform:rotate(20deg);
-ms-transform:rotate(20deg); /* IE 9 */
-webkit-transform:rotate(90deg);
}