I am trying to define the width of a few divs nested within an absolute parent. Their width is defined but does not appear to be taken in consideration by the browser.
Any ideas of what it is I am missing (or doing wrong)?
Thank you all in advance for your time and attention.
HTML
<div class="icons-container">
<div>
<img src="img/2d.svg" alt="2d animation icon">
</div>
<div>
<img src="img/3d.svg" alt="3d animation icon">
</div>
</div>
CSS
.icons-container {
width: 100%;
margin: 0 auto;
border: 1px solid #fff;
position: absolute;
bottom: 0;
}
.icons-container div {
width: 150px;
margin: 0 2px;
background: rgba(0,0,0,0.5);
display: inline;
vertical-align: middle;
border: 1px solid #fff;
}
.icons-container div img {
width: 50px;
}
Update .inline to .inline-block:
.icons-container {
width: 100%;
margin: 0 auto;
border: 1px solid #fff;
position: absolute;
bottom: 0;
}
.icons-container div {
width: 150px;
margin: 0 2px;
background: rgba(0,0,0,0.5);
display: inline-block;
vertical-align: middle;
border: 1px solid #fff;
}
.icons-container div img {
width: 50px;
}
<div class="icons-container">
<div>
<img src="img/2d.svg" alt="2d animation icon">
</div>
<div>
<img src="img/3d.svg" alt="3d animation icon">
</div>
</div>
use display inline-block instead of inline
Related
I need to achieve something like this:
representation
I have found similar issues but they do not completely cover my task. Here is an example of a thing I have found:
.blue-background {
background-color: blue;
border-radius: 5px;
top: 3em;
left: 230px;
padding: 10px;
font-family: Roboto, sans-serif;
font-size: 14px;
line-height: 22px;
color: #313333;
display: flex;
align-items: center;
width: 260px;
}
.blue-background::after {
content: ' ';
width: 0px;
height: 0px;
border-top: 25px solid transparent;
border-left: 37px solid blue;
border-bottom: 25px solid transparent;
border-right: 0px solid transparent;
position: absolute;
top: 43%;
left: 47%;
}
.child-image-wrapper {
max-width: 260px;
margin: auto;
img {
max-width: 260px;
}
}
<div class="col-md-4 col-xs-12">
<div class="image-block">
<div class="blue-background">
<h2>Some Text <span class="arrow"></span></h2>
</div>
<div class="child-image-wrapper">
<img src="This is an image" />
</div>
</div>
Now the problem with the above CSS is that this works only at particular screen size (like 585px or so) otherwise the arrow "detaches" from the left div and goes into the right div. What I need is for the blue arrow to be stuck to the left div even if the screen size changes. Would it be possible to achieve this in some way? Sorry I am pretty new to front-end design
You can do it like so:
.wrapper {
width: 10em;
height: 2em; /* Height needs to match .right::after height and width */
display: flex;
}
.left {
background-color: lightblue;
width: 50%;
}
.right {
background-color: lightpink;
border-left: 1px solid purple;
width: 50%;
position: relative;
overflow: hidden;
}
.right:before {
height: 2em; /* Match height above*/
width: 2em; /* Match height above*/
background-color: #b77681;
position: absolute;
top: 50%;
left: 0%;
content: "";
border: 1px solid #864954;
transform: translate(-73%, -50%) rotate(45deg);
}
<div class='wrapper'>
<div class='left'>
</div>
<div class='right'>
</div>
</div>
I encourage you to read more about the position property (in our case specifically absolute and relative). here you can find some introduction.
As per your question change the top and left properties in .blue-background::after to fit the position for the arrow as you want.
here is an example: https://jsfiddle.net/qa9un7fy/
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;
}
I am trying to make a product summary box for the following page:
I was playing around to set the border on the following divs:
<div style="border:1px solid black;" class="inner">
<div style="padding-bottom: 14px;border:1px solid black;" class="title">
The result looks like the following:
I would like to let it look like that:
Any suggestions how to set the divs properly? Or would it be better to design a backgroud image to fit the box?
I appreciate your replies!
You could use a tableinstead of DIVs whose cell borders you make visible.
Or use display: table , display: table-row and display: table-cell for the DIVs, again defining a border for the cell elements.
This is a 5-minute CSS solution:
* {
box-sizing: border-box;
font-family: sans-serif;
}
.product {
border: 2px solid #999;
border-radius: 2px;
width: 20em;
}
.product--header,
.product--image,
.product--rating {
width: 100%;
border-bottom: 2px solid #999;
}
.product--header h2, .product--header h3 {
text-align: center;
padding: 0.25em 0 0.5em;
margin: 0;
}
.product--image img {
width: 100%;
padding: 0.25em;
z-index: 1;
}
.product--image {
position: relative;
}
.product--pricetag {
position: absolute;
z-index: 2;
left: 0;
top: 1em;
color: white;
background: rgba(0, 0, 0, 0.75);
text-align: center;
width: 40%;
padding: 0.5em;
}
.product--rating p {
text-align: center;
}
.product--links {
width: 100%;
margin: 0.5em;
}
.product--links a.btn {
display: block;
color: white;
background: blue;
text-align: center;
width: 90%;
margin-left: 2.5%;
padding: 0.5em;
margin-bottom: 0.25em;
}
<div class="product">
<div class="product--header">
<h2>Test Product</h2>
<h3>Price Class: $$ | P3 | 14</h3>
</div>
<div class="product--image">
<img src="http://placekitten.com/200/200" alt="cat">
<p class="product--pricetag">
999 $
</p>
</div>
<div class="product--rating">
<p>Rating: 4/5</p>
</div>
<p class="product--links">
<a class="btn">Buy on Amazon</a>
<a class="btn">Other Sizes</a>
</p>
</div>
I wouldn't recommend a background frame image, because it's a pain to work with and loading it is a waste of bandwidth.
Put four borders on the container, then just add border-bottom in each child, except on the last.
.container-bordered {
border: 2px solid red;
}
.container-bordered > div:not(:last-of-type) {
border-bottom: 2px solid red;
}
https://jsfiddle.net/cqjxuype/
https://jsfiddle.net/3Lthpf72/5/
Html css with jsfiddle ex: not working: vertical align and using full width based on width percentage of two child containers
When I make the two child containers add up to the parent width percentage, it folds down. Also the vertical align middle is at the bottom, not the middle.
Any thoughts?
.payee.list-item {
border: 1px solid red;
height: 100%;
width: 300px;
}
.list-item-content {
display: inline-block;
border: 1px solid blue;
width: 80%
}
.payee.list-item>img {
border: 1px solid green;
height: 45px;
display: inline-block;
width: 17%;
vertical-align: middle;
}
<div class="payee list-item">
<img src="/Image/PayeeBillPayAccountPortrait/832">
<div class="list-item-content">
<h4>Colonel Sanders!</h4>
<h3>Colonel Sanders</h3>
</div>
</div>
Are you trying to do something like that?
.payee.list-item {
border: 1px solid red;
height: 100%;
width: 300px;
display: inline-block;
position: relative;
}
.list-item-content {
float: right;
border: 1px solid blue;
width: 80%
}
h3, h4 {
width: 50%;
float: left;
box-sizing: border-box;
padding: 6px;
}
h3{background: lightgray;}
h4{background: gray;}
.payee.list-item>img {
border: 1px solid green;
max-height: 45px;
width: 17%;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
<div class="payee list-item">
<img src="https://static.pexels.com/photos/6555/nature-sunset-person-woman.jpg">
<div class="list-item-content">
<h3>Colonel Sanders</h3>
<h4>Colonel Sanders!</h4>
</div>
</div>
So I'm trying to get divs to fit perfectly in a wrapper using fixed pixels for width and height. Although I'm confused as to how the pixels don't add up properly.
HTML
<div class="div1">
<img src="image.png" alt="image" class="image">
</div>
<div class="div2">
</div>
<div class="div3">
</div>
<div class="div4">
</div>
</div>
CSS
#wrapper {
height: 455px;
width: 690px;
background-color: grey;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
overflow: hidden;
white-space:nowrap;
}
.div1 {
display: inline-block;
margin-bottom: 10px;
vertical-align:top;
}
.image {
max-width: 172px;
max-height: 172px;
border-radius: 2%;
border: 4px solid blue;
}
.div2 {
height: 172px;
width: 277px;
border: 4px solid blue;
display: inline-block;
margin-left: 30px;
background-color: purple;
}
.div3 {
width: 159px;
height: 188px;
display: inline-block;
margin-left: 30px;
border-left: 4px solid blue;
border-right: 2px solid blue;
border-top: 2px solid blue;
vertical-align: top;
background-color: purple;
}
.div4 {
background: url(image.png) no-repeat center;
background-size: cover;
width: 690px;
height: 265px;
}
If the parent div is 690px wide why can't the child divs add up to 690 with calculated widths, margin and boarders.
(div1)180 + 30 + (div2)285 + 30 + (div3)165 = 690px
If you look at div 3 it's right border can't be seen. You have to reduce the width by 7px to see it.
This is also happening vertically with a 190px div3 height meant to touch div4 exactly but is off by 4px.
Is this a browser issue? Default Alignment issues I'm not aware of? I'm really curious to know why this happens!
Any feedback would be appreciated. : )
If you put comments like this in your HTML you can fix the top but for the image in the 2nd line I dont know yet I continue trying
OK SO I did put the 1st line in a div "test" and gaved him display:block and overflow hidden to take away the the space under and then I did give the div1 fixed heigth and width 180px (image+border)
#wrapper {
height: 455px;
width: 690px;
background-color: grey;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
overflow: hidden;
}
.test{
display:block;
overflow: hidden;
}
.div1 {
height:180px;
width:180px;
display: inline-block;
margin-bottom: 10px;
vertical-align:top;
}
.image {
max-width: 172px;
max-height: 172px;
border-radius: 2%;
border: 4px solid blue;
}
.div2 {
height: 172px;
width: 277px;
border: 4px solid blue;
display: inline-block;
margin-left: 30px;
background-color: purple;
}
.div3 {
width: 159px;
height: 188px;
display: inline-block;
margin-left: 30px;
border-left: 4px solid blue;
border-right: 2px solid blue;
border-top: 2px solid blue;
vertical-align: top;
background-color: purple;
}
.div4 {
background: url('http://lorempixel.com/690/265/cats') no-repeat center;
background-size: contain;
width: 690px;
height: 265px;
display:block;
overflow: hidden;
}
<div id="wrapper">
<div class="test">
<div class="div1">
<img src="http://lorempixel.com/172/172/cats" alt="image" class="image">
</div><!--
--><div class="div2">
</div><!--
--><div class="div3">
</div><!--
--> </div><div class="div4">
</div>
</div>
have you checked out box-sizing feature?
Here is some links that might be helpful.
https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing