PURPOSE
Having an editable div in which the text flows in different "simulated" pages, so to obtain an effect like Word. At the moment, I'm interested to have this working in Chrome (no crossbrowser compatibility).
WHAT I'VE DONE
I've created an editable div (pagina) already filled with some text. Inside this div there are 2 divs: block1 and block2.Block1 is a floating right div that simulates the page height.Block2 is a floating left div that simulate the space between pages.The effect I've obtained is a long text "broken" into pages. In my code I've used different background colors to have a better view of the various divs.
THE PROBLEM
When I move the cursor at the beginning of a new "page" and I press [return] more times, the new lines are moved at the right side of the above block2 div (the pages sepatator). If I type something, single letters appears in the right side (see screenshot below).
Problem screenshot
In this Fiddle (http://jsfiddle.net/n4d2jtd9/4/) you can see my experiments result.
.pagina {
width: 200px;
background-color: #AAA;
}
div.block1 {
float: right;
width: 100px;
height: 100px;
background-color: #CCC;
}
div.block2 {
float: left;
width: 200px;
height: 100px;
background-color: #FFF;
}
<body>
<div class="pagina">
<div class="block1"></div>
<div class="block2"></div>
<div class="block1"></div>
<div class="block2"></div>
<div contenteditable="true" style="width:90px;background-color:#DDD;word-break:break-all;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec libero mi, tempus in tincidunt vitae, aliquet nec nibh. Integer egestas leo vel orci
</div>
</div>
</body>
THE QUESTION
Is there a way to prevent that text effect?
CONSIDERATIONS
When you press [enter] inside an editable div, Chrome adds a div tag per paragraph (and a br tag when you press [enter]+[shift]).
The created "empty" div is always <div><br></div>. Having a zero width, the floating div moves this tag to right. I've noticed that if I put a space char inside the div, it works properly. Maybe jQuery can help.
New Code: based on browsers:
working demo: http://jsfiddle.net/n4d2jtd9/9/
HTML
<body>
<div class="pagina">
<div class="block1"></div>
<div class="block2"></div>
<div class="block1"></div>
<div class="block2"></div>
<div id="editable" contenteditable="true" style="width:90px;background-color:#DDD;word-break:break-all;
">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec libero mi, tempus in tincidunt vitae, aliquet nec nibh. Integer egestas leo vel orci
</div>
</div>
</body>
CSS
#editable{white-space:normal}
}
/* Chrome 29+ */
#media screen and (-webkit-min-device-pixel-ratio:0)
and (min-resolution:.001dpcm) {
#editable{white-space:pre-line;}
}
/* Chrome 22-28 */
#media screen and(-webkit-min-device-pixel-ratio:0) {
.selector {-chrome-:only(;
#editable{white-space:pre-line;}
);}
}
Related
I have
<div id="aboutPyKov">
<h2 id="pyKovSubheading">About PyKov</h2>
<p id="pyKovIs">Lorem ipsum dolor sit amet,<br/>consectetur
adipiscing elit.<br/>Vestibulum congue mattis odio.<br/>Nulla f
acilisi. Quisque tempus<br/>varius enim, quis mattis metus,
<br/>auctor quis. Lorem ipsum dolor sit<br/>amet, consectetur
adipiscing elit.<br/>Pellentesque a euismod sem, a<br/>convallis
turpis. Donec aliquet<br/>quis leo at fermentum. Maecenas<br/>ut
lacinia magna. Maecenas gravida<br/>interdum turpis non
fermentum.</p>
</div>
For styling, I have
#aboutPyKov {
border: 8px dotted rgba(255,198,107,0.93);
border-radius: 20px;
}
This works fine, however it shows a dotted border around the whole width of the whole page. I want it to be self-contained, but instead, it goes around the whole screen as you can see in this picture. How do I make it so it only goes around the text? Also, the top border is hugging the background color above it. I would also like to know how to change that.
This is CSS level 1: block and inline. Block elements take up 100% of available width unless you set them to float or set an explicit width. Either set the border to the paragraph element or set a width to your div.
Try adding padding = 0px" to your <p> tag and <h2> tag,
p, h2 {
padding: 0px;
}
because <p> and <h2> tags have default padding applied.
Just change the display attribute
#aboutPyKov {
border: 8px dotted rgba(255,198,107,0.93);
border-radius: 20px;
display:inline-block; // just change the display
}
I have the following container holding both an image and a text element.
<div class="container">
<img id="image" src="http://dummyimage.com/200">
<span class="text">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</span>
</div>
The desired behaviour is that the div should wrap to the width of the image, and therfore keep the text correctly wrapped underneath. This also needs to be flexible as content is dynamic and image width is not known in advance.
You can do this elegantly enough in Firefox and Chrome using min-content.
.container {
/*Other style stuff up here*/
width: -moz-min-content;
width: -webkit-min-content;
}
Jsfiddle of above - works perfectly in FF and Chrome.
My Problem:
Internet Explorer has no min-content (or equivalent that I can find) which means it is the text not the image which determines the containers width.
Is there any similarly elegant way of achieving this in Internet Explorer?
If not how can i restructure the html/css to allow for cross broser compatibilty for the same behaviour?
As mentioned by someone else you can use -ms-grid-columns. You just add a div around your content with IE only CSS. To other browsers the CSS is ignored and shouldn't affect your layout (unless you're applying CSS to all div elements like padding/margin in which case stop doing that).
HTML
<div id="stupidIE">
<div class="container">
<img id="image" src="http://dummyimage.com/200" alt="">
<span class="text">
Cupcake ipsum dolor sit.
Amet chocolate carrot cake oat cake bear claw croissant.
</span>
</div>
</div>
CSS
.container
{
background-color: #EEEEEE;
border: 1px solid #888888;
padding: 0.3em;
width: -moz-min-content;
width: -webkit-min-content;
}
#stupidIE
{
display: -ms-grid;
-ms-grid-columns: min-content;
}
Here's the JSFiddle: http://jsfiddle.net/LRYSp/
Tested in Chrome and IE11. But it should work in other browsers. However I don't think it will render correctly in IE9 and below.
#Stack_of_Pancakes solution is lacking in that it adds an extra div which is a block element and spans the entire width, whereas the original width:min-content doesn't have this flaw.
It can be fixed:
HTML: (intact)
<div class="container">
<img id="image" src="http://dummyimage.com/200" alt="">
<span class="text">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</span>
</div>
CSS:
.container {
background-color: #EEEEEE;
border: 1px solid #888888;
padding: 0.3em;
width: -moz-min-content;
width: -webkit-min-content;
display: -ms-inline-grid;
-ms-grid-columns: min-content;
}
.container > span:nth-child(2)
{
-ms-grid-row:2;
display:inline-block;
}
http://jsfiddle.net/L28s7txr/6
a bit of jquery?
$(function() {
$('.container').width($('img#image').width());
});
FIDDLE
I'm making myself a website but I'm a little stuck on an issue I am having.
Inside a div I have a block of text with variable height.
At the right side of the text I want to position an image width a variable width & height. It has to be aligned to the bottom
Above the image may not come any text.
It needs to be like this: https://www.dropbox.com/s/pqpttrvefrvci52/example.jpg
Here is the code I'm currently having:
HTML:
<div id="section">
<div id="image">
<img src="example.jpg" alt="image"/>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam congue, nisl et facilisis commodo, sem tortor suscipit massa, nec rutrum eros nunc et orci.
Maecenas nibh erat, pulvinar sed aliquam at, malesuada nec nibh.Curabitur fringilla justo odio. Aenean tristique consequat lorem vel tincidunt.
</p>
</div>
CSS
#section {
position: relative;
}
#image {
float: right;
margin-left: 20px;
position: absolute;
bottom: o;
right: 0;
}
With this code the image is aligned to the bottom right corner of the div, but the height of the div is lower then the height of the image.
Also the text just goes through the image.
you need a couple of things to fix this.
1) add padding-right to the section so it does not overlap with the image.
#section {
position: relative;
padding-right:<at least image width so the text doesn't overlap>
}
2) when you add a div and float in it, the float remove the image from the flow of the document so you need to add another internal div with the same height or make the height of the div the same height as your image or just add a floater div..
<div id="image">
<img src="example.jpg" alt="image"/>
</div>
<div style="clear:both"></div>
</div>
Here is a working solution: http://jsfiddle.net/zV3wm/
I can think of a way with variable image widths and text amounts, but it requires some duplication in the markup.
The gist is that you right-float a hidden version of the image, and then use overflow:hidden so that the paragraph against the float doesn't flow under it. Then, we use absolute positioning to place the non-hidden version of the image at the bottom of the container.
I have prepared a mockup at http://jsfiddle.net/UmGNZ/ (I have given the hidden image partial opacity, so you can see where it's being added to the document), but for a pseudo-HTML example:
<container with position:relative>
<right-float>
<hidden img tag with opacity: 0 />
<actual img tag with absolute positioning, bottom: 0, right: 0 />
</right-float>
<p with overflow:hidden (or auto) />
</container>
You could also try a pure CSS solution using CSS tables if you don't have to support IE7, but otherwise this should work down to IE6 if you use visibility:hidden in favour of opacity, and add a zoom:1 to the paragraph style.
This idea which allows a flexible image size: http://jsfiddle.net/David_Knowles/F3zZU/4/
.cell {display:table-cell;}
#section {
position: relative;
width:300px;
}
#image {
vertical-align: bottom;
}
<div id="section">
<div class="cell">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam congue, nisl et facilisis commodo, sem tortor suscipit massa, nec rutrum eros nunc et orci.Maecenas nibh erat, pulvinar sed aliquam at, malesuada nec nibh.Curabitur fringilla justo odio. Aenean tristique consequat lorem vel tincidunt.</p>
</div>
<div id="image" class="cell">
<img src="http://placeimg.com/120/80/any" alt="image"/>
</div>
</div>
I dont thing I am correct but you can achieve that by float right and margin-top.
#img {
float: right;
margin-top: -140px;
}
Check this out: http://jsfiddle.net/wrujx/
I think best solution is to use a little bit of jQuery (JavaScript) and let each part do its job keeping it as simple as possible. Here's what you'd have:
HTML
<div id="wrapper">
<p>yourtexthere</p>
<img src="whatever.jpg"/>
</div>
CSS
#wrapper{
width:600px;
border:1px solid #000000;
}
p{
display:inline-block;
margin-right:20px;
}
img{
vertical-align:bottom;
}
jQuery
var parentWidth = $('#wrapper').width()
var imgWidth = $('img').width()
$('p').width((parentWidth - imgWidth) - 20)
And there you go plain and simple without extra tags and messy positioning.
This renders the same in Chrome and FireFox so maybe this is intended behavior but it seems pretty screwy. Putting a image in the h2 tag at the top of a div with "display:table-cell" causes extra padding to the top of the other table-cell divs roughly the same size as the image.
Here's my test code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Chrome Test</title>
<style>
#col3 {
display:table;
border:1px solid black;
}
#col3 div {
width:33%;
display:table-cell;
border:1px solid blue;
}
</style>
</head>
<body>
<h2>Wrong?</h2>
<div id="col3">
<div>
<h2>Heading 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
</div>
<div>
<h2><img src="url" height="80" width="215" alt="heading 2" /></h2>
<p>Suspendisse imperdiet lorem porta est venenatis viverra. </p>
</div>
<div>
<h2>Heading 2</h2>
<p>Aliquam laoreet diam sed ligula varius porta. Morbi volutpat ullamcorper diam, </p>
</div>
</div>
<h2>Right</h2>
<div id="col3">
<div>
<h2>Heading 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pretium, </p>
</div>
<div>
<h2>Heading 2</h2>
<p><img src="url" height="80" width="215" alt="heading 2" />Suspendisse imperdiet lorem porta est venenatis viverra. </p>
</div>
<div>
<h2>Heading 2</h2>
<p>Aliquam laoreet diam sed ligula varius porta. Morbi volutpat ullamcorper diam, </p>
</div>
</div>
</body>
</html>
Is this a bug? Can I avoid this behavior?
An h2 tag is a block element and may have some default padding assigned to it by the browser. Be sure to include a CSS Reset file (for example, this one), to remove that unwanted formatting.
Based on your given code i create the fiddle below -
Fiddle: http://jsfiddle.net/TtYn3/
Demo: http://jsfiddle.net/TtYn3/embedded/result/
As per required image in H2 tag and the padding issue solved in other columns.
Your divs are table cells and you don't set any vertical-align anywhere, so everything ends up baseline-aligned. The baseline of a cell is the bottom of the first line of text (more or less), so the bottoms of the first lines end up vertically aligned with each other. If the lines have very different heights (as in this case, because the image gives its line an 80px ascent), you get white gaps above the shorter lines.
If you don't want the cells to baseline-align, set their vertical-align to whatever value you want (sounds like top in your case).
Because you have display set to table-cell, your divs will behave just like they are in a table, and will stretch to the height of your tallest div (in each case, the div with the image inside an <h2>.
Second, you are using <div id="col3">. Id is only to be used in CSS for when you will call that CSS only once. You should assign col3 to a class instead of id, so that it can be used over and over on your page.
If you remove the display:table and table-cell attributes, your divs should shrink to their correct sizes.
Also, display:table-cell does not work in IE6 or IE7 (not that big of an issue these days, but still).
H tags and P tags always have default top and bottom padding / margins and it depends on the browser. I always set a class for them and set the margin to 0 and the padding to 0 unless I'm looking for some spacing, in which case I will set my own via css.
Here is the code: http://jsfiddle.net/ym2GQ/
p {
background: lightblue;
}
.end {
background: orange;
float: right;
display: inline;
}
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam adipiscing orci at tortor bibendum suscipit et eu eros. Nunc congue, ante nec egestas fringilla, ipsum est porttitor leo, tempus lacinia augue erat posuere elit.
</p>
<div class="end">$$</div>
I want the floating $$ to be within the paragraph before it. It should align with the lasts line in the paragraph but it should be floated to right.
How can this be done? Please note that I have to solve this problem under the constraint that I can not float the paragraph element that comes before the div element. I can do whatever I want with the DIV element though. I can also move around the DIV element to some other part of the code if necessary.
Given your new information that you want it at the bottom right of the paragraph, see this live example: http://jsfiddle.net/AGEus/1/
In short:
Make the <div> a <span> and place it as a child of the paragraph.
Make the paragraph position:relative (so that it establishes its own coordinate system)
Put some padding in the paragraph on the right side so that the contents of .end won't overlap the text.
Absolutely position and size the .end to the bottom right of the paragraph.
HTML:
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
<span class="end">$$</span>
</p>
CSS:
p { position:relative; padding-right:2em }
p .end { position:absolute; right:0; bottom:0; width:2em }
Replacing the DIV with a SPAN, and moving the inside the P seems to work. You can optionally set the SPAN to inline-block depending on the contents.
If you put the SPAN before the text, it will be near the top. If you put it after, it will be at the bottom.
demo
Ok, played with your code and found the solution. You need to set the p tag to display: inline and float the div to the right. I updated your fiddle for you.
If I understand you right, you want that the div is displayed over your paragraph.
For that you could just set the div to position absolute and set the exact position with top, left, right, bottom.