I have a div in which i am showing some text and the div has fixed height and width and overflow hidden. But it is showing different text in firefox, chrome and safari. In chrome and safari one extra line of text is visible.If i remove:
-moz-column-count:2;
-webkit-column-count:2;
property then its working fine in all. But if add this property the it showing different text in firefox and chrome.
I am attaching snapshot for chrome and firefox.
<div style=" width: 710px; height: 70px;position:absolute;overflow:hidden;top=0;left=0;-moz-column-count:2;-webkit-column-count:2;z-index:102;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p> Vivamus mattis laoreet velit quis malesuada. Quisque tincidunt elit sit amet nibh volutpat id pretium nisl consequat. Quisque dictum lacus at mauris scelerisque auctor. Nulla adipiscing, sapien sit amet </p>
</div>
Chrome view
Fire fox View
You should cut your height or Width tag from that DIV. Further P element needs some style to showing them as column.
<style type="text/css">
div {
width: 710px;
position:absolute;
overflow:hidden;
top=0;
left=0;
-moz-column-count:2;
-webkit-column-count:2;
z-index:102;
}
p {
overflow: hidden;
float:left;
}
</style>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p> Vivamus mattis laoreet velit quis malesuada. Quisque tincidunt elit sit amet nibh volutpat id pretium nisl consequat. Quisque dictum lacus at mauris scelerisque auctor. Nulla adipiscing, sapien sit amet </p>
</div>
Related
I seem to have a problem with the AOS (animate-on-scroll) library in my html page. The code works fine, but the issue is that the last div doesn't run its AOS code (fade-right) until the user is scrolling over it within a certain range of pixels, meaning that if my height is set at "100%", the page will just show a blank space where the div is supposed to be. This is because the content of the last div is too short to actually let the user scroll withing said range. Of course, the code runs fine if I extend the height of the html to a specified value that is longer than the height occupied by the elements in the page, but I really would like to avoid that and just allow this last div to appear without having to add space for the user to scroll just a little bit more. I'll leave a snippet for clarification.
html{
height:100%;
}
body{
overflow-x: hidden;
}
h1{
font-size : 90px;
text-align: center;
}
p{
width:50%;
font-size:20px;
text-align:justify;
margin:auto;
padding:20px;
background-color: #3E9AE0;
}
div{
margin-bottom:50px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://unpkg.com/aos#next/dist/aos.css" />
</head>
<body>
<div data-aos="fade-right" data-aos-duration="1000">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sem sapien, pulvinar at condimentum vel, mollis quis erat. In consequat sem vel enim laoreet, non bibendum purus ornare. Vestibulum faucibus dictum magna in egestas. Sed laoreet in est nec hendrerit. Curabitur sed condimentum elit. Ut blandit posuere vulputate. Phasellus pharetra malesuada neque at malesuada. Aenean sed dui sit amet eros venenatis laoreet.
</p>
</div>
<div data-aos="fade-left" data-aos-duration="1000">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sem sapien, pulvinar at condimentum vel, mollis quis erat. In consequat sem vel enim laoreet, non bibendum purus ornare. Vestibulum faucibus dictum magna in egestas. Sed laoreet in est nec hendrerit. Curabitur sed condimentum elit. Ut blandit posuere vulputate. Phasellus pharetra malesuada neque at malesuada. Aenean sed dui sit amet eros venenatis laoreet.
</p>
</div>
<div data-aos="fade-right" data-aos-duration="1000">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
<script src="https://unpkg.com/aos#next/dist/aos.js"></script>
<script>
AOS.init({
mirror:false,
});
</script>
</body>
</html>
After a little bit of tampering with the code, I may have found a solution to this specific case. Setting the height for the html tag, in CSS, to the attribute "fit-content" seems to do the trick just fine, for pages that are simply structured such as mine. You may want to try something else if you have positioned your elements in a particular way near the end of the page. Here's the (very brief) code needed for this solution, to type in your CSS file:
html{height:fit-content;}
As a (most likely irrelevant) side-note: this attribute is not supported in Internet Explorer.
I'm quite new into HTML&CSS and I'm having troubles with the model box I think.
Here both elements below "Personal data" aren't at the same height and I can't find the reason. Can anyone help me?
jsfiddle.net/jbzgmqns/
PS: Don't worry about being ugly, everything included the borders are just placeholders.
this is happening because <P>...</p> itself is taking margin.
Set its margin value '0' i.e. margin:0; to keep it in same level of image.
And take <p> inside <div class="cuadro">...</div> as shown below
<div class="cuadro">
<h1>Personal Data</h1>
<div class="imagen">
<img src="http://gobierno.morelos.gob.mx/sites/default/files/images/transparencia/placeholder-transparencia.jpg" />
</div>
<p style="margin: 0;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<br> Donec efficitur eros quis sapien congue, hendrerit rhoncus magna cursus.
<br> Nam a blandit diam. Curabitur auctor, ipsum eget mattis vulputate, elit ex egestas nunc, sit amet molestie
<br> ante felis porta ligula. Aenean elementum justo sed placerat finibus.</p>
</div></div>
It's because in your code you defined the block height, when you shouldn't:
.block {
height: 700px;
Just remove that and all will be fine.
Here is what I am trying to achieve:
Given the following markup:
p > img {
float: left;
margin: 1em;
}
<p>
<img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla quam velit, vulputate eu pharetra nec, mattis ac neque. Duis vulputate commodo lectus, ac blandit elit tincidunt id. Sed rhoncus, tortor sed eleifend tristique, tortor mauris molestie elit, et lacinia ipsum quam nec dui. Quisque nec mauris sit amet elit iaculis pretium sit amet quis magna. Aenean velit odio,
</p>
My largest hurdle is that I cannot change this markup. So, my question revolves around this specific scenario: Is it possible to vertically align the text inside of an element which also contains a floated image?
You can do this with Flexbox
p {
display: flex;
align-items: center;
}
img {
flex: 0 0 200px;
margin: 10px;
}
<p>
<img src="http://placehold.it/200x200">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla quam velit, vulputate eu pharetra nec, mattis ac neque. Duis vulputate commodo lectus, ac blandit elit tincidunt id. Sed rhoncus, tortor sed eleifend tristique, tortor mauris molestie elit, et lacinia ipsum quam nec dui. Quisque nec mauris sit amet elit iaculis pretium sit amet quis magna. Aenean velit odio,
</p>
As an alternative to the flex method you could change the position property on the img element and use padding and calc() for some good text positioning.
DEMO
Of course, YMMV depending on whether or not img elements will have standard sizing and how long your text will be.
p > img {
position: absolute;
top: 0;
left: 0;
margin: 1em;
}
p {
position: relative;
padding-left: calc(300px + 1.25em);
padding-top: 150px;
}
<p>
<img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300">
A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine.
</p>
I've been trying to use css to fill the last line of a paragraph with dashes but i can't seem to find a way to do so.
Basically, i'm getting some data (text) from the database and output it to a paragraph but i don't know how much text it is nor do i know the size of the parent div.
With all of this in mind, I need to fill the remaining space in the last line of the paragraph with dashes.
For example:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu malesuada lacus, in aliquam diam. Sed feugiat, leo tempor maximus accumsan, erat mi elementum nisi, quis vehicula nunc nibh in nibh.----------------------------------------------------------------------------------------------------------------
I've tried using some css codes i found but i couldn't adapt them to my situation some used display:flex (i think?) others were basically a lot of dashes and overflow:hidden which doesn't work because it hides everything on my paragraph after the first line.
Try
p {
position: relative;
overflow: hidden;
width: 100%;
}
p:after,
p::after {
content: "----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------";
display: inline-block;
width: 100%;
height: auto;
z-index: -1;
position: absolute;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu malesuada lacus, in aliquam diam. Sed feugiat, leo tempor maximus accumsan, erat mi elementum nisi, quis vehicula nunc nibh in nibh.</p>
Instead of dashes, you can use the hr tag. It does not need a closing tag.
Example of the hr tag:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu malesuada lacus, in aliquam diam. Sed feugiat, leo tempor maximus accumsan, erat mi elementum nisi, quis vehicula nunc nibh in nibh.
I'm using Bootstrap, and I'm trying to make a row of boxes be the same height.
Here is a dumbed-down example:
CSS:
.col-md-4 {
border:1px solid black;
height:100%;
}
Html:
<div class="row">
<div class="col-md-4">Less text</div>
<div class="col-md-4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a fringilla magna, nec vestibulum felis. Donec sollicitudin porta sem eu dignissim. Vivamus pellentesque leo vel pellentesque blandit</div>
<div class="col-md-4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a fringilla magna, nec vestibulum felis. Donec sollicitudin porta sem eu dignissim. Vivamus pellentesque leo vel pellentesque blandit
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a fringilla magna, nec vestibulum felis. Donec sollicitudin porta sem eu dignissim. Vivamus pellentesque leo vel pellentesque blandit
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a fringilla magna, nec vestibulum felis. Donec sollicitudin porta sem eu dignissim. Vivamus pellentesque leo vel pellentesque blandit
</div>
</div>
This results in the first box in the row being small, and the third box being very large. I want them all to have the same height.
How do I make the height of all the boxes in the row match the tallest box without setting a static height? I don't know how big the largets box will be. I know I could do this with a table, but that would not be optimal. Is there a way to do this with CSS?
Here is a bootply example. I did some googling but couldn't find what I was looking for.
CSS Only solution
Note: Use carefully and target the styles to your specific .col-md-4 elements. But for your code sample:
.col-md-4 {
display: table-cell;
float: none;
border:1px solid black;
height:100%;
}
Demo http://www.bootply.com/JXL6MYXiWO
$(document).ready(function(){
var highestCol = Math.max($('.div01').outerHeight(),
$('.div02').outerHeight(),
$('.div03').outerHeight());
$('.col-md-4').outerHeight(highestCol);
})
jQuery example, quite fast and effective.
Just give those divs additional unique classes, e.g. div01, div02, div03.
Check out http://jsfiddle.net/a7jow8c3/
Flexbox is probably your best option at this point in time. See this article: http://css-tricks.com/snippets/css/a-guide-to-flexbox/
And current browser support: http://caniuse.com/#feat=flexbox