I recently enrolled into a web course. Currently learning html5 and css. I have to make 3 webpages; main, about me and hobbies. I've created pretty much they've asked according to the specification they gave me BUT I have one problem; some content does not display where its supposed to be. I've tried position: relative, position: absolute etc and modified the the position of it using bottom: 500px etc but it just doesn't look right. For example, on the code below, that is my 'About me' page. The pictures on the side is not currently aligned properly to the top of the main article. The pictures are besides the main article which is correct but its positioned a bit below. This happens throughout my webpages on tables elements..
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>About Me</title>
<link property="stylesheet" rel ="stylesheet" href="cascadingstylesheet.css"/>
<!--[if lt IE 9]>
<script src="hpp://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
</head>
<body>
<header>
<h1>About Me</h1>
<nav>
<ul>
<li>Main</li>
<li>About me</li>
<li>Hobby</li>
</ul>
</nav>
</header>
<hr>
<main>
<!--
Below I have used the article tag and the section tag. The article tag is nested inside
the section tag. This is because section tags are used to group related elements together
and the 3 articles are related since they contain information about me.
I didn't include one article tag because the articles are distinct from one another. E.g. One of the
article contains the types of mototbikes but another article tells the user information about me. !-->
<section title="border" id="aboutArticle">
<article><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet bibendum ex. Phasellus eget placerat nisi. Curabitur scelerisque condimentum vulputate. Nullam mollis mauris vel porttitor fringilla. Cras risus erat, feugiat non aliquet sit amet, molestie nec magna. Phasellus eleifend a ligula et consectetur. Fusce et malesuada sem. Donec lacinia tortor urna, eu semper metus volutpat non. Phasellus sed sapien commodo ipsum faucibus dictum rhoncus in est. Vestibulum porta metus pulvinar, ornare quam a, tristique nisl. Nullam euismod neque est, at tincidunt nunc tincidunt a. Aenean ullamcorper tincidunt congue.</p></article>
<br>
<article><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet bibendum ex. Phasellus eget placerat nisi. Curabitur scelerisque condimentum vulputate. Nullam mollis mauris vel porttitor fringilla. Cras risus erat, feugiat non aliquet sit amet, molestie nec magna. Phasellus eleifend a ligula et consectetur. Fusce et malesuada sem. Donec lacinia tortor urna, eu semper metus volutpat non. Phasellus sed sapien commodo ipsum faucibus dictum rhoncus in est. Vestibulum porta metus pulvinar, ornare quam a, tristique nisl. Nullam euismod neque est, at tincidunt nunc tincidunt a. Aenean ullamcorper tincidunt congue.</p> </article>
<br>
<article><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet bibendum ex. Phasellus eget placerat nisi. Curabitur scelerisque condimentum vulputate. Nullam mollis mauris vel porttitor fringilla. Cras risus erat, feugiat non aliquet sit amet, molestie nec magna. Phasellus eleifend a ligula et consectetur. Fusce et malesuada sem. Donec lacinia tortor urna, eu semper metus volutpat non. Phasellus sed sapien commodo ipsum faucibus dictum rhoncus in est. Vestibulum porta metus pulvinar, ornare quam a, tristique nisl. Nullam euismod neque est, at tincidunt nunc tincidunt a. Aenean ullamcorper tincidunt congue.</p>
<p>This blog was created on
<time datetime="10-10-2015 20:00">
the 10th of October 2015.</time></p>
<section>
<img id="motorbikePic" width="350" alt="Harley Davidson Logo "src="http://media1.santabanta.com/full5/Bikes/Harley%20Davidson/harley- davidson-82a.jpg"></img>
</section>
</article>
</section>
<!--
I have used the aside tag on my About page. Inside the tag there are images containing my
favourite types of cars. I did not include it in the article tag above because it's not necessarily
related to it since I said I like motobikes and not muscle cars.!-->
<aside title="cars">
<h3>My favourite cars:</h3>
<img src="http://gas2.org/wp-content/uploads/2014/07/challenger-hellcat.png" width="300" alt="Dodge Hellcat">
<br>
<img src="http://cartype.com/pics/6596/full/ford_mustang_shelby_gt500_f1_10.jpg" width="300" alt="Ford Shelby GT500">
<br>
<img src="http://www.forodefotos.com/attachments/chevrolet/14617d1289420971- camaro-2010-camaro-2010.jpg" alt="Chevrolet Camero" width="300">
</aside>
</main>
<!--
Footer tag is used at the bottom of the page since it more appropriate to use it at the bottom since
you are given more options such as contacting the web developer, in this case it is me.
!-->
<footer>
<hr>
<p>To get in touch with me you can click below:</p>
Click to email me!
</footer>
</body>
</html>
This is my CSS. My CSS contains some rules for my other pages so I pasted the relevant ones so that it'll be easier for you guys to read. These are the relevant rules for the code above but there may be some rules missing so I will also post the whole of the css if you guys require it.
CSS for the code above:
footer{
position: absolute;
right: 0;
bottom: -250px;
left: 0;
padding: 10px;
text-decoration:none;
}
#aboutArticle{
width:75%;
}
[title^="cars"]{
float:right;
margin: 0 1.5%;
position:relative;
bottom:505px;
}
[title^="bord"]{
border-style: dotted;
border-radius: 10px 30px;
}
body{
background: -webkit-linear-gradient(left, #4B0082, black , #4B0082); /* For Safari 5.1 to 6.0 */
background: linear-gradient(to right, #4B0082 , black, #4B0082); /*standard syntax*/
text-align: center;
padding-bottom:60px;
font-size:20px;
}
Just add one property and remove another property.
Add float:left; to #aboutArticle and remove bottom:505px; from [title^="cars"]
Related
This question already has answers here:
What is a clearfix?
(10 answers)
Closed 1 year ago.
I wanted to have some text and an image to be displayed in way that the text is at the left and after it follows an image. Like in blogs. So first I made a <div> tag as an container for the text and image. Then I used a <p> tag to enter text and image. I set the float property of the image float:right.
Now i got the the text and image in blog like form just the way I wanted.
But i also wanted to add borders to the whole content. So that it looks like the text and image are in a box.
But the border are not able to cover the image's height and width.
<html>
<head>
<title>Float</title>
</head>
<style>
img {
float: right;
}
</style>
<body>
<div>
<p><img src="https://s27363.pcdn.co/wp-content/uploads/2017/02/Tigers-Nest-Hike.jpg.optimal.jpg" alt="Tiger's Nest"
style="width:200px; height:200px; margin-left: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...
</p>
</div>
</body>
</html>
You need to add display: flex; to the div:
<html>
<head>
<title>Float</title>
</head>
<style>
div {
display: flex;
border: 5px solid blue;
}
img {
float: right;
}
</style>
<body>
<div>
<p><img src="https://s27363.pcdn.co/wp-content/uploads/2017/02/Tigers-Nest-Hike.jpg.optimal.jpg" alt="Tiger's Nest"
style="width:200px; height:200px; margin-left: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...
</p>
</div>
</body>
</html>
I created a website which basically consists of a button and everytime that you click on the button a sentence appears above it.
As Background I´ve set a picture. On Mobile I have the Problem that when a long sentence appears the content gets stretched so much that you have to scroll to reach the bottom of the page and at the bottom of the page appears a blank space underneath the picture. This whitespace doesnt appear in the developer tool though, just on my real phone.
So far I´ve been searching quite some time looking for a solution but i didnt find one. I though about disabling background-repeat: no-repeat; in media query but this would have unnice side effects.
html, body{
width:100%;
height:100%;
margin:0px;
padding:0px;
overflow-x:hidden;
}
body {
background-image: url('../Images/BG.jpg');
background-repeat: no-repeat;
background-size:cover;
color: #FFF;
font-size: 125%;
font-family: Arial, 'Lucida Sans Unicode';
line-height: 1.5;
text-align: center;
}
This is the HTML
<!DOCTYPE html>
<html lang="de">
<head>
<title>Generator</title>
<link rel="stylesheet" type="text/css" href="Css/style.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0>
</head>
<body >
<div id="main">
<header class="header">
<h1> Generator<span style="color:red">.com</span> </h1>
</header>
<div class="mainContent">
<article id="spruchErstellen">
</article>
</div>
<div class="mainButton">
<button class="button" onclick="neuerSpruch()">Go!</button>
</div>
</div>
<div id="space">
</div>
<footer id="mainFooter">
<p>Copyright © 2019; All Rights Reserved</p>
</footer>
<script src="javascript.js"></script>
</body>
</html>
I want the background-picture to allways fill the whole screen and to have no white spaces.
Greetings and thanks for your help.
The problem as i guess is happening because of your content overflowing its container block, so the body shows the white extra space on the bottom because text took more space than it should,one of the solutions that i found to your problem is by setting your vertical overflow to auto using overflow-y:auto
html, body{
width:100%;
height:100%;
margin:0px;
padding:0px;
overflow-y:auto;
}
body {
background-image: url('https://image.freepik.com/vector-gratis/fondo-abstracto-acuarela-efecto-grunge_1340-4291.jpg');
background-repeat: no-repeat;
background-size:cover;
color: #FFF;
font-size: 125%;
font-family: Arial, 'Lucida Sans Unicode';
line-height: 1.5;
text-align: center;
}
<!DOCTYPE html>
<html lang="de">
<head>
<title>Generator</title>
<link rel="stylesheet" type="text/css" href="Css/style.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0>
</head>
<body >
<div id="main">
<header class="header">
<h1> Generator<span style="color:red">.com</span> </h1>
</header>
<div class="mainContent">
<article id="spruchErstellen">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas egestas justo sit amet cursus tempus. Ut nec ligula vestibulum, aliquet tellus ac, pellentesque dolor. Fusce egestas congue nibh vel ultrices. Duis mollis arcu at sollicitudin tempus. Nam sed felis quis ligula dictum fermentum. Sed eget arcu sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec leo tellus, tempus faucibus arcu sit amet, tempor dignissim purus. Etiam rutrum fermentum accumsan. Sed interdum libero in laoreet aliquam. Integer sed dolor enim. Fusce aliquam ullamcorper dictum. Sed vehicula euismod felis, ornare condimentum metus dictum vel. Nam vestibulum ante eget ipsum efficitur pellentesque. Aliquam ac facilisis magna, eget rutrum erat. Pellentesque at quam ut metus pellentesque vulputate in ut eros.
Nam varius fermentum felis vel fringilla. Aliquam et sapien accumsan, viverra leo vel, iaculis nunc. Nullam vehicula cursus orci in malesuada. Quisque lacinia metus non lectus elementum, vel commodo augue blandit. Mauris dictum odio ut purus mattis rhoncus. Nam auctor consequat risus auctor euismod. Morbi aliquam eros nisl, in egestas tortor feugiat a. Morbi viverra nec mauris sed tempus. Cras blandit sagittis eros.
Aenean tempor risus odio, ut pretium massa mollis sed. Duis finibus justo non sem volutpat convallis. Donec rutrum nec lectus vitae iaculis. Aenean vitae tellus tristique, porta turpis nec, volutpat sem. Aliquam molestie scelerisque arcu in auctor. Nam suscipit est at est dictum maximus. Nulla facilisi. Phasellus eget mattis mauris, nec bibendum arcu. Cras ornare egestas eleifend. Integer semper elementum euismod. Sed a ligula risus. Fusce commodo sem sit amet malesuada blandit. Donec at justo et metus viverra aliquam eget sit amet turpis.
Integer ligula tellus, accumsan volutpat risus vitae, suscipit accumsan neque. Quisque sed efficitur urna. Nullam mollis ultricies enim, vitae interdum ipsum consequat consectetur. Phasellus tincidunt nunc ut nisi ullamcorper, in laoreet erat mollis. Vivamus a semper orci, sed vestibulum risus. Aenean ultrices quam tristique vestibulum vulputate. Praesent rutrum tempor libero, vitae sollicitudin tellus iaculis sit amet. Proin vulputate tellus tellus, sit amet dignissim sem venenatis sed. Pellentesque cursus lorem eu mauris malesuada scelerisque. Integer quis pulvinar urna. Aenean vitae porta ex, sit amet hendrerit lorem. Mauris dictum magna vitae imperdiet placerat.
Duis consectetur nec sem et hendrerit. Fusce ut porttitor arcu. Curabitur condimentum volutpat congue. Phasellus mauris dolor, commodo id felis sit amet, ornare imperdiet ante. Integer dignissim elit sit amet magna rutrum, vitae interdum dolor dignissim. Phasellus vulputate ac quam non porta. Nam viverra sapien vel metus consequat, vitae rutrum risus posuere. Fusce nec pellentesque sapien. Curabitur non efficitur nunc, at sodales sapien. Donec vulputate, tellus id rhoncus euismod, mauris lacus imperdiet urna, non ornare risus quam a diam. Maecenas sit amet libero ante. Aliquam non mauris a risus vehicula imperdiet. Donec volutpat euismod vulputate. Morbi nec egestas lectus, a aliquet nisi.
</article>
</div>
<div class="mainButton">
<button class="button" onclick="neuerSpruch()">Go!</button>
</div>
</div>
<div id="space">
</div>
<footer id="mainFooter">
<p>Copyright © 2019; All Rights Reserved</p>
</footer>
<script src="javascript.js"></script>
</body>
</html>
PS: the background image and the text are just for demonstration.
Explanation
I've run into an issue in my website; I have conflicting style sheets. Instead of manually changing each class, I'd like to take a different approach, which I hopefully could apply to other projects in the long run. After doing some research, creating a seperate web page and utilizing an IFrame on the original webpage seems best, however I wouldn't want users to notice any difference. Because of this it would have to be seamless, and have the height automatically adjust to that of the content on the external web page. In theory I could apply CSS to make the iFrame seamless, and set the height to either height:100%; or height:auto; which would ideally make the iFrame height that of the content.
However, both height settings don't affect the content inside the iFrame itself but by the container of the iFrame, meaning height:100%; would take up 100% of webpage it's being displayed on. I've seen answers to similar questions, however they all involve javascript for the solution. I'd like to avoid javascript, as not only am I not educated in javascript but I personally believe that there can be another way without involving another programming language.
TLDR In other words, I would like to create a completely seamless iFrame, displaying the contents of a different webpage. The height should automatically adjust to that of the content inside it. The end result should implement another webpage seamlessly without users noticing it as any different to the rest of the web page.
Code
I found a helpful question which helped me out writing the code, however it doesn't fully work as intended. The iFrame completely replaces all of web page instead of adding onto it (Example below). I didn't paste in my exact code, I trimmed it down to only keep the relevant parts.
CSS
html, body, iframe { height: 100%; }
html { overflow: hidden; }
HTML
<iframe src="https://example.com/" width="100%" scrolling="yes" frameborder="0">
<h2>Lorem Ispum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse porttitor vitae est finibus dapibus. Maecenas convallis ante turpis. Pellentesque eget interdum mi. Sed scelerisque rhoncus eleifend. Quisque tortor massa, molestie non odio et, tristique placerat enim. Fusce id massa eleifend, placerat massa at, auctor purus. Cras posuere augue et dolor convallis, at vulputate elit tincidunt. Morbi ut imperdiet orci. Donec commodo est metus, sit amet laoreet nisl mattis a. Sed magna nunc, molestie sed risus vel, faucibus euismod orci. Mauris bibendum, quam a lacinia euismod, ex mi laoreet odio, a tincidunt nisl neque in sapien</p>
Output
html, body, iframe { height: 100%; }
html { overflow: hidden; }
<iframe src="https://example.com/" width="100%" scrolling="yes" frameborder="0">
<h2>Lorem Ispum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse porttitor vitae est finibus dapibus. Maecenas convallis ante turpis. Pellentesque eget interdum mi. Sed scelerisque rhoncus eleifend. Quisque tortor massa, molestie non odio et, tristique placerat enim. Fusce id massa eleifend, placerat massa at, auctor purus. Cras posuere augue et dolor convallis, at vulputate elit tincidunt. Morbi ut imperdiet orci. Donec commodo est metus, sit amet laoreet nisl mattis a. Sed magna nunc, molestie sed risus vel, faucibus euismod orci. Mauris bibendum, quam a lacinia euismod, ex mi laoreet odio, a tincidunt nisl neque in sapien</p>
Desired Output
To show you the desired output, I downloaded the webpage from the iFrame and set css rules to simulate what I want. This is not an actual solution.
body {
background-color: #f0f0f2;
margin: 0;
padding: 0;
}
#iFrame {
width: 600px;
margin: 5em auto;
padding: 50px;
background-color: #fff;
border-radius: 1em;
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
a:link, a:visited {
color: #38488f;
text-decoration: none;
}
#media (max-width: 700px) {
body {
background-color: #fff;
}
#iFrame {
width: auto;
margin: 0 auto;
border-radius: 0;
padding: 1em;
}
}
#Desired {
background-color: white;
}
<div id="iFrame">
<h1>Example Domain</h1>
<p>This domain is established to be used for illustrative examples in documents. You may use this
domain in examples without prior coordination or asking for permission.</p>
<p>More information...</p>
</div>
<div id="Desired">
<h2>Lorem Ispum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse porttitor vitae est finibus dapibus. Maecenas convallis ante turpis. Pellentesque eget interdum mi. Sed scelerisque rhoncus eleifend. Quisque tortor massa, molestie non odio et, tristique placerat enim. Fusce id massa eleifend, placerat massa at, auctor purus. Cras posuere augue et dolor convallis, at vulputate elit tincidunt. Morbi ut imperdiet orci. Donec commodo est metus, sit amet laoreet nisl mattis a. Sed magna nunc, molestie sed risus vel, faucibus euismod orci. Mauris bibendum, quam a lacinia euismod, ex mi laoreet odio, a tincidunt nisl neque in sapien</p>
</div>
Thank you everyone, I looked forward to hearing what you have to say.
EDIT Reworded post
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/
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>