.fotoPerfil{
width: 150px;
position: absolute;
margin-top: -6em;
border: solid;
border-width: 5px;
border-color: white;
border-radius: 50%;
}
<div class="d-flex justify-content-center">
<img class="fotoPerfil" src="./img/manu.png">
</div>
Hello, I have a little problem with this image, idk if you can see it but the border does not fully cover part of the pic, there is a thin space at the top of the image.
I made the border red and added a random photo from google images to help make this snippet a little more visual. This is how I would go about making the photo inside the border and having a container to make the whole thing position absolute if thats still needed for something.
.absolute {
position: absolute;
}
.fotoPerfil {
width: 150px;
height: 150px;
border: 5px solid red;
border-radius: 50%;
overflow: hidden;
}
.fotoPerfil img {
width: 100%;
height: 100%;
object-fit: cover;
}
<div class="absolute">
<div class="d-flex justify-content-center fotoPerfil">
<img src="https://i.natgeofe.com/k/830b5d15-92db-429f-a80a-cc89b5700af5/mt-everest.jpg?w=636&h=437">
</div>
</div>
Related
I try to get the middle of the top stripe of the border away but not the whole top, how can I do this?
I am doing Html. I tried a lot but without success I hope anyone can help me.
If I have understood you question correctly, something basic like this would hide the middle of the top border:
.box {
position: relative;
height: 100px;
width: 300px;
border: 10px solid #000;
}
.box .mask {
border-top: 10px solid #fff;
width: 100px;
position: absolute;
top: -10px;
left: 100px;
}
<div class="box">
<div class="mask"></div>
</div>
I have a div that I want to fill the width of the browser window.
Inside the div, I want 2 images, on top of each other and each centered within the div. The images might be of any size. Both images need to maintain their aspect ratio and I don't want either of them as background to the div.
.parent {
position: relative;
border: 1px solid blue;
width: 100%;
}
.child {
border: 1px solid red;
margin-left: auto;
margin-right: auto;
display: block;
max-width: 100%;
}
.ontop{
z-index:1;
}
<div class="parent">
<img class='child ontop' src="https://i.postimg.cc/yNh7V4v1/spaceship.png">
<img class='child' src="https://i.postimg.cc/mgB04zzn/universe.jpg">
</div>
fiddle
The problem here is that they are not on top of each other. I can get them on top of each other, and centered, at least horizontally
.parent {
position: relative;
border: 1px solid blue;
width: 100%;
}
.child {
position: absolute;
border: 1px solid red;
margin-left: auto;
margin-right: auto;
display: block;
max-width: 100%;
left: 50%;
transform: translate(-50%);
}
.ontop{
z-index:1;
}
<div class="parent">
<img class='child ontop' src="https://i.postimg.cc/yNh7V4v1/spaceship.png">
<img class='child' src="https://i.postimg.cc/mgB04zzn/universe.jpg">
</div>
fiddle
but the problem now is that because of my use of absolute positioning, the images are no longer contained within the div.
Could anyone tell me what the technique would be?
I would suggest you move the image(space) to CSS background-image. That is the right approach when you want to the image as a background.
Apply flex to parent and you are good to go.
.parent {
background-image: url(https://i.postimg.cc/mgB04zzn/universe.jpg);
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.child{
height: 100px;
width: 100px;
}
<div class="parent">
<img class='child' src="https://i.postimg.cc/yNh7V4v1/spaceship.png">
</div>
Use position:absolute; to place the space ship into the middle center of the parent. This requires the parent to be the same width as the image. I did this in the example using width: fit-content;
Using this method you can position the set of images anywhere by putting these three HTML elements into one container which you move around.
.parent {
width: fit-content;
border: 1px solid blue;
position: relative;
}
.parent img {
border: 1px solid red;
}
.center {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
<div class="parent">
<img class="center" src="https://i.postimg.cc/yNh7V4v1/spaceship.png">
<img src="https://i.postimg.cc/mgB04zzn/universe.jpg">
</div>
Want the background image larger, simply change its size? In this example I am going to set it's width to width: 100vw; 100 view width
(I put as an inline style for this example though you should probably make a CSS rule for your desired size)
.parent {
width: fit-content;
border: 1px solid blue;
position: relative;
}
.parent img {
border: 1px solid red;
}
.center {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
<div class="parent">
<img class="center" src="https://i.postimg.cc/yNh7V4v1/spaceship.png">
<img style="width:100vw;" src="https://i.postimg.cc/mgB04zzn/universe.jpg">
</div>
I have a child div, who's position is absolute and the left property is like -20px (just negative). The parent div has overflow:scroll but it does not allow to scroll to the left.
I've tried to delete parents or add wrappers, tried without the position properties, etc...
html
<div class="container">
<div class="levels">
<div class="level">
<div class="node">Node1</div>
<div class="node">Node2</div>
<div class="node">Node3</div>
<div class="node">Node4</div>
<div class="node">Node5</div>
</div>
</div>
</div>
css
.container {
border: 1px solid red;
margin: 20px;
height: 200px;
width: 900px;
overflow: scroll;
}
.levels {
width: 100%;
height: 100%;
position: relative;
}
.level{
border: 2px solid black;
width: 536px;
position: absolute;
left: -20px;
}
.node {
background-color: blue;
border: 2px green solid;
width: 100px;
display: inline-block;
}
I've simulated a scenario in a CodePen
Id like to have more of those 'level' divs and even more aligned to the left, so i can simulate like a flow tree. If this isn't the way to go i'd like to hear.
Please see JSfiddle:
http://jsfiddle.net/76yKL/
Is there a way to align "ruler-mark-short" and "ruler-mark-high" divs to the bottom and center of their parents("ruler-mark-container") ?
Since width of "ruler-mark-short" and "ruler-mark-high" can be changed dynamically by JavaScript, I can't use 'margin' or 'left' in pixels.
So, I have to use something like "margin: 0 auto" or "text-align: center", but non of this works.
I'm struggling with aligning ruler-marks to both bottom and center without using additional wrapper container.
Any help is appreciated, thanks.
Code From JSfiddle above:
HTML:
<div class="container">
<div class="ruler">
<div class="ruler-mark-container">
<div class="ruler-mark-high"></div>
</div>
<div class="ruler-mark-container">
<div class="ruler-mark-short"></div>
</div>
<div class="ruler-mark-container">
<div class="ruler-mark-short"></div>
</div>
<div class="ruler-mark-container">
<div class="ruler-mark-short"></div>
</div>
<div class="ruler-mark-container">
<div class="ruler-mark-short"></div>
</div>
<div class="ruler-mark-container">
<div class="ruler-mark-high"></div>
</div>
</div>
</div>
CSS:
.container {
border: 1px solid grey;
position: absolute;
width: 700px;
height: 200px;
}
.ruler {
border: 1px solid orange;
position: absolute;
width: 100%;
height: 100px;
bottom: 0px;
}
.ruler-mark-container {
border: 1px solid blue;
position: relative;
width: 30px;
height: 100%;
/*display: inline-block;*/
float: left;
bottom: 0px;
}
.ruler-mark-high {
position: absolute;
border: 1px solid black;
background-color: grey;
bottom: 0px;
width: 3px;
height: 50px;
}
.ruler-mark-short {
position: absolute;
border: 1px solid black;
background-color: grey;
bottom: 0px;
width: 3px;
height: 25px;
}
text-align:center does not work with absolutely positioned elements. So remove absolute position, and format them using display:inline-block.
Without absolute positioning, they won’t be at the bottom any more of course. To fix that, stop floating the container elements, and display them as table-cell instead, and add vertical-align:bottom to both containers and markers.
http://jsfiddle.net/76yKL/7/
You just need to add the following css:
.ruler-mark-short, .ruler-mark-high{
left: 50%;
margin-left: -1.5px;
}
Working Fiddle
UPDATED: (IE9+)
.ruler-mark-short, .ruler-mark-high{
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
/* Add other vendor prefixes here */
}
Working Fiddle
I have a parent div who have 2 childs, a div#2 and an image, the problem is that when i want the div#2 moves up, it carries the image with it
<section id="ticket">
<div id="wrap_960">
<div id="entry"></div>
<img id="shadow" src="img/shadow.png">
</div>
</section>
and this is the CSS:
#ticket{
height: 300px;
width: 100%;
position: relative;
}
#entry{
float: right;
height: 200px;
width: 100%;
background: white;
border: solid 1px #abcbdb;
border-radius: 15px;
position: relative;
}
#entry:hover{
margin-top: -30px;
}
#shadow{
margin-top: -160px;
}
Thanks!
Thats because your moving it up and what ever is underneath naturally moves with it :)
#entry:hover{
margin-top: -30px;
margin-bottom: 30px; // should counteract the movement up.
}
Fiddle: http://jsfiddle.net/8KtaX/