CSS positioning isn't moving the image? - html

So I'm in the process of making a drag and drop browser 'dress up' type game. However, for some reason, I can't seem to position my images - either the draggable image or the doll base. I am able to drag and drop the draggable image, but I can't change their initial positions.
I've changed their position types, tried using top/bottom/left/right, margin, and even padding to move the images to where I want them, but they absolutely will not move!
Here's the HTML/CSS I'm using:
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<style>
<!--Page Styling-->
html, body{
background-color:#5C5C5C;
height: 100%;
width: 100%;
overflow: hidden;
}
#banner{
background: rgb(143,250,138); /* Old browsers */
background: -moz-linear-gradient(top, rgba(143,250,138,1) 0%, rgba(127,239,127,1) 10%, rgba(109,223,115,1) 25%, rgba(107,229,115,1) 37%, rgba(106,236,114,1) 50%, rgba(74,226,82,1) 51%, rgba(136,242,122,1) 83%, rgba(175,252,142,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(143,250,138,1)), color-stop(10%,rgba(127,239,127,1)), color-stop(25%,rgba(109,223,115,1)), color-stop(37%,rgba(107,229,115,1)), color-stop(50%,rgba(106,236,114,1)), color-stop(51%,rgba(74,226,82,1)), color-stop(83%,rgba(136,242,122,1)), color-stop(100%,rgba(175,252,142,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(143,250,138,1) 0%,rgba(127,239,127,1) 10%,rgba(109,223,115,1) 25%,rgba(107,229,115,1) 37%,rgba(106,236,114,1) 50%,rgba(74,226,82,1) 51%,rgba(136,242,122,1) 83%,rgba(175,252,142,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(143,250,138,1) 0%,rgba(127,239,127,1) 10%,rgba(109,223,115,1) 25%,rgba(107,229,115,1) 37%,rgba(106,236,114,1) 50%,rgba(74,226,82,1) 51%,rgba(136,242,122,1) 83%,rgba(175,252,142,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(143,250,138,1) 0%,rgba(127,239,127,1) 10%,rgba(109,223,115,1) 25%,rgba(107,229,115,1) 37%,rgba(106,236,114,1) 50%,rgba(74,226,82,1) 51%,rgba(136,242,122,1) 83%,rgba(175,252,142,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(143,250,138,1) 0%,rgba(127,239,127,1) 10%,rgba(109,223,115,1) 25%,rgba(107,229,115,1) 37%,rgba(106,236,114,1) 50%,rgba(74,226,82,1) 51%,rgba(136,242,122,1) 83%,rgba(175,252,142,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8ffa8a', endColorstr='#affc8e',GradientType=0 ); /* IE6-9 */
font-size: 20px;
font-family: 'Arial Black', sans-serif;
width: 100%;
margin-left: -10px;
text-align: center;
z-index: 99999;
position: fixed;
}
#holder{
position: absolute;
height: 800px;
width: 900px;
background-color: #838B8B;
margin-left: -10px;
margin-top: -300px;
z-index: -1;
}
<!--Bodies-->
#body1 {
position: absolute;
right: 0;
height: auto;
width: 200px;
z-index: 1;
}
<!--Parts-->
#breath{
position: relative;
left: 10px;
}
</style>
<!--Draggable Scripts-->
<script>
$(function() {
$( "#breath" ).draggable();
});
</script>
<!--End Draggable Scripts-->
</head>
<body>
<div id="banner">Homestuck Character Editor</div>
<div id="body1"><img src="http://i.imgur.com/aO3GWBO.png"draggable="false"/></div>
<div id="holder"></div>
<div id="breath">
<img src="http://i.imgur.com/iAmOFlH.png"/>
</div>
</body>
</html>


You positioned the div on the right, but the image is still on the left. Since div elements are blocks, they fill 100% of their parent. In this case, the parent is 100%. You can get the image on the right side of the screen by selecting it, and shifting the image itself. I used the following:
#body1 img {
position:absolute;
right:0;
}
The fiddle.

Related

feather div edges over background images

So I have an image slider behind a div with scrolling text content. I want the edges of the scrolling text div to feather into whatever is displaying behind it, so the text appears/disappears nicely when it scrolls in/out.
I tried adding an inset box shadow and linear gradients, but when the scrolling text has a transparent background you can see the shading around the text, fading into black, rather than transparent.
This is what I have:
This is what I want:
How do I do it with CSS?
You shouldn't need my code as it's not a bug, but here's some anyway.
<style>
#slider, #text, #text_overlay {
position:absolute;
width: 100%;
}
#slider {
height: 350px;
}
#text, #text_overlay {
top: 200px;
height: 100px;
}
#text {
z-index: 10;
}
#text_overlay {
z-index: 20;
background-image: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 3%, rgba(0,0,0,0) 97%, rgba(0,0,0,1) 100%);
}
</style>
<div id="slider">
<img src='https://www.w3schools.com/howto/img_fjords.jpg' />
</div>
<div id="text">Some text etc blah blah blah</div>
<div id="text_overlay"></div>

Solved this issue using -webkit-mask-image and a gradient as the mask on the text div. No need for the text_overlay div anymore, and works with changing backgrounds :)
#text {
-webkit-mask-image: linear-gradient(
to right, /* gradient direction */
rgba(0,0,0,0) 0%, /* transparent left 3% */
rgba(0,0,0,1) 3%, /* visible in the middle start */
rgba(0,0,0,1) 97%, /* visible in the middle end */
rgba(0,0,0,0) 100% /* transparent right 3% */
);
}
Full code:
<style>
#container {
position:relative;
height: 350px;
width: 100%;
}
#slider, #text {
position:absolute;
width: 100%;
}
#slider {
height: 100%;
}
#text {
top: 200px;
height: 100px;
z-index: 10;
-webkit-mask-image: linear-gradient(
to right, /* gradient direction */
rgba(0,0,0,0) 0%, /* transparent left 3% */
rgba(0,0,0,1) 3%, /* visible in the middle start */
rgba(0,0,0,1) 97%, /* visible in the middle end */
rgba(0,0,0,0) 100% /* transparent right 3% */
);
}
</style>
<div id="container">
<div id="slider">
<img src='https://www.w3schools.com/howto/img_fjords.jpg' />
</div>
<div id="text">Some text etc blah blah blah</div>
</div>

CSS: Two-color background

This might not be the best title, but I am having a hard time trying to find the appropriate one. Basically, what I need is to have a two-color background image, with the breakpoint set to a specific position.
Here's what I have right now:
Which can be tested in this jsfiddle.
And this is what I am trying to achieve:
One thing though, is that the slant in this bar needs to be aligned with the logo, as shown below:
If there was no slant, this might be easier, but I have not found a way to achieve the desired behavior. What I tried doing was creating a div with a background color, and inside that div, a second one that would be placed on top containing the image.
<div class="line-container">
<div class="line">
</div>
</div>
.line-container{
width: 100%;
background-repeat: repeat-x;
background-color: #009b3a;
}
.line{
background-image: url('http://s8.postimg.org/fc0umdjut/image.png');
display: block;
width: 50m;
margin: 0 auto;
height: 10px;
}
But position and color to the sides are wrong, as shown in this jsfiddle:
Any advise?

