I am unsure of how to proceed. I have 3 div tags layed out like so (well this is a simplified version anyways):
<div class="gray" style="margin-left:auto;margin-right:auto;width:100px;overflow:auto;">
<div class="orange"></div>
<div class="blue"></div>
</div>
I would like to move orange to the left of gray using css so that I do not have to change the html but I am stuck on how to do it properly. Here is a picture (I would like to move orange to green):
http://imgur.com/U76pp.png
You would have to do it using absolute positioning:
.orange{
position: absolute;
left: -200px; /* or whatever distance you want */
}
You can do it with a negative margin:
http://jsfiddle.net/wkKDy/1/
using position-relative would do it
.orange{ position: relative; left: -200px }
if it still gets clipped, make sure the parent element doesn't have overflow: hidden.
http://jsfiddle.net/SebastianPataneMasuelli/wkKDy/4/
edit - oh, you got it. nice.
Related
So,
i'm guessing this has been asked before but im realy missing something here which i've been starring myself dead at for the last hour.
I've got a container with two divs, position relative and absolute since i want them to stack. The stacking part works. However, this container, the #mockupcontainer, needs to be inside the #what-container-inner which i cant seem to get to work. At the moment it just stops the #what-container-inner and placed the #mockupcontainer after it. My jsfiddle illustrates perfect whats going wrong. I hope someone can help me on this one.
https://jsfiddle.net/rvq41vaf/
CSS:
#what-container-outer {
background-color: #ececec;
margin-left: auto;
margin-right: auto;
}
#what-container-inner {
background-color: #ececec;
width: 75%;
margin-left: auto;
margin-right: auto;
position: relative;
}
.mockupcontainer{
position: relative;
}
#pin-mockup{
position: absolute;
z-index: 10;
}
#pin-mockup-site1{
position: absolute;
z-index:11;
}
HTML Code:
<div id="what-container-outer">
<div id="what-container-inner">
sdfsdfsdfsdfsdfsdfsdfsdf<br>sdfsdfsdfsdfsdf
<div id="trigger-mockup"></div>
<div class="mockupcontainer">
<div id="pin-mockup">
<img src="image2" class="img-responsive" alt="Realiseren">
</div>
<div id="pin-mockup-site1">
<img src="image1" class="img-responsive" alt="Realiseren">
</div>
</div>
</div>
</div>
Kind Regards,
Donny.
Since you have your two image-containing divs (pin-mockup and pin-mockup-site1) positioned absolutely, they are pulled out of the flow and the enclosing divs no longer leave room for them. The solution is to set the larger one to position: relative so that the enclosing div does make room for it. Setting top:0 on the second (absolutely positioned) div brings it to the top of the enclosing div.
Here's the fiddle.
See also the MDN docs on the position property.
I don't really know how to approach this, but this is what I'm trying to do, placing the white arrowbox:
I know how to do an arrowbox, but placing it like that is a mystery to me. At the moment I have two sections, upper and lower, and then tried giving the box an absolute position, but didn't work.
How should I approach this problem? I'm sure there is an easy solution, but I'm not that experienced with CSS.
didn't understand your question very well myself. IF you are trying to position your box in the middle of the lower blue container with: position:absolute I would try this myself
.box {
height:100px;
width:300px;
background-color:red;
position:absolute;
top:-50px;
left:50%;
margin-left:-150px; /*this has to be half your box width negative margin*/
}
Don't forget to add position relative to your blue div (or fixed, or absolute... just not default static). A fiddle as an example ( I add css box arrow just in case you need it): http://jsfiddle.net/j5a0227s/1/
Clearly misunderstood your question. Please see the updated JSFiddle.
This places a green block below the middle circle, but by giving it the position: absolute, you can change the location with margin-top. I don't know how this reacts in responsive websites, you might want to tweak it a bit.
Edit2: Even better is to place the white block in the div you have above the circles. See this updated JSfiddle.
HTML
<div class="main">
<div class="container0">
<div class="hover2"></div>
</div>
</div>
CSS
.main {
margin-top:100px;
}
.hover2 {
height: 50px;
width: 100px;
background: green;
margin-left:180px;
position: absolute;
margin-top:60px;
}
.container0 {
background: purple;
width: 100%;
height:100px
}
Wrap your two sections with a div and take a close look at this interesting article: Centering in CSS: A Complete Guide.
I'm trying to put a "triangle" in the top right of a Div. Somehow i mess it up every time.
That's the Fiddle
That's my div:
<div class="gtcr_ttl_wllt_dash">
<div class="db_ov_layer center">
<h1 class="ttl_ammnt">Test Module</h1>
<span class="prf_ttl">Hello There</span>
</div>
</div>
In the jsfiddle is a pic and everything Set up, except that sneaky triangle. If anyone has a little free time to Help me out on this .. Would be great.
CSS for the wrapping div:
.div-wrap {
position: relative
}
CSS for your triangle:
.triangle {
display: block; (if not already a block element)
position: absolute;
top: 0;
right: 0;
left: auto;
}
Quick fiddle:
http://jsfiddle.net/92gvW/3/
This should do it, give the outermost div position:relative, to the ribbon position:absolute and play with top and right to fix it
http://jsfiddle.net/92gvW/2/
EDIT: and put the ribbon inside the outer div
EDIT 2: I didn't see the image the first time, with some ugly css tricks i did the triangle too
http://jsfiddle.net/92gvW/4/
Basically a small white triangle over a bigger black triangle, shifted 1px
I have a website in which the layout looks something like this: (image below)
On the left panel, I have a div which displays a logo. I have another div which I want to put beneath the logo and so divs these have to be these stacked over each other. I tried fiddling with the z-indexes, but didn't quite get the rquired thing.
How can this be done?
If z-index is not working for you try nesting the logo <div> in a wrapper <div> something like this
<div> <!--div container to hold the logo div-->
<div><!--Logo div--></div>
</div>
Reference: jsFiddle Logo Demo
Status Update: jsFiddle Logo Demo Just Border Version
The above jsFiddle has extensive notes in the CSS Section so you can understand how to setup your specific Logo.
HTML:
<div id="logoHolder">
<div id="logoContent">
<div id="logoImage"></div>
</div>
</div>
CSS:
#logoHolder {
width: 296px;
height: 296px;
background-color: white;
border: 3px solid red;
}
#logoContent {
width: 256px;
height: 256px;
padding: 20px;
position: relative;
border: 1px solid black;
}
#logoImage {
background-image:url(http://img841.imageshack.us/img841/4718/securitysealred256x256.png);
background-repeat: no-repeat;
background-position: center center;
background-color: aqua;
height: 100%;
}
Try to use also position: absolute; instead of relative for both elements when using z-index. Then it can make some distortion in your layout, so you can put the logo divs inside another relative div or use some other technique to fix it, however it must work when using position absolute and z-index. If it is still not working, check if some of your javascript is not interfering or if some other elements in your code have z-index, so it is causing the problems.
If using position absolute, do not forget to define margin-left and margin-top.
I'm not sure what you want to achieve but try this, adapting the values to your layout
Try using the margin property, as shown in your image. If you put margin-left as a negative value for the right-side div, then the right-side div will move below/above the logo div.
<div id="popupLeft">
<h1 class="popupTittel">Title goes here</h1>
</div>
I want this text go outside the div popupLeft, but only for xx pixles. Is that possible?
Perhaps I did not explain well enough.
There are two "modes" on my website. If the content is supposed to draw a gallery I have the title, intro-text and content-text in a div called 'popupLeft' and a gallery in the 'popupRight'.
But if there is no gallery, is is supposed to be text in both the divs, and I want the title to stretch all the way from the left-div and the right-div. The right and left-div are positioned side by side.
add it position:relative
ie. to get it 10 px above, do this:
.popupTittel {
position: relative;
bottom: 10px;
}
if you want to move it right outside the div, add position:absolute like this
#popupLeft {
position: relative;
}
.popupTittel {
position: absolute;
bottom: 100%;
left: 0;
}
Like in margin-top: -10px; or similar? You should consider reading a CSS guide, since this is very elemental stuff.
Id actually use position:relative; top:-10; as that will keep all elements below that objects margins correct...
Example here :)
http://jsfiddle.net/r2bp9/