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
Related
I want to set the <div id="bar">...</div> into the background.
First, here is my page: tekkkz.com
<div id="bar">
<span id="views">50</span>
<a class="icon-small" id="like"></a>
<a class="icon-small" id="dislike"></a>
</div>
This block (on the top right with the like/dislike buttons) should be in the background, so that it wont take any width of my content box.
How to do this?
For better understanding: what i want to reach is similar to set a image anchor to page in libreoffice.
You should use position: absolute on your <div id="bar"> and position: relative on it's parent. Then use right: 0 if you want your element to be at the right corner of the content block.
#bar {
position: absolute;
right: 0;
}
.content {
position: relative;
}
Since already in your stylesheet style.css
#bar{float:right;}
So you could just add in your pre block
<pre style="clear:both">
I tried it. It worked like charm.
Hope it help
I'm at my wits end with this one.
I have a couple of divs. They all have a downward pointing arrow. It should be centered in the middle, on the brown line and on top of everything. The last div should also have the arrow. I tried z-index, absolute & relative positioning and nothing works.
If you click the title, the box opens. The arrow should stay on the line in the exact spot. This really doesn't seem all that difficult to me, but somehow I can't make it work.
Here is a fiddle:
http://jsfiddle.net/8eLwr
<article id="made" data-magellan-destination="made">
<div class="blocks-holder wide made">
<div class="block wide" id="">
<div class="openblock">
<div class="maak-competences">
<h2>title</h2>
<h4>tagline</h4>
<div class="arrow-down"></div>
</div>
Thanks so much in advance!
Remove the absolute positioning from the arrow and instead set it to display as block and give it margin: 0 auto to centralise it:
.arrow-down {
...
background-position: bottom;
display: block;
margin: 0 auto -36px auto;
}
Note that I've also set its background-position to bottom to make the background image sit directly at the bottom of the element.
JSFiddle demo.
Edit: from comments:
Yes, it should be just underneath the brown line, so it sort of looks like this: -----v------- The two point of the V should touch the line
This is a bit of a large change. We need to remove the background from the individual blocks (to stop them overlapping the arrow), then remove the float from the block container (to fix the height), then finally give the container the white background and increase the negative margin on the arrow:
.blocks-holder .block {
...
float: left; /* Remove this. */
}
.blocks-holder .block.wide {
...
background: transparent;
}
.blocks-holder.wide {
...
background: #fff;
}
.arrow-down {
...
margin: 0 auto -46px auto;
}
JSFiddle demo.
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/
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.