I'm trying to make a puzzle out of a background image with numbered pieces. The pieces will eventually be movable with javascript. Right now, I'm stuck simply trying to position the pieces of this image. The html has a div with id called puzzlearea, and I have appended children with javascript, which I know works because it displays the new div pieces and their numbers. The CSS refuses to move the pieces relative to this background, and my two test pieces are stuck in the top left corner, seemingly ignoring my background-position values. Here is the CSS:
body {
text-align: center;
font-family: cursive;
font-size: 14pt;
}
#puzzlearea {
width: 400px;
height: 400px;
margin: auto;
position: relative;
background-image: url("planck-image.png");
}
.tile {
font-size: 40pt;
color: red;
line-height: 70pt;
width: 90px;
height: 90px;
border: 5px solid black;
background-position: -200px -200px;
position: fixed;
}
Update: Screenshot.
Would you have any ideas as to why the positioning is not occurring?
You need position: absolute on .tilein order to be able to place them with the top/bottom/left/right parameters (and you need those too).
fixed position refers to the viewport, not the parent element.
Related
I have replaced my sites logo to another image, however its not in the correct position within the header I have made. I have tried to move the image with padding and/or margin to no resolve. How do I move the image to the left side of the header.
Here is an overlook of the site:
The following styling has been applied to the image:
position: absolute;
height: 120px;
width: 100px;
margin: 0px 200px 0px 0px;
border: 0;
display: block;
color: -webkit-link;
cursor: auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
The original HTML has been edited through javascript to the image you can see above, I can only use javscript therefore. This means I would like to avoid JQuery and cant use CSS.
Because of "position: absolute;" you need to use something like "left: 50px; top: 10px;" to move it around.
I'm trying to figure out how to use Position: relative in order to keep an object (let's call it text) in the same place on the screen regardless of screen size.
When I use Position: relative, and set "left" to 30% for example... It's 30% of the screen. I'm trying to figure out how to put text on top of an image and set the text to be 30% left within the image. I need this to work regardless of the screen size. So far I have been unable.
Could someone explain to me how Position Relative and Position Absolute work in these kinds of situations? Or how this would best be handled?
Thanks!
Here's my JsFiddle, and here's the snippet
.center {
display: table;
margin: 0 auto;
}
body {
background-color: #27ae60;
}
.image {
position: relative;
width: 100%;
/* for IE 6 */
}
.element {
position: absolute;
top: 100px;
left: 30%;
width: 100%;
font-size: 45px;
font-family: 'Just Me Again Down Here', cursive;
}
.input {
/*color: blue;*/
outline: none;
border: none;
background-color: transparent;
position: absolute;
top: 220px;
left: 18%;
width: 480px;
height: 475px;
overflow: hidden;
font-size: 30px;
font-family: 'Just Me Again Down Here', cursive;
}
<img id='image' class='center' src='https://s13.postimg.org/li2l28a0n/White_Board.gif'>
<h1 class='element'>This is a header </h1>
<textarea id='text1' class='input' placeholder="Write your answer here."></textarea>
First we setup a div with a .desk class, desk will receive the desired background image, a fixed width and height, and it will margin 0 auto since the desk doesn't have a container.
The .header class doesn't need to be absolute, we use it within the desk which is already positioned relatively. We give it a little padding so it will fit in the desk image.
The .answer class is applied to the textarea element we give it a width 100%; since we use it within the .desk which already has pre-defined width, that means .answer will equip all of possible width within the desk.
A great tip is always think simple in CSS, understand the usage of position: absolute, when it's really necessary. By the way if you're unfamiliar with rem sizing, I suggest you take a look here: https://www.sitepoint.com/understanding-and-using-rem-units-in-css/
Good luck!
You can get the desired effect in a much simpler code.. have a look:
body {
background-color: #27ae60;
}
.desk {
position: relative;
background-image: url(https://s13.postimg.org/li2l28a0n/White_Board.gif);
width:560px;
height:839px;
margin: 0 auto;
}
.header {
padding: .5rem 0 0 2rem;
font-size: 2.5rem;
font-family: 'Just Me Again Down Here', cursive;
}
.answer {
width: 100%;
margin-left: 2rem;
outline: none;
border: none;
background-color: transparent;
overflow: hidden;
resize: none;
font-size: 2rem;
font-family: 'Just Me Again Down Here', cursive;
}
Fiddle: https://jsfiddle.net/y3h1ogms/5/
When set position: relative on an element, it will be positioned relative to the nearest positioned ancestor, where "positioned" according to MDN means:
A positioned element is an element whose computed position property is either relative, absolute, fixed or sticky.
In your example, the header is not a descendant of the image, so there's no way to position it relative to the image. What you might do instead is convert the <img> to a <div> set the background-image of your div to be the image URL. You would also need to explicitly set the width and height of the div.
In the very middle of the screen I have a piece of text, along with an image. When the text gets longer, the image is forced to move the right, which is what its supposed to do. But what I want it to do, is keep the image in the same spot, and make the text shift over to the left instead.
(I will also be adding more names so I need this fix to be universal, not like manually changing it for each piece of text.)
(It might be hard to see, but its noticeable, and yes I'm using a template...)
My site - Updated link
I tried messing with the HTML to get the margin-right once the page is fully loaded, then when it updates the text change the margin-right to that, but it did absolutely nothing.
Any help is appreciated, I have no idea how to fix this issue.
What about this?
#banner .content {
display: inline-block;
margin-right: 1%;
max-width: 95%;
padding: 6em;
position: relative;
text-align: right;
vertical-align: middle;
z-index: 1;
float: left;
width: 66%;
}
You can solve this issue by defining the width property for the containing content layer, and then floating the image and the text to the right.
For example, if you want the right-hand side of the text to be aligned to the center of the page your image + it's left-hand margin needs to be half the width of the containing #banner .content layer.
With your image being 18rem square with a left-margin of 3rem your containing #banner .content div needs to be 42rem wide ((18 + 3) * 2).
#banner .content {
position: relative;
width: 42rem;
height: 18rem;
text-align: right;
vertical-align: middle;
/* center div.content */
margin: 0 auto;
clear: both;
display: block;
z-index: 1;
}
#banner .content .image {
width: 18em;
height: 18em;
border-radius: 100%;
vertical-align: middle;
margin-left: 3rem;
display: inline-block;
}
Content inside .content slides to the right with the span.image locked to its right-hand edge. As long as the text-container's width (header) does not exceed half the width of `.content' it will remain right-aligned 3rem from images left-hand side. Avoid using css-padding for positioning control and use css-margin properties instead.
I'm working on a hobby project of mine -- it's something of a glorified RSS feed reader/grabber. I've been able to get most things working, but for some reason I cannot get the text in a certain span to be drawn above an animated div.
When a feed is grabbed, certain operations are performed before displaying the results. During this time, I keep track of the progress and display them in an animated "progress bar" div. All of the sub-operations each have their own progress bars, and they all work correctly (text on top of bar), but the final progress bar (overall progress) does not layer the text correctly.
I created a simple mock-up in JSFiddle to give an example of my problem.
$('#progress-total-box').bind('click', draw);
function draw() {
if (($('#progress-totalbar-fill').css('width')) == "0px") {
$('#progress-total-box').unbind();
$('#progress-totalbar-fill').animate({width: '100%'}, 2000, function() {
var description = document.createElement('span');
$(description).attr('id', '#progress-total-text');
$(description).html('100%');
$('#progress-totalbar-empty').append(description);
$('#progress-total-box').bind('click', draw);
});
}
else {
$('#progress-total-box').unbind();
$('#progress-totalbar-fill').animate({width: 0}, 2000, function() {
document.getElementById('progress-totalbar-empty').innerHTML = '';
$('#progress-total-box').bind('click', draw);
});
}
}
The style/position/etc is purely for sake of demonstration. In this example, when the grey loading bar div is clicked, it animates its width from 0% to 100% (or vice-versa). When the animation is complete, a new child span is created and appended to the 'empty bar' background div, wherein the total percentage is displayed (100%, in this case).
This span element is intentionally removed when the bar is reset.
Do you guys have any ideas as to what's going wrong, and how I can fix it?
I have encountered this error is present in both Chrome and Firefox.
Thanks in advance!
There are multiple problems here.
First off, you need to remove the # from this line
$(description).attr('id', 'progress-total-text');
The new span, was never getting the css it was supposed.
Second, you need to either change your markup or your css.
In this case, I updated the CSS, but the id name don't make sense anymore
body {
width: 100%;
height: 125px;
margin: 0;
}
#progress-category-box {
position: relative;
width: 100%;
height: 100%;
font-size: 0;
background-color: red;
}
#progress-total-box {
position: relative;
width: 100%;
height: 40px;
top: 32.5%;
float: right;
text-align: center;
background-color: #515A5C;
}
#progress-totalbar-empty {
position: relative;
width: 100%;
height: 100%;
border: 1px solid #97b0b1;
background-color: transparent;
z-index: 3;
}
#progress-totalbar-fill {
position: relative;
width: 0%;
height: 100%;
top: -42px;
border-left: 1px solid #97b0b1;
border-top: 1px solid #97b0b1;
border-bottom: 1px solid #97b0b1;
background-color: #00FF00;
z-index: 2;
}
#progress-total-text {
position: relative;
color: black;
top: 30%;
font-size: 15px;
z-index: 3;
}
Thing is, you were showing the animated div over the text.
So I put the text over the animation and put a transparent background behind it.
I applied the grey background to the container instead. I also changed it's height and applied height:100% to it's children.
Here's a full fiddle
I have a long rectangle shape container with a radius.
And I also have 3 child divs, in the container.
Here it is:
As you can see in the picture above, the first child container (white) and the third (red) have also been set a radius to match to containers radius.
Now, the child containers width will be dynamic (changeable by the user). So the user will be able to change the widths of all three child containers to meet their needs.
But take a look at what happens when I give the third container a width of 2%:
the same thing happens when i do the same to the first child (it overlaps the containers rounded borders).
Child container 1 (white) is floating to the left and child container 3 (red) is floating to the right.
I need a way to stop the overlapping from happening.
I am able to use JS and JQuery incase your wondering.
Thanks
EDIT:
CSS:
.parent {
border: 1px solid #5B5B5B;
height: 30px;
width: 80%;
right: 0%;
position: relative;
margin-right: auto;
margin-left: auto;
<? set_radius("25px",true);
set_box_shadow("1px","1px","#F8F8F8");?>
overflow: hidden;
z-index: 3;
}
.child_class {
display: inline-block;
position: relative;
width: auto;
height: 100%;
margin: 0px;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #5C5C5C;
box-sizing: border-box;
}
#child1 {
width: 33.33;
background-repeat: repeat-x;
background-position: center center;
<? set_radius("25px",false,false,true,false,true);?>
float: left;
background-color: #fff;
}
#child2 {
width: 33.33;
background-repeat: repeat-x;
background-position: center center;
background-color: #0CF;
}
#child3 {
<? set_radius("25px",false,true,false,true,false);?>
background-repeat: repeat-x;
background-position: center center;
width: 33.33;
float: right;
background-color: #F00;
}
HTML:
<div class="parent">
<div class="child_calss" id="child1"></div><div class="child_calss" id="child2"></div><div class="child_calss" id="child3"></div></div>
In your CSS:
parent{
overflow: hidden;
}
Then you won't have to bother with matching the border-radius on the children, either.
Edit
I've created this jsfiddle to demonstrate:
Not needing border-radius on the children
overflow: hidden rounds the children when they overlap
Unnecessary background- properties on the children are removed
Expected behavior at small percentages
Update
Another note on this:
If you want the CSS/HTML to perform logic for you (not drop the last element out of the bar), you have a clear misunderstanding of what CSS and HTML do.
I've updated the jsfiddle to provide a sort of patch-fix to that issue. The third child is positioned absolutely at the far right, so that it will always stay in the bar.
Update
Finally, here's the bug in Webkit that doesn't correctly clip the background. It appears there's nothing you can do right now except possibly something like this:
<div class="hasBorder hasBorderRadius">
<div class="hasBorderRadius hasHiddenOverflow">
<div class="containsContent">
</div>
</div>
</div>
have you tried giving them a z-index so they have a stack order? also what about an overflow hidden on the parent?