I'm working on a layout where the main content div will have a with of 970px. Behind this div, I want a div with dimensions 1200x600px (it will contain a flash object) positioned like so:
width:1200px;
height:600px;
position:absolute;
left:50%;
margin-left:-600px;
The problem is when the browser is sized to a width smaller than 1200px it get the horizontal scroll bar. I can fix that by:
body {overflow-x:hidden;}
But I DO want it to have the horizontal scroll bar when it get sized to less than 970px in width.
Basically, I am trying to get the 1200px div to behave more like a css background image. Any ideas?
This works without JavaScript:
<body style="margin:0">
<div style="position:absolute;width:100%;height:600px;overflow:hidden;min-width:970px;z-index:0;">
<div style="position:absolute;width:1200px;height:600px;left:50%;margin-left:-600px;">
--flash object--
</div>
</div>
<div style="position:absolute;width:100%;z-index:100;">
--main content--
</div>
</body>
UPDATE:Had to make changes to accommodate your absolute div positioning (the parent div has to be absolutely positioned as well)
A solution is possible entirely with CSS. The key pieces are position: fixed and z-index: -1. The two DIVs in this example are siblings, but there are other possibilities. This solution works with the latest versions of Chrome, FireFox, Safari, Opera and MSIE.
This does not work with MSIE6, which doesn’t correctly implement the z-index style, but there is an MSIE6-compatible solution (which shows the scrollbar at 1200px) if you’re able to rearrange things and add a DIV wrapper.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html title="html">
<head>
<style type="text/css">
#content
{
background: #ffffe8;
height: 500px;
margin: 0 auto;
width: 970px;
}
#background
{
background: #ffe8e8;
height: 600px;
left: 50%;
margin-left: -600px;
position: fixed;
top: 0;
width: 1200px;
z-index: -1;
}
</style>
</head>
<body title="body">
<div id="content" title="#content">
<p>content</p>
</div>
<div id="background" title="#background">
<p>background</p>
</div>
</body>
</html>
you could use the onresize event and when its less than 970px, change overflow-x to auto or scroll.
if you are using jQuery, look up the .resize() method
I would use a CSS3 media query.
body{overflow:hidden;}
#media only screen and (max-width: 970px) {
body{overflow:visible;}
}
First set the overflow on the body to be hidden so that it does not scroll. Then when the screen is less than 970px, set it back to visible so that it will scroll.
Related
We have an position: fixed; alert banner which appears at the top of the page to display different alerts. We want it to have a height (or appear to have height) so that it doesn't cover up the top menu of the page, but rather pushes the page content down. When the user accepts or x's out of the banner, the page should pop back to the top. When the user scrolls down the page, the banner should float at the top of the window, remaining on screen the whole time.
The current strategy is very kluge and uses a setBannerHeight() function all over the place that gives a above our banner a set height, pushing the main page content down and allowing the banner to appear to 'take up space'.
It's proven to be non future proof and does things like prevents our iOS Smart App Banners (a totally different banner) from appearing properly.
Is there a way I can either give a fixed element a height, make a sticky element float (so far I can't, this is in a self contained alert.component.ts component so don't think I can give a parent element height), OR, perhaps a 3rd party alert library you'd recommend that already has this solved?
This may help. It's simple, using position: sticky in CSS and some vanilla JavaScript. The alert stays at the top of the page when a user scrolls. It disappears when a user clicks on it.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container">
<div id="alert">Alert</div>
<nav>Menu</nav>
<section>
<p>Add enough content here so you can scroll the page.</p>
</section>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
#container {
width: 600px;
margin: 0 auto;
}
nav {
width: 600px;
height: 100px;
background: lightblue;
}
#alert {
width: 600px;
height: 40px;
position: sticky;
top: 0;
background: orangered;
cursor: pointer;
}
section {
width: 600px;
}
const alert = document.getElementById("alert");
alert.addEventListener("click", function() {
alert.style.position = "static";
alert.style.display = "none";
})
One way to do it is by toggling a CSS class to the <body> that matches the state of the alert (open or closed). This class affects the behavior of the body, specifically his top-padding which should equal the height of alert.
Now all you have to worry about is to toggle the class on the proper show/hide events of the alert component.
body.alert-on {
padding-top: 60px;
}
.alert {
position: fixed;
}
earlier it was good but now when I put width and height 100% it doesn't really displays 100% instead a 10 px margin come on all four sides
here's what I tried
<html>
<head>
<style>
.cont img {
display: inline-block;
width :100%;
height : 100%;
margin:0;
padding:0;
}
</style>
</head>
<body>
<div class="cont">
<img src="IMG_5913-2.jpg" class="imgmy" name="imgmy">
</div>
</body>
</html>
what can I do to make it 100% with in any browser?
have a look at this code, set margin:0px on body tag
<html>
<body style="margin:0px; ">
<div style="background-color:red; width:100%;">
hello
</div>
</body>
</html>
Question is not 100% clear, but are you looking for a solution like this?
.container {
height:100%;
width: 100%;
border: 1px red solid;
margin:0;
padding:0;
line-height: 0;
}
.container .imgmy{
height:100%;
width: 100%;
margin:0;
padding:0;
}
Are you sure it was good earlier?
The margins around the image have nothing to do with the image itself.
Browsers define default styles in a so called User Agent Stylesheet. In this case, the white border is the 8px margin (that is in Chrome) on the body.
Luckily you can easily override these user agent stylesheets, and you should in this case.
You can add margin:0 to the body, as mentioned above by Shreya.
But to avoid similar 'errors' it is a good idea to include a reset.css or normalize.css. These files "make browsers render all elements consistently and in line with modern standards" (http://cdnjs.com/libraries/normalize). You don't have to write one yourself, others have done this for you, like Nicolas Gallagher: http://necolas.github.io/normalize.css/
Read more about User Agent Stylesheets here: What is user agent stylesheet
Assuming HTML
<body>
<div class="cont">
<img src="IMG_5913-2.jpg" class="imgmy" name="imgmy">
</div>
</body>
CSS
.cont img {
max-width: 100%;
max-height: 100%;
}
I am using fullpage.js for parallax scrolling. Is it possible to make the background images responsive in nature when i re-size my window.
https://github.com/alvarotrigo/fullPage.js
Below is the example i am using.
https://github.com/alvarotrigo/fullPage.js/blob/master/examples/backgrounds.html
If you notice each of my section has the background-size property with cover, but its still not responsive when i re-size.
#section0,
#section1,
#section2,
#section3{
background-size: cover;
}
Look i don't know too much about fullpage.js
But i don know about resizing image according to your window size.....
first of all download any image and i named it sa.jpg
<html>
<head>
<style type="text/css">
#box{
width:100%;
}
<!--This class is added to img element to make it responsive -->
img.responsive{
max-width:100%;
height:auto;
}
</style>
</head>
<body>
<div id="box">
<img src ="sa.jpg" class="responsive"></img>
</div>
</body>
</html>
In above code we kept image within #box div. and we also added responsive named class to img element.Assign it a max-width value of 100%. This allows the width
to adjust to the browser width changes. Next, add a dynamic height property to the class.
Above code is responsive for img element..
Now if you want to use background image css property and resize your image according to screen size
<html>
<head>
<style style type="text/css">
#box{
width:100%;
height:100%;
background-image:url("sa.jpg");
background-size:100% auto;
background-repeat: no-repeat;
}
<!--img.responsive{max-width:100%;height:auto}-->
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
This one works best for me
background-position: 50%;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
How to align a <div> to the middle of the page
This is a simple question with what should be a simple answer but I don't know how to do it.
Well, use this code:
<html>
<head>
<style type="text/css">
body{
min-width: 710px;
}
#backdrop{
min-width: 710px;
max-width: 710px;
}
</style
</head><body>
<div id="backdrop">
</div>
</body></html>
How do you get #backdrop to center on page load and stay centered on the page when you resize? (until you resize to less than 710px wide, then the horizontal scroll bar would appear)
Knowing this information would improve the layout quality of my page immensly and I could probably do it if I had a more adept knowledge of javascript and jQuery... but I don't yet.
If all you need is to have the #backdrop div centered horizontally, there is no need for javascript. The whole thing can be achieved through CSS.
#backdrop{
display:block;
width: 710px; //just specify the width. no need for min-width or max-width if this is not meant to change.
margin: 0 auto; //this will center the div in its container
}
You don't need javascript to do this, just try:
<html>
<head>
<style type="text/css">
body{
min-width: 710px;
}
#backdrop{
width:710px;
margin:0 auto;
}
</style
</head><body>
<div id="backdrop">
</div>
</body></html>
[EDIT] This was already answered on stackoverflow: How to align a <div> to the middle (horizontally/width) of the page
I'm not really sure about what you want, but:
#backdrop{
width:710px;
margin: 0 auto;
}
I have a room div with some toy divs arranged on it, see
Toys are absolutly positioned and are drag-able with in the walls of the room . The room container div has a fixed height and height, so the room has horizontal as well as vertical scrolls. I use jquery event drag plug-in for setting up DnD. I managed to set up the toys drag only with in the lomits of the wall, but when there are scrolls, component is moving a little ouside the wall (only up to the actual width of the wall).
I want to show only a portion of the toy as shown below
I tried setting the z-index, but has no effect, any one has better idea?
Withouth seeing the actual code, i guess overflow:hidden could solve this?
You can used scrollTo plugin http://demos.flesler.com/jquery/scrollTo/ to work with scrollbars
the example below shows that overflow:hidden does indeed do what you're asking. Something is up with your code, but we can't help you unless you post it!
alt text http://img155.imageshack.us/img155/9594/example1281542227415.png
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example</title>
<style type="text/css">
#container {
background-color:#ddddff;
height:300px;
overflow:hidden;
position:relative;
width:300px;
}
#container .child {
background-color:#ddffdd;
height:50px;
position:absolute;
width:50px;
}
#container .child1 {
left:100px;
top:70px;
}
#container .child2 {
left:270px;
top:170px;
}
</style>
</head>
<body>
<div id="container">
<div class="child child1"></div>
<div class="child child2"></div>
</div>
</body>
</html>