I have found how to make non-rectangular shaped text from here (Unusual shape of a textarea?) and it works like a charm.
I need to limit this to 2 lines so I used overflow: hidden; but the area somehow returns to rectangular shape.
This is my html code.
.descTitle {
height: 20px;
width: 70px;
float: left;
border: none;
}
.descContent {
height: 40px;
line-height: 20px;
/*overflow: hidden; /* This breaks the form*/
}
.descOut {
height: 40px;
width: 100%;
}
<tr>
<td colspan=1>
<div class='descOut'>
<div class='descTitle'>
<label for='txt9'><b>Description: </b></label>
</div>
<div class='descContent' contenteditable='true' style='font-color:black; font-size: 11px; font-family:arial'/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
</div>
</td>
</tr>
It works great when I comment out the overflow line but somehow it breaks the form when being used.
Can anyone help me to find out how to limit the contents to 2 lines without breaking unusual shaped text area?
Related
I've a slightly odd requirement here. I'm trying to create a HTML + CSS transcript of a seventeenth century book which has a peculiar layout. The pages have a column of text with a generous right-hand margin that contains various floats (many of which are tables of numbers). These floating diagrams line up with the paragraphs of text so that the first line of the float lines up with the last line of the paragraph. (The text makes reference to this fact, so it's important to preserve it.)
Mostly this is easy, as in this example:
<main>
<h1>Test</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua —
<span class="float">123<br/>456</span></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua —
<span class="float">789</span></p>
</main>
main {
max-width: 475px;
padding: 0.5rem;
border: thin solid black;
margin: 0 auto;
}
h1 {
text-align: center;
}
p {
text-align: justify;
text-indent: 1.5em;
padding-right: 0.5rem;
border-right: thin solid black;
margin: 0 calc(3ch + 0.5rem) 0 0;
}
span.float {
float: right;
clear: right;
text-align: right;
text-indent: 0;
font-variant-numeric: tabular-nums;
width: calc(3ch);
margin-right: calc(-3ch - 1rem);
}
This produces something like the following, which is exactly as I want:
The 123 lines up with the end of the first paragraph, the 789 lines up with the end of the second paragraph, and the first float (123, 456) flows alongside the start of the second paragraph.
However, very occasionally, I have a large float and the following paragraph is very short, e.g.
<main>
<h1>Test</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua —
<span class="float">123<br/>456<br/>789</span></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit
sed do eiusmod tempor incididunt — <span class="float">321</span></p>
<p>Lorem ipsum dolor sit amet.</p>
</main>
(CSS as before.) If this happens, the book adds space above the second paragraph, and I want to replicate this so that it looks a bit like the following (which I've mocked up by inserting <p><br/></p> before the second paragraph):
Is there a way of achieving this in HTML and CSS? I'm not adverse to changing the way I mark up the document, however I'm catering for a variety of screen widths and fonts, so I cannot hard-code spacing based on how much I need in my browser. I'm happy with a solution that won't work in ancient browsers.
Update: To help illustrate what I'm after, here is a quick and dirty solution using jQuery, though I would prefer to avoid using Javascript if at all possible and do it in CSS:
$(function() {
$('p').each( function() {
var floats = $(this).find('.float');
var nextp = $(this).next('p:has(.float)');
if (floats.length && nextp.length) {
var f = $(floats[floats.length-1]), n = $(nextp[0]);
if (f.height() > n.height()) {
f.css('float', 'none');
n.css('padding-top', (f.height() - n.height()) + 'px');
f.css('float', 'right');
}
}
});
});
This question already has answers here:
Understanding CSS selector priority / specificity
(4 answers)
Closed 3 years ago.
I have 6 col-lg-3 in my container. Each div including another div, h4 and p.
Included divs have background-image, and some properties in CSS.
And I want to change included div background-image on hovering col-lg-3 div
But it just ignore :hover and nothing happening.
Ive tried not only change background-images, but change color, add borders, etc. But no response. Heres one of div.col-lg-3...
.reasons .col-lg-3 div {
width: 99px;
height: 99px;
margin: 10px auto 5px auto;
background-size: 99px 99px;
background-repeat: no-repeat;
transition: 0.5s ease;
}
.community:hover div {
background-image: url('img/communityReverse.png');
}
<div class="col-lg-3 community">
<div style="background-image: url('img/community.png')"></div>
<h4>Lorem ipsum dolor</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
.community:hover div{ ... } seems not working, but for example .community:hover h4{ font-size: 30px; } ok, no problem. I cant see what is wrong
You had an issue on your CSS, because you were trying to nest the div inside a class that wasn't declared before (.reasons). Aside from that, you should declare the .community class inside the nested div, so the image will be separated on the code (better view and easier to deal with), then, just make the :hover event apply to the class, so whenever the mouse enters the area, it'll trigger the event and change the background.
Here goes a Snippet for better view of the code and how it works :
.community div {
width: 100%;
height: 99px;
margin: 10px auto 5px auto;
background-image: url("http://www.f-covers.com/cover/cute-baby-kitten-facebook-cover-timeline-banner-for-fb.jpg");
background-repeat: no-repeat;
background-size: contain;
transition: all 0.5s ease;
}
.community:hover div {
background-image: url("https://www.freewebheaders.com/wordpress/wp-content/gallery/cats/lovely-american-shorthair-kitten-website-header.jpg");
}
<div class="col-lg-3 community">
<div></div>
<h4>Lorem ipsum dolor</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
By the way, you don't have to specify a nested class when just wanting to work with general styles, as .community is nested as sibling with .col-lg-3, you can use either to change inner styles as I did in the Snippet above.
you check this code you are working with wrong code
.community div:hover
{
background-image: url('img/communityReverse.png');
}
you need to use !important in your code otherwise you have done well
.reasons .col-lg-3 div {
width: 99px;
height: 99px;
margin: 10px auto 5px auto;
background-size: 99px 99px;
background-repeat: no-repeat;
transition: 0.5s ease;
}
.community:hover div {
background-image: url('img/communityReverse.png') !important;
}
<div class="col-lg-3 community">
<div style="background-image: url('img/community.png')"></div>
<h4>Lorem ipsum dolor</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
Have you tried !important ?
.community:hover div {
background-image: url('img/communityReverse.png')!important;
}
I'm trying to add line numbers to existing html with unequal line height - many types of font size and also images.
each line look like -
<div id="1"><right><span>line 1</span></right></div>
<div id="2"><right><span>line 2</span></right></div>
<div id="3"><right><span>line 3</span></right></div>
is there simple way to add line numbers that will be vertically align?
thanks
By inspiring from this question, I have developed a solution for your question. You can use the counter-reset and counter-increment property to achieve this
<html>
<head>
<style>
.container {
counter-reset: line;
}
.container .lineNum {
display: block;
line-height: 1.5rem;
}
.container .lineNum:before {
counter-increment: line;
content: counter(line);
display: inline-block;
margin-right: .5em;
}
</style>
</head>
<body>
<div class="container">
<div id="1" class="lineNum"><right><span>line 1</span></right></div>
<div id="2" class="lineNum"><right><span>line 2</span></right></div>
<div id="3" class="lineNum"><right><span>line 3</span></right></div>
</div>
</body>
</html>
Maybe a little automated paragraph counter.
$(document).ready(function() {
var maxNum = 0;//how many lines should be prepared (Takin in considersation, there would be more wrappers)
$(".NumeredTextBlock").each(function() {//create counter for each .NumeredTextBlock wrapper
var line = 1;//start with number 1
$("p", this).each(function() {//look for paragraph elements inside wrapper
$(this).addClass("line" + line);//add class with line number
line++;
if (maxNum < line) maxNum = line;//set the maximum number of lines used in HTML DOM for wrapper
});
});
var prepStyle = "";//prepare css style with line numbering
while (maxNum--) {//prepare as many styles as the max number in document
prepStyle += ".line" + maxNum + ":before{content:'" + maxNum + "'}";
}
$("#numbers").html(prepStyle);//add prepared styles to the HTML DOM
console.log("resulting generated <style id='numbers'>"+prepStyle+"</style>")
});
.NumeredTextBlock p {
padding-left: 50px;
position: relative;
}
.NumeredTextBlock p:before {
display: block;
position: absolute;
left: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="NumeredTextBlock">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna</p>
<p>Lorem ipsum dol</p>
<p>Lorem</p>
</div>
<style id="numbers"></style>
if you have requirement listing automatically use <OL> tag
other way is no add deffrent tag like this
div span {
float: right;
}
<ol>
<li> list </li>
<li> list </li>
<li> list </li>
<li> list </li>
</ol>
<div id="1"><right>line <span>1</span></right></div>
<div id="2"><right>line <span>2</span></right></div>
<div id="3"><right>line <span>3</span></right></div>
div {
position: relative;
}
div>span:first-of-type {
width: 120px;
display: inline-block;
}
div>span:nth-of-type(2) {
position: absolute;
transform: translate(0, -50%);
top: 50%;
}
td,
div {
border-bottom: 1px solid;
}
td {
vertical-align: middle;
}
<table>
<tr>
<td>Some str length<br/>Some str length</td>
<td>105</td>
</tr>
<tr>
<td>shorter</td>
<td>102</td>
</tr>
</table>
<br/>
<br/>
<div>
<span>Some str length<br/>Some str length</span>
<span>105</span>
</div>
<div>
<span>shorter</span>
<span>102</span>
</div>
This question already has answers here:
Floating elements within a div, floats outside of div. Why?
(11 answers)
Closed 6 years ago.
I have lists of data need to display like this
.mycontent-bottom {
border-bottom: 1px solid #ccc;
}
#float-right{
float: right;
}
<div class="mycontent-bottom">
Title
<span id="float-right">50000</span>
</div>
<div class="mycontent-bottom">
lorem ipsum yang lazim digunakan adalah: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
<span id="float-right">50000</span>
</div>
The problem is the second one, if the text is too long, it will push the number outside the bottom border. Any ideas how to hide long text so the number will stay at right and dont get push outside the border ?
You could try this:
https://jsfiddle.net/Lboxddh9/5/
.mycontent-bottom {
border-bottom: 1px solid #ccc;
display: inline-block;
width: 100%;
}
#float-right{
float: right;
}
Also, you should not use identical ids for multiple elements in a one page.
That's why, this would be correct, while your original markup is invalid.
<div class="mycontent-bottom">
Title
<span class="float-right">...</span>
</div>
<div class="mycontent-bottom">
...
<span class="float-right">...</span>
</div>
Updated fiddle with class instead of multiple ids:
https://jsfiddle.net/Lboxddh9/7/
I want the byline to appear just below the image.
I am trying to use the right, left, etc properties in relation to the relative property, but the span moves left of the image.
What is the mistake in my code?
<section id="manchanabele">
<img id="club" alt="club" src="images/club.jpg">
<p id="lorem">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. nisi ut aliquip ex ea commodo consequat.
<span id="byline">by: Lorem Ipsum</span>
</p>
</section>
section#manchanabele {
background: #C8C8C8;
}
#club {
float: right;
width: 75px;
height: 75px;
}
p#lorem {
background: #A0A0A0;
}
span#byline {
position: relative;
float: right;
}
You are structuring your DOM in a wrong way, you should wrap the elements you want to float in a single container. I will provide you the code which will result you in something like below
Here, in the code below, I will explain you related to the image above, the black border container is .wrap, the one which is having green border is the paragraph, which is p, the red on is the container which you are floating to the right which is .right_float and the nested elements inside red element is your img and span respectively.
For example
<div class="wrap">
<p>Hello</p>
<div class="right_float">
<img src="#" />
<span>Hello</span>
</div>
</div>
.wrap {
overflow: hidden; /* Clears float */
}
.wrap p {
float: left;
width: /*Some fixed width*/
}
.wrap .right_float {
float: right;
width: /* Some fixed width */
}
.wrap .right_float span {
display: block;
}
Note, if you don't care about the older versions, especially IE, I would recommend you to use a self clearing parent class
.clear:after {
clear: both;
display: table;
content: "";
}
Now, you can call the above class on your parent element holding floated elements, and you don't have to use overflow: hidden;
You could keep the byline aligned with the image by wrapping the elements in a container such as a DIV.
HTML:
<section id="manchanabele">
<div id="align">
<img id="club" alt="club" src="images/club.jpg">
<span id="byline">by: Lorem Ipsum</span>
</div>
<p id="lorem">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. nisi ut aliquip ex ea commodo consequat.
</p>
</section>
CSS:
section#manchanabele {
background: #C8C8C8;
}
#align {
float:right;
width:75px;
}
#club {
width: 75px;
height: 75px;
}
p#lorem {
background: #A0A0A0;
}
N.B. You may want to consider using classes rather the IDs if you need to use this layout several times for similar content.
Use this markup:
<article>
<div class="clearfix">
<img src="http://lorempixel.com/70/70" alt="a random image" class="thumb" >
<p>The quick brown fox jumps over all the messy markup and writes a new one.</p>
</div>
<footer>By The Fox</footer>
</article>
Fiddle: http://jsfiddle.net/C5GkH/1/
or if you need the image and the byline always one below the other keeping a blank sidebar on the right follow the advice of #Mr. Alien
Try to clear:both; after the image.
Like so
<section id="manchanabele">
<img id="club" alt="club" src="images/club.jpg">
<div style="clear:both;></div>
<p id="lorem">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. nisi ut aliquip ex ea commodo consequat.
<span id="byline">by: Lorem Ipsum</span>
</p>
</section>
Also avoid floating inline elements. Better if you wrapped that image with a div and then floated the div.