I want to place the first line of text on top of an image that is displayed at the top of the page, followed by additional text below it. How can I achieve this using CSS 2 to ensure compatibility with older devices?
<html>
<head>
<title></title>
<style>
p.image {
text-indent: 0;
text-align: center;
}
p.image img {
max-width: 100%;
}
</style>
</head>
<body>
<p class="image"><img src="image.png"/></p>
<h2>Title<br/>
title</h2>
<p>Lorem ipsum.</p>
</body>
</html>
To align the text properly with an image, you can apply a negative "margin-top" to the h2 tag. In cases where the image is smaller and you want both the image and text to be centered, you can also use "text-align: center;" on the h2 tag.
*{
margin: 0;
padding: 0;
}
p.image {
text-indent: 0;
text-align: center;
}
p.image img {
max-width: 100%;
}
h2{
margin-top: -30px;
/* text-align: center; */
}<html>
<body>
<div class="image">
<img src="https://picsum.photos/1920/1080.jpg"/>
<h2 class="heading-1">Title<br/>
title</h2>
</div>
<p>Lorem ipsum.</p>
</body>
</html>.image {
text-indent: 0;
text-align: center;
position: relative;
}
.image img {
max-width: 100%;
}
.heading-1{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0px;<html>
<body>
<div class="image">
<img src="image.png"/>
<h2 class="heading-1">Title<br/>
title</h2>
</div>
<p>Lorem ipsum.</p>
</body>
</html>As I strive to incorporate a Dark Mode feature based on the user's system preferences, I utilize the @media query prefers-color-scheme: dark. While this approach is effective, I also find it necessary to conduct additional checks using JavaScript. de ...
I am currently facing an issue with a list created using Bootstrap 4, where some items contain long text that is causing problems on small screen devices. I have attempted to use white-space:nowrap and the text-nowrap class, but neither solution has fixed ...
I have integrated easyui nested layout into my application. I followed the code snippet provided in the easyui demo. <div class="easyui-layout" style="width:700px;height:350px;"> <div data-options="region:'north'" style="height: ...
I am currently facing a challenge with creating a non-scrollable iframe element using JavaScript. The function I need to call is within an iframe, and while it works on Firefox and Chrome, I also need it to work on Internet Explorer. My solution involves ...
Sharing some code that functions properly in my browser and I want to implement on my WordPress page: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8> <!-- Getting jQuery --> <script src="http://ajax.goog ...
I've successfully created a Custom Post Type and custom taxonomy. However, when I attempt to view any category, the page defaults to index.php instead of taxonomy.php. Even after trying taxonomy-portfolio-category.php, it still redirects to index.php. ...
Consider the following form: <form method="get" action=""> <select name="name"> <option value="a">a</option> <option value="b">b</option> </select> <select name="location"> <opt ...
I am trying to create previous and next buttons in Vue, but I am struggling a bit because I am new to learning Vue. I have some methods like this.activeIndex < this.activeIndex - 1 that I need to implement. Can someone help me with how to do this? cons ...
Is there a way to compile my custom bootstrap SCSS file into a CSS file that only includes the classes I created in my custom file? For example, I want to eliminate the extra CSS classes added to my HTML code. Instead of including unnecessary classes lik ...
Seeking assistance with a rectangular div that can have its diagonal length adjusted using JavaScript. I am looking to add a diagonal line to label the diagonal length when it is increased or decreased using the +/- buttons. I require the line to resize a ...
Hey there, I'm working on a little PHP calculator for myself and I'm curious if it's possible to have the answer update instantly after I input the values. Any ideas? Thanks in advance! <?php if (isset($_POST['valuea'])) ...
Struggling with understanding the simple HTML DOM of PHP? You're not alone. As a newcomer to the programming industry, following instructions can be challenging. I've been searching for how to locate the object tag and embed, but haven't fou ...
I am currently working on a website and I have noticed that it doesn't work as well on mobile devices as it does on desktop. There are performance issues that need to be addressed. I've seen other websites redirecting users to a different page wh ...
I'm experiencing an issue with the navbar theme change functionality. Whenever I click on the dark mode button, the theme changes for a brief moment and then reverts back to light mode. <!doctype html> <html lang="en"> <hea ...
I'm having trouble centering my navigation items and positioning my button at the end. I was able to move the button to the end, but I can't seem to figure out how to center the items and brand. Any assistance would be greatly appreciated! < ...
I am currently working on a list of div items that are being filtered and sorted using JavaScript. Each item animates as it enters the screen, scaling up to its final size. However, when I apply filters using buttons, items that are already displayed do n ...
Trying to create an eye test by rotating the letter "E" when a directional button is clicked. However, facing an issue where the "E" changes position after the initial click instead of staying in place. Here is a GIF showcasing the problem: https://i.stac ...
I am currently utilizing bootstrap 5 for my project. <div class="col-lg-3 col-md-6"> <h5 class="text-light mb-4">Stay in contact</h5> <p><i class="fa fa-map-marker-alt me-3"></i>619 ...
I am currently facing an issue with two text fields in my HTML form. Here is how they are set up: HTML : <input type="text" id="input1" onchange="doSomething();" disabled/> <input type="text" id="input2"/> JavaScript : function doSomething( ...
In my current project, I am working with jQuery Datatables and I need to customize its default behavior. Currently, when I navigate to page 61, the page scroll remains at the bottom of the page. However, if I then click on a lower page number like 60, th ...