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
Related
I created an image slider, but I am running into an issue. I want the width of the images to be the entire width of the screen; I accomplished this. However, my images' height are more than 100% of the height of the screen. I am wanting the height to be around 50-70% of the screen (preferably 50%). I tried adding height: 70vh; to my images, but that did not help.
Can anyone suggest something to help this?
My slider can be viewed at: http://realtorcatch.com/slider3
My code is:
* {
padding: 0;
margin: 0;
}
body {
font-family: Sans-Serif;
}
img {
max-width: 100%;
/*height: 70vh;*/
}
.cycle-slideshow {
width: 100%;
display: block;
position: relative;
margin: 0 auto;
}
.cycle-prev, .cycle-next {
font-size: 200%;
color: #FFF;
display: block;
position: absolute;
top: 50%;
margin-top: -10px;
z-index: 999;
cursor: pointer;
}
.cycle-prev {
left: 10%;
}
.cycle-next {
right: 10%;
}
.cycle-pager {
width: 100%;
text-align: center;
display: block;
position: absolute;
bottom: 20px;
z-index: 999;
cursor: pointer;
}
.cycle-pager span {
text-indent: 100%;
white-space: nowrap;
width: 12px;
height: 12px;
display: inline-block;
border: 1px solid #FFF;
border-radius: 50%;
margin: 0 10px;
overflow: hidden;
}
.cycle-pager .cycle-pager-active {
background-color: #FFF;
}
<div class="cycle-slideshow">
<span class="cycle-prev">〈</span>
<span class="cycle-next">〉</span>
<span class="cycle-pager"></span>
<img src="images/subway.jpg" alt="subway">
<img src="images/beach.jpg" alt="beach">
<img src="images/space.jpg" alt="space">
</div>
On your img declaration, instead of max-width set width to 100% and height to 70vh. If you'd like more variety in the height, try setting the min-height to be 50vh and the max-height to be 70vh.
Be warned, this will skew your images and make them look disproportionate.
Alternate solution:
Create a "scrim". By this, I mean create a box that covers up the bottom half of the page. You can actually do this with a pseudo-element from your wrapper:
.cycle-slideshow {
position: relative;
...
}
.cycle-slideshow:after {
content: '';
width: 100%;
height: 50%; //50% of parent element
background-color: white;
position: absolute;
top: 50%;
left: 0;
z-index: 2;
}
change style of img to img {width: 100%; height: 100vh;}
It will work for you. Thank you.
try this,, Hope it will help you.
var vHeight = $(window).height()/2, // for 50%
vWidth = $(window).width(),
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 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 following div which i am showing as popup:
<div id="divOperationMessage" style="background-color: White; border: 2px solid black;
display: block; width: 350px; z-index: 1001; top: 60px; left: 240px; position: fixed;
padding-left: 10px;margin:auto;">
------------------Whatever content inside-----------------------------
</div>
When its shown, i can easily view other part of screen in the main background.
Its viewing as below:
(Entry updated sucessfully is popup div above)
I dont want to show background screen when poup is there.
I want to make it black..
How can i make it black??
I tried with setting opacity to 0.75 ... but that prooved misconceptual...did not solved my purpose..
What can i do for it???
Please help me.
Here you go!
Here's the HTML code:
<div id="overlay">
<div id="pop-up">
Content in Pop-up.
</div>
</div>
And here's the CSS code:
#overlay {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
background-color: #000000;
display: none;
}
#pop-up {
background-color: white;
border: 2px solid black;
display: block;
width: 350px;
z-index: 1001;
top: 60px;
left: 240px;
position: fixed;
padding-left: 10px;
margin: auto;
}
Hope this helps!
Here is what I would do:
Create a fixed div with 100% width and height;
put the popup div inside this fixed overlay and center it horizontally and vertically.
<div class="overlay">
<div class="popup">
Whatever code!!
</div>
</div>
css
.overlay{
position:fixed;
z-index:999;
width:100%;
height:100%;
background-color: black;
background-color:rgba(0,0,0,.75)
}
.popup{
width:300px;
position:absolute;
left:50%;
top:100px;
margin-left:-150px;
}
Update 2020:
I would use 100vh and 100vw as it is widely supported. Centering the popup would be done with CSS Grid Layout and aligning the box to center.
.overlay{
position:fixed;
z-index:999;
width:100vw;
height:100vh;
background-color: black;
background-color:rgba(0,0,0,.75)
}
Here's a FIDDLE
if($('#divOperationMessage').length > 0 && $('.mask').length < 1) {
$('body').append('<span class="mask"></span>');
}
.mask {
background: rgba(0,0,0,0.8);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
You need to add an overlay div to place over the main content, and below the popup div.
div.overlay {
position: fixed;
width: 100%;
height: 100%;
display: block;
top: 0;
left: 0;
background-color: rgba(0,0,0,.75); /*this sets the slightly see-through black*/
z-index: 100; /*Make this less than the existing popup div*/
}
Try this
<div id="divOperationMessage" style="background-color: White; border: 2px solid black;display: block; width: 350px; z-index: 1001; top: 60px; left: 240px; position: fixed;padding-left: 10px;margin:auto;">
------------------Whatever content inside-----------------------------
</div>
<div class = 'black_bg' style = "position:fixed;width:100%;height:100%;opacity:0.75;background-color:#000"></div>
And whenever you are showing the popup , add this line
$('.black_bg').show();
If you wanna use jquery,you can use jquery modal feature.
Easy to use!
Check here :
http://jqueryui.com/dialog/#modal
$(function() {
$( "#dialog-confirm" ).dialog({
resizable: false,
height:140,
modal: true,
buttons: {
"Delete all items": function() {
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
});
In this,if you click on the button,or outside of the popup menu,it closes.
You don't have to code down that too.
Short and compacT!
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/