I have a div that I have centered both vertically and horizontally:
#mydiv {
width:960px;
height:400px;
position:fixed;
margin-left:-480px;
margin-top:-200px;
top:50%;
left:50%;
}
When I am using the Smoothscroll.js library it won't work. If I remove the "position:fixed/position:absolute" it do, but then my div is no longer centered. Is it any whay I can achieve both smooth scroll and centering?
I found a solution to this problem by myself. I made a fake (invisible) div at the top of the screen that changes height after screen-size. Then I put my visible (#mydiv) under that without any css positioning.
#mydivfake {
width:1000px;
height: calc(50vh - 310px); /*310px is half of the height of my visible centered div*/
margin-left:-500px;
left:50%;
}
Related
I am trying to display some content through an iframe.
1.The iframe window's height and width will be dependent on the height/width of a mobile screen and will thus vary based on the device screen size.
2.The content, which is designed within a of width and height of 800px and 600px.
3.Based on the screen-size, the content will be scaled using 'transform:scale(x)'
The content will only be scaled down, no upscaling will happen.
Now, the I've managed to centre-align the content(#container) using some css-code
#container{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
width:800px;
height:600px;
}
The above CSS is being applied to the container that I am trying to display in the iframe.
The iFrame size is dependent on the window.innerHeight
var iframe = document.getElementById('iframe');
iframe.height = window.innerHeight;
iframe.width = window.innerWidth;
I am also applying full-screen to the iframe.
iframe.requestFullscreen();
The container also gets scaled down, incase the device-height ( in landscape mode)
so a transform scale is applied to the container based on this.
Incase the screen-height is 300px,
#container{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
width:800px;
height:600px;
transform:scale(0.5);
}
This works fine for mobile screens which have a Width greater than 800px, in cases where the width is less than 800px, the content stops centre-aligning with respect to the screen-width.
NOTE:
Content that I refer to is an interactive div, a mini-game of sorts which uses various positioned elements. Let us assume that this can't be modified and only the 800 x 600 div needs to be centre aligned.
Is there any solution to this?
I can elaborate more if required.
I would like the content to centre align, even when the screen-width is less than 800px, when being shown through an iframe
<div class="parent">
<iframe src="#"></iframe>
</div>
Maybe this:
.parent {
display: block; //if it's for some reason something else
text-align: center;
}
iframe {
display: inline;
}
I have some divs and I want that when I get the screen bigger(CTRL +) , the scrollbar appears at the bottom of the page and the divs STAY inline block. I have the code here(http://fiddle.jshell.net/JNzFp/) and as you can see when you get the screen bigger , scrollbar appears under the divs and I want it to display on the bottom of the full screen not under the divs, and ALSO I don't want vertical scrollbar.
Use this CSS overflow:hidden
http://fiddle.jshell.net/zCxhK/
Below is a demo of the different overflow properties.
UPDATE: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow
Scroll bar appears in #menu div because you have used overflow: auto in its css. Use hidden instead of auto for not allowing scrollbar to appear below the divs
UPDATE- For that you have to make your menu div 100% of the body
DEMO
CSS -
#menu{
white-space:nowrap;
overflow:auto;
width:100%;
/*height:40px;*/
height: 100%;
margin:auto;
padding:0 0 12;
background:url(file:///C:/Users/Windows7/Desktop/imgbg.jpg) repeat 0 0 #f8f8f8;
border:1 solid;
border-width:0 1 1;...
I have coded a site with a simple horizontal "nowrap" css with img floated side by side. I have also hide the scrollbar away. The side scroll can be done by normal vertical mousewheel scrolling (see my project url
Because the images is all in big resolution of 1400x850px, i wanted to create a site that that will scale the images according to the browser size. Currently all the images are in max-width:100%, my aim is to scale them below that percentage when the browser is smaller.
I tried using max-width:100% with both width and height in auto. It not working.
I try using jquery fluid images script, they are not working as well due to "nowrap"
Below are the main code i am using:
#content {
width:5600px;
overflow-x: auto;
white-space: nowrap;
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
#portfolio img {
float:left;
display:inline;
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
This is the link of my project: http://credencepartners.com/demo02/
This is the result i trying to produce (for example please see the comments): http://credencepartners.com/demo02/interface/scene01.jpg
Do i need to implement javascript on this or CSS is possible for this scenario?
UPDATES / 10th Aug 2012
Thanks to Corey for the heads up, i have updated my demo02 link. The problem now is just adding the texts below the images. I tried using a div class to combine the text and images together, the result causes the images to be be non-fluid again. Now i need help making a fluid and re-sizable div tag.
GOALS
Knowing that building a typical horizontal side scrolling website is quite straight forward. The main problem i have is only the fluid resizable images at the top. I am pretty new that fluid/responsive layout and hope the gurus here can enlighten me :)
Use this CSS:
body, html {
width:100%;
min-height:100%;
height:auto !important;
}
#content {
width:100%;
height:100%;
position:relative;
}
#portfolio {
width:100%;
height:100%;
position:relative;
}
#portfolio ul{
width:100%;
height:100%;
display:block;
white-space:nowrap;
overflow:auto;
list-style:none;
padding:0;
margin:0;
text-align:center; /*in case not enough images to create a scroll*/
}
#portfolio img{
width:auto;
height:100%;
display:inline-block;
position:relative;
}
And lay out your html like this:
<div id="content">
<div id="portfolio">
<ul>
<img src="src.jpg" />
<img src="src.jpg" />
<img src="src.jpg" />
</ul>
</div>
</div>
I tried a little and found out:
You need to remove the height and width-Tag from the images
You set the height of the "portfolio"-div to the window-height using jQuery/JavaScript
That must be all, hope I understood what you meant
I'm using this CSS to postion a div horizontally and vertically to the window which works fine until you scroll down the page, then the div remains in the same centred position as if the page hadn't been scrolled.
width:600px;
height:300px;
position:absolute;
left:50%;
top:50%;
margin:-150px 0 0 -300px;
z-index:99;
Can this be done using CSS?
That's because your position is absolute!
You should try using position: fixed; instead.
Take a look at:
http://www.w3schools.com/cssref/playit.asp?filename=playcss_position&preval=fixed
position: fixed; might be what you're looking for.
Try the following CSS: position:fixed;
I have the image position fixed inside div and code is gven below
#content{
margin-top:100px;
width:900px;
color:#009;
border:1px solid red;
overflow:hidden;
display:block;
}
img {
float:left;
position:fixed;
top:140px;
padding:50px;
}
#text{
display:block;
border:1px solid green;
width:500px;
height:1200px;
float:right;
overflow:scroll;
}
#footer{
clear:both;
width:600px;
height:300px;
border:2x solid blue;
color:#939;
}
HTML is
<div id="content" >
<img src="bar.jpg" width="46" height="639" />
<div id="text">
ggggggggggggggggggfgdfgdfgdgdfgdgdfgdf
</div>
</div>
<div id="footer">
Footer text
</div>
</body>
Now when i scroll down then image comes out of the content div box.
IS there any way so that even if i scroll the image bar should stay inside the div box.
The screen shot shows my problem
First Screen is ok without scrolling
alt text http://img293.imageshack.us/img293/8640/bar1k.png
But when i scroll the text full then it covers my footer as well
alt text http://img36.imageshack.us/img36/4393/bar2z.png
I want that image should scroll with the scroll bar but it should not come outside the div box . Is that possible. Basically the div box should be the boundary of the image. THe image should not come out of the div box any time but it should scroll in between that with the length of div box
so you want that blue bar to stay within the red box, right?
if that's the case you need to have the css for the blue box as
img {
position: absolute;
top:140px;
left:50px;
}
and also the container has to have
#content{
...
position: relative;
}
position: relative will make the blue bar absolutely positioned with respect to #content rather than the document object.
position: fixed positions your image relative to browser window
If you want to position it relative to the parent div, you should use position: absolute
position: fixed
Generates an absolutely positioned
element, positioned relative to the
browser window. The element's position
is specified with the "left", "top",
"right", and "bottom" properties
In other words you can't "fix" your image inside of div only relative to browser window.
Follow-up:
If you want that image to always be on the same place in the background do it with CSS:
body {background: transparent url(bar.jpg) bottom left no-repeat;
background-attachment:fixed}
from what i see, just remove the position: fixed from your img tag styles
img {
float:left;
padding:50px;
}
I dont know if is just because you made a quick demo to show us, but never apply a style to a tag, its better to use ID's or Classes
if you want to keep a margin of 140 pixels from the top of the div containing the image, use:
img {
margin-top: 140px;
}