I am using bootstrap V4 and need for a customized paragraph a line-height of 1.
But I am not able to overright the bootstrap setting of ~1.5.
<p class="ptime"><f:format.date format="H:i:s">{play.plDate}</f:format.date></p>
<p class='dur'>{play.Duration}</p>
p.ptime {
line-height:normal !important;
}
p.dur {
font-size: 80%;
text-align: right;
vertical-align: text-bottom;
padding: 0px;
margin: 0px;
line-height:normal !important;
}
I tried also 1, 1em for the line-height, but I am not able to reduce the space between the paragraphs (lines).
What I have to do?
In default, bootstrap adds a 16px margin at the bottom for every paragraph. So if you need to remove the space between those two paragraphs, you have to remove that bottom margin instead of reducing line-height using css.
From all the paragraphs,
p {
margin-bottom: 0 !important;
}
From only those two paragraphs (ptime & dur in your case)
.ptime, .dur {
margin-bottom: 0 !important;
}
See below working example. I used bootstrap 4.6.0.
p {
margin-bottom: 0 !important;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<p class="ptime">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Facilis, ullam inventore! Officiis, quam facilis iste unde sapiente doloribus ad fugit quaerat nam natus, vero, ab totam! Provident perferendis nemo excepturi?
</p>
<p class='dur'>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. At asperiores quas adipisci voluptas fuga dolore explicabo dolor labore delectus a incidunt dolorem accusamus beatae eveniet, quae, impedit excepturi ut sequi.
</p>
Related
I have text between 2 block float elements and I want to add an additional indentation to the right for a quote id element inside the p paragraph. The problem is that margin-left doesn't work next to a float element and if I use the position: relative method, like in the shown example, then the text will clip the right float block. Is there a way to move the quote text to the right without the clipping?
#left-block{
height: 150px;
width:50px;
float: left;
background-color: #000;
margin-right: 10px
}
#right-block{
height: 150px;
width:50px;
float: right;
background-color: #000;
margin-left: 10px
}
#quote{
position: relative;
left: 30px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div id="left-block"></div>
<div id="right-block"></div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem natus sit, reiciendis dolore accusantium mollitia in quia ipsa itaque iure, eaque nobis?
<p id="quote">"Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem natus sit, reiciendis dolore accusantium mollitia in quia ipsa itaque iure, eaque nobis? Voluptate corrupti excepturi quaerat commodi, aut illo dolorum."</p>
Voluptate corrupti excepturi quaerat commodi, aut illo dolorum.
</p>
</body>
</html>
Edit:
For an exact example you can look at en.wikipedia.org/wiki/Hercules at the line Tacitus records a special affinity of the Germanic peoples for Hercules. In chapter 3 of his Germania, Tacitus states: You can see that the indented text that follows is essentially between 2 floating images.
The margin is correctly applied.
The problem is that your block is before in your html and it you should be after.
So, for what you are trying to achieve it is better to use display:flex
So I restructure your html, by placing a "container" and applying the flex.
Then, I put all your p into a div and place the right block below.
As you added a left to your #quote you need to adjust width of it too.
So I could remove your float.
DEMO
#left-block{
height: 150px;
width:50px;
/*float: left;*/
background-color: #000;
margin-right: 10px
}
#right-block{
height: 150px;
width:50px;
/*float: right;*/
background-color: #000;
margin-left: 10px
}
#quote{
position: relative;
left: 30px;
width: calc(100% - 30px);
}
.d-flex{
display:flex;
}
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div class="d-flex">
<div id="left-block"></div>
<div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem natus sit, reiciendis dolore accusantium mollitia in quia ipsa itaque iure, eaque nobis?</p>
<p id="quote">"Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem natus sit, reiciendis dolore accusantium mollitia in quia ipsa itaque iure, eaque nobis? Voluptate corrupti excepturi quaerat commodi, aut illo dolorum."</p>
<p>
Voluptate corrupti excepturi quaerat commodi, aut illo dolorum.
</p>
</div>
<div id="right-block"></div>
</div>
</body>
</html>
You can use a margin, but the value has to be larger than the width of the floated elements, since the margin is measured from to side of the parent element, not taking the floated element into account:
(no need for relative position BTW)
#left-block{
height: 150px;
width:50px;
float: left;
background-color: #000;
margin-right: 10px
}
#right-block{
height: 150px;
width:50px;
float: right;
background-color: #000;
margin-left: 10px
}
#quote{
margin: 0 100px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div id="left-block"></div>
<div id="right-block"></div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem natus sit, reiciendis dolore accusantium mollitia in quia ipsa itaque iure, eaque nobis?
<p id="quote">"Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem natus sit, reiciendis dolore accusantium mollitia in quia ipsa itaque iure, eaque nobis? Voluptate corrupti excepturi quaerat commodi, aut illo dolorum."</p>
Voluptate corrupti excepturi quaerat commodi, aut illo dolorum.
</p>
</body>
</html>
So the solution that isn't perfect but works, is to simply add overflow: hidden in to the quote element. The explanation seems to be written here
https://stackoverflow.com/a/18718157/18429900
The only issue with this is that it doesn't move the text to the left once it goes lower than the block height as show in the example below.
#left-block{
height: 150px;
width:50px;
float: left;
background-color: #000;
margin-right: 10px
}
#right-block{
height: 150px;
width:50px;
float: right;
background-color: #000;
margin-left: 10px
}
#quote{
overflow: hidden;
padding-top: 40px;
padding-left: 40px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div id="left-block"></div>
<div id="right-block"></div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem natus sit, reiciendis dolore accusantium mollitia in quia ipsa itaque iure, eaque nobis?
<p id="quote">"Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem natus sit, reiciendis dolore accusantium mollitia in quia ipsa itaque iure, eaque nobis? Voluptate corrupti excepturi quaerat commodi, aut illo dolorum."</p>
Voluptate corrupti excepturi quaerat commodi, aut illo dolorum.
</p>
</body>
</html>
I have a content box in which I want a div box that floats to the left and paragraphs that flow around it. So far my HTML looks like this:
.content {
float: left;
padding: 20px;
width: 650px;
height: 500px;
background-color: #F5CF8E;
/* Yellowish */
}
.fake-image {
float: left;
width: 200px;
height: 200px;
border: 0.5px solid gray;
padding: 20px;
margin: 0 20px 20px 0;
}
<div class="content">
<div class="fake-image"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam incidunt dolores atque ipsam expedita architecto, dignissimos error consectetur aperiam. At harum in optio voluptatibus ex beatae praesentium eius velit cum!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam incidunt dolores atque ipsam expedita architecto, dignissimos error consectetur aperiam. At harum in optio voluptatibus ex beatae praesentium eius velit cum!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam incidunt dolores atque ipsam expedita architecto, dignissimos error consectetur aperiam. At harum in optio voluptatibus ex beatae praesentium eius velit cum!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam incidunt dolores atque ipsam expedita architecto, dignissimos error consectetur aperiam. At harum in optio voluptatibus ex beatae praesentium eius velit cum!</p>
</div>
What I really don't get is why is the margin-bottom: 20px; of my .fake-image not working? The margin is bigger. Can anyone help?
Here an image of what I mean:
This space is not extra margin. It's the remainder of the height of the wrapping line
In other words, the line that breaks under the image may not break perfectly to match the exact spot where your margin ends unless your lines perfectly divide that space somehow. It would be unreasonable to try to control this for most situations, however, hypothetically you could accomplish a fix if it were completely static content, but I don't recommend trying to do this because you might be fighting an uphill battle.
To test this for yourself: remove all margins except for your bottom margin on your image and manipulate line-height and typography stylings to see how they play together and/or manipulate only the bottom margin on that image and/or the image height.
Whenever I have an issue like this, I add specificity to the related CSS. margin in this case. margin: 0 20px 20px 0; shorthand for margin-top:0; margin-right: 20px; margin-bottom:20px; margin-left:0;
Fix the bottom by knowing also what is around it.
Here I add a div around it and set it's background so you see where the image actually IS. Other space belongs to other elements.
Now, we have the ugly lime and red we can see what is what, adjust that image and paragraphs etc., then we can later remove those ugly CSS things.
.content {
float: left;
padding: 20px;
width: 650px;
height: 500px;
background-color: #F5CF8E;
/* Yellowish */
}
.fake-image {
float: left;
width: 200px;
height: 200px;
border: 0.5px solid gray;
padding:20px;
/* margin-top: 0;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 20px; */
margin: 0 20px 20px 0;
}
.outside-image{float: left;background-color:lime;}
p {border:1px solid red;}
<div class="content">
<div class="outside-image"><div class="fake-image"></div></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam incidunt dolores atque ipsam expedita architecto, dignissimos error consectetur aperiam. At harum in optio voluptatibus ex beatae praesentium eius velit cum!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam incidunt dolores atque ipsam expedita architecto, dignissimos error consectetur aperiam. At harum in optio voluptatibus ex beatae praesentium eius velit cum!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam incidunt dolores atque ipsam expedita architecto, dignissimos error consectetur aperiam. At harum in optio voluptatibus ex beatae praesentium eius velit cum!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam incidunt dolores atque ipsam expedita architecto, dignissimos error consectetur aperiam. At harum in optio voluptatibus ex beatae praesentium eius velit cum!</p>
</div>
Given the below flex CSS layout.
I need the images to scale smaller as the page is resized, hence the img { width: 100% } This allows the page to be resized, and the images scale accordingly.
I am unsure of why this layout results in the three Blog entries being of different width, particularly as the images in question are all the same.
Here is a working bootply.
div.container div.blog,
div.container-fluid div.blog {
display: flex;
flex: 1;
flex-flow: row nowrap;
}
div.container div.blog div,
div.container-fluid div.blog div {
margin: 0 12.5px;
}
div.container div.blog div:first-of-type,
div.container-fluid div.blog div:first-of-type {
margin-left: 0px;
}
div.container div.blog div:last-of-type,
div.container-fluid div.blog div:last-of-type {
margin-right: 0px;
}
div.container div.blog div img,
div.container-fluid div.blog div img {
width: 100%;
}
div.container div.blog h1,
div.container-fluid div.blog h1 {
color: #8f825a;
font-size: 2.7rem;
text-transform: none;
}
div.container div.blog h2,
div.container-fluid div.blog h2 {
color: #8f825a;
font-size: 1.8rem;
}
div.container div.blog+section,
div.container-fluid div.blog+section {
margin-top: 5rem;
}
Given the following HTML
<div class="container">
<h1>Blog</h1>
<div class="blog">
<div>
<img src="image1">
<h1>Lorem ipsum dolor sit amet</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit Libero tenetur,
earum repudiandae ut fuga qui modi maxime dolorem quo! Id maiores neque rem
dignissimos amet velit perspiciatis labore veritatis eligendi.
</p>
<h2>Fred Jones</h2>
<h3>2014-01-01</h3>
</div>
<div>
<img src="image2">
<h1>Eum debitis</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum debitis culpa modi, illo ullam necessitatibus
beatae. Eveniet sequi quos explicabo magni ipsum nostrum asperiores dolore aliquam libero
accusantium ullam omnis, sed fugiat dolorem est, quae quaerat deserunt labore delectus. Quis, earum fugit,
necessitatibus recusandae perferendis, ducimus dignissimos amet autem ea, consequatur neque!
</p>
<h2>Joe Soap</h2>
<h3>2014-01-01</h3>
</div>
<div>
<img src="image3">
<h1>Aliquid nesciunt delectus</h1>
<p>
Ut, sapiente, qui. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Aliquid nesciunt delectus, quae deleniti voluptas neque consequatur,provident perspiciatis laborum culpa
corporis fugit earum cupiditate deserunt vero atque harum iste illum officia maxime. Et officia distinctio
corrupti repellat! Repellendus, distinctio voluptates, earum quidem dolore facere.
</p>
<h2>Ishmael</h2>
<h3>2014-01-01</h3>
</div>
</div>
</div>
You have specified flex: 1 on the flex container. It doesn't apply there.
You need to apply flex: 1 to the items, if you want them to distribute container space equally.
div.container div.blog,
div.container-fluid div.blog {
display: flex;
/* flex: 1; <----------- NOT DOING ANYTHING */
flex-flow: row nowrap;
}
The parent element of the above-reference code block (div.container) is not a flex container, so flex is having no effect.
Shift the rule to your flex items:
div.container div.blog div, div.container-fluid div.blog div {
margin: 0 12.5px;
flex: 1; /* NEW */
}
revised demo
I have many sections on my page. Every of these sections can have similar elements, for example in each of these sections can be h1 element.
I want to add css files where every of these css will be for only one section.
For example I have three sections on my page where ids are:
section1 -- section2 -- section3
I have three css files too with names:
section1.css -- section2.css -- section3.css
How to do that every css file refers to a suitable section?
Maybe can I add any additional block to every of these css files with section id?
I don't know why you want to do that, but if you want to have separate styles for each section which has unique ID just use the ID as a selector. For example:
section1.css
#section1 h1{ color:red;}
#section1 .someclass { color: blue}
section2.css
#section2 h1 { color: green;}
#section2 .someclass {color:yellow;}
And so on. You will have separate styles for each section selecting them by ID. I think it's the easiest way
CSS files doesn't refer to its elements (in your case id). Its the selector which actually targets elements. You can use separate for each of the children on each section.
Instead use inheritance with each id.
Have a look at the example snippet below:
/* Section 1 */
#section1 {
background: #ff0;
padding: 10px 15px;
}
#section1 p {
background: #99d;
}
/* Section 2 */
#section2 {
background: #99d;
padding: 10px 15px;
}
#section2 p {
background: #ae9;
}
/* Section 3 */
#section3 {
background: #ae9;
padding: 10px 15px;
}
#section3 p {
background: #ff0;
}
body {
margin: 0;
}
<div id="section1">
<strong>Section 1</strong>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas quam dicta libero qui sapiente beatae sunt, aspernatur et reprehenderit natus dolor, sint aliquid iure magni quibusdam accusantium provident perspiciatis fugit.</p>
</div>
<div id="section2">
<strong>Section 2</strong>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas quam dicta libero qui sapiente beatae sunt, aspernatur et reprehenderit natus dolor, sint aliquid iure magni quibusdam accusantium provident perspiciatis fugit.</p>
</div>
<div id="section3">
<strong>Section 3</strong>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas quam dicta libero qui sapiente beatae sunt, aspernatur et reprehenderit natus dolor, sint aliquid iure magni quibusdam accusantium provident perspiciatis fugit.</p>
</div>
Hope this helps!
Trying to center the text I have in an element with a display property value of just inline but to no avail.
Below would've been a perfect example of what I want if the text would align in the middle.
#inliner {
background-color: green;
padding: 10px;
display: inline;
font-size: 24px;
line-height: 50px;
text-align: center!important;
}
<div id="inliner">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim nulla fugit quidem hic temporibus aliquam a! Consectetur, tempore temporibus optio quod repudiandae placeat distinctio eligendi quae nihil sit rerum ex cumque libero cupiditate delectus doloremque incidunt esse recusandae omnis enim magnam alias perspiciatis quas id reprehenderit neque iusto minima dolores!
</div><!-- End Inliner -->
I tried adding an inner DIV to help me achieve that. Far from desired result because the green background disappears and can only be seen the bottom area.
#inliner {
background-color: green;
padding: 10px;
display: inline;
font-size: 24px;
line-height: 50px;
text-align: center;
}
#inliner-in {
width: 100%;
height: 100%;
display: inline-block;
}
<div id="inliner">
<div id="inliner-in">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim nulla fugit quidem hic temporibus aliquam a! Consectetur, tempore temporibus optio quod repudiandae placeat distinctio eligendi quae nihil sit rerum ex cumque libero cupiditate delectus doloremque incidunt esse recusandae omnis enim magnam alias perspiciatis quas id reprehenderit neque iusto minima dolores!
</div><!-- End Inliner -->
</div><!-- End Inliner -->
Add the background-color and display:inline to the child DIV.
#inliner {
padding: 10px;
font-size: 24px;
text-align: center;
}
#inliner-in {
background-color: green;
width: 100%;
height: 100%;
display: inline;
line-height: 50px;
}
Check on your console if your css if being correctly applied, because I think what you have there is supposed to work but if not...
You can try by aligning the entire div like:
#inliner {
margin-left: auto;
margin-right: auto;
}