I want to add two lines below my p tag, But I want the lines to take 100% width of the container.
How can I achieve this? I can't use hr tags, it should be done with CSS pseudo classes I guess.
CSS AND HTML CODE:
.test {
max-width: 320px;
width: 100%;
border: 1px solid black;
}
<div class="test">
<p>Test</p>
</div>
Add text-align:center to center your text.
Use border-bottom instead of border to make your border appear only below.
Then use a :after element to generate the second border.
To make your element take 100% of its container, just remove the max-width. As its a div (which is a block-level element) it will automatically take 100% of its parent space if you dont tell it otherwise.
.test {
width: 100%;
border-bottom: 1px solid black;
text-align: center;
}
.test:after {
content: '';
display: block;
border-bottom: 1px solid black;
margin-bottom: 4px;
}
<div class="test">
<p>Test</p>
</div>
.test {
max-width: 320px;
width: 100%;
border-bottom: 4px double black;
}
<div class="test">
<p>Test</p>
</div>
Simply change property border to border-bottom and set the border style to double
.test {
max-width: 320px;
width: 100%;
border-bottom: 6px double #444;
text-align: center;
}
<div class="test">
<p>Test</p>
</div>
This is my approach. I hope is helpful to you. You have the flexibility to adjust the space between lines with margin-bottom: 2px;
.test {
max-width: 320px;
width: 100%;
border-bottom: 1px solid black;
text-align:center;
}
.test p {
border-bottom: 1px solid black;
margin-bottom: 2px;
}
<div class="test">
<p>Test</p>
</div>
the "border-bottom" style property can help to draw lines below an element. You can use below code :
.test {
width: 100%;
border-bottom: double;
text-align: center;
}
<div class="test">
<p>Test</p>
</div>
You need to use ::before and ::after to achieve this style.
.test {
max-width: 320px;
width: 100%;
text-align: center;
position: relative;
}
.text {
position: relative;
width: 100%;
}
.text::before,
.text::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
height: 1px;
width: 100%;
background: #000;
}
.text::after {
bottom: -5px;
}
<div class="test">
<p class="text">Test</p>
</div>
Related
Here is a simple code I'm testing
div {
background-color: white;
height: 100%;
width: 100%;
}
img {
max-width: 200px;
border: 5px solid black;
}
<div>
<img src="https://www.thedesignwork.com/wp-content/uploads/2011/10/Random-Pictures-of-Conceptual-and-Creative-Ideas-02.jpg">
</div>
Fiddle: https://jsfiddle.net/xhsngt3q/
On one monitor I get this
On the other one there's a white pixel border on the right and bottom
Any tips on how to remove that?
I think it is caused because of the number of pixels of the image.
I would suggest to add a black background to your image like the following CSS code:
div {
background-color: white;
height: 100%;
width: 100%;
}
img {
max-width: 200px;
border: 5px solid black;
/*My change*/
background-color: black;
}
<div>
<img src="https://www.thedesignwork.com/wp-content/uploads/2011/10/Random-Pictures-of-Conceptual-and-Creative-Ideas-02.jpg">
</div>
Hope this could be useful. Greetings.
You can also try with max-width:199px or max-width:202px
div {
background-color: white;
height: 100%;
width: 100%;
}
img {
/*My change*/
max-width: 199px;
border: 5px solid black;
}
<div>
<img src="https://www.thedesignwork.com/wp-content/uploads/2011/10/Random-Pictures-of-Conceptual-and-Creative-Ideas-02.jpg">
</div>
Add box-shadow 0 0 0 1px; instead of the solid border. It is just a work around but sometimes good enough.
div {
background-color: white;
height: 100%;
width: 100%;
}
img {
max-width: 200px;
border: 4px solid black;
}
<div>
<img src="https://www.thedesignwork.com/wp-content/uploads/2011/10/Random-Pictures-of-Conceptual-and-Creative-Ideas-02.jpg">
</div>
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 would like to know, if it is possible to give to a border-bottom something like a padding-left and padding-right. I have two divs, which have some borders. I would like to make the border-bottom of the top div to have some padding on left and right. I have no idea if this is possible. I know the structure is strange (I could easy use the border around the whole box wrapper and than work on the span with a border-bottom to achieve this). The problem is, I'm using a plugin which has a structure like this and I have to customize it like this, because there is exactly this strucure and styling. Hope it's clear enough. Here a picture how it should look and an example snippet:
.box {
display: flex;
flex-direction: column;
width: 200px;
}
.box__top {
border: 1px solid black;
border-bottom: 1px solid red;
height: 20px;
padding: 10px;
text-align: center;
}
.box__bottom {
border: 1px solid black;
border-top: none;
height: 150px;
padding: 10px;
text-align: center;
}
<div class="box">
<div class="box__top">
<span>I'm the top section</span>
</div>
<div class="box__bottom">
<span>I'm the top section</span>
</div>
</div>
Use a pseudo-element instead:
.box {
display: flex;
flex-direction: column;
width: 200px;
}
.box__top {
border: 1px solid black;
border-bottom: none;
position: relative;
height: 20px;
padding: 10px;
text-align: center;
}
.box__top::after {
content: " ";
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 0;
width: 90%;
height: 1px;
background-color: red;
}
.box__bottom {
border: 1px solid black;
border-top: none;
height: 150px;
padding: 10px;
text-align: center;
}
<div class="box">
<div class="box__top">
<span>I'm the top section</span>
</div>
<div class="box__bottom">
<span>I'm the top section</span>
</div>
</div>
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
I have a div that is at the bottom of my page. It's CSS is:
#news-bottom {
color: white;
position: fixed;
white-space: nowrap;
overflow: hidden;
height: 66px;
bottom: 0;
right: 390px;
left: 180px;
padding: 5px;
border: 1px solid #CCC;
background-color: black;
}
And I have the div's content like on the image:
content html:
<span>
<span><b>Teste</b></span>
<span>Teste com BBCodes</span>
<img style="border: 1px solid #CCC; padding:2px; margin-left: -3px;" src="images/news/empty.png">
</span>
How do I make for my div's content show up something like this:
I can't use line breaks or tables, because the div's position is fixed, and now I don't know what to do...
Something like this JSFiddle should work.
What we do is apply the background-color to the children of the container div. Then we give them some padding, which creates the space between them. Voila!
HTML:
<div id="news-bottom">
<span>
<span><b>Teste</b></span>
<span>Teste com BBCodes</span>
<img style="border: 1px solid #CCC; padding:2px; margin-left: -3px;" src="images/news/empty.png">
</span>
CSS:
#news-bottom {
color: white;
position: fixed;
white-space: nowrap;
overflow: hidden;
height: 66px;
bottom: 0;
right: 390px;
left: 180px;
padding: 5px;
border: 1px solid #CCC;
}
#news-bottom span span,
#news-bottom span img {
background-color: black;
padding: 5px;
}
If you want fixed position, you can make several divs and change their left property to what you like. You can use % positioning so they look almost the same on different resolutions.
But, I'd recommend using float in a fixed container <div>, and combine with #jmeas suggestion of margins. Something like this:
HTML
<div class='container'>
<div class='arrow'></div>
<div class='item'>One</div>
<div class='item'>Two</div>
<div class='item'>Three</div>
<div class='arrow'></div>
</div>
CSS
#container {
...fixed...
}
.arrow {
float:left;
width:10%;
}
.item {
float:left;
margin-left:5px;
width:20%;
}