I would like to make the blue element sit halfway up the green circle and behind it. How can I do that? Also, why is there a random marginal-space between the green circle and the blue element?
#profile-circle {
margin-right: auto; margin-left: auto;
height: 164px; width: 164px;
border-radius: 84px 84px 84px 84px;
}
#main-container {
margin-right: auto; margin-left: auto;
height: 400px; width: 450px;
}
http://jsfiddle.net/LqJ79/
position: relative will help you here. It allows you to use z-index to put the circle over the box, and also you can use top which will move the box relative to its current position. The problem with position: absolute is that it takes the element out of the flow, which is not what you need here I think.
#profile-circle {
position: relative;
z-index: 100;
}
#main-container {
position: relative;
z-index: 50;
top: -100px;
}
See the demo
Use attributes "position: absolute;" in the second box, I updated js fiddle CSS with the following:
#main-container {
margin-right: auto;
margin-left: auto;
height: 400px;
width: 450px;
background-color: blue;
position: absolute;
top: 80px;
}
The easiest way to move the blue element up is to set a negative top margin:
margin-top: -82px;
However, with your current markup, the blue element will sit on top.
You can either put the green element below the blue one in your HTML, then use CSS to slide it up, or you can:
use position: relative; on both elements
set a z-index on the blue and green elements to determine which appears on top (give the green element a higher number so it appears on top)
set top: -82px; on the blue element to slide it up under the green one
The space between them is due to your margins:
margin-top: 15px;
margin-bottom: 5px;
you can make the position: fixed;
top:10px;
left: 10px;
z-index: 1;
and what not in the css to move them around. like this:
http://jsfiddle.net/LqJ79/
The 'magical' space between the two is due to the margin in the div user-info. I changed the CSS to the following:
#user-info {
height: auto;
width: 380px;
margin-right: auto;
margin-left: auto;
}
This will removed the space.
Related
I want to make a message box at the lower left corner of the browser window. I want the div to remain stuck to the lower left corner. So if I make the browser smaller it will not disappear. Here is the jsfiddle I am working with. But it's not working. How can it be done in css? Here is my css code:
#lowerleft
{
margin-bottom: 1px;
margin-left : 1px;
width: 200px;
height: 200px;
background-color: red;
color: green;
}
Take a look at position; in this case position: fixed; bottom: 0;
https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
#lowerleft
{
margin-bottom: 1px;
margin-left : 1px;
width: 200px;
height: 200px;
background-color: red;
color: green;
position: fixed;
bottom: 0;
}
<div id="lowerleft">
I am stuck to lower left border of browser. And I am stuck at the top of lower boundary of te browser.
</diV>
#lowerleft
{
position:fixed;
bottom:0;
left:0;
margin-bottom: 1px;
margin-left : 1px;
width: 200px;
height: 200px;
background-color: red;
color: green;
}
Jsfiddle Demo
To your css add this:
position: absolute;
bottom: 0px;
left: 0px;
JSFiddle
Use absolute positioning (syntax example below):
#lowerleft {
position: absolute;
left: 0; bottom: 0;
}
What you are currently doing is modifying the margin of the element. This only has an effect on the elements surrounding the subject.
Using absolute positioning places the subject div on top of everything else, having no effect on surrounding elements.
Find out about absolute positioning from the w3Schools site here.
My Fiddle
http://jsfiddle.net/yjw46/2/
My Goal
I have this beautiful wheel of colors as a PNG. (I also have it as an SVG). When one of the colors is clicked, I want the WHOLE circle to change to that color. For example, if red is clicked, I want the whole wheel to turn red instead of colorful.
How I Intended to do it
I wanted to have a transparent (in the Fiddle it's semi-transparent, for debugging purposes) div in the shape of a circle (using border-radius) that will be DIRECTLY ON my color-wheel-image. When a color is pressed, I planned for the div to stop being tranparent, and (in a beautiful transition) turn to that color, making it look like the whole wheel has changed color.
Problem
I cannot get the div to cover the image.
So
I'd be glad to hear either why my technique didn't work, or a better technique, if you have one.
You was very close, simply chanage position: relative; to position: absolute; (on the div you want to have over the image) to fix the problem.
Now remember we need to have the parent as position: relative; or the absolute positioned div will not sit in the parent. You have already set this so its good to go.
Find more on position: absolute; here.
Demo here
#circleCover {
width: 300px;
height: 300px;
position: absolute;
top: 0px; left: 0px;
z-index: 2;
border-radius: 150px;
background-color: rgba(0, 0, 0, 0.2);
}
Here is a little demo to show what will happen without the relative position being set on the parent with the child having absolute.
Demo Without Relative
So you can see that the child is not staying within the parent.
And here is the parent with relative position.
Demo With Relative
As here the child does stay within the parent. This should help you understand why that is needed for the task you are trying to accomplish. Any questions please do just leave a comment and I will get back to you.
<div id="circleWrap">
<img src="http://y.emuze.co/circle.png" id="colorCircle"/>
<div id="circleCover" >
</div>
</div>
I have kept Your div one above the other
#colorCircle {
position: relative;
top: 0px; left: 0px;
z-index: 1;
width: 300px;
height: 300px;
top:0px;
}
#circleWrap {
position: relative;
top: 0px;
width: 300px;
height: 300px;
margin: 0 auto;
}
#circleCover {
width: 300px;
height: 300px;
position: relative;
top: -302px; left: 0px;
z-index: 2;
border-radius: 150px;
background-color: rgba(0, 0, 0, 0.2);
}
Here it is in action: http://jsfiddle.net/yjw46/7/
Change your CSS slightly.
#circleCover {
top:-304px;
}
Fiddle
Just add position:absolute in #colorCircle
#colorCircle {
position: relative;
top: 0px; left: 0px;
z-index: 1;
width: 300px;
height: 300px;
position:absolute;
}
I am trying to use absolute positioning to position a div containing a blue square. For some reason, I am unable to get it where i want it to go.
JSFIDDLE: http://jsfiddle.net/qkF3Z/
My Code:
#share-area-arrow {
position: absolute;
height: 10px;
width: 10px;
background-color: blue;
}
How it should look:
What could I be doing wrong?
There are 2 pieces. Position absolute will use the coordinate system of the closest relatively positioned parent. So you need to add position relative to the parent:
#share-something {
margin-right: auto;
margin-left: auto;
margin-bottom: 40px;
height: auto;
width: 540px;
overflow: auto;
position:relative;
}
and then position the arrow:
#share-area-arrow {
position: absolute;
top:10px;
left:70px;
height: 10px;
width: 10px;
background-color: blue;
}
http://jsfiddle.net/qkF3Z/6/
A really great explanation between the different position types can be found here: http://alistapart.com/article/css-positioning-101. The gist is when you want the element to maintain it's space within the dom, but appear in another location, use position relative. If you want to completely move the element use position absolute.
This creates the expected result:
jsFiddle here
Updated CSS - I used relative positioning instead.
#share-area-arrow {
position: relative;
height: 10px;
width: 10px;
background-color: blue;
top: 20px;
left: 70px;
}
Alternatively, if you feel you need absolute positioning, use:
#share-area-arrow {
position:absolute;
top: 30px;
left: 192px;
}
jsFiddle here - same result in current context
Click here for visual
As you can see from the picture, my parent container is not expanding to fit my child container. The page container (#contain) actually stops at the bottom left hand corner of the kitchen photograph. The child container (#zone2) is clearly overflowing outside its parent container (#contain). I would like to be able to have (#contain) expand automatically to fit (#zone2). The CSS is:
#contain {
position: relative;
width: 100%;
margin: 0 px;
background: #E3DCCC;
z-index: 0;
}
#zone1 {
width: 100%;
height: 850px;
background: url(http://waly1039.com/sites/default/files/k4.jpg) no-repeat center top;
position: absolute;
z-index: -1;
}
#head {
position: absolute;
top: 20px;
width: 100%;
height: 330px;
}
#head img {
max-width: auto;
height: auto;
}
#zone2 {
position: relative;
overflow: hidden;
padding: 3px;
top: 360px;
float: right;
right: 15px;
width: 53%;
height: auto;
border: 4px solid #715E40;
background-color: white;
}
#zone2 img {
max-width:100%;
height: auto;
float:left;
margin: 5px;
}
#zone3 {
position: relative;
top: 710px;
left: 15px;
float: left;
height: 340px;
width: 38%;
border: 4px solid #715E40;
background-color: white;
}
This is a float issue. Try adding the traditional CSS clear fix to #zone2's container:
.container:after{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
Be sure to put this in the :after pseudo selector, otherwise it won't work for you. Floated elements exist outside of normal document flow, which is why the container isn't expanding to contain them. The clear fix forces the floats to be cleared, which will cause the container to expand around the bottom of this element.
I tested adding more images to #zone2 and #contain expands vertically. Somehow you've got an element(s) in #zone2 with padding or margins that aren't being added to the parent's total height.
If you want a quick fix in order to move on then add margin-bottom: 30px; to #zone2.
I've duplicated your problem and was able to resolve it with this: You might want to try it. It's looks a bit odd so make a class for it if you like. I'm more concern with where it is placed.
Just beneath lines of your code, add my third line. Just that and you are done. Note, it more about positioning.
<div id="zone3"></div>
<div id="zoneclear"></div>
<br style="clear:both; float:none; display:block; height:1px;" />
Just add the third line.
and just modify one of your styles:
#zoneclear {
clear: both;
float:none;
display:block;
height: 30px;
position: relative;
}
[EDIT]
The codes have a serious bug in firefox which is not present in Google Chrome (that I tested in earlier due to your relative positioning. So I've modified the #zoneclear style to fix that. You might have to test if the other browsers like this hack.
I hope it helps you
Ok I am running into a little problem positioning an image inside a DIV.
<div id="wholePage">
<img src="theImages/header_shadow_flip.png" id="hF" />
<div id="pageWrapper"><img src="theImages/header_shadow.png" id="bF" />
</div>
</div>
I have the following CSS for both DIVs
#wholePage {
position: relative;
width: 1000px;
padding: 0 10px;
padding-top: 35px;
margin: 0 auto;
}
#pageWrapper {
position: relative;
width: 960px;
padding: 0 10px;
padding-top: 37px;
margin: 0 auto;
}
The CSS for the top shadow, which works just fine. no need to change, is:
img#hF {
position: absolute;
left: 50px;
top: 56px;
z-index:2;
}
But the bottom footer image is giving me issue and the css is:
img#bF {
position: absolute;
left: 50px;
top: 1657px;
z-index:2;
}
Two examples of the page is below:
www.interfaithmedical.com/CheckSite/index.html
www.interfaithmedical.com/CheckSite/ms_gynecology.html
How do I align the bottom shadow image to match the pageWrapper DIV so it is positioned right below it? and doesn't position based on the page itself like it did on the second link. (On the second link, you can see it uses the original spacing and extends beyond page content)
Instead of setting the top: property of bF, try setting the bottom: property of bF to -4px. That way you aren't tied to your page being 1657px tall every time.
img#bF {
left: 50px;
position: absolute;
bottom: -4px;
z-index: 2;
}