CSS code:
h4 {
display: inline;
font-weight: bolder;
font-size: 100%;
margin: 0;
}
HTML test code:
<html>
<head><link rel="stylesheet" href="style.css" type="text/css" /></title>test</title></head>
<body>
<p>Let's try to make a header be inline with the next paragraph.</p>
<h4>This is a header.</h4>
<p>A header is an HTML element. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam aliquam consequat enim eget porta. Proin condimentum dui sed tortor semper, non scelerisque risus volutpat. Vivamus vel risus in purus imperdiet finibus. Phasellus placerat nunc a orci ullamcorper, non ultricies neque auctor. Integer magna lectus, vulputate laoreet auctor eu, gravida et lorem.</p>
<p>And now we have some more text.</p>
</body>
</html>
Expected output:
Let's try to make a header be inline with the next paragraph.
This is a header. A header is an HTML element. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam aliquam consequat enim eget porta. Proin condimentum dui sed tortor semper, non scelerisque risus volutpat. Vivamus vel risus in purus imperdiet finibus. Phasellus placerat nunc a orci ullamcorper, non ultricies neque auctor. Integer magna lectus, vulputate laoreet auctor eu, gravida et lorem.
And now we have some more text.
What I'm actually getting:
Let's try to make a header be inline with the next paragraph.
This is a header.
A header is an HTML element. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam aliquam consequat enim eget porta. Proin condimentum dui sed tortor semper, non scelerisque risus volutpat. Vivamus vel risus in purus imperdiet finibus. Phasellus placerat nunc a orci ullamcorper, non ultricies neque auctor. Integer magna lectus, vulputate laoreet auctor eu, gravida et lorem.
And now we have some more text.
I'm almost positive the issue is the fact that I'm starting a new paragraph right after the header. The problem is, the HTML code I'm applying styles to is not my own - it's generated by another tool which I don't have source code for, so I can't just, say, eliminate the paragraph, or add styling to the paragraph directly. Can the above be done with exactly the given HTML code and only using CSS?
Edit: The proposed solution of using h4; h4 + p does work - provided there are at least two paragraphs following the <h4> tag. The following HTML code will cause undesired results:
<html>
<head><link rel="stylesheet" href="style.css" type="text/css" /?</title>test</title></head>
<body>
<p>Let's try to make a header be inline with the next paragraph.</p>
<h4>This is a header.</h4>
<p>A header is an HTML element. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam aliquam consequat enim eget porta. Proin condimentum dui sed tortor semper, non scelerisque risus volutpat. Vivamus vel risus in purus imperdiet finibus. Phasellus placerat nunc a orci ullamcorper, non ultricies neque auctor. Integer magna lectus, vulputate laoreet auctor eu, gravida et lorem.</p>
<h4>This is another header...</h4>
<p>And now we have some more text.</p>
</body>
</html>
Results:
Let's try to make a header be inline with the next paragraph.
This is a header. A header is an HTML element. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam aliquam consequat enim eget porta. Proin condimentum dui sed tortor semper, non scelerisque risus volutpat. Vivamus vel risus in purus imperdiet finibus. Phasellus placerat nunc a orci ullamcorper, non ultricies neque auctor. Integer magna lectus, vulputate laoreet auctor eu, gravida et lorem. This is another header... And now we have some more text.
Expected result:
Let's try to make a header be inline with the next paragraph.
This is a header. A header is an HTML element. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam aliquam consequat enim eget porta. Proin condimentum dui sed tortor semper, non scelerisque risus volutpat. Vivamus vel risus in purus imperdiet finibus. Phasellus placerat nunc a orci ullamcorper, non ultricies neque auctor. Integer magna lectus, vulputate laoreet auctor eu, gravida et lorem.
This is another header... And now we have some more text.
I'd modify #Nit's code by adding a pseudo-element before your h4:
h4,
h4 + p {
display: inline;
}
h4:before {
content: "";
display: block;
clear: left;
margin-top: 1em;
}
Sounds like you simply want to make the header and the paragraph following right next to it inline?
h4,
h4 + p {
display: inline;
}
<p>Let's try to make a header be inline with the next paragraph.</p>
<h4>This is a header.</h4>
<p>A header is an HTML element. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam aliquam consequat enim eget porta. Proin condimentum dui sed tortor semper, non scelerisque risus volutpat. Vivamus vel risus in purus imperdiet finibus. Phasellus
placerat nunc a orci ullamcorper, non ultricies neque auctor. Integer magna lectus, vulputate laoreet auctor eu, gravida et lorem.</p>
<p>And now we have some more text.</p>
Related
I want to emulate this design of having "titles" on paragraphs in HTML/CSS.
Semantically, these "titles" should be headings. Is there a way to achieve this for paragraphs and list-items in CSS? My best idea is to declare the paragraph/list-item after such a heading to display in-line, but that creates weird spacing issues: because I'm declaring a paragraph after a heading to display inline and the not clear the heading, if the previous paragraph is short it will move to merge with that previous paragraph. And for list-items, the inter-item spacing (margin) is no longer respected.
h4 {
clear: both;
float: left;
display: inline;
font-weight: 600;
margin: 0;
}
h4::after {
content: "\2006\00B7\2006";
}
h4+p,
h4+li {
display: inline;
margin: 1em 0 1em 0;
}
p,
ul,
li {
clear: both;
margin: 2em 0 2em 0;
}
<h4> Paragraph Heading </h4>
<p> Lorem ipsum dolor sit amet </p>
<h4> The Next Paragraph Heading </h4>
<p> Because the last paragraph was too short, this gets moved up; bummer. </p>
<p> Maecenas hendrerit nibh auctor odio interdum, eget dictum felis pulvinar. Nulla mollis sem convallis lorem aliquet scelerisque. Vestibulum auctor ac metus nec varius. Cras sed tortor pharetra, ullamcorper tortor non, euismod turpis. Sed quis scelerisque
ante, gravida finibus massa. Integer elementum eget sapien ac iaculis. Cras tincidunt auctor lacus, rhoncus mattis metus tincidunt sed. Phasellus molestie nunc sit amet sapien viverra iaculis. Aenean aliquam felis sed blandit mattis. Donec imperdiet
turpis nisi, ut tincidunt dolor congue a. </p>
<ul>
<h4> List-Item Heading </h4>
<li> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam cursus rutrum risus quis sollicitudin. Aenean pharetra, orci ac euismod bibendum, nibh dolor vehicula lorem, vitae rhoncus lectus tellus id ante. Nullam quis magna finibus, pharetra turpis
eu, lobortis risus. Cras semper placerat nisl, id consequat metus sodales eget. Etiam tincidunt justo consectetur tristique egestas. Ut sed venenatis elit. Sed ligula lacus, molestie maximus nisl eget, auctor interdum velit. Etiam condimentum faucibus
viverra. Curabitur interdum sem arcu, quis iaculis magna sodales at. Proin tristique viverra tortor dictum convallis. </li>
<h4> List-Item Heading </h4>
<li> The list-item spacing is wonky here.</li>
</ul>
You can get most of the way there just by making h4 and p have display: inline;, removing the margin on h4, and adding a block-level non-breaking space after the paragraph.
li elements take care of themselves once you move the h4 element within them.
p::after {
content: "\00A0";
display: block;
}
h4, p {
display: inline;
margin: 0;
}
h4 {
font-weight: 600;
margin: 0;
}
h4::after {
content: "\2006\00B7\2006";
}
<h4> Paragraph Heading </h4>
<p> Lorem ipsum dolor sit amet </p>
<h4> The Next Paragraph Heading </h4>
<p> Because the last paragraph was too short, this gets moved up; bummer. </p>
<p> Maecenas hendrerit nibh auctor odio interdum, eget dictum felis pulvinar. Nulla mollis sem convallis lorem aliquet scelerisque. Vestibulum auctor ac metus nec varius. Cras sed tortor pharetra, ullamcorper tortor non, euismod turpis. Sed quis scelerisque
ante, gravida finibus massa. Integer elementum eget sapien ac iaculis. Cras tincidunt auctor lacus, rhoncus mattis metus tincidunt sed. Phasellus molestie nunc sit amet sapien viverra iaculis. Aenean aliquam felis sed blandit mattis. Donec imperdiet
turpis nisi, ut tincidunt dolor congue a. </p>
<ul>
<li> <h4> List-Item Heading </h4> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam cursus rutrum risus quis sollicitudin. Aenean pharetra, orci ac euismod bibendum, nibh dolor vehicula lorem, vitae rhoncus lectus tellus id ante. Nullam quis magna finibus, pharetra turpis
eu, lobortis risus. Cras semper placerat nisl, id consequat metus sodales eget. Etiam tincidunt justo consectetur tristique egestas. Ut sed venenatis elit. Sed ligula lacus, molestie maximus nisl eget, auctor interdum velit. Etiam condimentum faucibus
viverra. Curabitur interdum sem arcu, quis iaculis magna sodales at. Proin tristique viverra tortor dictum convallis. </li>
<li><h4> List-Item Heading </h4> The list-item spacing is wonky here.</li>
</ul>
When you resize the window the text get resized but what i want to happen it up to a certain point i want the text to get push below the image instead of it being squished.
This is what i have right now
<!DOCTYPE html>
<html>
<head>
<style>
img {
float: left;
}
</style>
</head>
<body>
<p>In this example, the image will float to the left in the paragraph, and the text in the paragraph will wrap around the image.</p>
<p><img src="pineapple.jpg" alt="Pineapple" style="width:170px;height:170px;margin-right:15px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
img {
float: left;
}
#media screen and (max-width:600px){
p {
display:flex;
flex-direction:column;
align-items:center;
}
p img {
margin:10px;
}
}
</style>
</head>
<body>
<p>In this example, the image will float to the left in the paragraph, and the text in the paragraph will wrap around the image.</p>
<p><img src="https://picsum.photos/300/300" alt="Pineapple" style="width:170px;height:170px;margin-right:15px;">
<span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.</span></p>
</body>
</html>
I think it will be best to show what I’d like to achieve on an example:
header {
background-color:blue;
}
<body>
<header>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</header>
<main>
Sed ullamcorper ligula sapien, eget congue risus iaculis eget. Etiam nunc diam, hendrerit nec nisi non, tristique feugiat risus. Donec maximus enim lacus, eget iaculis lectus aliquam non. Aenean id egestas justo, vitae placerat nulla. Suspendisse a tempor ipsum. Donec condimentum varius diam. Praesent mollis tincidunt nibh, sit amet euismod lacus mollis et. Nulla in condimentum elit. Quisque eu hendrerit nunc, id auctor risus.
</main>
</body>
As you can see, this blue header is not positioned right next to the screen edge, since the 8px margin that body has applies. I would like header to disregard this margin and main to still have it.
I can see three ways to achieve his:
Giving header position:absolute;
But this leaves no space for the subsequent text:
header {
background-color:blue;
position:absolute;
top:0px;
left:0px;
}
<body>
<header>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</header>
<main>
Sed ullamcorper ligula sapien, eget congue risus iaculis eget. Etiam nunc diam, hendrerit nec nisi non, tristique feugiat risus. Donec maximus enim lacus, eget iaculis lectus aliquam non. Aenean id egestas justo, vitae placerat nulla. Suspendisse a tempor ipsum. Donec condimentum varius diam. Praesent mollis tincidunt nibh, sit amet euismod lacus mollis et. Nulla in condimentum elit. Quisque eu hendrerit nunc, id auctor risus.
</main>
</body>
I’d have to manually move main down so that it leaves space for header. But how the heck can I know how much space does header need, especially if the screen is resized and the beginning paragraph wraps?
Give header position:relative; and negate the margin.
That’s a close one:
header {
background-color:blue;
position:relative;
top:-8px;
left:-8px;
margin-right:-16px;
}
<body>
<header>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</header>
<main>
Sed ullamcorper ligula sapien, eget congue risus iaculis eget. Etiam nunc diam, hendrerit nec nisi non, tristique feugiat risus. Donec maximus enim lacus, eget iaculis lectus aliquam non. Aenean id egestas justo, vitae placerat nulla. Suspendisse a tempor ipsum. Donec condimentum varius diam. Praesent mollis tincidunt nibh, sit amet euismod lacus mollis et. Nulla in condimentum elit. Quisque eu hendrerit nunc, id auctor risus.
</main>
</body>
But is it in a good style do do something like that? Also, can I be sure that all browsers give body exactly an 8px margin?
Remove the margin of body and manually give it to all subsequent elements.
Probably the closest one:
body {
margin: 0px;
}
header {
background-color:blue;
}
main {
margin: 8px;
}
<body>
<header>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</header>
<main>
Sed ullamcorper ligula sapien, eget congue risus iaculis eget. Etiam nunc diam, hendrerit nec nisi non, tristique feugiat risus. Donec maximus enim lacus, eget iaculis lectus aliquam non. Aenean id egestas justo, vitae placerat nulla. Suspendisse a tempor ipsum. Donec condimentum varius diam. Praesent mollis tincidunt nibh, sit amet euismod lacus mollis et. Nulla in condimentum elit. Quisque eu hendrerit nunc, id auctor risus.
</main>
</body>
Any better ways to do this than this?
you can add margin: -8px -8px 0 -8px; to your header element
The last solution is the best according to me because that is the natural way to do that and if you want to give padding to the other contents then you can use a div for that, in most websites you will see all professionals follow that.
If you already know that the margin that body uses is 8px you could try following:
header {
background-color:blue;
margin-left: -8px;
}
Try it here https://jsfiddle.net/h1uhfzv2/3/
I have an paragraph and an image (See Example in CodePen):
<div>
<p>
Lorem ipsum dolor sit amet ...
<img src="http://placehold.it/200x200"/>
</p>
</div>
And the following CSS:
div {
margin: 0 auto;
width: 60%;
}
img {
float: right;
padding: 20px;
}
How can I wrap he text around the image?
I tried float:right but this does not seem to work.
Place the image before the text:
<div><img src="http://placehold.it/200x200"/>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nec eros enim. Donec et scelerisque nisl, nec luctus massa. Nullam ut laoreet sem. Sed ligula elit, auctor et sagittis facilisis, auctor in nulla. Nulla suscipit dignissim feugiat. Vivamus lacinia tellus elit, non bibendum purus tempus eget. Sed porttitor accumsan lacus, at aliquam nisi rutrum nec. Donec a dignissim tortor. Curabitur blandit non turpis tristique tincidunt. Sed dictum sem id sem lacinia mattis. Quisque pellentesque, sem sit amet auctor congue, enim lorem egestas nisi, sit amet accumsan turpis turpis et metus. Mauris pulvinar luctus felis, in feugiat dui vulputate ac. Sed faucibus libero nulla, placerat accumsan elit rutrum et. Maecenas id enim quis turpis pretium sollicitudin.
</p>
</div>
codepen example
You're using float correctly with the image, but since in your original example the image is coming after the text, you don't notice the effect. By moving the image before the text, it gets floated to the right, and the text that comes after it is then allowed to float up alongside it.
put the image at the top
<img src="http://placehold.it/200x200"/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nec eros enim...
I have a large text. I've made 3 columns with the following CSS:
.columns {
-webkit-column-count: 3;
text-align: justify;
}
It has to work in Safari. This works just fine. But now I would like to place an image to the top of the second column.
How can I have this result?
Edit: This was my start of doing the thing, but I would like to say that the important thing is to have the result in any way, so I can drop this css in case it can be solved without this.
Edit 2: I've solved it with the jquery colonizer plugin. I had to add 3-5 lines of code to the plugin. I need this for the iPad, where I have arrange the text and image like I mentioned before. I think this is the simplest method to have this job done.
In case you need the solution, feel free to e-mail me.
#flynfish, please post it as an answer, so I can accept it.
I'm not sure that this is possible. The browser determines where to break the content and there's no way via CSS to insert something at those points. The closest thing I've been able to come up with uses the column-break-before: property (-webkit-column-break-before, -moz-column-break-before, column-break-before).
For example:
CSS:
div#multicolumnElement {
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
}
.special {
-webkit-column-break-before:always;
-moz-column-break-before:always;
column-break-before:always;
}
HTML:
<div id="multicolumnElement">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mattis, lectus
nec tempor auctor, urna urna venenatis nisi, ac pellentesque est felis egestas lorem!
Duis lectus dui, commodo in varius sed, bibendum at eros. Donec ultricies, est quis
pretium porttitor, neque arcu auctor dui, sit amet adipiscing erat est id massa.
Morbi at elementum <img class="special" src="http://dummyimage.com/200x150/000/fff" />lectus. Donec fermentum massa sit amet nisi tempus sed vestibulum
tortor pellentesque. Aliquam dictum, sapien a luctus ultricies, ipsum erat dignissim
tellus, in ultricies mi lorem tempor velit. Vivamus ornare nulla sed arcu elementum
pharetra. </p>
<p>Phasellus cursus felis sed felis porta tempor. Vestibulum at eleifend ligula.
Vestibulum hendrerit ligula at elit lacinia at ultricies metus fringilla! Vestibulum
ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi
ultrices tortor vel ipsum imperdiet imperdiet. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
eu leo quis lectus aliquet elementum. Aenean porta interdum nibh id posuere? Phasellus
nisl lorem, semper bibendum semper at, malesuada non odio. </p>
<p>In ullamcorper eros quis nisi pharetra tincidunt. Vestibulum ac elit nunc, sed
laoreet leo! Duis et nulla sit amet lorem gravida lacinia. Cras massa ipsum, semper
in mattis ut, fringilla in nisi. Nulla mauris urna, feugiat sed convallis id, facilisis
et sem. Donec egestas ultricies commodo. Aliquam eget nulla enim, et dictum nisi.
In faucibus, leo vitae congue convallis, elit eros venenatis leo, nec lobortis sapien
orci at nunc. </p>
</div>
This produces four columns of text with an image at the top of the second column, however depending on the amount of text and the space available, it's possible that this may not always turn out as you want.
I'd have linked to a jsFiddle example but it seems to be down ATM.