When using absolute positioning on an element within a div with a relative position rule, the element is slightly lower than the bottom of the parent div. Why does this happen? How would I solve this? I realize I can just mod the bottom value on .hoverAction, but that seems more like a workaround than an actual fix.
function showFileUploadDialog() {
//do stuff
}
#avatarContainer {
display: inline-block;
position: relative;
}
.hoverAction {
position: absolute;
bottom: 0;
background: rgba(0, 0, 0, 0.65);
color: white;
display: block;
width: calc(100% - 12px);
padding: 6px;
}
#avatar {
width: 200px;
height: 180px;
background-size: cover;
background-position: center;
border-radius: 1px;
background-color: #eeeeee;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.46);
display: inline-block;
}
<div id="avatarContainer">
<a class="popup-link" href="{{ anime.poster }}"><img id="avatar" style="background-image: url('http://www.herdofsquirrels.com/wp-content/uploads/2014/08/squirrel-nut-cute-animal-nature-grass-1920x1280.jpg');" /></a>
<a class="hoverAction" href="#" onclick="showFileUploadDialog(); return false;">Update Avatar</a>
</div>
http://jsfiddle.net/pcwhmft6/1/
Add vertical-align: top; top your img
#avatar {
vertical-align: top;
}
http://jsfiddle.net/pcwhmft6/2/
or set your image to display: block (Thanks #Justin Breiland for noticing)
Related
I'm trying to create this.
Unfortunately, I'm having trouble putting the image on top of the div like this.
How can I achieve this (CSS or JS)?
My current HTML:
<div className="account-container">
<img src="" alt="Avatar" id="userAvatar"/>
<div className="accountStats">
...Other Stuff
</div>
</div>
My current CSS:
#userAvatar{
border-radius: 50%;
height: 312px;
width: 312px;
object-fit: cover;
object-position: center;
}
.accountStats {
width: 760px;
height:980px;
background: #E0E0E0;
box-shadow: 9px 9px 10px rgba(0, 0, 0, 0.25);
border-radius: 18px;
}
.account-container {
top: 30%;
transform:translate(0, 30%);
}
You can give a minus value for the margin-bottom so that the image drops to the bottom. Set the margin-bottom value to half of the image's height (in this case 156px) so that only half of the image lies above the div. Check this out:
#userAvatar{
margin-bottom:-156px; /* 156px is half of #userAvatar's height */
margin-left:calc(380px - 156px); /* half of .accountStats's width - half of #userAvatar's height */
border-radius: 50%;
height: 312px;
width: 312px;
object-fit: cover;
object-position: center;
}
.accountStats {
text-align:center; /* additional */
padding-top:156px; /* half of #userAvatar's height */
width: 760px;
height:980px;
background: #E0E0E0;
box-shadow: 9px 9px 10px rgba(0, 0, 0, 0.25);
border-radius: 18px;
}
.account-container {
top: 30%;
transform:translate(0, 30%);
}
<div className="account-container">
<img src="https://w7.pngwing.com/pngs/7/618/png-transparent-man-illustration-avatar-icon-fashion-men-avatar-face-fashion-girl-heroes-thumbnail.png" alt="Avatar" id="userAvatar"/>
<div class="accountStats">
Other Stuff
</div>
</div>
Please test this:
margin-top: -156px;
Instead of manually calculating left margin to set image in center, we can use flexbox.
.user {
display: flex;
align-items: center;
justify-content: center;
}
body {
background: #efefef;
}
.account-container {
display: flex;
height: 100vh;
align-items: center;
flex-direction: column;
padding-top: 50px;
}
.card {
width: 350px;
border-radius: 5px;
box-shadow: 2px 5px 10px #ccc;
background: white;
}
.user {
display: flex;
align-items: center;
justify-content: center;
}
#userAvatar {
border-radius: 50%;
border: 3px solid #fff;
position: relative;
bottom: -50px;
object-fit: cover;
}
.accountStats {
height: 100px;
background-color: pink;
border-radius: 0px 0px 5px 5px;
}
<div class="account-container">
<div class="card">
<div class="user">
<img id="userAvatar" src="https://images.pexels.com/photos/4587979/pexels-photo-4587979.jpeg" width="100px" height="100px" />
</div>
<div class="accountStats"></div>
</div>
</div>
use the "position" atrribute
#useravatar{
position:absolute;
top:0%;
left:0%;
}
I have a WebView that displays a html layout. But the problem is the html layout isn't coming out how I expected it. I created a Android layout using xml but I want the layout in html. this is what i am trying trying achieve
The grey part represents a background image.
The purple part a image(Logo).
Then I have a white box with round corners and TextView and Button inside. this is done in android xml but i want something similar in html
This is how it looks in html
But as you can see the logo is behind the white box and the TextView is next to the button instead of the top.
here is my html code
<style>
div {
padding: 10px 10px;
background: #fff;
width: 300px;
border-radius: 10px;
margin : 0 auto;
}
body {
background-image: url("url to background image");
//background-size: cover;
}
.logo {
background-image: url("url to logo");
background-size: cover;
height: 70px;
width: 200px;
margin-bottom 40;
background-color: rgba(0, 0, 0, 0);
}
.container {
display: table;
height: 100%;
position: absolute;
overflow: hidden;
width: 100%;
background-color: rgba(0, 0, 0, 0);
}
.helper {
#position: absolute;
#top: 50%;
display: table-cell;
vertical-align: middle;
background-color: rgba(0, 0, 0, 0);
}
.content {
#position: relative;
#top: -50%;
margin: 0 auto;
width: 200px;
}
.button {
-moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
</style>
<div class="container">
<div class="helper">
<div class="logo"/>
<div class="content">
<p1>Text </p1>
<input type="submit" class="button" value="Button">
</div>
</div>
</div>
Can someone please help me fix my html code to look like the android xml version
Change <p1>Text </p1> to <p>Text </p>.
A p element has the style display:block; by default and will push the button down.
I want to reach this result:
This is what i have atm: http://mijnwebsitebestellen.be/index.php
So i am currently using SVG elements to slice of the images. You can inspect the code in your browser. I can't get the result right because of z-index issues.
Any tips or examples of any sort are appreciated.
You can achieve the same result using pure CSS.
Use a container element for background color and image
Use the pseudo element ::after with a white right border to imitate the right edge
Use some divs of the same class .tile to imitate the stripes with transform: skewX(-10deg); and let them float: right;
Et voilà:
.container {
height: 300px;
width: 400px;
background: linear-gradient(rgba(219, 41, 117, 0.6), rgba(219, 41, 117, 0.6)), url(https://i.stack.imgur.com/e11Va.jpg);
background-size: cover;
color: white;
position: relative;
padding-right: 26px;
}
.container::after {
content: "";
position: absolute;
display: block;
right: 0;
bottom: 0;
height: 0;
width: 0;
border: none;
border-left: none;
border-right: 52px solid white;
border-top: 300px solid transparent;
border-bottom: none;
}
.tile {
width: 30px;
height: inherit;
background: rgba(0, 0, 0, 0.6);
border-left: 5px solid white;
transform: skewX(-10deg);
float: right;
}
<div class="container">
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
</div>
Of course you can add content to the container. Just use another div inside the container and give it the apropriate width.
I have a border, which fits 100% width of container div. What I want to do - add background (or img tag) in center of that border, like in example:
http://www.part.lt/img/8a22897d62de874896a3b62107032bd3507.gif
(The "+" is image and line from left and right must be border). White space must be padding or margin from border.
How can I do this?
What I have tried:
JSFiddle
<div class="full-border">
<div class="full-border-cross"></div>
</div>
.full-border {
border-bottom: 1px solid rgb(204,204,204);
padding: 13px 0;
position: relative;
}
.full-border-cross {
background: #fff url(http://www.part.lt/img/21ea608f463d841dd48f2a856ef7d0d4993.png) no-repeat center center;
position: absolute;
width: 100%;
height: 100%; padding: 0 13px;
}
Does the white space "have" to be padding? or can you just assign it a certain width?
I've updated your fiddle with this code:
.full-border-cross {
background: url(http://www.part.lt/img/21ea608f463d841dd48f2a856ef7d0d4993.png) no-repeat center center #fff;
position: absolute;
left: 50%;
width: 40px;
height: 100%;
}
Here: http://jsfiddle.net/WHVbc/17/
I have updated your requirement below and also available in the following fiddle. Refer that...
Here: http://jsfiddle.net/wRa8n/
<div class="full-border"></div>
<div class="full-border-cross"></div>
<div class="full-border"></div>
.full-border {
border-bottom: 1px solid #CCCCCC;
display: inline-block;
margin: 0 16px;
padding: 0;
width: 200px;
}
.full-border-cross {
background: url("http://www.part.lt/img/21ea608f463d841dd48f2a856ef7d0d4993.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
display: inline-block;
height: auto;
padding-top: 13px;
width: 15px;
}
I'm having some problems with anchor and image tags. My image tags are sitting inside (what is essentially) a div tag each, the div tags have constant height and width values. The image tags are given a constant height value, so their width can be calculated based on their aspect ratio and the images do not become distorted when they're resized to fit inside the div.
I want to have an anchor tag surrounding each image for two reasons. (1.) So the images can act as links, but also (2.) so that when the user hovers over the image, I can display an overlay on top of the image.
Putting the image tag inside an anchor tag solves the problem of the link, but as for the second problem, I'm stumped. I need the anchor tag to dynamically size and position itself over its respective image tag. Ideally I'd like to avoid using JavaScript to solve the problem and just stick to CSS (if possible). I have no objection to adding a little extra markup if needs be.
Relevant HTML:
<listitem>
<img src="../images/image1.jpg"/>
</listitem>
<!--More listitems with different sized images go here-->
And the CSS:
#pictureListContainer listitem {
position: relative;
background-color: rgba(0,0,0,0.5);
display: block;
height: 257px;
width: 636px;
}
#pictureListContainer listitem img {
position: relative;
float: right;
height: 203px !important;
vertical-align: middle;
margin: 21px 296px 21px auto;
border: 6px solid white;
border-radius: 6px;
box-shadow: 0px 0px 3px rgba(0,0,0,0.7);
}
Thanks in advance.
Update: I should maybe make it clear that I would like the overlay to have the same dimensions as the image, so that it only overlays the image.
It can be done using only CSS and HTML: JSFiddle
HTML
<div class="listitem">
<a href="#">
<img src="http://sublantic.net/forge/demos/img/code_canyon/scale.png" alt="image" />
<span class="overlay-text">Test</span>
</a>
</div>
CSS
.listitem {
position: relative;
background-color: rgba(0,0,0,0.5);
display: block;
height: 257px;
width: 636px;
overflow: hidden;
}
.listitem img {
position: relative;
float: right;
height: 203px !important;
vertical-align: middle;
margin: 21px 296px 21px auto;
border: 6px solid white;
border-radius: 6px;
box-shadow: 0px 0px 3px rgba(0,0,0,0.7);
position: relative;
}
.listitem a span {
display: none;
position: absolute;
bottom: 10px;
left: 0;
background-color: rgba(0, 0, 0, 0.6);
width: 100%;
padding: 10px;
color: #FFF;
}
.listitem a:hover span {
display: block;
}
Edit: Overlay fits to image
JSFiddle
CSS
.listitem {
position: relative;
background-color: rgba(0,0,0,0.5);
display: block;
height: 257px;
width: 636px;
}
.listitem img {
border: 6px solid white;
border-radius: 6px;
box-shadow: 0px 0px 3px rgba(0,0,0,0.7);
}
.listitem a {
position: relative;
overflow: hidden;
display: inline-block;
}
.listitem a span {
display: none;
position: absolute;
bottom: 10px;
left: 0;
background-color: rgba(0, 0, 0, 0.6);
width: 100%;
padding: 10px;
color: #FFF;
}
.listitem a:hover span {
display: block;
}
You can use an onClick for the image
<img src="" onClick="" />
This will eliminate the botheration of generating functionality like overlay, etc for a tag and you can get both effects work simultaneously well.
Hope this helps.