I'd like to be able to circle elements on a web page using only CSS. I have some code that is almost working - it produces a circle around the element but
the width does not match the width of the content (it is always too big), and
I cant seem to get it to center on the child
The following code is what I currently have
<!doctype html>
<html lang=en>
<head>
<meta charset=utf-8>
<title>MWE</title>
</head>
<body>
<style>
div.ccc {
display: run-in;
position: relative;
}
div.ccc:after {
display: inline-block;
content: '';
position: absolute;
top: -50px;
right: -50px;
bottom: -50px;
left: -50px;
opacity: 0.7;
border: 5px solid red;
border-radius: 50%;
padding: 10px;
}
</style>
<div class="ccc">
<img src="https://beautifulenvironments.files.wordpress.com/2017/12/twinkly-lights.jpg" width="10%">
</div>
<div class="ccc">
<img src="https://beautifulenvironments.files.wordpress.com/2017/12/twinkly-lights.jpg">
</div>
</body>
which produces the following. Note that the circles are not centered on the images and the width's are off.
Is it possible to fix that using CSS only?
Set the div to display:inline-block and it will work.
Divs are block-level elements by default, which mean they'll take 100% the width.
edit: problem is that you're using % to size the image, which depends on the parent width... and we are trying to get the parent sized accordingly to the child... So that won't work.
Closest you can get, as far as I can tell, is avoid sizing your image on %, and display the div as inline-block
div.ccc {
position: relative;
display:inline-block;
}
div.ccc:after {
display: inline-block;
content: '';
position: absolute;
top: -50px;
right: -50px;
bottom: -50px;
left: -50px;
opacity: 0.7;
border: 5px solid red;
border-radius: 50%;
padding: 10px;
}
.small{
width:200px;
}
<div class="ccc">
<img src="https://beautifulenvironments.files.wordpress.com/2017/12/twinkly-lights.jpg" class="small">
</div>
<div class="ccc">
<img src="https://beautifulenvironments.files.wordpress.com/2017/12/twinkly-lights.jpg">
</div>
if you really need to size it as %, you'll need to add another container and size that one instead
div.ccc {
position: relative;
display:inline-block;
}
div.ccc:after {
display: inline-block;
content: '';
position: absolute;
top: -50px;
right: -50px;
bottom: -50px;
left: -50px;
opacity: 0.7;
border: 5px solid red;
border-radius: 50%;
padding: 10px;
}
.img-container{
display:inline-block;
}
.img-container img{width:100%}
.small{
width:200px;
}
<div class="ccc">
<div class="img-container small">
<img src="https://beautifulenvironments.files.wordpress.com/2017/12/twinkly-lights.jpg">
</div>
</div>
<div class="ccc">
<div class="img-container">
<img src="https://beautifulenvironments.files.wordpress.com/2017/12/twinkly-lights.jpg">
</div>
</div>
The width of a div is 100% by default, that's the reason all your circles are massive and not centred on the child.
Why not just put the red circle border on the img tag instead of the div? I.e., put the circle on the child element in the first place.
Another option would be to get the div to match size of the content by setting display: inline-block on the .ccc class.
If neither of those is an option, I'm pretty sure there is no pure CSS way of doing it.
Related
I'm trying to put two images on top of each other in the HTML of an email, but it fails. It displays fine in normal HTML, but when it comes to the email layout, it collapses.
code
<td className="icon">
<img class="block" src='./img/b.png' />
<img src='./img/a.png' />
</td>
<style>
.block {
margin-bottom: -15px;
margin-left: -40px;
}
</style>
margin isn't working totally.
Do you have any ideas in MAIL HTML?
ideal:
issue:
I am not sure, but I think your "td" with the icon class should have a bigger width in your layout. So the margin of -40px does not work right. I guess you can try hardcode the icon width, increase the negative margin value or position your images as absolute within your container.
I also leave this "logo" draw with CSS below. I hope it can help you a little. (You can change the width and height of the container for your needs).
HTML
<div class="circles-container">
<div class="circle circle1"></div>
<div class="circle circle2"></div>
</div>
CSS
.circles-container{
position: relative;
display: flex;
width: 200px;
height: 100px;
background-color: transparent;
}
.circle{
position: absolute;
top:0;
width: 50%;
height: 100%;
border-radius: 50%;
transform: translateX(-50%);
}
.circle1{
left: 33%;
background-color: #3484b9;
}
.circle2{
left: 66%;
background-color: #ffd61e;
}
I know this may seem like a newby question, but is it possible to set an image element as a parent? If so, how can I do so?
Heres an example of what I'm looking for:
Also, the reason I can't just have the div element as the parent is that I want that text element relative to that image element, not the div element. This way I can center the text relative to the image. Thanks in advance for any help!
Looks like I've figured it out. I started messing with some values and I got it.
HTML:
<div id="main-div">
<img id="image" src="url.com/image.png">
<h1 id="text">Caption</h1>
</div>
CSS:
#main-div {
position: absolute;
top: 30px;
left: 50%;
margin: 0px auto;
transform: translate(-50%, 0);
}
#image {
position: absolute;
top: 130px;
left: 50%;
margin: 0px auto;
transform: translate(-50%, 0);
color: white;
font-family: "Roboto";
text-align: center;
}
#text {
position: absolute;
top: 30px;
left: 15%;
margin: 0px auto;
transform: translate(-50%, 0);
display: block;
border: thin red solid;
}
Here's a JS Fiddle of the code and final result: https://jsfiddle.net/k3b70Lg7/
No you cannot because image elements are replaced.
You can however wrap the image and the text element in another div and position that.
<div class="outer-black">
<div class="inner-image-text-wrapper">
<img src="..">
<div class="text"></div>
</div>
</div>
Now setting the wrapper to be inline-text means that it will expand according to contents (the image) and by setting it also to be position:relative you can position the text (position:absolute) wherever you want inside it.
Full example
.outer-black {
background: black;
padding: 2em;
}
.inner-image-text-wrapper{
position:relative;
display:inline-block;
}
.inner-image-text-wrapper img{display:block;}
.inner-image-text-wrapper .text{
position:absolute;
top:105%;
left:5%;
right:5%;
text-align:center;
background:rgba(255,255,255,0.5);
}
<div class="outer-black">
<div class="inner-image-text-wrapper">
<img src="http://lorempicsum.com/simpsons/300/200/1">
<div class="text">image caption</div>
</div>
</div>
I have a parent div that contains two children, side by side. The first child is an image that must be height 100% and 58% width, margin auto and overflow hidden. The second child contains text, and the length of the text determines the height of the parent. This is a template for several pages, with different length of text, and therefore different parent height. Is it possible to do what I'm trying to do without using JS? Thanks for your input! Code below.
HTML:
<div id="product-summary">
<div class="product-image-container">
<img />
</div>
<div id="product-details">
<h3 class="product-title"></h3>
<div class="product-description"></div>
</div>
</div>
CSS:
.product-image-container {
position: absolute;
top: 0;
left: 0;
width: 58%;
height: 100%;
overflow: hidden;
img {
position: absolute;
top: 0;
left: 50%;
margin: auto;
transform: translateX(-50%);
min-width: 100%;
height: 100%;
}
}
#product-details {
float: right;
border: solid thin #777;
height: ~"calc(100% - 2px)";
width: 41%;
text-align: center;
}
The problem is your #product-details is floated, which creates a new BFM (block formatting context), and the parent gets collapsed.
I suggest you read more about BFMs here: http://yuiblog.com/blog/2010/05/19/css-101-block-formatting-contexts/
There are several ways to fix this:
You could clear the parent, a way to do that is by adding overflow: hidden; to the #product-summary element.
You could remove the float: right from #product-details, and use flexbox to align it instead.
I don't know any preprocessor wizardry, but using inline-block works good, as well as keeping positioned absolute elements wrapped in a relative parent for control. It wasn't mentioned how the image is displayed, so I assume aspect ratio unchanged and no cropping.
SNIPPET
.product-image-container {
display: inline-block;
position: relative;
top: 0;
left: 0;
right: 0;
width: 58%;
height: 100vh;
overflow: hidden;
}
img {
display: inline-block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
}
#product-details {
float: right;
border: 1px solid #777;
height: 100%;
width: 41%;
text-align: center;
}
a {
margin-left: 50%;
}
<div id="product-summary">
<div class="product-image-container">
<img src='https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png'>
</div>
<div id="product-details">
<h3 class="product-title">Lena Söderberg</h3>
<div class="product-description">
<blockquote>Lenna or Lena is the name given to a standard test image widely used in the field of image processing since 1973. It is a picture of Lena Söderberg, shot by photographer Dwight Hooker, cropped from the centerfold of the November 1972 issue of Playboy
magazine.
</blockquote>
<a href='https://en.wikipedia.org/wiki/Lenna'>Wikipedia</a>
</div>
</div>
</div>
I want to make responsive image gallery. That will display extended image on thumbnail hover. Gallery can't use any JS this is requirement.
But there is 1 little problem. Gallery needs to be responsive.
That means expanded image have to be the same size as the default image that is responsive and resize on smaller devices.
Here is my html code
<div class="container"></div>
<div class="container">
<div id="gallery-photo-container">
<img src="http://imgur.com/60BBDre.jpg">
<div class="gallery-thumbnail-image">
<img src="http://imgur.com/60BBDre.jpg">
<div class="gallery-main-image">
<img src="http://imgur.com/60BBDre.jpg">
</div>
</div>
<div class="gallery-thumbnail-image">
<img src="http://i.imgur.com/C7SFJxy.jpg">
<div class="gallery-main-image">
<img src="http://i.imgur.com/C7SFJxy.jpg">
</div>
</div>
<div class="gallery-thumbnail-image">
<img src="http://i.imgur.com/aa5kiAi.jpg">
<div class="gallery-main-image">
<img src="http://i.imgur.com/aa5kiAi.jpg">
</div>
</div>
<div class="gallery-thumbnail-image">
<img src="http://imgur.com/TWLJOVv.jpg">
<div class="gallery-main-image">
<img src="http://imgur.com/TWLJOVv.jpg">
</div>
</div>
</div>
</div>
Absolute approach
I have almost done it, using absolute position and positioning with top attribute. But on resize expanded image is the size of left container beginning to the right end of the page.
Here is my DEMO1 and CSS.
.gallery-thumbnail-image:hover > .gallery-main-image {
visibility: visible;
opacity: 1;
}
.gallery-thumbnail-image {
display: inline-block;
}
#gallery-photo-container .gallery-thumbnail-image > img {
width: 79px;
}
#gallery-photo-container img {
max-width: 100%;
}
.gallery-main-image {
position: absolute;
visibility: hidden;
top: 18px;
left: 18px;
margin-right: 8px;
}
.container {
width: 50%;
}
#gallery-photo-container {
border: 1px solid black;
padding: 10px;
}
Relative approach
I think it can be done it too, by using relative position and positioning with bottom attribute. But here the problem is that thumbnail image container is resizing to the expanded image size on hover. And the bottom attribute value is screen size dependent.
In this DEMO2 you have to click on a thumbnail because they are jumping. And here is CSS for relative approach.
.gallery-thumbnail-image:hover > .gallery-main-image {
display: block;
opacity: 1;
}
.gallery-thumbnail-image {
display: inline-block;
}
#gallery-photo-container .gallery-thumbnail-image > img {
width: 79px;
}
#gallery-photo-container img {
width: 100%;
}
.gallery-main-image {
position: relative;
display: none;
bottom: 373px;
}
So, could it be done responsive way with one of these two approaches? Or maybe you have another idea. I'm looking forward for your help.
See this update of your plunk.
https://plnkr.co/edit/6EOKiKEQcxDiuIXApPLo?p=preview
the main changes are here:
.gallery-main-image {
position: absolute;
display: none;
top: 10px;
left: 10px;
right: 10px;
}
#gallery-photo-container {
border: 1px solid black;
padding: 10px;
position: relative;
}
Use of an absolute element positioned within relatively positioned element.
You need a margin-right: 8px;, because of the top: 8px; left: 8px; Plunkr:
.gallery-thumbnail-image:hover > .gallery-main-image {
visibility: visible;
opacity: 1;
margin-right: 8px;
}
Slightly off-topic, but... just in case you're interested in simulating an onclick event with CSS, see this SO answer.
I want to position my button on the bottom of a div or the bottom of the screen (but in a non-fixed position). My code structure looks like this:
div-1
div-2
div-3
button
I want to put the button at the bottom of div 1, which height is set using jQuery (The height is the height of the screen, so putting the button at the bottom of the screen may also be a solution)
What I've tried so far:
CSS
.button {
position: fixed;
bottom: 10px;
left: 50%;
margin-left: -104.5px; /*104.5px is half of the button's width*/
}
This centers the button (what I want) and it places it at the bottom of the screen, but the position is fixed, so if I scroll down the button goes down aswell.
I've also tried setting the button's position to absolute and div-1's position to relative, this didn't work either.
Edit: The div's height is variable, so margins may not be such a good option
just do the button position:absolute without putting the div relativ
.button {
position: absolute;
bottom: 10px;
left: 50%;
margin-left: -104.5px; /*104.5px is half of the button's width*/
}
.test{
height:1000px;
}
<div class="test">
<div>
<div>
<button class="button">
test
</button>
</div>
</div>
</div>
Try using VW instead of px.
HTML:
<button class="button">TEST</button>
CSS:
.button {
position: fixed;
bottom: 10px;
left: 47vw;
width: 6vw;
}
EDIT:
HTML:
<div class="div">
<button class="button">TEST</button>
</div>
CSS:
.div{
position: relative;
border: 1px solid black;
width: 500px;
height: 250px;
}
.button {
position: absolute;
bottom: 5px;
left: 50%;
width: 50px;
margin-left: -25px;
}
I was looking the code instead of the question so i forget that the real question was add the button on the bottom of div or screen.
The parent div has to be position: relative; and the button position: absolute;
if width div 50% then left must 25% if width div 70% then left must 15%
.center{
position:fixed;
bottom:20px;
left:20%;
width:60%;
}
.center .btn{
background:red;
width:100%;
color:white;
font-weight:bold;
border-radius: 64px;
padding:10px;
}
<div class="center">
<button class="btn">Login</button>
</div>
I believe these Stack Overflow posts might be of help to you:
1) How do I get a div to float to the bottom of its container
2) HTML/CSS positioning float bottom
If this doesn't help can you please also provide your HTML code.
You should use position: absolute on your button when parent element height and width is 100% (of document or page).
<div class="div-1">
<div class="div-2">
<div class="div-3">
<button>
Just a button
</button>
</div>
</div>
</div>
and css with little reset:
* {
margin: 0;
padding: 0;
}
html, body {
width: 100%;
height: 100%;
}
.div-1 {
position: relative;
height: 100%;
width: 100%;
}
.div-2, .div-3{
width: inherit;
height: inherit;
}
button {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
}
Here is JSfiddle
Here is the responsive width:
position: absolute;
bottom: 23px;
left: 10%;
width: 80%;