I'm trying to position an image to the right within a container. However, after I set my parent container to position: relative;, my image disappears. Any ideas? Website: http://andrewgu12.kodingen.com/. Thanks!
CSS:
.slide {
padding-top: 138px;
background-attachment: fixed;
width: 100%;
height: 100%;
position: relative;
box-shadow:inset 0px 10px 10px rgba(0,0,0,0.3);
}
div#inner-container {
text-align: left;
width: 960px;
margin: 0 auto;
padding: 0;
white-space: normal;
position: relative;
}
div#name {
right: 0;
bottom: 200px;
position: absolute;
}
HTML:
<div class="slide" id="home" data-slide="1" data-stellar-background-ratio="1">
<div id="inner-container">
<div id="name" clas="row">
<img src="images/names.png">
</div>
</div>
</div>
It does not disappear, it just goes all the way up and out the monitor xD You have to remember that when you use position: absolute the object is going to look for a parent that has position: relative to position itself. When you add position: relative to div#inner-container it changes the div#name.row reference. Maybe adding height: 100%; to the parent div might do the trick for what you want?
Try this:
div#name {
position:fixed;
right: 0px;
bottom: 200px;
}
I Solved it! The parent div that has position:relative actually goes really high up the monitor. So you need to set the the top style to 0px and play around with the top,bottom,right,left styles that come with position relative. So basically add (top: 0px) to your css styling.
Related
I need the div to be in the center of the page at all times whether user resizes webpage or not.
I have tried using:
margin: auto;
margin: 0 auto;
margin-left: auto; margin-right auto;
but neither of those three worked.
HTML:
<div id="grayinnerbackground">
</div>
CSS:
div#grayinnerbackground {
margin: auto;
width:1000px;
background-color: #D9D9D9;
height: 100%;
position: fixed;
z-index: -1;
}
Here is a fiddle for an example of what I'm talking about.
http://jsfiddle.net/ymvDJ/
Thanks.
If you do want the position to be fixed, add these rules and drop the usual margin trick:
left: 50%;
margin-left: -25px; // half the width of your element
See it here: http://jsfiddle.net/8DfnG/2/
You can use
position: fixed;
left: 50%;
width: 50px;
margin-left: -25px; /* width ÷ 2 */
Demo: http://jsfiddle.net/ymvDJ/3/
Use:
position: relative
If that still doesn't work you may need to add this as well:
display: block;
"position: fixed" means that no matter what it stays at a x and y coordinate.
You can try this
div#grayinnerbackground {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
width: 50px;
background-color: #D9D9D9;
height: 100%;
}
http://jsfiddle.net/g49Mb/
More about the working here: http://codepen.io/shshaw/full/gEiDt
This this HTML:
<div id="grayinnerbackground">
foo
</div>
CSS:
div#grayinnerbackground {
margin: auto;
width: 50px;
background-color: #ccc;
height: 100%;
}
I'm not entirely sure why it didn't work until I put text into the div, checking something now.
UPDATE
Sigh, ok, i'm tired. If the div is empty, and you have a height of 100%, it is going to be 100% the height of its parent, the <body> in this case. Since there is no other content, the <body> has a height of 0. Give the <div> an absolute height, and it will pop in:
div#grayinnerbackground {
margin: auto;
width: 50px;
background-color: #ccc;
height: 10px;
}
Remove position: fixed, change the width to 50px and make sure you have a 0 before auto in margin: auto.
Update:
To have the div be as high as the window, be sure to set the body and html to height: 100%; too:
body, html {
height: 100%:
}
Updated jsfiddle again
I have no idea how to title this properly, but here is my problem:
I have this layout:
<html>
<body>
<div id="content">this is my page</div>
<div id="button">magic button</div>
</body>
</html>
css:
#button {
position: fixed;
bottom: 20px;
background-color: #f00;
padding: 5px;
left: 50%;
margin-left: 250px;
}
html, body{
height: 100%;
}
#content {
margin: 0 auto;
width: 700px;
min-height: 100%;
background-color: #eee;
}
See fiddle here: http://jsfiddle.net/n6UPF/
My page works just as I want it, the button is exactly where I want it to be.
But if I change the text on my button, it is no longer positioned properly.
I would like to position it "fixed" relative to the right edge of my content area.
Can this be done in pure CSS?
If modifying the HTML is acceptable, you can use a wrapper:
<div id="button-wrapper">
<div id="button">magic button</div>
</div>
#button-wrapper {
bottom: 40px;
left: 50%;
margin-left: 350px;
position: fixed;
}
#button {
background-color: red;
padding: 5px;
position: absolute;
right: 10px;
white-space: nowrap;
}
http://dabblet.com/gist/3740941
No, it's not really pretty, but...
Do you mean...
#button
{
position: fixed;
right: 20px;
}
...or whatever distance you want on the right? Or something else?
I'm not sure if I fully understand your question correctly, but could you not just use the right property instead of left?
Example: http://jsfiddle.net/baKra/
Usually when I run into trouble with exact positioning, it's because I haven't specified the width of my positioned element. The browser will try to calculate it itself, and that can throw things off.
Is there any way you can post what it looks like when it's no longer positioned properly?
I am wondering if you are looking for the float:right property.
Can you look at http://jsfiddle.net/n6UPF/1/ and see if that is what you were looking for.
Try changing
#button {
position: fixed;
bottom: 20px;
background-color: #f00;
padding: 5px;
left: 50%;
margin-left: 250px;
}
to
#button {
position: fixed;
bottom: 20px;
background-color: #f00;
padding: 5px;
right:20px
}
I am currently working with images and backgrounds css positions. I have been struggling trying to get the same image appear beside(left/right) the the content area. I am trying to have the image position not be affected with pagee re size .
How can i get the same picture to appear beside the content area? EXAMPLE
This what I am aiming for:
Here's my stab at it. I used an absolutely positioned div positioned in the center to contain the images and then used position relative to get them to specific pixel positions to either side. The trick is that if you don't use relative positioning, they are on top of one another so you have to apply a top: equivalent to the height of the image to one of them to get it to shift to match.
HTML:
<div id="image_container">
<div id="img_r" class="outside_image">
<img />
</div>
<div id="img_l" class="outside_image">
<img />
</div>
</div>
CSS:
#image_container{
position: absolute;
top: 0px;
left: 50%;
width: 0px;
z-index: 900; /* not really required */
}
.outside_image img{
width: 200px;
height: 200px;
}
.outside_image {
position: relative;
}
#img_r{
float: right;
right: -725px;
top: 200px;
}
#img_l{
float: left;
left: -725px;
}
You could use a negative margin-left on #left2:
#left2 {
float: left;
width: 200px;
background: #DDD;
-moz-border-radius: 10px;
border-radius: 10px;
margin-right: 15px;
padding: 5px;
margin-left: -248px;
}
If you need it to stay in the same place you (even if you resize the page) you could use an absolute position:
#left2 {
position: absolute;
left: 20px;
top: 160px;
}
I use Chrome developer tools to try this stuff out btw. Here's a screenshot of your page with my code:
http://d.pr/i/wXQ2
So, I've seen tons of questions about this, but I would like a personal example. I'm rather new to programming, so I may be a little stupid...
Anyway, I have two <div>s, one with id bg and the other with class player.
This is what it looks like:
The red box is the player, and the large image is the bg.
I need the player to start in the center of the bg.
The bg is 640px X 640px.
This is the code I have so far in my CSS file:
#bg {
width: 640px;
height: 640px;
top: 0;
left: 0;
}
.player {
position:relative;
background-color:#FF0000;
width: 32px;
height: 32px;
top: 0px;
left: 0px;
}
Try changing your stylesheet to:
#bg {
width: 640px;
height: 640px;
top: 0;
left: 0;
position: relative;
}
.player {
position: absolute;
background-color: #FF0000;
width: 32px;
height: 32px;
top: 320px;
left: 320px;
z-index: 1;
}
And your HTML should look like this:
<div id="bg">
<!-- your bd code here -->
<div class="player"></div>
</div>
position: relative is relative to where the object would be placed normally. In your example, it would normally come below the first div, so that's where it will stay. (In other words position: relative used with a positioning of 0 won't move the objet anywhere.)
You could add top: -320px; left: 320px. That would position it it the space of the first div. But maxksbd19's answer is probably the better solution for your ultimate goal.
I try and avoid absolute positioning as it does not adapt to the container size and a change to the container requires you to go through your css and change all the absolute values.
I would do the following
CSS:
#bg {
overflow: auto; /* stops the .player from from moving #bg down */
width: 640px;
height: 640px;
background-color: blue;
text-align: center; /* center child div in IE */
}
.player {
background-color: White;
width: 32px;
height: 32px;
margin: 0 auto; /* center div in parent for non IE browsers */
margin-top: 304px; /* 50% from top minus div size */
}
HTML:
<div id="bg">
<div class="player"></div>
</div>
Now you only have to keep track of the top margin of the child container.
Hello
please have a look at my jsfiddle.
The content of the inner div-element is scrollable.
Each grey symbol has a margin-left. When I scroll the content the symbols shouldn't be fixed to the background.
It should be scrollable with the position.
Have you got an idea how I achieve that effect?
Keep in mind that positioning is relative to the closest positioned parent.
When you are assigning an absolute position to the "symb" class you are positioning them relative to the document rather than their parent.
Simply adding "position: relative;" to your div.tl element will set the parent div as positioned without moving it and the "symb" elements will act the way I think you expect them to.
Your new .tl definition should be:
.tl {
width: 500x;
height: 80px;
background-color:grey;
position: relative;
}
Furthermore, I'm assuming that you have some need to position these absolutely. You could achieve similar results by simply removing the "position: absolute" portion of your .symb definition.
You are setting a margin, not a position, so you don't need to bother with positioning at all in your example case.
I am not sure what do you need. You had an error in your last "symb" - you missed 'p' in 'px'. Try this?
<div class ="outer">
<div class="inner">
<div class="tl">
<div class="box" style="width: 315px;">
<div class="symb" style="margin-left: 0px;"></div>
<div class="symb" style="margin-left: 15px;"></div>
<div class="symb" style="margin-left: 20px;"></div>
</div>
</div>
</div>
</div>
.outer {
width:50%;
}
.inner {
overflow-x:scroll;
}
.tl {
width: 500x;
height: 80px;
background-color:grey;
}
.box {
float: left;
height: 61px;
}
.box .symb {
float:left;
width: 5px;
height: 5px;
background-color: #cccccc;
z-index: 999;
margin-top: 10px;
}
Use
position: relative;
Not
position: absolute;
Just try with the following CSS:
.box .symb {
position: relative;
float: left;
position: inline-block;
width: 5px;
height: 5px;
background-color: #cccccc;
z-index: 999;
margin-top: 10px;
}