This question already has answers here:
Drop-caps using CSS
(3 answers)
Closed 7 years ago.
I have some text that I want to format so that the first letter to be big. The text looks like this without CSS:
<p>
<span>V</span>estibulum et arcu sodales dolor sagittis sollicitudin. Pellentesque vitae eros nec lacus iaculis viverra. Maecenas vitae sapien et augue tincidunt elementum. Pellentesque velit. Mauris eget tellus. Proin ultricies scelerisque magna. Sed
pretium tempor mi. Aenean vel lacus. Cras quam. Ut faucibus enim sed mauris. Morbi malesuada nunc eu arcu. Integer quam. Quisque ac nunc. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla ac mi sit amet ante aliquet euismod. Ut suscipit.
In turpis. In at diam nec elit malesuada venenatis. In nec leo nec est ullamcorper nonummy. Suspendisse in nisl. Nam dolor. Nunc
</p>
If I just set the font-size of span bigger than the paragraph's, the letter does get bigger, but the next letter starts at the bottom right. I need to have the next letter start at the top right, and the paragraph's lines to flow around the big letter. I have tried using vertical inline but can't seem to manage to get it right.
is that what you need ?
p:first-letter {
float: left;
font-size: 5em;
line-height: 0.5em;
padding-bottom: 0.05em;
padding-top: 0.2em;
}
<p>Vestibulum et arcu sodales dolor sagittis sollicitudin. Pellentesque vitae eros nec lacus iaculis viverra. Maecenas vitae sapien et augue tincidunt elementum. Pellentesque velit. Mauris eget tellus. Proin ultricies scelerisque magna. Sed pretium tempor
mi. Aenean vel lacus. Cras quam. Ut faucibus enim sed mauris. Morbi malesuada nunc eu arcu. Integer quam. Quisque ac nunc. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla ac mi sit amet ante aliquet euismod. Ut suscipit. In turpis. In
at diam nec elit malesuada venenatis. In nec leo nec est ullamcorper nonummy. Suspendisse in nisl. Nam dolor. Nunc</p>
Using float: left; in the CSS that affects the first letter should make the remaining text wrap around it.
As a side note, you can just use the ::first-letter pseudo element to affect the first letter of an element.
For example, to the first letter of each <p>:
p::first-letter {
font-size: 130%;
float: left;
}
Related
This question already has answers here:
Applying a background to <html> and/or <body>
(2 answers)
Closed 2 years ago.
I understand the width & height of the visual viewport, as defined by this article, at least on a desktop, is the dimensions of the visible rectangle a user can see when they scroll to the top left of the page.
Why is the background red for, what looks like, the visual viewport when the html's height is 0?
html {
background-color: red;
}
body {
line-height: 20px;
margin: 0px;
}
<html>
<body>
</body>
</html>
A couple of misconceptions here.
First of all, not all CSS properties are inherited in the cascade.
You can look up any CSS property here and then see the formal definition. For instance, here is the formal definition for height:
Initial value: auto
Applies to: all elements but non-replaced inline elements, table columns, and column groups
Inherited: no
Percentages: The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to auto. A percentage height on the root element is relative to the initial containing block.
Computed value: a percentage or auto or the absolute length
Animation type: a length, percentage or calc();
You can see that height is not inherited, and it's default value is auto, whose definition says "The browser will calculate and select a height for the specified element.". When the browser calculates the height of an element, it will make it as small as possible while still fitting all the content inside.
The width property is also not inherited; to understand how width is calculated by default you must know the difference between block elements and inline elements. In short, a "block" element fills its parent's width, while an inline element (like span) takes up its minimum width. Every html tag is naturally either a block or inline element (except some special ones, like form fields, which are "replaced" elements), and you can always make a block element behave like an inline one (or vice-versa) using the CSS display property.
Things get a little less consistent with the root html element. Some browsers have that root element's initial height set to "auto", and some give it an initial minimum height of 100% of the viewport. The body element, however, will consistently have an unset (auto) height. Backgrounds on the html and body elements have an additional subtlety as described here.
Furthermore, the "visual viewport" (as you call it) is a scrolling container, meaning its children can be larger than the container. The scrollbar you see when your HTML is taller than the viewport belongs to the viewport, not to the html element.
You can reproduce this with divs:
.viewport {
height: 50px;
overflow: scroll;
}
<div class="viewport">
<div class="body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut auctor augue quis mi finibus, in tempus est finibus. Aenean aliquet ultricies magna eu posuere. Sed augue erat, placerat sit amet massa dignissim, aliquam placerat nisl. Donec et lacus molestie,
semper dolor sit amet, mattis erat. Pellentesque id enim urna. Aliquam posuere neque orci, et iaculis ex scelerisque vitae. Duis congue placerat eros a semper. Sed porttitor arcu ipsum, sed luctus est tempus at. Mauris ut fermentum tellus, sed suscipit
risus. Maecenas sit amet dignissim urna. Suspendisse ullamcorper nisi urna, id porttitor urna lacinia eget. Curabitur id ornare dolor. Pellentesque in augue tristique, convallis erat eget, malesuada elit. Suspendisse potenti. Fusce sollicitudin semper
nibh et porttitor. Nullam fringilla varius ligula, quis semper dui sollicitudin sed. Mauris cursus odio ut libero ornare, ut feugiat ipsum volutpat. Pellentesque lobortis sollicitudin orci sed viverra. Pellentesque in ipsum dui. Curabitur commodo
aliquet ante eu tempor. Proin justo eros, pharetra eget ultricies nec, mollis id nisl. Sed vehicula fermentum mi, et mollis tortor imperdiet quis. Aliquam erat volutpat. Quisque vel nunc ultricies, porttitor lacus a, laoreet ex. Donec lobortis semper
diam et tempus. Proin eu ex id nibh porttitor condimentum. Nulla facilisi. Suspendisse porta libero vel consequat vehicula. Suspendisse malesuada ipsum massa, in dignissim arcu rhoncus eu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
posuere cubilia curae; Praesent eu iaculis odio, non pulvinar neque. Aliquam eu diam a ligula tincidunt fermentum. Nullam convallis lorem at lectus pulvinar, eget tincidunt mauris pretium. Cras sollicitudin lacus quis dictum malesuada. Integer porttitor
sodales convallis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Pellentesque bibendum faucibus lacus. Sed sagittis quam non finibus placerat. Nunc eros libero, dignissim vel interdum ac, rutrum et ex. Integer
nec scelerisque nisi. In at ante nibh. Vivamus vehicula erat et lacus tincidunt hendrerit. Pellentesque porttitor, eros sed tincidunt molestie, mi tortor interdum velit, at convallis neque lacus eu massa.
</div>
</div>
If you want the html element to be exactly the viewport size, with the body element scrolling inside the html element, you can do that with CSS.
You may or may not already know about the "Viewports Units", a measurement unit which can be used in CSS. This allows you to set size and distance measurements based on a percentage of the viewport's height or width. This is very useful for exactly this purpose.
html
{
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
overflow: scroll;
background: #000;
color: #fff;
}
body {
min-height: 100vh;
}
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut auctor augue quis mi finibus, in tempus est finibus. Aenean aliquet ultricies magna eu posuere. Sed augue erat, placerat sit amet massa dignissim, aliquam placerat nisl. Donec et lacus molestie, semper dolor sit amet, mattis erat. Pellentesque id enim urna. Aliquam posuere neque orci, et iaculis ex scelerisque vitae. Duis congue placerat eros a semper.
</p>
<p>
Sed porttitor arcu ipsum, sed luctus est tempus at. Mauris ut fermentum tellus, sed suscipit risus. Maecenas sit amet dignissim urna. Suspendisse ullamcorper nisi urna, id porttitor urna lacinia eget. Curabitur id ornare dolor. Pellentesque in augue tristique, convallis erat eget, malesuada elit. Suspendisse potenti. Fusce sollicitudin semper nibh et porttitor. Nullam fringilla varius ligula, quis semper dui sollicitudin sed. Mauris cursus odio ut libero ornare, ut feugiat ipsum volutpat.
</p>
<p>
Pellentesque lobortis sollicitudin orci sed viverra. Pellentesque in ipsum dui. Curabitur commodo aliquet ante eu tempor. Proin justo eros, pharetra eget ultricies nec, mollis id nisl. Sed vehicula fermentum mi, et mollis tortor imperdiet quis. Aliquam erat volutpat. Quisque vel nunc ultricies, porttitor lacus a, laoreet ex. Donec lobortis semper diam et tempus. Proin eu ex id nibh porttitor condimentum. Nulla facilisi.
</p>
<p>
Suspendisse porta libero vel consequat vehicula. Suspendisse malesuada ipsum massa, in dignissim arcu rhoncus eu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Praesent eu iaculis odio, non pulvinar neque. Aliquam eu diam a ligula tincidunt fermentum. Nullam convallis lorem at lectus pulvinar, eget tincidunt mauris pretium. Cras sollicitudin lacus quis dictum malesuada. Integer porttitor sodales convallis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;
</p>
<p>
Pellentesque bibendum faucibus lacus. Sed sagittis quam non finibus placerat. Nunc eros libero, dignissim vel interdum ac, rutrum et ex. Integer nec scelerisque nisi. In at ante nibh. Vivamus vehicula erat et lacus tincidunt hendrerit. Pellentesque porttitor, eros sed tincidunt molestie, mi tortor interdum velit, at convallis neque lacus eu massa.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut auctor augue quis mi finibus, in tempus est finibus. Aenean aliquet ultricies magna eu posuere. Sed augue erat, placerat sit amet massa dignissim, aliquam placerat nisl. Donec et lacus molestie, semper dolor sit amet, mattis erat. Pellentesque id enim urna. Aliquam posuere neque orci, et iaculis ex scelerisque vitae. Duis congue placerat eros a semper.
</p>
<p>
Sed porttitor arcu ipsum, sed luctus est tempus at. Mauris ut fermentum tellus, sed suscipit risus. Maecenas sit amet dignissim urna. Suspendisse ullamcorper nisi urna, id porttitor urna lacinia eget. Curabitur id ornare dolor. Pellentesque in augue tristique, convallis erat eget, malesuada elit. Suspendisse potenti. Fusce sollicitudin semper nibh et porttitor. Nullam fringilla varius ligula, quis semper dui sollicitudin sed. Mauris cursus odio ut libero ornare, ut feugiat ipsum volutpat.
</p>
<p>
Pellentesque lobortis sollicitudin orci sed viverra. Pellentesque in ipsum dui. Curabitur commodo aliquet ante eu tempor. Proin justo eros, pharetra eget ultricies nec, mollis id nisl. Sed vehicula fermentum mi, et mollis tortor imperdiet quis. Aliquam erat volutpat. Quisque vel nunc ultricies, porttitor lacus a, laoreet ex. Donec lobortis semper diam et tempus. Proin eu ex id nibh porttitor condimentum. Nulla facilisi.
</p>
<p>
Suspendisse porta libero vel consequat vehicula. Suspendisse malesuada ipsum massa, in dignissim arcu rhoncus eu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Praesent eu iaculis odio, non pulvinar neque. Aliquam eu diam a ligula tincidunt fermentum. Nullam convallis lorem at lectus pulvinar, eget tincidunt mauris pretium. Cras sollicitudin lacus quis dictum malesuada. Integer porttitor sodales convallis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;
</p>
<p>
Pellentesque bibendum faucibus lacus. Sed sagittis quam non finibus placerat. Nunc eros libero, dignissim vel interdum ac, rutrum et ex. Integer nec scelerisque nisi. In at ante nibh. Vivamus vehicula erat et lacus tincidunt hendrerit. Pellentesque porttitor, eros sed tincidunt molestie, mi tortor interdum velit, at convallis neque lacus eu massa.
</p>
I am a beginner and I trying to style a webpage with css.
I am now using a Wordpress template (activello).
I would like the text in the page to have more margin than the image (see picture) but when I am editing the css with this code
p {
margin: 30px;
}
both the text and the image are affected...
What shall I write?
Here the code:
<div class="entry-content">
<p><img src="http://localhost/wp/wp-content/uploads/2017/09/banner-1.png" alt="" width="2880" height="672"></p>
<p style="text-align: justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent malesuada iaculis nisi id consectetur. Suspendisse quis elementum mi, ac luctus libero. Nunc sapien eros, tempor in mattis in, pulvinar eget enim. Aliquam id molestie risus. Donec ligula orci, pulvinar sed turpis non, porta suscipit eros. Phasellus condimentum tincidunt scelerisque. Integer tempus risus in massa venenatis, a rhoncus urna fringilla.</p>
<p>Nam vulputate rutrum neque. Phasellus ultrices imperdiet imperdiet. Aenean viverra ipsum ligula, in mattis risus ultrices in. Nam vel nunc congue, fringilla nisl in, hendrerit magna. Donec et luctus nisi, non dapibus dolor. Sed euismod tempor odio, ut pharetra mi vehicula.</p>
</div>
You can apply a negative margin to the image to counteract the p margin:
p {
margin: 30px;
}
p.entry-content > img {
margin-left: -30px;
margin-right: -30px;
display: block;
}
I would like to... well look at the SO answer box. That is behavior what I'm looking for - scrollbar appears on text overflow but user can resize it manually.
My question is, is it possible to do such thing natively with CSS?
With my current setup, initially div is small (less then max-height) and I can resize it but only between current text height and max-height. When more text is inserted and scrollbar appear then I can't change it's size at all.
CSS
element.style {
resize: vertical;
max-height: 200px;
overflow: auto;
padding: 10px;
}
To be more precise I want following to happen:
If height of text is smaller then defined max-height then element sets it's size to minimal value needed for text to be completely visible (without scrollbar). - works
If height of text exceeds defined max-height then element will take max-height and scrollbar will appear. - works
If user don't wont to see scrollbar or simply want to see more text at once, he can resize the element to any desired height and max-height will take that new height as it's value. - don't work, user can't resize over max-height.
It would probably be faster to write JS than writing this question but I would like this have such behavior for static html pages.
Is this the styling you are looking for?
For example:
#element {
resize: vertical;
height: auto;
min-height:200px;
resize: vertical;
overflow: auto;
padding: 10px;
width: 95%;
border:1px solid;
}
<textarea id="element">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt, turpis eu aliquam aliquet, justo mi lobortis nibh, dictum sodales nunc quam non ipsum. Ut condimentum dui vel consectetur faucibus. Duis eu purus et massa ultricies blandit vel non felis. Morbi ut metus interdum, blandit mauris ac, vestibulum lorem. Etiam aliquam tincidunt magna, et ullamcorper enim pulvinar et. Aenean et auctor turpis, sed posuere eros. Integer magna lacus, accumsan sit amet hendrerit a, sagittis sed ipsum. Fusce leo neque, sollicitudin vel lectus eget, maximus cursus felis. Pellentesque rutrum volutpat enim, quis semper diam semper ac. Mauris ultrices molestie maximus. Vivamus feugiat posuere ultrices. Quisque blandit, lacus sed tempor ullamcorper, nunc ligula iaculis felis, ut eleifend mauris lacus a tortor. Fusce at cursus orci, at posuere nisi. In vel suscipit eros, eget cursus lacus.
Aenean ut neque sit amet orci gravida volutpat. Etiam vehicula nec augue ut vulputate. Integer fermentum est id leo mollis, quis accumsan quam commodo. Vivamus varius nibh turpis, ac tincidunt dolor consectetur non. Aliquam aliquam scelerisque orci sit amet posuere. Vivamus blandit quis ante vitae consectetur. Aliquam semper eros eu odio porttitor sollicitudin. Donec id mollis arcu. Etiam tortor est, dignissim sagittis lorem non, auctor commodo velit. Nulla facilisi. Morbi ultrices eleifend urna sit amet suscipit. Maecenas augue ante, lobortis at justo sit amet, malesuada faucibus justo. Nulla sit amet lorem in felis convallis feugiat ac fringilla urna. Vivamus finibus aliquam auctor. Fusce ante tortor, tempor id elit eget, sodales ultrices quam.
</textarea>
This question already has answers here:
Why can't the <p> tag contain a <div> tag inside it?
(6 answers)
Closed 6 years ago.
I've created a text, and added some left floated boxes to it. But for some reason, they behave differently. The first box breaks the line before it, but the second one doesn't. I don't understand, why. JSFiddle: https://jsfiddle.net/qt9q7dn4/
(thie green colored texts are the words after the red boxes)
CSS:
div {
width: 50px;
height: 50px;
background: red;
float: left;
margin: 5px;
}
.after {
color: lime;
font-weight: bold;
}
HTML:
<p>Lorem
<div></div>
<span class="after">ipsum</span>
dolor sit amet, consectetur adipiscing elit. Duis sed nibh gravida, euismod leo ultrices, auctor nulla. Fusce nunc ante, condimentum in ex sit amet, pharetra vestibulum urna. Morbi vitae bibendum enim, vitae congue eros. Sed dignissim magna id tincidunt posuere.Duis sed nibh gravida, euismod leo ultrices, auctor nulla. Fusce nunc ante, condimentum in ex sit amet, pharetra vestibulum urna. Morbi vitae bibendum enim, vitae congue eros. Sed dignissim magna id tincidunt posuere.In magna ante, luctus sit amet nulla eget, gravida convallis nisi. Curabitur et blandit felis,
<div></div>
<span class="after">vitae
</span> facilisis nibh. Integer eu eros
vitae est tristique tincidunt quis pulvinar mi. Duis sed nibh gravida, euismod leo ultrices, auctor nulla. Fusce nunc ante, condimentum in ex sit amet, pharetra vestibulum urna. Morbi vitae bibendum enim, vitae congue eros. Sed dignissim magna id tincidunt posuere.</p>
Move the divs outside the paragraphs and close the paragraphs.
<div></div>
<p>Lorem <span class="after">ipsum</span> dolor sit amet, consectetur adipiscing elit. Duis sed nibh gravida, euismod leo ultrices, auctor nulla. Fusce nunc ante, condimentum in ex sit amet, pharetra vestibulum urna. Morbi vitae bibendum enim, vitae congue eros. Sed dignissim magna id tincidunt posuere.Duis sed nibh gravida, euismod leo ultrices, auctor nulla. Fusce nunc ante, condimentum in ex sit amet, pharetra vestibulum urna. Morbi vitae bibendum enim, vitae congue eros. Sed dignissim magna id tincidunt posuere.In magna ante, luctus sit amet nulla eget, gravida convallis nisi. Curabitur et blandit felis, </p>
<div></div>
<p><span class="after">vitae</span> facilisis nibh. Integer eu eros vitae est tristique tincidunt quis pulvinar mi. Duis sed nibh gravida, euismod leo ultrices, auctor nulla. Fusce nunc ante, condimentum in ex sit amet, pharetra vestibulum urna. Morbi vitae bibendum enim, vitae congue eros. Sed dignissim magna id tincidunt posuere.</p>
Fiddle
Heyho, i just found a strange visual inconsistence with list elements on my homepage: If the text inside a li element is longer than 1 line, the second line ist not aligned anymore to the first line of the text.
I have replaced the normal list icon, with an selfmade icon by using li:before in my stylesheet and this is causing the error. I can align the first line of the li element just fine, but if the text is longer than the error occur.
So i was wondering if there is a solution to this, without replacing the li:before icon with an image by using list-style-image or background image? Maybe some of you have an idea :)
Just apply list-style-position: outside; to your li elements
li {
list-style-position: outside;
}
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam convallis vel lectus eget elementum. Sed lacinia vulputate egestas. Aenean fringilla, tortor sed tincidunt venenatis, justo enim porttitor quam, quis consequat quam erat a augue. Proin pellentesque
condimentum ante et viverra. Quisque tristique nisl id varius varius. Donec elit magna, auctor vel nunc sed, fermentum euismod ipsum. Aenean ut nisl enim. Curabitur leo est, pharetra at magna ut, pellentesque posuere tortor. Curabitur posuere ut turpis
non sagittis. Vestibulum sit amet libero porttitor, dapibus orci in, tincidunt felis. Pellentesque ac tempor libero, nec lacinia orci. Ut dictum augue faucibus feugiat mollis. Ut turpis justo, placerat ac congue in, co
</li>
<li>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam convallis vel lectus eget elementum. Sed lacinia vulputate egestas. Aenean fringilla, tortor sed tincidunt venenatis, justo enim porttitor quam, quis consequat quam erat a augue. Proin pellentesque
condimentum ante et viverra. Quisque tristique nisl id varius varius. Donec elit magna, auctor vel nunc sed, fermentum euismod ipsum. Aenean ut nisl enim. Curabitur leo est, pharetra at magna ut, pellentesque posuere tortor. Curabitur posuere ut turpis
non sagittis. Vestibulum sit amet libero porttitor, dapibus orci in, tincidunt felis. Pellentesque ac tempor libero, nec lacinia orci. Ut dictum augue faucibus feugiat mollis. Ut turpis justo, placerat ac congue in, co
</li>
</ul>
Please add the following style to the list. Below are the example.
ul li {
list-style-position: outside; }
Demo
Just found a solution in combination with the li:before icon replacement:
ul li {
text-indent: -1em;
}
with this i can align the first line, so the error does not occur anymore. Thanks for your help and ideas :)