In my web application, I wanted to place a small div along border edge of another div like this:
This is my code:
<div style="border:1px solid black; height:1em; width:10em;">
<div style="border:1px solid black; display:inline-block; height:10em;
width:10em;"> Along edge </div>
</div>
How can it be done?
Following way you can do it. Make main div position:relative and along edge div position:absolute to main div. And give top and right to sub div.
.main{
border:2px solid;
position:relative;
width:400px;
height:150px;
top:50px;
}
.sub{
border:1px solid;
position:absolute;
right:10px;
top:-10px;
z-index:99;
background-color: #fff;
}
<div class="main">
Main Div
<div class="sub">
along edge
</div>
</div>
Hope it helps.
put css like this
.main-div
{
position:relative;
}
.along-edge
{
position:absolute;
right:50px;
top:-20px;
z-index:1;
}
Check this fiddle
<div id="Main">
<div id="Edge"></div>
</div>
and css
#Main{
width:200px;
height:200px;
border:solid 1px black;
position:relative;
margin-top:50px;
}
#Edge{
width:50px;
height:50px;
border:solid 1px black;
position:absolute;
top:-25px;
right: 50px;
}
demo
Nest the smaller div inside the main div.
.along-edge {
position: absolute;
margin-top: -10px;
z-index: 1;
}
Related
How can I make this line(see picture) with CSS?
Using pseudo element as :after
div{
height:80px;
width:3px;
background:black;
border-radius: 23%;
position:relative;
}
div:after{
content:'';
height:3px;
width:170px;
background:black;
border-radius: 23%;
position:absolute;
top:47%;
}
<div></div>
No need complex code, one element and few CSS lines are enough:
.line {
width:200px;
height:100px;
border-left:5px solid;
background:linear-gradient(#000,#000) center/100% 5px no-repeat;
}
<div class="line">
</div>
Or like this:
.line {
width:200px;
height:100px;
padding:48px 0;
box-sizing:border-box;
border-left:5px solid;
background:#000 content-box;
}
<div class="line">
</div>
.line1 {
height:150px;
width:3px;
background:#000;
position:relative;
}
.line2 {
height:5px;
width:300px;
background:#000;
position:absolute;
/* following 2 code is excellent center for second line. */
top:50%;
transform:translateY(-50%);
}
<div class="line1">
<div class="line2"></div>
</div>
I'm building a carousel with HTML/CSS and have a problem I can't get my head around.
I have absolutely positioned children (.card) in a carousel-container and want them to slide from side to side when clicking the links below. This works fine when going from card4 backwards to card1, but not forwards from card1 to card4. Then it just jumps to card4 and seems to push the active card off the screen.
Strangely, when I edit my non-active cards' position to
left:95%;
instead of
left:100%;
(see at the very bottom of the CSS snippet), it works as expected.
Tested in Chrome, Firefox and on Codepen
View on CodePen
Thank you very much for your help.
This is my code:
*{
box-sizing: border-box;
}
.carousel-links{
text-align:center;
position:fixed;
bottom: 5%;
left:0;
right:0;
z-index:100;
}
.carousel-links a{
display: inline-block;
border-radius: 5px;
border: 1px solid black;
padding: 1em;
background:white;
}
.carousel{
position: relative;
width:100%;
height:80vh;
background:yellow;
border:5px solid black;
display:block;
overflow-x: hidden;
}
.card{
position: absolute;
top:0;
left:-100%;
width:100%;
height:100%;
border: 1px dashed black;
font-size:100px;
transition: all 2s;
z-index:1;
}
.carousel > .card:target{
left:0%;
//background:rgba(255,0,0,1);
z-index:2;
}
.carousel > .card:target~*{
left:100%;
/* left:95%; /*with this line it works */
z-index:0;
}
<div class="carousel-links">
1
2
3
4
</div>
<div class="carousel">
<div class="card" id="card1">1</div>
<div class="card" id="card2">2</div>
<div class="card" id="card3">3</div>
<div class="card" id="card4">4</div>
</div>
I want the button stay where it is, but the logo to be centered in relation to the width of the screen. However the logo is a bit more to the right. I think it is due to the button on the left side. In addition, how would you center the logo vertically within the menu bar? Thanks for your help.
<div style="position:fixed; display:inline; max-width:100%; background-color:white; left:0px; top:0px; right:0px; border-bottom:1px solid #6C7A89; text-align:center;">
<button style="width:80px; height:80px; background:transparent; border:none; font-size:27px; outline:none; float:left;" onclick="w3_open()">☰</button>
<img src="https://nebulon.io/nebulon.png" style="max-height:70px;">
</div>
https://jsfiddle.net/bjLex5qm/1/
I set the image position to absolute and calculate the center using left:calc(50vw - 50px), or the left position is half of the viewport minus half of the image width.
.container {
position: fixed;
display: inline;
max-width: 100%;
background-color: white;
left: 0px;
top: 0px;
right: 0px;
border-bottom: 1px solid #6C7A89;
text-align: center;
}
button {
width: 80px;
height: 80px;
background: transparent;
border: none;
font-size: 27px;
outline: none;
float: left;
}
img {
max-height: 70px;
display:block;
position:absolute;
left:calc(50vw - 50px);
}
<div class="container">
<button onclick="w3_open()">☰</button>
<img src="https://nebulon.io/nebulon.png">
</div>
updated the fiddle. check it out.
jsfiddle link
Took the liberty to remove the inline styles
.header{
position:fixed; display:inline; max-width:100%; background-color:white; left:0px; top:0px; right:0px; border-bottom:1px solid #6C7A89; text-align:center;
}
.menu{
width:80px; height:80px; background:transparent; border:none; font-size:27px; outline:none;
position:absolute;
left: 0;
}
.logo{
max-height:70px;
}
<div class = 'header'>
<button style="" onclick="w3_open()" class = 'menu'>☰</button>
<img src="https://nebulon.io/nebulon.png" class = 'logo'>
</div>
Use position absolute and transforms on the image. This would center vertically and horizontally.
img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
The simplest solution is to use tables you can easily specify "vertical-align:middle" property in table cells and make the content look completely centered.
Please refer to the following code and Fiddle.
<div style="position:fixed; display:inline; max-width:100%; background-color:white; left:0px; top:0px; right:0px; border-bottom:1px solid #6C7A89; text-align:center;">
<table>
<tr>
<td>
<button style="width:80px; height:80px; background:transparent; border:none; font-size:27px; outline:none; float:left;" onclick="w3_open()">☰</button>
</td>
<td style="width:100%;"><img src="https://nebulon.io/nebulon.png" style="max-height:70px;vertical-align:middle"></td>
</tr>
</table>
</div>
When I absolute-position an element inside a relative element, the coordinates are calculated from the edges of the container without taking into account the borders (what would be equivalent to positioning from the interior side of the border.)
Is there any way of positioning the element but from the exterior side of the border?
For example: if I have a red square (like the first one) without a border, the text sticks to the top left of the container because it has top:0; left:0. But the text in the second square still has top:0;left:0, but the border pushes the text inside the square:
.box {
position:relative;
width:150px;
height:150px;
background:red;
box-sizing:border-box;
margin:10px;
float:left;
}
.box-bordered {
border:25px solid rgba(0,0,0,0.1);
}
.text {
position:absolute;
top:0;
left:0;
color:white;
}
<div class="box">
<div class="text">Text</div>
</div>
<div class="box box-bordered">
<div class="text">Text</div>
</div>
What I would like for it is for the text to keep sticking to the top left corner of the colored area. Is that possible? How could it be done?
Note: This is more of a theory question out of curiosity; I know there are alternatives that will work (at least visually) like using negative margins, negative positioning values or an inset box-shadow:
.box {
position:relative;
width:150px;
height:150px;
background:red;
box-sizing:border-box;
margin:10px;
float:left;
}
.box-shadow {
box-shadow:inset 0 0 0 25px rgba(0,0,0,0.1);
}
.text {
position:absolute;
top:0;
left:0;
color:white;
}
<div class="box box-shadow">
<div class="text">Text</div>
</div>
but what I would like to know if it it's possible doing while keeping the borders.
No box shadow but not quite border either. How about this?
.box {
position:relative;
width:150px;
height:150px;
background:red;
box-sizing:border-box;
margin:10px;
float:left;
}
.box:before {
content:" ";
border:25px solid rgba(0,0,0,0.1);
height:100%;
z-index:1;
position:absolute;
box-sizing:border-box;
width:100%;
}
.text {
position:absolute;
top:0;
left:0;
color:white;
z-index:2;
}
<div class="box">
<div class="text">Text</div>
</div>
or box-bordered:after if you want to keep the class on the div element
The only two solutions that come to my mind are:
setting a negative margin equal to the border width on .text
using negative values on the top and left property.
.box {
position:relative;
width:150px;
height:150px;
background:red;
box-sizing:border-box;
margin:10px;
float:left;
}
.box-bordered {
border:25px solid rgba(0,0,0,0.1);
}
.text {
position:absolute;
top:0;
left:0;
color:white;
margin: -25px;
}
.text2 {
position:absolute;
top: -25px;
left:-25px;
color:white;
}
<div class="box box-bordered">
<div class="text">Text</div>
</div>
<div class="box box-bordered">
<div class="text2">Text</div>
</div>
I don't know if you have considered it but box-shadow has a default margin. Set it to 0 and you achieve the desired result.
.box {
position:relative;
width:150px;
height:150px;
background:red;
box-sizing:border-box;
margin:10px;
float:left;
}
.box-shadow {
box-shadow:inset 0 0 0 25px rgba(0,0,0,0.1);
margin: 0;
}
.text {
position:absolute;
top:0;
left:0;
color:white;
}
<div class="box box-shadow">
<div class="text">Text</div>
</div>
As you can see in the center 100 x 100 area is the region, where text contents will be placed. Every content will be calculated based on margin, border and padding.
Therefore, I dont see a solution without using the negative margins or inset box as you mentioned, which is some kind of fix to the original question.
It's posibble.
.parent {
position: relative;
border: solid 1em;
}
.child {
--top: 0;
--left: 0;
position: absolute;
box-sizing: content-box;
width: 100%;
height: 100%;
border: solid 0 transparent;
border-width: inherit;
top: calc(50% + var(--top));
left: calc(50% + var(--left));
transform: translate(-50%, -50%);
background-origin: border-box;
}
If your parent have different border widths around it. This wouldn't work right. But most of the time this would do the job.
This question already has answers here:
CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue
(9 answers)
Closed 6 years ago.
Is it not possible to have the left and right side of an element as overflow:hidden, and the top and bottom as overflow-visible?
Once I add hidden to either overflow property, they both get cut off from the outer container.
I'm trying this but no luck: http://jsfiddle.net/dmGXY/
<div id="outer" style="overflow-x:hidden;overflow-y:visible;">
<div id="left"></div>
<div id="top"></div>
</div>
<style>
#left,#top {
position:absolute;
border:solid black 2px;
width:100px;
height:100px;
}
#left {
margin-left:-30px;
}
#top {
margin-left:100px;
margin-top:-30px;
}
#outer {
position:absolute;
top:70px;
left:100px;
width:300px;
height:200px;
border:solid 2px red;
}
</style>
You cant hide one and show the other however you can use another container as a "mask" to achieve the same effect
<div id="outer">
<div id="inner">
<div id="left"></div>
<div id="top"></div>
</div>
</div>
#left,#top {
position:absolute;
border:solid black 2px;
width:100px;
height:100px;
}
#left {
margin-left:-30px;
}
#top {
margin-left:100px;
margin-top:-30px;
}
#inner {
position:absolute;
top:70px;
left:0;
width:300px;
height:200px;
border:solid 2px red;
}
#outer {
position:absolute;
top:0;
left:100px;
width:304px;
height:100%;
border:solid 2px green;
overflow: hidden;
}
You can see the output here:
http://jsfiddle.net/LB2bg/