Seems like a job for a gradient.
background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(45deg, #1e5799 0%, #1e5799 48%, #2989d8 48%, #7db9e8 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(45deg, #1e5799 0%,#1e5799 48%,#2989d8 48%,#7db9e8 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(45deg, #1e5799 0%,#1e5799 48%,#2989d8 48%,#7db9e8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
Simply add this to your css class and change the colors within accordingly.

Even though the accepted answer is great, I wanted to share an alternative to using gradients.
Here's an option using the ::before pseudo-class with a CSS border trick to get the angled portion. You can adjust the "angle" by tweaking the border widths. The width property on the pseudo-element can be adjusted, as needed.
div {
background: green;
height: 10px;
position: relative;
}
div:before {
background: darkgreen;
border: solid transparent 0;
border-bottom-width: 10px;
border-right-color: green;
border-right-width: 10px;
box-sizing: border-box;
content: '';
height: 10px;
position: absolute;
width: 5em;
}
<div></div>

Getting gradient background color to due full cycle on the outside of a wrapper

I have a page on my site that has a gray background color that I am trying to add gradient to it in a different way than just a left to right. My page has an outer div that takes up 100% of the page's width. I then have an inner div that takes up 80% of the page's with, but auto aligned. I was wondering how, if I can, do a full cycle of my gradient within each side (left & right) of the outer div, the 10% part that shows before the inner div starts.
So say an A equals 10%, and everytime I put two colors together, that is the gradient taking place within that 10%. I want to do this...
#181818, #282828 AAAAAAAA #282828, #181818
How can I do this?
HTML
<div class="graypage">
<div class="homeimg">
gfdsgsg
</div>
</div>
CSS
.graypage, .whitepage { margin: 0 auto; }
/*------Page Wraps--------*/
.graypage {
width: 100%;
left: 0;
right: 0;
min-height: 100%;
background: -webkit-linear-gradient(left, #282828, #181818); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, #282828, #181818); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, #282828, #181818); /* For Firefox 3.6 to 15 */
background: linear-gradient(to right, #282828, #181818); /* Standard syntax */
}
.homeimg {
background-image: url("/images/bright_lights_small.jpg");
width: 80%;
background-size: cover;
background-position: center;
height: 100%;
position: absolute;
margin-right: 10%;
margin-left: 10%;
}

As I understand it, you'd like two bars - one on the left of the outerDiv and the other on the right. Each of these bars you'd like to be 10% of the page width. You'd also like each bar to cycle through the colours #181818, #282828, #aaaaaa, #282828, #181818.
I'd just use a linear-gradient with 12 colour-stops. Something like this:
#outerDiv
{
background: linear-gradient(to right,
#181818 0%,#282828 2%,#aaaaaa 4%,#aaaaaa 6%,#282828 8%,#181818 10%,
#181818 90%,#282828 92%,#aaaaaa 94%,#aaaaaa 96%,#282828 98%,#181818 100%); /* W3C */
width: 100%;
}
Credit: http://www.colorzilla.com/gradient-editor/
Here it's applied to the outer div and a solid colour is applied to the (80% as wide) inner div.
EDIT: Here's the (now updated) html and css used.
<style>
body
{
margin: 0;
padding: 0;
}
#outerDiv
{
background: linear-gradient(to right,
#181818 0%,#282828 10%,
#282828 90%,#181818 100%); /* W3C */
width: 100%;
}
#innerDiv
{
width: 80%;
margin: auto;
background-color: #dddddd;
}
</style>
</head>
<body>
<div id='outerDiv'>
<div id='innerDiv'>
<button id='goBtn'>Change the text</button>
<div class="menu-wrapper">
<ul>
<li>WORD1</li>
<li>WORD2</li>
<li>WORD3</li>
<li>WORD4</li>
</ul>
</div>
</div>
</div>
</body>
This code produces the following result:

Bacically, you have 2 posibilities here. You can set a repeating gradient
div {
width: 500px;
height: 100px;
background: repeating-linear-gradient(to right, yellow 0%, green 10%);
}
<div></div>
And you can play with the background-size
div {
width: 500px;
height: 100px;
background: linear-gradient(to right, yellow, green);
background-size: 10% 100%;
}
<div></div>

How to achieve background left and right gradient fades in layout only when window size exceeds 1100px?

This has been eating away at my for the past day. What i want to achieve is when the users monitor is viewed at 1100px or less, it only shows a solid background color. When it exceeds that width, a left and right gradient aligned always at the left and right furthest appear, but are not ever shown if the screen size does not exceed 1100px.
Here is an example of what i am trying to do:
I tried setting up 3 divs, but that doesnt seem to work as show in the JSFiddle below. Any tips or suggestions?
JSFiddle
<div></div>

Try adding a gradient to the .left and .right divs and hide them when the screen width is below 1100px.
As an example:
Gradient from dark -> light
.left {
min-width: 300px;
height: 100%;
background: #000000;
float: left;
background: #000000;
/* Old browsers */
background: -moz-linear-gradient(left, #000000 0%, #ffffff 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%, #000000), color-stop(100%, #ffffff));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #000000 0%, #ffffff 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #000000 0%, #ffffff 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(left, #000000 0%, #ffffff 100%);
/* IE10+ */
background: linear-gradient(to right, #000000 0%, #ffffff 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff', GradientType=1);
/* IE6-9 */
}
Grandient from light -> dark
.right {
width: 300px;
height: 100%;
background: #ffffff;
/* Old browsers */
background: -moz-linear-gradient(left, #ffffff 0%, #000000 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%, #ffffff), color-stop(100%, #000000));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #ffffff 0%, #000000 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #ffffff 0%, #000000 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(left, #ffffff 0%, #000000 100%);
/* IE10+ */
background: linear-gradient(to right, #ffffff 0%, #000000 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#000000', GradientType=1);
/* IE6-9 */
background-color: #000;
float: right;
}
(The above gradients are generated from http://www.colorzilla.com/gradient-editor/)
Then an #media query to hide them below 1100px
#media (max-width: 1100px) {
.left, .right {
display: none;
}
}
DEMO
Hope this helps!

There are so many methods to achieve what you're trying to do. I'll post the most obvious and leave the intense answers for those who understand your question better.
Your first bet is it to center a div layer using:
.myDiv {
margin: 0 auto;
background-image: url(assets/mybg.jpg);
background-position: top center;
}
Basically, you'll take your background image (with that gradient) and center it, and then center your div layer.
Your background should be made in Photoshop/GIMP/Paint.net/Whateverprogram and the solid color should be 1100px wide. Then the gradient should span the remaining area outside the solid.
My next option for you is to actually do this in jquery. We'll design it so that the div has the gradient until the viewport 1100px or less and it'll transition that background image to a different background image:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="jquery-2.1.1.js"></script>
<script>
$(document).ready(function(){
function widthCalculator(wrapper, changeWidth){
var wrapperWidth = $(wrapper).width();
if (wrapperWidth <= changeWidth) {
$(wrapper).css("background-image", "url(Assets/mybackground2.jpg)");
} else {
$(wrapper).css("background-image", "url(Assets/mybackground1.jpg)");
}
}
widthCalculator('#wrapper', 1100);
$(window).resize(function(){ widthCalculator('#wrapper', 1100); });
});
</script>
<style>
body {
background-color:red;
margin: 0 auto;
width: 100%;
height: 5000px;
}
#wrapper {
background-color:white;
width: 100%;
height: 100vh;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="wrapper">
</div>
</body>
</html>
The jquery method isn't the best solution, because upon resize, it loads a new background. If you're desperate, and looking for a quick fix, this will work for you.

Can I have a 1000px-wide <div> contain a 1300px-wide <div>?

For that matter, can I place any wide div in a narrower div? What I'm trying to do can be explained by looking at this page.
What I'm trying to do is have the div with the 1300px-wide SVG graphic – whose id is "wide2" – overlap over the div called "center." The problem is that, when I just put wide2 into center, it aligns left. Both the classes of div have margin-left: auto and margin-right: auto CSS properties, which work, assuming the div contained in "center" is narrower than "center."
My solution so far has been closing "center", then immediately opening "wide2", and then, immediately after closing that one, re-opening "center." It's not a great system, especially given the shape of the SVG in question.
Can anyone help me out?
(per request) The CSS of the classes in question.
div.center
{
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 0;
padding-bottom: 0;
padding-top: 0;
height: 100%;
width: 1000px;
background: #bebebe; /* Old browsers /
background: -moz-linear-gradient(left, #bebebe 0%, #ffffff 12%, #ffffff 88%, #bebebe 100%); / FF3.6+ /
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#bebebe), color-stop(12%,#ffffff), color-stop(88%,#ffffff), color-stop(100%,#bebebe)); / Chrome,Safari4+ /
background: -webkit-linear-gradient(left, #bebebe 0%,#ffffff 12%,#ffffff 88%,#bebebe 100%); / Chrome10+,Safari5.1+ /
background: -o-linear-gradient(left, #bebebe 0%,#ffffff 12%,#ffffff 88%,#bebebe 100%); / Opera 11.10+ /
background: -ms-linear-gradient(left, #bebebe 0%,#ffffff 12%,#ffffff 88%,#bebebe 100%); / IE10+ /
background: linear-gradient(left, #bebebe 0%,#ffffff 12%,#ffffff 88%,#bebebe 100%); / W3C /
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bebebe', endColorstr='#bebebe',GradientType=1 ); / IE6-9 */
border-bottom: 0;
border-top: 0;
margin-top: 0;
margin-bottom: 0;
padding-bottom: 0;
padding-top: 0;
}
div.wide2
{
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 0;
padding-bottom: 0;
padding-top: 0;
height: 180;
width: 1300px;
border-bottom: 0;
border-top: 0;
margin-top: 0;
margin-bottom: 0;
padding-bottom: 0;
padding-top: 0;
}

Here is a CSS solution.
Add the following lines into your .wide2 css class:
margin-left: 50%;
transform: translate(-50%);
What's happening is you first move the wider div to the center of the narrower div, then translate the inner div left.
You can see it in action here: https://jsfiddle.net/89f31era/

The question is very unclear. I presume you want to
a div which is narrow, lets call it div1, width - 500px
a div which is wider, lets call it div2, width - 1000px
place div2 inside div1
Scroll div1 horizontally so as to see center div2 on div1.
You may use the ScrollLeft DOM property to perform scrolling. Ex:
<div style="background-color:#093; width:200px; overflow:scroll" id="sc1">
<div style="background-color:#033; width:400px;">
</div>
</div>
<script type="text/javascript">
document.getElementById("sc1").scrollLeft="30";
</script>