I want to create diagonal box inside box. How can I do this using css.
I am attaching an image, exactly what i want. If any one have any idea please share with me.
My Fiddle: http://jsfiddle.net/Ae8Wv/660/
My codes are here:
HTML:
<div class="foo bg1"></div>
<div class="foo bg2"></div>
CSS:
.foo {
float: left;
width: 40px;
height: 40px;
margin: 5px 5px 5px 5px;
border-width: 1px;
border-style: solid;
border-color: rgba(0,0,0,.2);
}
.bg1 {
background-color:#13b4ff;
}
.bg2 {
background-color:#ab3fdd;
}
My Fiddle: http://jsfiddle.net/Ae8Wv/660/
Making divs absolute may disturb other elements. You can also move the second div inside first div and apply margin on second div like shown in this fiddle : http://jsfiddle.net/6k9Ltyoa/
<div class="foo bg1">
<div class="foo bg2"></div>
</div>
.foo {
float: left;
width: 40px;
height: 40px;
border-width: 1px;
border-style: solid;
border-color: rgba(0,0,0,.2);
}
.bg1 {
background-color:#13b4ff;
}
.bg2 {
background-color:#ab3fdd;
margin-top:50%;
margin-left:50%;
}
http://jsfiddle.net/Ae8Wv/661/
you can position the second div and assign top,left.
.bg2 {
background-color:#ab3fdd;
position: absolute;
top: 10px;
left: 10px;
}
You just need to add some absolute position to the second box. I'd recommend wrapping it all up to make it responsive too with the container having relative positioning. Use the left/top % values to move the box, greater increase will move them further respectively.
http://jsfiddle.net/Ae8Wv/662/
.bg2 {
background-color:#ab3fdd;
position:absolute;
left:2%;
top:2%;
}
I added the wrapper for you here too. Up to you whether or not you want it :)
http://jsfiddle.net/Ae8Wv/665/
Just add some margin to the purple box like this
http://jsfiddle.net/8odoros/Ae8Wv/667/
.bg2 {
background-color:#ab3fdd;
margin-left:-30px;
margin-top:20px;
}
how about translations?
.bg2{transform: translate(-40px, 20px)}
fiddle
Give the .bg2 div a position: absolute;. And don't forget to put a position: relative; on .bg1, or else the absolute positioning won't work.
HTML
<div class="foo bg1">
<div class="foo bg2"></div>
</div>
CSS
.foo {
position: relative;
float: left;
width: 40px;
height: 40px;
margin: 5px 5px 5px 5px;
border-width: 1px;
border-style: solid;
border-color: rgba(0,0,0,.2);
}
.bg1 {
background-color:#13b4ff;
}
.bg2 {
position: absolute;
top: 50%;
left: 50%;
background-color:#ab3fdd;
}
http://jsfiddle.net/skeurentjes/Ae8Wv/671/
Related
I would like to add a white border over all my images in my content div using css. Images in the header and footer div areas should not be affected. how do I achieve this? See example image below. There are images of different sizes on the web pages.
See image:
You can do this without having an extra element or pseudo element:
http://cssdeck.com/labs/t6nd0h9p
img {
outline: 1px solid white;
outline-offset: -4px;
}
IE9&10 do not support the outline-offset property, but otherwise support is good: http://caniuse.com/#search=outline
Alternate solution that doesn't require knowing the dimensions of the image:
http://cssdeck.com/labs/aajakwnl
<div class="ie-container"><img src="http://placekitten.com/200/200" /></div>
div.ie-container {
display: inline-block;
position: relative;
}
div.ie-container:before {
display: block;
content: '';
position: absolute;
top: 4px;
right: 4px;
bottom: 4px;
left: 4px;
border: 1px solid white;
}
img {
vertical-align: middle; /* optional */
}
You could try this:
Html:
<div class="image">
<div class="innerdiv">
</div>
</div>
Css:
.image
{
width: 325px;
height: 239px;
background: url("https://i.picsum.photos/id/214/325/239.jpg?hmac=7XH4Bp-G9XhpuKz5vkgES71GyXKS3ytp-pXCt_zpzE4") 0 0 no-repeat;
background-size: cover;
padding: 10px;
}
.innerdiv
{
border: 1px solid white;
height:100%;
width: 100%;
}
jsFiddle
Hope this is what you meant :)
I solved this with box-shadow: inset and it works with IE11 and up. I wanted a border in the corners around the image but this examples have the border 10px inset. It requires a parent div with :before or :after element but handles it very well.
.image {
width: 100%;
height: auto;
}
.image__wrapper {
position: relative;
}
.image__wrapper:before {
content: '';
position: absolute;
top: 10px;
bottom: 10px;
left: 10px;
right: 10px;
box-shadow: inset 0 0 0 3px red;
}
CodePen Demo
Whatever the div ID or class is you can simply add
#yourDivIDExample {
...
}
#yourDivIDExample img{
border:1px solid #ffffff;
}
This will create a border around the images in the div itself.. same works for classes or global rule also ..
img {
border:1px solid #ffffff;
}
You can do something like this DEMO
HTMl
<div class="imgborder">
<div class="in-imgborder">
</div>
</div>
CSS
.imgborder {
width: 300px;
height: 300px;
position: relative;
background: url(http://placekitten.com/300/300) no-repeat;
}
.in-imgborder {
width: 290px;
height: 290px;
position: absolute;
top: 4px;
left: 4px;
border: 1px solid red;
}
This is the illusion that I am attempting to create:
Notice that my designer wants the border cut off in the middle of the div, this is what I need to know how to do. I don't think overlapping with a z-index will work because of how the HTML is laid out.
This is the HTML code of which the structure may not be changed for maximum device compatibility, however, if adding an element is the solution, I believe that may be done:
<div id="nav_icons_con" class="mopn">
<div id="inner_nav_container" class="show_inner_nav">
<div class="nav_link_container">Home</div>
</div>
</div>
Here is the basic current CSS code:
#nav_icons_con {
z-index: 1;
cursor:pointer;
height: 5.005em;
width: 5.005em;background-image:url(background.png);
background-size:70%;
background-repeat:no-repeat;
background-position:center;
margin:.385em .385em 0 0;
}
#nav_icons_con.mopn{
background-color:#FFF;
border:2px solid #83C5E6;
border-bottom:none;
box-shadow:5px 5px 10px #666;
}
#inner_nav_container, .inner_nav_container{
cursor:pointer;
display:none;
position:absolute;
top:5.39em;
right:.385em;
width:12.5em;
white-space:normal;
background-color:#FFF;
border:2px solid #83C5E6;
border-top:none;
box-shadow:5px 5px 10px #666;
}
#inner_nav_container.show_inner_nav, .inner_nav_container.show_inner_nav{display:block;}
The typical way to do this is to position the tab element over the sub element, so as to cover up that section of the border. However, the use of box-shadow complicates this.
One way is to add another element inside the root element, so that the root element can still cast the shadow, but the element inside is positioned above. See my code below, for a basic example.
Working Example:
.icon {
width: 50px;
height: 50px;
position: relative;
/*Create the shape for the shadow.*/
border: 5px solid #83C5E6;
box-shadow: 5px 5px 10px #666;
}
.icon-content {
background: #fff;
position: relative;
/*Move back over the border.*/
top: -5px;
left: -5px;
/*Make tall enough to cover the top border.*/
width: 50px;
height: 55px;
/*Add border, except on the bottom.*/
border: 5px solid #83C5E6;
border-bottom: 0;
/*Position up a layer.*/
z-index: 1;
}
.nav {
position: absolute;
left: -5px;
top: 100%;
width: 400px;
padding: 1em;
background: #fff;
border: 5px solid #83C5E6;
box-shadow: 5px 5px 10px #666;
}
<div class="icon">
<div class="icon-content">
</div>
<div class="nav">
<div class="item">Home</div>
</div>
</div>
I have been trying and I don't really know how to solve this:
I need to style the title of the content like this:
Now, I've been trying to have position:absolute some other stuff, but it just doesn't seem to work.
My code:
<div class="content_item">
<div class="double_line"></div>
<h2>Ce facem</h2>
</div>
css:
.content_item>div{
border-top: 2px solid #c2c1c1;
border-bottom: 2px solid #a5a4a4;
display:inline-block;
width:100%;
height:5px;
position: absolute;
}
.content_item>h2{
text-align: center;
background-color: #ffffff;
}
So what I wanted was to put the text over the line and a white background on the text.
fiddle: http://jsfiddle.net/Qu849/
Can you please help me?
This fiddle kinda works:
http://jsfiddle.net/Qu849/4/
Anyway I wouldn't do that code for this purpose. Consider this:
Just use a div with a background image (repeat-x) with those "borders"
Inside that div use a span, centered, and with a background:#fff;
That is just better.
EDIT
Check #drip answer to do what I described: https://stackoverflow.com/a/20070686/2600397
You need to position you h2 above your bordered div. My idea would be to make h2 display:inline-block; so you can use text-align:center; on the parent to center the child h2 and then just use position:relative; and top:-20px; on the h2 to move it up a bit
.content_item{
border-top: 2px solid #c2c1c1;
border-bottom: 2px solid #a5a4a4;
width:100%;
height:5px;
position:relative;
text-align:center;
margin-top:50px;
}
.content_item > h2{
text-align: center;
background-color: white;
padding:3px 15px;
font-size:14px;
display:inline-block;
position:relative;
top:-20px;
}
http://jsfiddle.net/Qu849/8/
Since the double_line div is absolutely positioned, it will be above any none positioned elements.
to put both elements on a relative plane, you need to position the h2 in the same manner (either absolute, or relative).
After that you can play with the margins or top/left properties of the elements to position them over each other.
You can do it with a backgruund image very easy.
If you are ok with using background images.
HTML:
<h2><span>Ce facem</span></h2>
CSS:
h2 {
background: url(http://i.imgur.com/7LGlQ0I.png) repeat-x 0 center;
text-align: center;
}
h2 span { padding: 0 20px; background-color: #fff; }
Demo
Or if you really prefer usin bordered element:
Then with a little tweaks in the css:
.content_item>div{
border-top: 2px solid #c2c1c1;
border-bottom: 2px solid #a5a4a4;
width:100%;
height:5px;
position: absolute;
top: 12px;
}
.content_item>h2{
display: inline;
position: relative;
z-index: 2;
text-align: center;
padding: 0 10px;
background-color: #ffffff;
}
.content_item{
text-align: center;
position:relative;
}
Demo
Yes, Rodik is right
Try using:
.content_item>h2 {
text-align: center;
display: block;
width: 200px;
background-color: #ffffff;
margin-top: -20px;
margin-left: 30%;}
You have to give position:absolute; and margin to your <h2>
Replace your <h2> style with this:
.content_item>h2{
text-align: center;
background-color: #ffffff;
position:absolute;
margin:-10px 41% 0px;
}
fiddle
if in doubt, you could just make the text an image with full transparent background, this makes it easier when it comes to responsive webpage layouts (different resolutions etc.)
Pure Css with No images
Ammend this in your CSS to check if it helps :
.content_item>h2{
text-align: center;
background-color: #ffffff;
display:inline-block; // makes header size equal to text width
width : 30%; //gives indented left-right white-space
position:absolute; //to overlay it on double-line
top : 0px; //position
display: table; //centre inline elements
margin : 0 auto;
margin-left : 40% //hack to center it
}
.content_item>div{
border-top: 2px solid #c2c1c1;
border-bottom: 2px solid #a5a4a4;
display: inline-block;
width: 100%;
height: 5px;
position: relative;
}
.content_item>h2{
background-color: #FFFFFF;
width: 200px;
z-index: 12;
position: absolute;
top: -23px;
text-align: center;
left: 0;
right: 0;
margin: 20px auto;
}
.content_item{
position:relative;
}
}
use this code usefull for you.
see this link http://jsfiddle.net/bipin_kumar/35T7S/1/
Here is one way of doing it:
.content_item {
position:relative;
}
.content_item > div {
border-top: 2px solid #c2c1c1;
border-bottom: 2px solid #a5a4a4;
XXdisplay:inline-block; /* not needed */
width:100%;
height:5px;
position: absolute;
z-index: -1;
top: 50%;
margin-top: -3px;
}
.content_item > h2 {
text-align: center;
background-color: #ffffff;
width: 200px; /* must be specified */
margin: 0 auto; /* for centering */
}
To the .double-line div, add z-index: -1 to force it to be painted under the h2 element.
Use top: 50% and a negative margin-top: -3px to vertically align the double lines (if that is what you need).
You then need to specified a width for h2 other wise it will be 100% wide and the white background will paint over the dobule-lines. Add margin: 0 auto to center the h2 within the parent container.
You do not need display: inline-block for the .double-line since the absolute positioning will force the display type to be block.
Demo at: http://jsfiddle.net/audetwebdesign/nB2a3/
You can do this without absolute positioning and without changing the HTML.
Rather than having the text-align: center on the <h2>, you can set it on the .content-item. Then use display: inline-block on the <h2> and relatively position it with a negative top value.
Like so:
.content_item>div {
border-top: 2px solid #c2c1c1;
border-bottom: 2px solid #a5a4a4;
width:100%;
height:5px;
}
.content_item>h2 {
background-color: #ffffff;
display: inline-block;
margin: 0;
padding: 0 40px;
position: relative;
top: -15px;
}
.content_item {
text-align: center;
}
http://jsfiddle.net/Qu849/11/
Try this, another way
.content_item>div{
border-top: 2px solid #c2c1c1;
border-bottom: 2px solid #a5a4a4;
display:inline-block;
width:100%;
height:5px;
position: relative;
}
.content_item>h2{
text-align: center;
background-color: #ffffff;
position:absolute;
margin-top:-30px;
margin-left:50%;
}
When z-index not used this type of issue, use above format.
I'm trying to put a logo and a sidebar next to eachother, but it just won't work. The logo container needs to be centered at the top. And the sidebar needs the be at the top-left Can you help me? I already tried float, no succes. :(
code:
<body>
<center>
<div id="logo1">
<div id="logo2"></div>
</div>
</center>
<div id="sidebar1">
<a href="https://test.com/" target="blank">
<div id="test1"></div>
</a>
</div>
</body>
CSS:
#test1 {
display: inline-block;
position: absolute;
border: 1px solid;
margin-top: 15px;
margin-left: 22px;
background-image:url('Afbeeldingen/2.png');
height: 45px;
width: 45px;
}
#test1:hover {
display: inline-block;
position: absolute;
border: 1px solid;
margin-top: 15px;
margin-left: 22px;
background-image:url('Afbeeldingen/1.png');
height: 45px;
width: 45px;
}
#sidebar1 {
display: inline-block;
position: relative;
border: 1px solid;
margin-top: -10px;
margin-left: -15px;
background-image:url('Afbeeldingen/lol.png');
height: 1080px;
width: 118px;
}
#logo1 {
display: inline-block;
position: relative;
border: 1px solid;
margin-top: 10px;
height: 100px;
width: 700px;
}
Ok, This is what you have to do :
You need to remove the display:inline-block from #logo1
And instead of just writing margin-top:10px , you need to use margin:0px auto, or you could write margin:10px auto. By this, it will center your #logo1 div.
But to center a "div" , you need to have another container(div) that wrap within your div. So that it will know, from which side to which side that it will have to be "centered".
For that reason, you will need to create another div or container around your #logo1 div, and lets assume it is called "right" (see the code below).
And for this div/container to be just beside your sidebar, it will need to have a relative position same as your sidebar. Now, you can just float both of your #sidebar1 and also your #logo1 to the left.
Thus, you dont have to use that negative margin for your sidebar anymore (remove that). If you wanted to use the negative margin, you have to use the absolute position in this case. But you will then have to restructure your whole #logo1 div which will create a lot of works.
This is the full code for your reference :
HTML code :
<div id="container">
<div id="sidebar1">
<a href="https://test.com/" target="blank">
<div id="test1">This is sidebar</div>
</a>
</div>
<div id="right">
<div id="logo1">
<div id="logo2"><This is logo</div>
</div>
</div>
</div>
And use this CSS :
#container{
width:1000px;
height:1080px;
position:absolute;
border:1px solid #000;
}
#test1 {
display: inline-block;
position: relative;
border: 1px solid;
margin-top: 15px;
margin-left: 22px;
background-image:url('Afbeeldingen/2.png');
height: 45px;
width: 45px;
}
#test1:hover {
display: inline-block;
position: relative;
border: 1px solid;
margin-top: 15px;
margin-left: 22px;
background-image:url('Afbeeldingen/1.png');
height: 45px;
width: 45px;
}
#sidebar1 {
display: inline-block;
position:relative;
float:left;
border: 1px solid;
background-image:url('Afbeeldingen/lol.png');
height: 1080px;
width: 118px;
border:1px solid red;
}
#right{
position:relative;
float:left;
margin-top:0px;
width:870px;
height:100px;
}
#logo1 {
position:relative;
border: 1px solid;
margin: 0px auto;
height: 100px;
width: 700px;
}
Do you want this ?
#test1 {
border: 1px solid;
margin-top: 15px;
margin-left: 22px;
background-image:url('Afbeeldingen/2.png');
height: 45px;
width: 45px;
}
#test1:hover {
background-image:url('Afbeeldingen/1.png');
}
#sidebar1 {
position:absolute;
border: 1px solid;
background-image:url('Afbeeldingen/lol.png');
height: 1080px;
width: 118px;
}
#logo1 {
border: 1px solid;
margin-top: 10px;
height: 100px;
width: 700px;
}
<div id="sidebar1">
<a href="https://test.com/" target="blank">
<div id="test1"></div>
</a>
</div>
<div id="logo1">
<div id="logo2"></div>
</div>
I assume this is what you want? http://jsfiddle.net/Le6PH/
You should do:
Remove the negative margins (If you don't know what you are doing, don't use negative margins)
Remove the <center> tag (This tag is deprecated since EVER)
Remove the margin of your logo
Add a wrapper div around your whole structure
Add the following CSS to that div
CSS
.wrapper{
position:relative;
width:818px; /* sidebar width + logo width */
}
Change position:relative; to position:absolute for your logo & sidebar divs.
Add top:0; for both divs
Add right:0; for the sidebar div
EDIT:
With a centered logo, like this (http://jsfiddle.net/Le6PH/1/) you'll need to change 2 things:
Add a margin-left:118px; to the logo div
Change the width of the wrapper to width of logo + margin logo + width of sidebar.
Try floating your div, it should look like this..
<div class="row">
<div id="log"></div>
</div>
<div class="row">
<div id="sidebar"></div>
</div>
css
.row{
float: left;
width: 50%;
}
I'm trying to put some triangles made in css next to containers,
one over the container in white (imitating the background)
and one in blue on the right side.
I tried several solutions, but by using absolute positioning of triangles, when I add an element above the absolutely positioned triangles it breaks their positioning. I also tried the triangles with :after and :before, and using clear for the container, but this did not work.
CSS:
#sortables {
padding: 15px;
}
.sortable {
list-style-type: none;
background-color: #d2e0f2;
padding: 5px;
}
.sortable li {
margin: 5px;
padding: 3px;
}
.sortable li:hover {
cursor: move
}
ul{
margin:0;
}
.dimensions_container {
float: left;
display: block;
position: relative;
width: 160px;
margin:10px;
}
.triangle-right{
content: '';
display: block;
position: absolute;
top: 10px;
left: 170px;
width: 0;
height: 0;
border-color: transparent transparent transparent #d2e0f2;
border-style: solid;
border-width: 17px;
}
.triangle-left{
content: '';
display: block;
position: absolute;
top: 1px;
left: 25px;
width: 0;
height: 0;
border-color: transparent transparent transparent white;
border-style: solid;
border-width: 17px;
}
.header {
text-align:center;
padding: 3px;
width: 154px;
background-color: #d2e0f2;
}
HTML:
<div id="sortables">
<div class="dimensions_container">
<div class="header">Available groups</div>
<ul id="sortable1" class="sortable droptrue ui-sortable">
<li id="undefined" class="ui-state-default">undefined</li>
<li id="undefined" class="ui-state-default">undefined</li>
<li id="undefined" class="ui-state-default">undefined</li>
</ul>
</div>
<div class="triangle-right"></div>
<div class="dimensions_container">
<div class="header">Grouped by</div>
<ul id="sortable2" class="sortable droptrue ui-sortable"></ul>
</div>
<div class="triangle-left"></div>
<div class="dimensions_container">
<div class="header">Drill into</div>
<ul id="sortable3" class="sortable droptrue ui-sortable"></ul>
</div>
</div>
Here you go. You'll find the code in this jsFiddle: http://jsfiddle.net/xKzuX/
When using css arrows, it is better to use :before and :after pseudo selector on the parent with a position: relative on it (you had that part).
Then you absolute position the arrow (you had that part too but with wrong values).
To make it easy to reuse, I've reused your left/right classes. You can just add it wherever needed.
Finally, if your arrows render poorly in some browser, add transform:rotate(360deg); which make it do 360deg (so you won't notice the rotation at all) but it softens the edges.
You might need to use
position:relative
on the parent of your triangles (#sortables here).