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/
Related
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
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;
}
I'm trying to make a fixed box with 980px width and 500px height scrolling inside a div with 100% width and 1500px height, but it is not working at all.
That's what I did: https://jsfiddle.net/zjuyuhmz/2/embedded/result/
The box is moving when the page scrolls, and I want to make scroll only if the mouse is inside of the div.
Is this possible??
Html:
<div id="wrapper">
<div class="main">
<div class="container">
<div class="container2">
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
</div>
</div>
</div>
</div>
Css:
#wrapper {
position: relative;
width: 100%;
height: 100%;
color: #a3265e;
font-family: 'GillSans-SemiBold';
}
.main {
border: 1px solid red;
position: relative;
width: 100%;
height: 100%;
margin: 0 auto;
padding-top: 380px;
}
.container {
border: 1px solid green;
position: relative;
width: 100%;
height: 500px;
margin: 0 auto;
overflow: scroll;
}
.container2 {
height: 1500px;
margin: 0 auto;
}
.test {
width: 940px;
height: 500px;
position: fixed;
left: 50%;
margin-left: -480px;
background: black;
}
You need to write javascript code, where you can get cursor position and depending on that enable scroll event.
Replace the css for .test for this:
.test {
width: 940px;
height: 500px;
position: absolute;
left: 50%;
margin-left: -480px;
background: black;
}
.test:focus {
position:fixed;
}
This means: when the element with id "test" has the focus on, make it's position fixed. If not, make it's position absolute.
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 have a popup which will get shrink and the content will dislocate on the browser window resize. I am stuck with this
Here is the fiddle: http://jsfiddle.net/sarathsprakash/ZjdU4/
and here is the fullscreen fiddle: http://jsfiddle.net/sarathsprakash/ZjdU4/show/
Maybe you could view and check resizing the window
HTML
<div id="popup" >
<div id="img-section" >
<img src="http://icons.iconarchive.com/icons/artdesigner/tweet-my-web/256/single-bird-icon.png" />
</div>
<div id="description">
//text content
</div>
</div>
<div id="fade" class="black_overlay"></div>
click here
CSS
.black_overlay {
display: none;
position: absolute;
top: 0%;
left: 0%;
min-width: 100%;
min-height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
#popup {
display: none;
position: fixed;
top: 8%;
left: 10%;
max-width:1200px;
max-height:600px;
height:auto;
width:auto;
padding: 16px;
background-color: white;
z-index:1002;
overflow:hidden;
}
#img-section {
position:relative;
width:800px;
float:left;
background:black;
cursor:pointer;
height:600px;
padding:5px;
margin-top: -20px;
margin-left: -15px;
margin-right: 10px;
}
#description {
position:relative;
background-color: #fff;
max-width:400px;
overflow-y: auto;
position: relative;
word-wrap: break-word;
max-height:600px;
height:auto;
padding: 20px;
}
#img-section > img {
display:inline-block;
height: auto;
vertical-align:middle;
width:auto;
}
I want the poup to remain as it is, It should not shrink
Thanks in advance
Side scrolling for a popup is horrible, but:
make the popup position: absolute instead of fixed
give the body a min-width of left margin + popup width (currently that would be calc(1200px + 10%)
same for height?
make all max-width => width, because you know how much room you have
Your existing CSS is mighty strange, but this might do it: http://jsfiddle.net/rudiedirkx/ZjdU4/1/
Highlights:
body {
min-width: calc(1200px + 10%);
}
.black_overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
#popup, #popup * {
box-sizing: border-box;
}
#popup {
position: absolute;
width: 1200px;
height: 600px;
padding: 0;
}
You are using percentage for your height and width.
The browser change its size on Resize, therefore the value of the percentage depreciates.
Like 10% of 100px differs from 10% of 10px.
Use px to keep your height and width the same size on resize.
Of course depending on what you want neither is better than the other