The problem is that I want to trim the content B scrolling in content A and when it scrolls down again, it should reappear.
So it should be the area invisible, which is pushed into content A. I suspect i will need javascript here or is this synonymous with css alone?
body {
background-image: url('https://placeimg.com/1000/1000/nature/grayscale');
background-repeat: no-repeat;
background-attachment: fixed;
}
div { padding:10px; }
.fixed {
position: fixed;
top: 100px;
left: 50px;
border: 1px solid red;
height:100px;
width:400px;
z-index: 10;
}
.content {
background:#fff;
width:400px;
height:1200px;
margin-top: 220px;
margin-left: 50px;
}
<!--
Bootstrap docs: https://getbootstrap.com/docs
-->
<div class="fixed">
Content A
</div>
<div class="content">
Content B
</div>
Thank you very much for helping!
Rufnex
Related
https://jsfiddle.net/fy7dzfdL/1/
Hi i have created jsfiddle
to make you aware better understanding of my current scenario .
i am making fixed div that has to scroll with page scroll that is working perfectly by position fixed but in my html document when you scroll at the end towards footer or when u click on hide button you will see scrolling div mixing with footer that is the issue how to handle it in the bottom.
here is JS css and html below
$("#hide_show").click(function(){
$("#toggle").toggle();
});
.fixed_div {
background-color: gray;
border: 1px solid red;
float: right;
left: 75%;
position: fixed;
top: 9%;
width: 20%;
height:320px;
px;
}
.left_content{
background-color: gray;
border: 1px solid red;
width: 59%;
height: 150px;
}
.header{
background-color: gray;
border: 1px solid red;
height: 100x;
text-align:center;
margin-bottom:10px;
}
.footer{
background-color: gray;
border: 1px solid red;
height: 100px;
text-align:center;
margin-top:10px;
}
<div class="header">
i am header
</div>
<div class="left_content">
i am static content
</div>
<div class="left_content">
i am static content
<input type="button" value="hide" id="hide_show">
</div>
<div class="left_content" id="toggle">
i am static content
</div>
<div class="fixed_div">
helloo i have to scroll across all the page
</div>
<div class="footer">
i am footer
</div>
Wrap the static content content in a div. Then set the CSS min-height of the div equal the the height of the fixed div.
I am trying to make a webpage that will stay a certain width and height in pixels ex(width=1000px, height=700px). If the screen viewing it is smaller than that desired width and/or height it will set up scroll bars to make the page that width and height and the screen will only show a portion of it at a time. I hope to be able to do this with css but if I have to use html or (not so preferably) JavaScript please give the community your ideas. I have tried multiple css ideas like:
html{
min-width:800px;
width: auto !important;
width:800px;
}
and:
html{
max-height: 1000px;
height: 500px;
max-width: 1000px;
}
and many other but similar pieces of code but none of them have worked. Thank you for you time and help!
Here is the code for my webpage:
<!DOCTYPE html>
<html>
<head>
<title>Home Page</title>
<style>
html{background: url(https://pbs.twimg.com/profile_images/456819436259778561/cwlr2jqr.jpeg) no-repeat top center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
#opacity{
z-index: -1;
width: 100%;
height: 100%;
position: fixed;
left: 0px;
top: 0px;
background-color: #ffffff;
opacity:.80;
filter:alpha(opacity=60);
}
#headerBox{
z-index: 2;
width: 50%;
height: 9%;
position: fixed;
left: 25%;
top: 0%;
background-color: #000000;
}
.headerBoxTitle{
color: #ffffff;
font-family:"Lucida Console", Monaco, monospace;
font-size: 200%;
text-align: center;
}
#galore{
z-index: 3;
width: 80%;
height: 80%;
position: fixed;
left: 10%;
top: 20%;
background-color: #BFC2C6;
opacity:.60;
filter:alpha(opacity=60);
}
#pic{
z-index:4;
width:80%;
height:80%;
max-width: 80%;
max-height: 80%;
top: 20%;
left:10%;
position: absolute;
}
div.menue{
position:fixed;
top: 10%;
background-color: #000000;
width: 100%;
height: 30px;
}
div.menue ul{
list-style-type:none;
margin:0;
padding:0;
display:table;
margin:0 auto;
}
div.menue li
{
float:left;
}
div.menue a
{
display:block;
width:100px;
}
div.menue a:link,div.menue a:visited
{
font-weight:bold;
color:#FFFFFF;
background-color:#000000;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
div.menue a:hover,div.menue a:active
{
background-color:#8A8A8A;
}
</style>
</head>
<body>
<div id = "opacity">
<div id = "headerBox">
<h1 class = "headerBoxTitle"> leonardo da Vinci</h1>
</div>
</div>
<div class = menue>
<ul>
<li> Home</li>
<li> Galore</li>
<li> Contact</li>
<li> News</li>
</ul>
</div>
<div id="galore">
</div>
<div id = "pic">
<a href="https://www.youtube.com/" id = "lisa">
<img src="http://webneel.com/daily/sites/default/files/images/daily/10-2013/4-leonardo-da-vinci-mona-lisa.preview.jpg" alt="can not display this image" style="max-height: 60%; max-width:90%; border: 5px outset #CCBCA3; padding:0px; position:absolute; left:10%; top:10%; border: outset 7px solid #CA935C;">
</a>
<a href="https://www.youtube.com/" id = "lisa">
<img src="http://webneel.com/daily/sites/default/files/images/daily/10-2013/4-leonardo-da-vinci-mona-lisa.preview.jpg" alt="can not display this image" style="max-height: 60%; max-width:90%; border: 5px outset #CCBCA3; padding:0px; left:50%; top:10%; position:absolute; border: outset 7px solid #CA935C;">
</a>
</div>
</body>
</html>
To set the width and height of your website you can simply use
html, body {
width: 1000px;
height: 700px;
}
Or, if you want it to set these values as maximum width and height, you can use:
html, body {
max-width: 1000px;
max-height: 700px;
}
Although, if you want to prevent the downscaling on mobile devices, you can add this inside your head section:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
In the both examples you have provided on your own you are overriding the values using !important, which tells the browser to prefer this css tag, ignoring everything else.
You can use the viewport meta tag. Add the following in your <head>:
<meta name=viewport content="initial-scale=1">
This will tell the browser to not attempt to downscale to fit the screen.
You can use the min-width in body
body{
min-width:1100px;
}
In my web I have some divs. The first and the top one is my menu bar and below that one I have another div. The second div contain photo change and below him a div with some text. When I running my code the photos(which locate in the second div) cover all the divs (although the menu bar position is "fixed"). I think that the problem is somewhere in the css file. can someone help me?
Here is my code:
<div id="header">
<div id="nav_bar">
<ul>
<li>בית</li>
<li>אודות</li>
<li>עבודות</li>
<li>פרוייקטים</li>
<li>חיפויי קירות</li>
<li>צרו קשר</li>
</ul>
</div>
</div>
<div id="main_pics" class="container">
<!-- photos here -->
<div id="main_photo1" class="phocont first">
<p>1</p>
</div>
<div id="main_photo2" class="phocont">
<p>2</p>
</div>
<div id="main_photo3" class="phocont">
<p>3</p>
</div>
<div id="main_photo4" class="phocont">
<p>4</p>
</div>
<div id="main_photo5" class="phocont">
<p>5</p>
</div>
here is my css code:
#main_pics {
width: 100%;
height: 100%;
position:relative;
}
.phocont {
width: 100%;
height: 100%;
position:absolute;
top:0;
left:0;
text-align:center;
}
.phocont p {
margin-top:30%;
font-size:60pt;
color:#fff;
text-shadow: 0 0 2px #000;
}
.first {
z-index:9999;
}
#image{
overflow: hidden;
background-size: cover;
background-position: center;
}
#main_photo1{
width: 100%;
height: 100%;
background-image: url("1.jpg");
background-position: center center;
background-size: cover;
}
#main_photo2{
width: 100%;
height: 500px;
background-image: url("2.jpg");
background-position: center center;
background-size: cover;
}
#main_photo3{
width: 100%;
height: 500px;
background-image: url("3.jpg");
background-position: center center;
background-size: cover;
}
.container{
width: 100%;
height: 500px;
background-color: white;
}
jsFIDDLE
Try this JSFIDDLE as an example. You need to specify a height for your fixed header and give it the property top:0 in order to keep it fixed at the top. this will also remove the fixed element from the flow of your page so you will have to give your photo div a top margin to position it below the header. I'm not sure about the text you have after the photos as you did not provide the information needed.
EDIT
After reviewing your recent comment you should change main_pics to this:
#main_pics {
width: 100%;
height: 500px;
position:relative;
margin-top:55px;
z-index:1;
}
and also add z-index:2; to #nav_bar
I am trying to make a div inside another one exactly in the middle. Is there any better way to do that?
body, html
{
margin:0;
height:100%;
}
#master_wrapper
{
width:100px;
height:100px;
background:#57a957;
}
#header
{
left:50%;
width:50%;
height:50%;
background:red;
}
<div id="master_wrapper">
<div id="header">
Header
</div>
http://jsfiddle.net/uba1wr52/
You can make the inner div exactly in the middle by adding style "margin: 0px auto" to the #header in the css file.
Just so you know, a lot of your css is pointless/redundant since you've not set your positioning of your classes. I.e. to use top:... left:... right:... and/or bottom:... you need to have set your positioning to absolute;
The snippet below allows you to horizontally and/or vertically center your div element:
html,
body {
padding: 0;
margin: 0;
}
#master_wrapper {
width: 100px;
height: 100px;
background: #57a957;
position: relative;
}
#header {
position: absolute;
width: 50%;
height: 50%;
background: red;
margin:0 auto; /*horizontally center*/
left:0;
right:0;
-webkit-transform: translateY(50%); /*vertically center*/
-ms-transform: translateY(50%);
transform: translateY(50%);
}
<div id="master_wrapper">
<div id="header">
Header
</div>
An example how to place a HTML Element in the middle horizontal and vertical
<!DOCTYPE html>
<html>
<head>
<title>Div in middle</title>
</head>
<body>
<div style="
background: red;
width : 300px;
height : 100px;
">
<div style="
background : #fff;
width : 123px;
height : 67px;
margin : 0 auto;
position: relative;
top : 50%;
transform : translateY(-50%);
">
Div in middle of other div
</div>
</div>
</body>
</html>
You can test in live editor if you want
margin: 0 auto;
This will automatically horizontally center your div with top and bottom margin of 0; You can also do:
margin: 0 auto 0 auto;
In order to control top and bottom margins, margin values go like:
margin: top right bottom left;
width: 100%; // can be in pixels also.
margin: 0 auto;
Try with padding: http://jsfiddle.net/5oxg9aay/1/
body, html {
margin: 0;
height: 100%;
}
#master_wrapper {
width: 58px;
height: 58px;
background: #57a957;
padding: 4%;
}
#header {
background: red;
width: 100%;
height: 100%;
}
or use a position: absolute; in the header and work with left/right/top/bottom but you need to make #master_wrapper the mother container for #header.
I am trying to make my page look like the Facebook Android app. The app can be summarized as having a 3 column layout with only the central column having the header (there is no footer, but in my requirement I also need a footer).
This can be shown in the image below
The red and blue div's are the left and right side-bars. The green and purple div's are the center div. The purple div's are the header and footer div's and would be sticking to the top and bottom of the page respectively.
One more requirement is there will be buttons on the header (top purple) to hide and show the left and right sidebars. Initially only the center div will be visible and the rest can be called into view as and when required. Here is my code till now. (I am not able to get the width for the center div)
HTML Code
<html>
<head>
<title>Sample</title>
<link rel="stylesheet" href="index.css" type="text/css" />
</head>
<body>
<div id="main">
<div id="leftBar" class="main">Left Bar</div>
<div id="content" class="inner">
<div id="header">Head</div>
<div id="body">Body</div>
<div id="footer">Footer</div>
</div>
<div id="rightBar" class="main">Right Bar</div>
</div>
</body>
</html>
CSS
body{
margin: 0px;
}
div.inner{
height: 500px;
width: 50%;
background: red;
}
div.main{
background: lime;
height: 200px;
overflow: hidden;
position: relative;
}
#leftBar{
float: left;
}
#content{
position: relative;
height: 100%;
float: left;
}
#rightBar{
float: right;
}
#header{
position: fixed;
top: 0px;
background: blue;
}
#body{
margin-top: 40px;
position: relative;
}
#footer{
position: absolute;
bottom: 0px;
}
I have also added the JavaScript code in the fiddle linked below
http://jsfiddle.net/mv6Bj/1/
The width should be such that the center div is full 100% width of the screen and when the right/left toggles come into the picture they should come to their position and push the center div to the left or right respectively. This is as per the standard Facebook app functionality.
These are the issues I am getting right now
The center div is not 100% and neither does it scale as elements appear and disappear
The height of the center div is not 100% (it is on Chrome, but strangely it is not on JSFiddle)
When I click on left, the leftBar disappears and the content div moves to the left but the header div remains where it is.
As per my understanding, I have updated the fiddle.
Working Demo
I have used display:table propery. You can refer this or this
html, body {
margin: 0px;
min-height:100%;
height:100%;
}
#main {
min-height:100%;
display:table;
width:100%;
height:100%;
}
#leftBar, #rightBar {
background: lime;
width:100px;
display:table-cell;
}
#content {
min-height: 100%;
display:table-cell;
background: red;
}
#header {
background: blue;
height:10%;
}
#body {
min-height:80%;
overflow:hidden;
}
#footer {
background: magenta;
height:10%;
}
Hope this works for you.
you can checkout this fiddle i made some changes in your css accordingly.
body {
margin: 0px;
}
div.inner {
height: 500px;
width: 50%;
background: red;
}
div.main {
background: lime;
bottom:0px;
top:0px;
overflow: hidden;
position: absolute;
width:20%;
}
#leftBar {
float: left;
}
#content {
position: absolute;
height: 100%;
top:0px;
right:0px;
width:60%;
left:20%;
float:left;
}
#rightBar {
float: right;
width:20%;
background: lime;
top:0px;
bottom:0px;
left:80%;
position:absolute;
}
#header {
float: left;
position: fixed;
top: 0px;
margin-left: 0px;
background: blue;
left:20%;
right:20%;
}
#body {
margin-top: 40px;
position: relative;
}
#footer {
position: absolute;
bottom: 0px;
position: fixed;
margin-left: 0px;
background: blue;
left:20%;
right:20%;
}
http://jsfiddle.net/mv6Bj/3/