Is it posible to make text left aligned on a slanted line? it's alignement should follow the slanted slanted image with required support for IE9+?
My example code :
img {
display: block;
float: left;
transform: rotate(-5deg);
margin: 0 15px;
}
<div>
<img src="http://placehold.it/150x250&text=img" alt="image" />
<p>Lorem ipsum dolor sit amet. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna. Vestibulum dapibus, mauris nec malesuada fames ac turpis velit, rhoncus eu,luctus et interdum adipiscing wisi. Aliquam erat ac ipsum. Integer aliquam purus. Quisque lorem tortor fringilla sed, vestibulum id, eleifend justo vel bibendum sapien massa ac turpis faucibus orci luctus non, consectetuer lobortis quis, varius in, paragraph.</p>
</div>
Using LESS
You guys made me think a bit more outside of the box, so I came out with my own ugly solution.
My idea is to add a bunch of extra square elements and calculate its size:
.loop(#i) when (#i > 0){
.loop((#i - 1));
.space#{i}{
width: floor(#i*#hSize/(1/tan(5deg)));
}
}
#hSize: 15px;
.space {
float: left;
clear: left;
width: #hSize;
height: #hSize;
}
HTML:
<p>
<span class="space space1"></span>
<span class="space space2"></span>
<!-- (...) -->
<span class="space space11"></span>
Lorem ipsum dolor sit amet. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna. Vestibulum dapibus, mauris nec malesuada fames ac turpis velit, rhoncus eu, luctus et interdum adipiscing wisi. Aliquam erat ac ipsum. Integer aliquam purus. Quisque lorem tortor fringilla sed, vestibulum id, eleifend justo vel bibendum sapien massa ac turpis faucibus orci luctus non, consectetuer lobortis quis, varius in, paragraph.
</p>
Proof of concept: http://codepen.io/Tymek/pen/jEypOX?editors=110
#chipChocolate.py, it was just a matter of principle for me NOT to use JavaScript for this. If anyone wants to write JS/jQuery code based on my solution, you're welcome. Please share it here afterwards.
WARNING: The shape-outside property should not be used in live projects1. This answer is here just to show how the desired output can
be achieved with this property.
Here is an example using the shape-outside property (modern webkit browsers only) :
DEMO
img {
display: block;
float: left;
transform: rotate(-5deg);
margin: 0 20px;
-webkit-shape-outside: polygon(0 3%, 85% -3%, 100% 97%, 15% 103%);
shape-outside: polygon(0 3%, 85% -3%, 100% 97%, 15% 103%);
}
<div>
<img src="http://placehold.it/150x250&text=img" alt="image" />
<p>Lorem ipsum dolor sit amet. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna. Vestibulum dapibus, mauris nec malesuada fames ac turpis velit, rhoncus eu,
luctus et interdum adipiscing wisi. Aliquam erat ac ipsum. Integer aliquam purus. Quisque lorem tortor fringilla sed, vestibulum id, eleifend justo vel bibendum sapien massa ac turpis faucibus orci luctus non, consectetuer lobortis quis, varius in,
paragraph.</p>
</div>
1The CSS Shapes Module Level 1 actually (mai 2016) has the status of "Candidate Recommendation". As this means it is a work in progress, it may change at any moment and therefore should not be used other than for testing.
The same layout could be achieved with the shape-inside property and specify a containing box for the text but no browser I know of supports this property today.
For a cross browser approach please see Tymek's answer.
img {
display: block;
float: left;
transform: rotate(-5deg);
margin: 0 15px;
}
p {
transform: skew(6deg);
font-style: italic;
}
<div>
<img src="http://placehold.it/150x250&text=img" alt="image" />
<p>Lorem ipsum dolor sit amet. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna. Vestibulum dapibus, mauris nec malesuada fames ac turpis velit, rhoncus eu,
luctus et interdum adipiscing wisi. Aliquam erat ac ipsum. Integer aliquam purus. Quisque lorem tortor fringilla sed, vestibulum id, eleifend justo vel bibendum sapien massa ac turpis faucibus orci luctus non, consectetuer lobortis quis, varius in,
paragraph.</p>
</div>
I can't give you a code example, this is more complicated than a skew transform.
You must parse the text and the related DOM contained in it and look for each new lines of text (not br or \n but each first character of every rendered line).
With this information you can add a padding-left calculated from the images position and dimension.
Related
I've been trying to create something like this for my blog page. Idea is that text of blog and thumbnail are 50/50 until image ends. After image the text should become 100% of page width. Options like placing image in Wordpress editor or text-wrap don't work because I want to add styling line next to text content which is 50%.
I've considered that maybe I should work out a jQuery/Javascript solution which splits the words and adds them form 50% div to 100% div after 50% div extends the height of the image.
Has anyone familiar with solution like this. What are the options for me?
For image:
float: left;
width: 50%;
This will allow you to wrap the text around your image and set image width to 50% of your container.
The only issue will be with the border, I am still not sure how to do it the best way.
.pretend-it-is-an-image {
height: 100px;
width: 50%;
background-color: blue;
float: left;
margin-right: 20px;
color: white;
text-align: center;
}
<span class="pretend-it-is-an-image">Image</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac nulla vitae nulla consectetur sollicitudin ac vel nisi. Ut fringilla erat augue, quis accumsan nisl aliquet a. Sed tempor libero est, non iaculis leo dignissim quis. Duis sagittis tristique libero. Mauris iaculis mauris eget convallis posuere. Aliquam iaculis tempus nunc. Quisque facilisis mauris arcu, eget lacinia neque elementum eget. Mauris tincidunt nunc suscipit ipsum vulputate, non congue nibh laoreet. Duis nisi lectus, tempus ut mauris id, hendrerit semper enim.
Phasellus commodo faucibus mauris ut commodo. Suspendisse ornare imperdiet nulla sed malesuada. Aenean et pharetra nibh. In auctor purus a mollis venenatis. Pellentesque sodales lorem urna, nec vestibulum massa interdum ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc erat ligula, egestas luctus mattis vitae, hendrerit quis sem. Proin tincidunt suscipit ligula id efficitur. In sed nisi scelerisque, tincidunt turpis eu, euismod dui. Donec bibendum malesuada massa sed vestibulum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque convallis pulvinar justo. Phasellus egestas, mi sit amet vehicula laoreet, lorem sapien ultrices mi, sit amet ornare erat orci eu ex.
Maecenas ultrices blandit cursus. Aenean sed elit sodales, pharetra dolor eu, condimentum enim. Donec vitae venenatis mi. In ut quam tristique ex aliquam gravida. Vestibulum a maximus dui. Proin enim diam, imperdiet tincidunt nulla dictum, tincidunt consectetur diam. Phasellus varius faucibus tristique.
</p>
Where to make a change?
You mentioned Wordpress, so these changes usually go into single.php file. For more information about where to make changes, see this: https://developer.wordpress.org/themes/basics/template-hierarchy/
try:
<img src="images/subjects/sub.jpg" align="left" style="width:45%; border-right:2px solid #000; padding:7px; margin-right:7px;"/>
overflow:overlay is working fine in chrome and safari. This property isn't available in IE and Mozilla browsers. I need the scroll bar pane to be visible always.
As mentioned by in the comments above and in the doc: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow
This deprecated API should no longer be used, but will probably still work.
However, since you mentioned:
I need the scroll bar pane to be visible always.
You can use the value overflow: scroll, and you will always have the scrollbar whether or not any content is actually clipped, and this will prevent the content from moving and changing your layout, for example:
div {
border: 1px solid black;
float: left;
height: 100px;
margin: 10px;
overflow: scroll;
width: 200px;
}
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dictum ligula vel dolor eleifend, vel interdum risus tristique. Nullam laoreet sed metus at aliquam. Aliquam ornare sagittis nibh in volutpat. Sed dolor orci, viverra ut lectus ac, commodo faucibus nisl. Proin molestie felis ligula, ullamcorper sollicitudin lacus commodo eu. Curabitur sit amet cursus ante. Aliquam vel leo et justo luctus semper eget sit amet turpis. Aenean ac rhoncus dolor. Etiam ut euismod arcu, vehicula suscipit ex. Donec nec posuere sapien. Phasellus accumsan sem nec nibh congue, ut porttitor diam convallis. Nulla ac tempus arcu. Suspendisse at lorem est. Nullam sit amet commodo felis. Quisque ac mollis metus. Duis varius eleifend sem, eget venenatis ante mattis
at.
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dictum ligula vel dolor eleifend, vel interdum risus tristique.
</div>
I just wanted to know how to prevent text from adapting when the parent's width is changed. If you run the code below and hover the mouse over the div, you can see how the text "adapts" to the parent's width while it changes. This is what I want to avoid. What I would expect to happen is that the text stays with its initial properties (I don't care if eventually some text disappears or becomes unreadable, because this "effect" is triggered when the user swipes left and the text disappears to the left). Thank you for your help!
.hello {
background: red;
border-radius: 20px;
transition: 2s;
width: 100%;
height: 200px;
}
.hello:hover {
width: 20%;
}
<div class="hello">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod elit diam, in condimentum eros scelerisque id. Cras tempus lectus tortor, ut elementum eros mollis consequat. Nullam ac odio eros. Phasellus at turpis tristique, facilisis neque
nec, auctor turpis. Nunc ac justo gravida, lobortis lectus a, tempus felis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris vitae imperdiet sapien, eget interdum lacus.
</div>
I would set a static width so I can prevent, the .static-container from shrinking.. but it's not dynamic, like 100% would a workaround to this would be working with media queries, in order to make it responsive...
.hello {
background: red;
border-radius: 20px;
transition: 2s;
width: 400px;
height: 200px;
overflow:hidden;
}
.hello:hover {
width: 20%;
}
.static-container{
width:400px;
}
<div class="hello">
<div class="static-container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod elit diam, in condimentum eros scelerisque id. Cras tempus lectus tortor, ut elementum eros mollis consequat. Nullam ac odio eros. Phasellus at turpis tristique, facilisis neque
nec, auctor turpis. Nunc ac justo gravida, lobortis lectus a, tempus felis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris vitae imperdiet sapien, eget interdum lacus.
</div>
</div>
You can make new div inside parent with absolute positioning
.hello {
background: red;
border-radius: 20px;
transition: 2s;
width: 100%;
height: 200px;
}
.hello:hover {
width: 20%;
}
.innerText {
position: absolute;
}
<div class="hello">
<div class="innerText">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod elit diam, in condimentum eros scelerisque id. Cras tempus lectus tortor, ut elementum eros mollis consequat. Nullam ac odio eros. Phasellus at turpis tristique, facilisis neque
nec, auctor turpis. Nunc ac justo gravida, lobortis lectus a, tempus felis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris vitae imperdiet sapien, eget interdum lacus.
</div>
</div>
.hello {
background: red;
border-radius: 20px;
transition: 2s;
width: 100%;
height: 200px;
}
.hello:hover {
width: 20%;
}
p{
position:absolute;
}
<div class="hello">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod elit diam, in condimentum eros scelerisque id. Cras tempus lectus tortor, ut elementum eros mollis consequat. Nullam ac odio eros. Phasellus at turpis tristique, facilisis neque
nec, auctor turpis. Nunc ac justo gravida, lobortis lectus a, tempus felis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris vitae imperdiet sapien, eget interdum lacus.
</p>
</div>
Hope this helps you.
.hello {
background: red;
border-radius: 20px;
transition: 2s;
width: 100%;
height: 200px;
overflow: hidden;
}
.hello:hover {
width: 20%;
white-space: nowrap;
text-overflow: ellipsis;
}
<div class="hello">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod elit diam, in condimentum eros scelerisque id. Cras tempus lectus tortor, ut elementum eros mollis consequat. Nullam ac odio eros. Phasellus at turpis tristique, facilisis neque
nec, auctor turpis. Nunc ac justo gravida, lobortis lectus a, tempus felis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris vitae imperdiet sapien, eget interdum lacus.
</div>
I am having issues with my jQuery match height... or maybe I just don't understand it fully? Any Help?
Image 1
Image 1: This is how it looks without height matched, which i am happy with just some simple shadowed boxes. But they do not match each others height :/
Image 2
Image 2: This is how it looks currently when I am trying to apply my jQuery of match height. The shadowed boxes are tiny at the top and it pushes the content underneath them...
HTML:
<div class="column small-12 large-4 medium-12">
<div class="home-card">
<h2>Education</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut accumsan, mi a auctor varius, nibh metus aliquet nisl, sit amet aliquam massa ipsum vitae magna. Praesent sed quam felis. Phasellus pretium tempus sapien, eu interdum turpis ultricies quis. Nam dictum nisl et nulla scelerisque venenatis. Fusce sit amet aliquam.
</div>
</div>
<div class="column small-12 large-4 medium-12">
<div class="home-card">
<h2>Education</h2>
<p>Vestibulum eget sodales orci. Quisque non semper enim. Mauris suscipit malesuada nisi sit amet tincidunt. Aliquam quam arcu, imperdiet ut tortor a, rhoncus aliquam leo. Nam ullamcorper elit vitae porttitor semper. Praesent cursus id felis nec eleifend. Ut vel sapien eleifend, efficitur metus eget, lacinia leo. Fusce eu lacus pretium, pulvinar tellus vel, vestibulum dui. Nunc congue libero justo, at aliquet ipsum posuere scelerisque. Praesent nunc lorem, venenatis eu velit sed, volutpat efficitur sem. Integer nisi arcu, sodales eu dignissim et, sagittis in massa. Aenean fringilla ante sed elit convallis, ac ornare urna porta. Pellentesque vel diam luctus, accumsan metus eu, malesuada elit.</p>
</div>
</div>
<div class="column small-12 large-4 medium-12">
<div class="home-card">
<h2>Education</h2>
<p>Aenean a mi quis justo ultricies posuere nec vitae lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus nec felis ante. Nulla aliquet in augue id varius. Cras ut ligula a diam porta feugiat. Praesent dictum eros nisl, at interdum tellus suscipit vel. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
</div>
</div>
</div>
JS:
$(document).ready(function(){
$(".fade").hide(0).delay(0).fadeIn(500)
$('div').each(function(){
var highestBox = 0;
$('.home-card', this).each(function(){
if($(this).height() > highestBox) {
highestBox = $(this).height();
}
});
$('.home-card', this).height(highestBox);
});
});
CSS:
.home-card {
box-shadow: 1px 0 11px rgba(33,33,33, 0.2);
padding: 5px;
margin-top: 6px;
width: 97%;
float: none;
position: relative;
left: 0.5%;
}
.home-card:hover {
box-shadow: 1px 0 11px rgba(33,33,33, 0.4);
}
.home-card p, h2 {
padding: 10px;
}
Any Ideas?? Thanks!
ALSO: How would I get it so that height matches on large screens only, and is unaffected on medium and small screens?
Have you considered using a CSS only solution?
You could wrap your columns in a container, let's use a div with a class of container. Make this container a flexbox container and child divs within it will be matching heights.
.container {
display: flex;
}
I prefer using CSS for this type of problem because it's more of a presentational concern and this approach doesn't necessitate writing any messy javascript to manipulate the DOM. Additionally, unless you need to support old versions of IE, browser support for flexbox is pretty good. http://caniuse.com/#search=flexbox
I added a border to the child divs with a class of column simply to illustrate that they are indeed the same height.
https://jsfiddle.net/eulloa/tx5jbdgf/1/
This is a pretty good reference on flexbox, in case you're interested in reading more.
Why the first div looping?
Just the second loop should do what you want.
var highestBox = 0;
$('.home-card').each(function(){
if($(this).height() > highestBox) {
highestBox = $(this).height();
}
});
$('.home-card').height(highestBox);
Because if there is another div having no .home-card child... Like a footer...
highestBox sets to 0.
Then all .homecard are setted to zero.
What you actually see as height probably is margin/padding of inner elements... or something.
I have a dojo titlepane that contains a button on the left-hand side and a paragraph of text on the right-hand side. I would like to be able to vertically center align the button in regard to the paragraph of text and would like to avoid using tables. I need a solution that will work in IE7+. For whatever it's worth, I'm using Dojo 1.3.2 (yes...I know it's old). The titlepane is initially closed until the user decides to open it.
Here's an example of the titlepane contents:
<div>
<div style="float: left; margin-bottom: 5px; margin-right: 5px;">
<input type="submit" name="access" id="access" value="Access" STYLE="font-size:8pt" />
</div>
<div style="float: right; margin-right: 5px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla placerat vulputate tortor, sit amet malesuada quam vulputate vel. In hac habitasse platea dictumst. Vivamus ut rutrum nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent rhoncus nisi vitae augue tincidunt elementum. Phasellus a lorem dolor. Aliquam erat felis, ultrices eget lacinia non, rutrum a massa. Mauris et est dui, ut rutrum orci. Curabitur pulvinar porta risus, ac lobortis lorem volutpat ut. Etiam fringilla hendrerit diam at faucibus. Donec condimentum lacinia sem, quis aliquet mauris tincidunt nec. Ut sit amet urna lectus, vel volutpat ipsum. Aliquam erat volutpat. Proin id orci sit amet turpis sagittis adipiscing nec nec enim. Maecenas vulputate, velit a commodo ultricies, nisl nisl tristique lorem, ut lacinia mauris felis eget velit. Vestibulum sit amet dictum tellus.</p>
</div>
</div>
It's also worth mentioning that I do not know the height of my container, as I know there are solutions out there where the container height is hard-coded in css.
My solution is working, but only on IE8+ (maybe my ieTester is wrong, so You should check it). You will have to modify your HTML a little:
<div>
<div style="margin-bottom: 5px; margin-right: 5px; display: table; ">
<p style="display: table-cell; vertical-align: middle; width: 50px;">
<input type="submit" name="access" id="access" value="Access" STYLE="font-size:8pt ;" />
</p>
<div style="float: right; margin-right: 5px; width: 300px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla placerat vulputate tortor, sit amet malesuada quam vulputate vel. In hac habitasse platea dictumst. Vivamus ut rutrum nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent rhoncus nisi vitae augue tincidunt elementum. Phasellus a lorem dolor. Aliquam erat felis, ultrices eget lacinia non, rutrum a massa. Mauris et est dui, ut rutrum orci. Curabitur pulvinar porta risus, ac lobortis lorem volutpat ut. Etiam fringilla hendrerit diam at faucibus. Donec condimentum lacinia sem, quis aliquet mauris tincidunt nec. Ut sit amet urna lectus, vel volutpat ipsum. Aliquam erat volutpat. Proin id orci sit amet turpis sagittis adipiscing nec nec enim. Maecenas vulputate, velit a commodo ultricies, nisl nisl tristique lorem, ut lacinia mauris felis eget velit. Vestibulum sit amet dictum tellus.</p>
</div>
</div><!-- display: table; end -->
</div>
So first of all:
You have to wrap div with p inteo div containing input so it know how hight it is.
Add this wraper display: table style.
Put an extra element to wrap the input, this element must have those CSS float: left; width: somepx and display:table-ceill.
Remember to give width: somepx to the div with p (Your text).
Try to use CSS classes instead of inline styles.
PS
Allways remember to put jsfiddle: http://jsfiddle.net/jnCU4/