I just started using Skrollr.js - I was able to make the animations I wanted, however i needed to use position:fixed; for my elements to position them exactly where they should be.
Problem is, if your screen isn't a certain size, the animations are cutoff or not centred.
Is there a better way to position the elements or something with Skrollr I can do to fix this?
I have a 3 elements that come together to make a logo so it needs to be pretty precise in how it comes together.
Thanks
Just place those 3 elements inside a div, that way you will only position that div while not affecting the positioning of the elements inside it...no matter how you position the container, the elements inside will not suffer any transformation.
Here's an example:
JSFIDDLE
CSS:
#logo {
width:200px;
height:200px;
position:fixed;
top:20px;
left:20px;
background:red;
}
#elem1 {
width:100px;
height:100px;
position:absolute;
top:0;
left:0;
background:yellow;
}
#elem2 {
width:100px;
height:100px;
position:absolute;
top:0;
right:0;
background:blue;
}
#elem3 {
width:200px;
height:100px;
position:absolute;
bottom:0;
background:green;
}
HTML:
<div id="logo">
<div id="elem1"></div>
<div id="elem2"></div>
<div id="elem3"></div>
</div>
Related
I'm not sure how to do this. II'm currently using Bootstrap's textarea, along with its container. I don't know how to make it so that the textarea extends to the bottom of the screen, which automatically increase/decrease depending on the window height. I've tried:
#form-control {
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
}
But nothing seems to change. Does anyone know how I can get this done?
Edit:
This is my html file:
<body>
<div class="container">
<div class="form-group">
<textarea class="form-control" rows="15" id="note"></textarea>
</div>
</div>
</body>
You have to put height property on the element like the code below.
#form-control {
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
height:50px;
}
If it doesn't work, try !important. If it doesn't work either, try setting rows in markup and set line-height on CSS.
<textarea rows="4">
.form-control should be a CSS class for bootstrap.
Are you using <textarea class="form-control"></textarea>? If so, your css rule is using #, which corresponds to an element ID, not a class. Change your CSS to this:
.form-control {
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
}
Try this code.
Actually you have used (id) #form-control, which should be (class) .form-control
I've used your code, just added width 100%
Now it'll take height and width of screen.
.form-control {
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
width:100%
}
<div class="form-group">
<textarea class="form-control" placeholder="textarea"></textarea>
</div>
You can use the height property to set it to a certain height.
You can do something like this:
#form-control {
position:fixed;
height: 200px;
}
or
#form-control {
position:fixed;
height: 50%;
}
Just as a few examples.
I would suggest that you check out this W3 Schools page on the height css property... If you read the page you can see how else you can size it.
On that page there is also a link to this demo which I suggest you try to see what the different "settings" for lack of better word do.
Also make sure that the opening <textarea> tag calls the selector... so it should look something like this <textarea id="form-control">.
Good Luck
So there are a lot of questions like this on StackOverflow but there doesn't seem to be one that will be helpful in my case.
As you can see, I have 2 divs on the screen. One on the left which is
float:left;
and the one in the middle is
margin-left-auto;
margin-right:auto;
So my question is, when I want to put another div JUST like the one on the right on the left of the middle DIV, how will I go on to doing this?
float:right;
has been tried on the right div but that just puts it in a different line because of the left div being floated.
So how do I do this? Answers are greatly appreciated.
I can provide more code such as how the DIV"s are arranged if needed.
All I did was type
display: flex;
in the container div and it worked perfectly.
To create a main body of content with a left and right sidebar, you can float:left and simply define a width for each div in the CSS.
ie:
.div1 {width:25%}
.div2 {width:50%}
.div3 {width:25%}
If you want to account for padding, just reduce the amount divided by three on each div width.
ie: http://jsfiddle.net/simsketch/9tj4va6r/
It might help you to start out using a framework like Foundation or Bootstrap.
Foundation provides lots of starter templates to help get you started here.
http://foundation.zurb.com/templates.html
When using a grid system, instead of needing to define widths in your custom css, you can simply include the foundation.css library, and reference the classes.
ie: <div class="large-6">content</div>
For the layout you're after, this would do the trick.
http://foundation.zurb.com/templates/feed.html
What they're doing there is simply:
<div class="large-3"></div>
<div class="large-6"></div>
<div class="large-3"></div>
As long as the numbers add up to twelve, they will fit perfectly.
This has been a brief introduction to grid systems. Consult the following for more information:
http://foundation.zurb.com/
http://getbootstrap.com/
http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
These are the two most popular front-end frameworks but there are dozens more and they are all wonderful.
Flexbox solution
Wrap the items inside a parent container and set the display: flex
flex: 1 on the left and right items will grow and shrink it 1x.
flex: 2 on the middle items will grow and shrink it 2x.
.container {
display: flex;
}
.left,
.right {
flex: 1;
text-align: center;
background: #E77F24;
}
.middle {
flex: 2;
text-align: center;
background: lightblue;
margin: 0 10px;
}
<div class="container">
<div class="left">1</div>
<div class="middle">2</div>
<div class="right">3</div>
</div>
.div1{
width:25%;
overflow:auto;
float:left;
background-color:blue;
color:white;
text-align:center;
}
.div2{
width:50%;
overflow:auto;
float:left;
background-color:red;
color:white;
text-align:center;
}
.div3{
width:25%;
overflow:auto;
float:left;
background-color:green;
color:white;
text-align:center;
}
<body>
<div class="div1">First Div</div>
<div class="div2">Second Div</div>
<div class="div3">Third Div</div>
</body>
Should be simple but I can't work it out.
I have two panes on my webpage. I want both to be independently scrollable:
<body>
<div id="sidebar"> ... lots of content ... </div>
<div id="container"> ... lots of content ... </div>
</body>
#sidebar{
width:200px;
position:fixed;
overflow:scroll;
background-color:black;
color:white;
top:0;
left:0;
height:100%;
}
Here is a JSFiddle. Notice how when you scroll to the bottom in the black sidebar, and keep scrolling, the body starts to scroll? That's what I want to avoid. Is there a simple way to achieve this?
Please try following updated CSS. Here I have set 200px height after that it will add scroll bar for #sidebar div.
#sidebar{
width:200px;
position:fixed;
overflow:auto;
background-color:black;
color:white;
top:0;
left:0;
height:200px;
}
Hope it may help.!!
body {
overflow-y : hidden
}
helps you if you don't want body to be scrolled.
This is working if I understood your problem correctly. Just making overflow:hidden when mouse is over sidebar div.
#sidebar:hover + #container{
overflow-y: hidden;
height: some_value; // your window height
}
You´re right. In Chrome it happens.
Maybe some jQuery?
$("#sidebar").focus(function(){
$('body').css("overflowY","hidden");
});
$("#sidebar").blur(function(){
$('body').css("overflowY","scroll");
});
Add tabindex="-1" to sidebar to get this working
Actually Working
Hi I a creating a button using three divs and all divs have background images. This is how it looks like.
Button Demo
The button is fine but how can i resize it ?? I am doing like
.btncontainer{
position:absolute;
top:120px;
left:120px; cursor:pointer;
display:inline-block;
width:120px;
height:20px;
}
But it is changing the button design. What can i do to resize it dynamically with the text?
i want to look like this if the size is changed for example this image has different sizes.
So when i changing the .btncontainer then it should change the width and height of the elements inside it but this is not happening
As you precised in an upper comment; In this special case, you have to use images for left and right divs. I suggest you to set a proper height to them, in the html code.
This is not the best practise, but will do the work regarding your needs.
Please see the following example.
Please note you will have to change the #backgrounddiv height and line-height to match.
See fiddle here
CSS
.btncontainer{
position:absolute;
top:180px;
left:10px; cursor:pointer;
display:inline-block;
}
#leftdiv{
float:left;
}
#backgrounddiv{
background:url("http://i.share.pho.to/0ffe9c14_o.png") top center repeat-x;
float:left;
height:40px;
padding:10px;
line-height:40px;
}
#rightdiv{
float:left;
}
HTML
<div class="btncontainer" id="button">
<a href="#">
<div id='leftdiv'>
<img src="http://i.share.pho.to/ff6cc4e3_o.png" height="70px" />
</div>
<div id='backgrounddiv'>CLick Me </div>
<div id='rightdiv'>
<img src="http://i.share.pho.to/245be416_o.png" />
</div>
</div>
I'm trying to make a page that contains 3 elements: Header, footer and content. As the names suggest, I want the header stuck to the top, the footer in the bottom, and the content in between. I have already made a layout, which puts the header and footer where they are supposed to be, but the content either overlaps them, or the other way around, where the content is supposed to get smaller instead.
My problem is that the header and footer are going to be used for many different things, and they are therefore dynamic when it comes to height.
Is there any way to make the content fill what space is left between the header and footer, without overlapping any of them?
If possible I would prefer pure CSS, but if that isn't possible, I'd like a JavaScript suggestion as well. :)
Thanks!
EDIT: This is what I got atm.
<div class="container">
<div id="header"></div>
<div id="footer"></div>
<div id="content"></div>
</div>
CSS:
#content {
position:absolute;
background: url('img/textures/fabric.png');
background-color: gray;
height:auto;
width:auto;
margin:0 auto 0 48px; /* Center content */
left:0;
right:0;
top:0;
bottom:0;
text-align:center;
}
#dashtop {
position:fixed;
width:auto;
background-color:aqua;
opacity: .5;
margin-left: 48px;
top:0;
left:0;
right:0;
text-align:center;
}
#footer {
position: fixed;
margin-left: 48px;
background-color:green;
bottom:0;
right:0;
left:0;
width:auto;
height:auto;
text-align:center;
opacity:0.5;
z-index:0;
}
Use relative positioning both for header and content (no position attribute), and use fixed positioning for the footer.