I'm trying to get a border around my image and paragraphs items but I can't figure out how to do it. I encased them in divs and added a class to them but the background color and border effects do nothing. This is what i'm shooting for:
this is what my HTML code looks like for this section:
<div class="pair">
<a href="GPA_Calc_Screen.png">
<img src="GPA_Calc_Screen.png" alt""> <!--Relative img path -->
</a>
<p>
This is a custom GPA Calculator, and what I like to think is the first real app that I made. Going to Georgia Tech, and college in general, this is a vital asset. Although at GT we don't operate on the plus/minus system, I added a setting in which you can edit that if you want.
</p>
</div>
and here is my CSS:
.pair div {
display: block;
/*padding: 5px;
clear: right;
width: 100%;
border-radius: 5px;
border-width: 3px;
border-color: red;*/
background: red;
}
you don't need to add div in front of .pair when you are doing class without id based
you just keep
.pair {
border: 3px rgb(86, 10, 10) solid;
padding: 9px;
display: block;
}
<div class="pair">
<a href="GPA_Calc_Screen.png">
<img src="sourceofimage.png" alt""> <!--Relative img path -->
</a>
<p>
your text
</p>
</div>
for bottom div also you need to add this "pair" class.
You have to add border in .pair class
.pair div
{
display: block;
padding: 5px;
clear: right;
width: 100%;
}
.pair
{
border:3px solid red;
}
Try as in this I have made for you fiddle
If you want use '.pair div {}' you need to place that div inside of div with .pair class
.pair{
display: block;
padding: 5px;
clear: right;
width: 100%;
border-radius: 5px;
border: 5px solid #ff0000;
background: orange;
}
Fixed the problem ,just go to the jsfiddle hereClick Here
div {
border: 3px solid #8AC007;
}
.img1 {
float: left;
}
.clearfix {
overflow: auto;
}
<body>
<div class="clearfix">
<img class="img2" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTUHgZRyJPa3nt3V4hgxAN0K2iFn1MaoYluUIwswewquau2nkdRaA" width="100" height="300">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo culpa, maiores veritatis minima sequi earum. Ad perspiciatis molestias, illum saepe nihil quo nam dignissimos ducimus similique consequatur veniam facilis iure! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit ullam perferendis esse deserunt vel ea alias, officia earum, natus, aspernatur porro. Maiores assumenda distinctio accusantium laudantium voluptate explicabo, aliquid sint.
</div>
</body>
</html>
Related
I'm making a react - redux application and I've recently run into a problem where I need to display a line next to certain text, to make it look like a quote. I used the border property in CSS and it came out like this.
But I would like it to be with corner radius in its places, like the following image,
This is the CSS and the HTML I am using to get,
.post-quote-layout{
margin-top: 16px;
background-color: white;
border-left: #6D45FC solid 6px;
height: 100%;
}
.post-quote-text{
font-size: 17px;
background-color:white;
margin-left: 10px;
line-height:26px;
}
<div key={index} className="post-quote-layout">
<div className="post-quote-line">
<p className="post-quote-text" dangerouslySetInnerHTML={{__html:item?.text}} />
</div>
</div>
How do I achieve the result, I would like the line to be responsive as the content increases too.
Use a pseudo-element positioned absolutely like so
div {
width: 50vw;
margin: auto;
position: relative;
padding-left: 10px;
}
div::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 6px;
height: 100%;
background: rebeccapurple;
border-radius: 3px
}
<div>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Culpa sequi mollitia assumenda repudiandae impedit quidem, ducimus adipisci a ullam tenetur minus minima molestias provident recusandae non amet sapiente nihil ad, commodi ut optio veniam illo
qui! Enim, neque odit? Laboriosam quasi aperiam, molestiae culpa ipsum corrupti animi praesentium atque exercitationem.</p>
</div>
Instead of using borders, have you tried using an svg line with its stroke-linecap property set to round?
stroke-linecap: round;
https://css-tricks.com/almanac/properties/s/stroke-linecap/
EDIT: Here is another approach if you want to stick to borders:
CSS border stroke line cap rounded
"I am reducing width of screen but text of paragraph overrides the image, what changes should I do to prevent overriding text "
"This is for a part website building , I tried to play with some css3 properties here in code but couldnt resolve problem "
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
#facilities{
height: 430px;
background: #fff;
}
#facilities .facility-img {
width: 40%;
float: left;
}
#facilities .facility-img img{
width: 600px;
border-radius: 50%;
padding: 30px 70px;
}
#facilities .facility-info{
float: right;
width: 50%;
text-align: center;
padding-top: 60px;
}
#facilities .facility-info h1{
color: #333;
}
#facilities .facility-info p{
color: #333;
}
</style>
</head>
<body>
<section id="facilities">
<div class="container">
<div class="facility-img ">
<img src="https://images.pexels.com/photos/1170979/pexels-photo-1170979.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="facility-photo">
</div>
<div class="facility-info">
<h1>In a hospital , half of the patients get better food than at home.</h1>
<p>~Gerhard KocSher</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.Sit autem ducimus delectus nam aut neque vitae, ab repellendus, qui, quibusdam eum commodi sunt? Non veniam quos illo, assumenda doloremque sit possimus sunt architecto quo neque doloribus provident consequuntur eius error.
</p>
</div>
</div>
</section>
</body>
</html>
Change width: 600px to width: 100% on yor image.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
#facilities{
height: 430px;
background: #fff;
}
#facilities .facility-img {
width: 40%;
float: left;
}
#facilities .facility-img img{
width: 100%;
border-radius: 50%;
padding: 30px 70px;
}
#facilities .facility-info{
float: right;
width: 50%;
text-align: center;
padding-top: 60px;
}
#facilities .facility-info h1{
color: #333;
}
#facilities .facility-info p{
color: #333;
}
</style>
</head>
<body>
<section id="facilities">
<div class="container">
<div class="facility-img ">
<img src="https://images.pexels.com/photos/1170979/pexels-photo-1170979.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="facility-photo">
</div>
<div class="facility-info">
<h1>In a hospital , half of the patients get better food than at home.</h1>
<p>~Gerhard KocSher</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.Sit autem ducimus delectus nam aut neque vitae, ab repellendus, qui, quibusdam eum commodi sunt? Non veniam quos illo, assumenda doloremque sit possimus sunt architecto quo neque doloribus provident consequuntur eius error.
</p>
</div>
</div>
</section>
</body>
</html>
You need to set your image width to 100% so that it stretches or shrinks according to its parent width (the div). The div parent is set to 40% of its parent container, which is the window.
That being said, your padding is still in "px" and so not proportional to your window. When you shrink your window a lot, you will end up with lots of padding compared to the window size. Think about changing those values too.
I wonder if this is even possible without modifying the HTML, but, say that you have a list of inline-block elements of a variable width that are dynamically added. You don't want any margin between the elements and the parent, but in case they start forming two lines, you'd like to have some space between them.
I've tried ::first-line but it doesn't work for margins. So does anyone know how to do this?
Take this example:
.parent {
margin: 20px;
background: #555;
padding: 1px;
}
.parent p {
display: inline-block;
margin: 0;
margin-right: 5px;
padding: 0;
background: #CCC;
}
.parent::first-line {
margin-bottom: 10px;/* not working */
}
<div class="parent">
<p>Lorem ipsum dolor</p>
<p>sit amet,</p>
<p>consectetur adipisicing elit.</p>
<p>Tempora,</p>
<p>numquam, reiciendis.</p>
<p>Voluptatum molestias,</p>
<p>sequi iste itaque corporis ducimus,</p>
<p>vero commodi sed fugiat</p>
<p>qui a perferendis sint,</p>
<p>magnam doloribus quidem.</p>
</div>
This can be achieved by setting a margin-top to the children and a negative margin to the parent. By this, it will pull the children to the top removing the space between them.
Bootstrap's row and col- works this way.
.parent {
margin: -18px 0;
background: #555;
padding: 1px;
}
.parent p {
display: inline-block;
margin: 0;
margin-right: 5px;
padding: 0;
background: #CCC;
margin-top: 10px;
}
<div class="parent">
<p>Lorem ipsum dolor</p>
<p>sit amet,</p>
<p>consectetur adipisicing elit.</p>
<p>Tempora,</p>
<p>numquam, reiciendis.</p>
<p>Voluptatum molestias,</p>
<p>sequi iste itaque corporis ducimus,</p>
<p>vero commodi sed fugiat</p>
<p>qui a perferendis sint,</p>
<p>magnam doloribus quidem.</p>
<p>sequi iste itaque corporis ducimus,</p>
<p>vero commodi sed fugiat</p>
<p>qui a perferendis sint,</p>
<p>magnam doloribus quidem.</p>
<p>sequi iste itaque corporis ducimus,</p>
<p>vero commodi sed fugiat</p>
<p>qui a perferendis sint,</p>
<p>magnam doloribus quidem.</p>
<p>sequi iste itaque corporis ducimus,</p>
<p>vero commodi sed fugiat</p>
<p>qui a perferendis sint,</p>
<p>magnam doloribus quidem.</p>
</div>
You can add the given script to know the top positions of first and last element of P, and and can remove the top margin for Ps in first row, and can remove bottom margin for Ps in last row.
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script type="text/javascript">
$( document ).ready(function() {
$("p").each(function( index )
{
var offsetMin =$("p:first-child").offset().top;
var offsetMax =$("p:last-child").offset().top;
if($(this).offset().top==offsetMax)
{
$(this).css("margin-bottom","0px");
}
else if($(this).offset().top==offsetMin)
{
$(this).css("margin-top","0px");
}
});
});
</script>
First of all, "parent" is a class defined for div, so you're trying to apply bottom margin to div, which is wrong,
The solution of this is you modify your code to this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.parent {
margin: 20px;
background: #555;
padding: 1px;
}
.parent p {
display: inline-block;
margin: 0;
margin-right: 5px;
padding: 0;
background: #CCC;
}
.parent p::first-line { //Line modified by Dixit, added " p"
margin-bottom: 10px;/* not working */
}
</style>
</head>
<body>
<div class="parent">
<p>Lorem ipsum dolor</p>
<p>sit amet,</p>
<p>consectetur adipisicing elit.</p>
<p>Tempora,</p>
<p>numquam, reiciendis.</p>
<p>Voluptatum molestias,</p>
<p>sequi iste itaque corporis ducimus,</p>
<p>vero commodi sed fugiat</p>
<p>qui a perferendis sint,</p>
<p>magnam doloribus quidem.</p>
</div>
</body>
</html>
But still it will not work, the reason is because you've already set the margin to 0, inside .parent p{} block, the way you can achieve it is by removing the margin:0; line from .parent p{} block which will result in following code.
.parent {
margin: 20px;
background: #555;
padding: 1px;
}
.parent p {
display: inline-block;
//Line removed by Dixit, Line : margin:0px;
margin-right: 5px;
padding: 0;
background: #CCC;
}
.parent p::first-line {
//Line modified by Dixit, added " p"
margin-bottom: 10px;
/* not working */
}
<div class="parent">
<p>Lorem ipsum dolor</p>
<p>sit amet,</p>
<p>consectetur adipisicing elit.</p>
<p>Tempora,</p>
<p>numquam, reiciendis.</p>
<p>Voluptatum molestias,</p>
<p>sequi iste itaque corporis ducimus,</p>
<p>vero commodi sed fugiat</p>
<p>qui a perferendis sint,</p>
<p>magnam doloribus quidem.</p>
</div>
How can two divs be styled so that:
they are side by side
the right div expands to fit its contents
the left div expands to fit the space to the left of the right div,
but whose content wraps when it fills the div.
The effect can be achieved with tables like this:
<table class="container">
<tr>
<td class="max">
some text that we want to wrap within the div
</td>
<td class="min">
some other text
</td>
</table>
and
.container {
width: 100%;
}
td.min {
width: 1%;
white-space: nowrap;
border:1px solid blue;
}
td.max {
border:1px solid red;
}
In the following solution with divs, the left div doesn't fill the space if the content doesn't force it to; and the left div will appear above the right when it's content expands.
<div id="container">
<div id="left">some text that we want to wrap within the div</div>
<div id="right">some other text</div>
</div>
and
#container {
width: 100%;
}
#left {
float:left;
border: 1px solid red;
}
#right {
float:right;
border: 1px solid blue;
}
I think you want flexbox
#container {
width: 50%;
margin: 1em auto;
display: flex;
}
#left {
background: lightblue;
flex: 1;
}
#right {
background: lightgreen;
}
<div id="container">
<div id="left">some text that we want to wrap within the div</div>
<div id="right">some other text</div>
</div>
You can use flexbox:
.container {
display: flex;
width: 20%;
}
.right {
white-space: nowrap;
}
<div class="container">
<div class="left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum odit saepe eius quisquam! Adipisci obcaecati quia sit eaque quo provident, corrupti iure nisi consequuntur, vero nulla molestias, placeat esse ut!</div>
<div class="right">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit ullam facilis blanditiis, necessitatibus nihil dicta cupiditate cum vero quod ipsam, nulla minus maxime asperiores natus reprehenderit eaque error ab porro?</div>
</div>
I have product items to display like this
Now the challenge for me here is vertically middle aligning the text in first & third column, whereas the text in the middle column can increase or decrease reasonably, but i have to keep the content in the left & right column always vertically middle aligned.
e.g here is the code
<div class="product">
<div class="title">My Test Title</div>
<div class="price">
From<br/>
$2500
</div>
<div class="description">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et blanditiis, quibusdam commodi beatae, dolorum reiciendis, ex veniam esse recusandae iusto sapiente labore quisquam illo deserunt odio non magni velit! Sed.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et blanditiis, quibusdam commodi beatae, dolorum reiciendis, ex veniam esse recusandae iusto sapiente labore quisquam illo deserunt odio non magni velit! Sed.</p>
</div>
</div>
// AND THE CSS is
.product {
border: 1px solid #CCC;
}
.product > div {
padding : 10px;
border: 1px solid #CCC;
}
.title
{
width : 120px;
float:left;
}
.price {
width:120px;
float:right;
text-align:right;
}
.description {
overflow:hidden;
}
Here is the fiddle : https://jsfiddle.net/exleedo/rexwya5e/
Is there a way to do that without using as display:table-cell; or using javscript to find the height of the parent ?
The reason with using table-cell is because table-cell won't take width anymore from css, and using JS to calculate the height of the parent is not very great I think.
I think I am gonna go with display:table-cell; because that seems the most appropriate one for me. The reason I didn't go with this before is that I was trying to assign width to the table-column div, which is not correct. Now I have add a div inside table-column and assign width there which solves my concern.
e.g here is the code :
<div class="table product">
<div class="table-column">
<div class="title">
The Title
</div></div>
<div class="table-column">
<div class="description">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro fugit vero non dolorum, nisi modi veritatis ipsum magni, praesentium blanditiis vel error, odit dolores atque culpa, ratione tempore iusto neque. </p>
</div>
</div>
<div class="table-column">
<div class="price">
Price
</div>
</div>
</div>
// And the CSS
/* Start : CSS Table*/
.table .table-column {
display: table-cell;
vertical-align: middle;
padding-right: 10px;
}
.table .table-column.align-top {
vertical-align: top;
}
.table .table-column.align-bottom {
vertical-align: bottom;
}
.table .table-column.padding-left-10px {
padding-left: 10px;
}
.table .table-column.padding-right-15px {
padding-right: 15px;
}
.table .table-column.padding-right-20px {
padding-right: 20px;
}
.table .table-column.padding-right-40px {
padding-right: 40px;
}
.table .table-column.no-paddings {
padding: 0px;
}
.table .table-column.full {
width: 100%;
}
/* End : CSS Table*/
.product {
border: 1px solid #CCC;
}
.product > div {
padding : 10px;
border: 1px solid #CCC;
}
.title
{
width : 120px;
float:left;
}
.price {
width:120px;
float:right;
text-align:right;
}
.description {
overflow:hidden;
}
Check it in this fiddle : https://jsfiddle.net/exleedo/zL9arsj7/1/