I have below code. Weave is
http://liveweave.com/JVtNIk
<!DOCTYPE html>
<html>
<head>
<title>HTML5, CSS3 and JavaScript demo</title>
</head>
<body>
<!-- Start your code here -->
<div class="box1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim quia voluptatem sequi ad iure obcaecati assumenda omnis aperiam ullam cupiditate possimus at ab sint! Dicta quisquam rem sunt aliquid inventore?</div>
<div class="box2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam quas ipsum minus perspiciatis est quam sit blanditiis harum rem similique eligendi suscipit voluptas ex placeat magnam quos amet! Est ut.</div>
<!-- End your code here -->
</body>
</html>
CSS is
* {
padding: 0;
margin: 0;
}
.box1 {
position: relative;
display: inline-block;
background: grey;
width: 200px;
height: 200px;
margin: 10px;
}
.box2 {
position: relative;
display: inline;
}
Please help me understand the reason why the box2 content is not starting from the top but quite from below ? is there any specific reason for that ? I can solve it by adding float but i am just curious on this behavior.
Please someone help me understand.
Thanks in advance
You have this behavior because the baseline of the .box1 is its last line of text. The .box2 starts on the same line as this last line so that explain why it is quite at the bottom. Then the inline attribute makes it continuing under the .box1 like if .box2 was in a <p> tag.
Hope you understood my explaination.
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 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>
on my website (using zenphoto and boostrap 3), I have an issue on my div.main class.
http://test.vincentbourganel.fr
I have static navbar and a fixed footer on the bottom.
I want the div.main have "a height of 100% of the rest of the remaing place".
It doesn't work when my content don't take all the remaing height.
See this page as example :
http://test.vincentbourganel.fr/page/contact/
Can you help me to slove this issue
Not sure how you feel about this solution and I'm more a back end developer than front end guy but you could always do something like
calc(100vh - (HEIGHT_OF_HEADER + BORDER) - (HEIGHT_OF_FOOTER + BORDER)
Only thing I don't like about this solution is I can't think of a way to do it without hard coding the heights in there. I'm sure there's a way to grab it but for now this should get you going in the right direction.
You can get it by using flex, I created a box class and assigned flex as a property, then use flex:1 0 0 to content part, I used position to footer to stay in bottam, and assigned overflow:auto to content part div.
below i posted a working example to understanding
Flex - Flex Guide
Working Fiddle
body {
margin: 0px;
padding: 0px;
}
.box {
display: flex;
flex-direction: column;
width: 100%;
min-height: 100vh;
}
.header {
background: tomato;
}
.content {
flex: 1 0 0;
background: green;
overflow: auto;
}
.footer {
background: blue;
position: relative;
}
<div class="box">
<div class="header">
Header
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi magnam iusto fugit illo omnis aperiam mollitia non fugiat, at in ratione harum ullam alias dicta, excepturi quod sed delectus veniam?<br><br> Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Nisi magnam iusto fugit illo omnis aperiam mollitia non fugiat, at in ratione harum ullam alias dicta, excepturi quod sed delectus veniam?<br><br> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi magnam iusto fugit illo omnis aperiam
mollitia non fugiat, at in ratione harum ullam alias dicta, excepturi quod sed delectus veniam?<br><br> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi magnam iusto fugit illo omnis aperiam mollitia non fugiat, at in ratione harum ullam
alias dicta, excepturi quod sed delectus veniam?<br><br>
</div>
<div class="footer">
Footer
</div>
</div>
you can use following code to adjust the height of main div. It will display on full screen if the content is less.
.main{
min-height: 100vh;
}
I found a way to do what I want in my js file.
My JS code fix min-height of my main div to fill the screen even if main content is small one.
this code is working fine to suit my need :
jQuery(document).ready(function() {
// full height for main div (windows height - "header" height - "footer" height)
$(window).resize(function() {
$('#main').css('min-height', $(window).height() - $('#menu').outerHeight() - $('#footer').outerHeight());
}).resize();
});
You can see it in action there :
http://test.vincentbourganel.fr/
Using OSX 10.11.2, jquery.mobile-1.4.5.css "JQM"
The code below produces the image on the left. But if I comment out the JQM I get the image on the right. both have some different functionalities which I need to combined:
float the right and left icons on the topBar and resize them.
fixed top and bottom bar not to scroll up or down.
style some boarders like in image 2.
if I use JQM, it cancels the css for 1 and 3, if I comment it out or even put it under the body tag, it cancels 2 and 3. I would like to include JQM for future use in my webApp which later will be converted to work inside a webView.
Could you please suggest a fix. Thanks
.barTop, .barBottom {
text-align: center;
list-style-type: none;
min-width: 320px;
padding: 0;
margin: 0;
}
.barTop li, .barBottom li {
height: 2em;
line-height: 2em;
display: inline-block;
margin: 0;
background-color: #c8c7c9;
}
.menuIconLeft {
float: left;
width: 2em;
}
.menuIconRight {
float: right;
width: 2em;
}
.menuIconCenter {
width: calc(100% - 5em);
}
.barBottom li {
width: 32%
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>RRR</title>
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.css"/>
<link rel="stylesheet" href="css/myStyle.css"/>
<script src="js/jquery-1.11.3.js"></script>
<script src="js/jquery.mobile-1.4.5.js"></script>
<meta name="viewport" content="width=device-width"/>
</head>
<body>
<section id="firstpage" data-role="page">
<div class="header" data-role="header" data-position="fixed">
<nav data-role="navbar">
<ul class="barTop">
<li class="menuIconLeft">
<b>☰</b>
</li>
<li class="menuIconCenter">
Activity label
</li>
<li class="menuIconRight">
<b>⋮</b>
</li>
</ul>
</nav>
</div>
<div class="ui-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi, temporibus, dolore! Doloribus, at repellendus sunt consectetur modi natus suscipit magni explicabo optio sequi, assumenda delectus perferendis excepturi nisi nobis ratione.Lorem ipsum
dolor sit amet, consectetur adipisicing elit. Eos repellendus aliquam sint atque aliquid, tempore voluptatum recusandae et rerum, qui quasi ex at aspernatur. Temporibus voluptatum exercitationem sit modi assumenda!Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Laboriosam voluptatum illum maxime hic ipsa odio eaque cum. Optio cumque sequi recusandae. Nihil voluptatibus soluta ad saepe, quia optio laudantium molestiae.contents of this activity Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Asperiores nulla facere soluta tempore nihil, voluptatibus nostrum sequi, voluptate, incidunt distinctio reiciendis qui at totam alias. Culpa fuga rem vitae nesciunt?
</p>
</div>
<div class="footer" data-role="footer" data-position="fixed">
<nav data-role="navbar">
<ul class="barBottom">
<li>
<b>NO</b>
</li>
<li>
<b>EXTRA</b>
</li>
<li>
<b>YES</b>
</li>
</ul>
</nav>
</div>
</section>
</body>
</html>
There are two parts to understand to solve this type of problem. Firstly, CSS prioritises whatever runs later - if you change a div background-color, and then change it again later, the latter change will apply.
Secondly, is the !important tag. By inserting it, you can force a certain aspect to override anything else that may apply to the code, for example;
height: 2em !important;
With any luck, you should be able to use this to solve your problem.
My layout has a container flex-container and a child.
HTML:
<div class="flex-container">
<div>text</div>
</div>
The container and the child have an unknown height. And the goal is:
If the child has a lower height than the container, it appears centered horizontally and vertically.
If the child has a greater height than the container, it adjusts to the top and the bottom and we can do scroll.
Scheme:
The fastest way for centering a element with flexbox is the follow:
.flex-container
{
display: flex;
align-items: center; /* vertical */
justify-content: center; /* horizontal */
width: 100%;
height: 300px; /* for example purposes */
overflow-y: scroll;
background: #2a4;
}
.flex-container > div
{
background: #E77E23;
width: 400px;
}
<div class="flex-container">
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure fugit voluptas eius nemo similique aperiam quis ut! Ipsa aspernatur rem nesciunt est sed hic culpa nisi delectus error explicabo reprehenderit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure fugit voluptas eius nemo similique aperiam quis ut! Ipsa aspernatur rem nesciunt est sed hic culpa nisi delectus error explicabo reprehenderit. </div>
</div>
Codepen: http://www.codepen.io/ces/pen/slicw
But, if the container's child have a greater height, the child is not shown correctly. The child appears cutted (only the top part).
html,body
{
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
.flex-container
{
display: flex;
align-items: center; // vertical
justify-content: center; // horizontal
width: 100%;
height: 100px;
overflow-y: scroll;
background: #2a4;
}
.flex-container > div
{
background: #E77E23;
width: 400px;
}
<div class="flex-container">
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure fugit voluptas eius nemo similique aperiam quis ut! Ipsa aspernatur rem nesciunt est sed hic culpa nisi delectus error explicabo reprehenderit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure fugit voluptas eius nemo similique aperiam quis ut! Ipsa aspernatur rem nesciunt est sed hic culpa nisi delectus error explicabo reprehenderit. </div>
</div>
Codepen: http://www.codepen.io/ces/pen/sGtfK
Scheme:
Is there a way for resolve this issue?
I found the solution:
.flex-container {
display: flex; /* only */
overflow-y: scroll;
}
.flex-container > div {
margin: auto; /* horizontal and vertical align */
}
html, body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
.flex-container {
display: flex;
width: 100%;
height: 100px; /* change height to 300px */
overflow-y: scroll;
background: #2a4;
}
.flex-container > div {
padding: 1em 1.5em;
margin: auto;
background: #E77E23;
width: 400px;
}
<div class="flex-container">
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure fugit voluptas eius nemo similique aperiam quis ut! Ipsa aspernatur rem nesciunt est sed hic culpa nisi delectus error explicabo reprehenderit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure fugit voluptas eius nemo similique aperiam quis ut! Ipsa aspernatur rem nesciunt est sed hic culpa nisi delectus error explicabo reprehenderit. </div>
</div>
Codepen: http://codepen.io/ces/pen/Idklh
Don't use justify-content: center or align-items: center. To achieve center alignment, just put empty elements on either side and set the empty elements to flex: 1, so that they push the center element to the center.
Add align-self:flex-start; to .flex-container > div can resolve this problem too.
See: http://www.w3.org/TR/css-flexbox-1/#auto-margins