How can I address the problem of adjusting the title to match the size of the image in question?

I need help creating a design where an image and h2 title appear on top of the image...

Below is a reference screenshot:

I am looking to achieve something similar.

CSS:

h2 {
  position: relative;
  letter-spacing: 1px;
  display: inline-block;
  position: relative;
  background: #222;
  padding: 11px;
  top: 195px;
  opacity: .8;
  font-size: 13px;
  /* left: 349px; */
  text-align: left;
  /* bottom: -52px; */ 
  width: 100%;
}

.post img {
  margin-left: 1px;
  margin-top: -32px;
}

I'm not too experienced with JS or jQuery. Is there a way to only display 2 or 3 words? I believe that could solve the issue. Thank you in advance for any assistance provided.

jqueryhtmlcss

Answer №1

It seems like you can achieve the desired outcome without relying on JavaScript. Take a look at this demonstration fiddle: http://jsfiddle.net/abc123/

Here is an example of the HTML structure:

<div id="container">
    <img src="image_path" alt="" />
    <div class="description">
            Lorem ipsum dolor sit....
    </div>
</div>

You don't need to use JavaScript for this task. Experiment with HTML and CSS to achieve similar results. If JavaScript isn't essential, it's best to avoid using it.

Answer №2

The issue arises when the h2 in your CSS contains:

padding: 11px;
width: 100%;

This leads to a total width of 100% + 11px (padding-left) + 11px (padding-right)

To resolve this, simply eliminate the width: 100% line and it should function properly, as h2 naturally fits 100% by default.

Answer №3

Like many have mentioned, the key to resolving this issue lies within the css code. It appears that the padding is being applied on top of the 100% width;

h2 {
  position: relative;
  width: auto;
  left: 0;
  right: 0;
}

Although I'm not entirely certain about your specific scenario, implementing this code snippet may help rectify it.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to dim and deactivate a button after it has been clicked once?

Hello, I am attempting to disable and grey out a button after it has been clicked once in order to prevent the user from clicking it again until they refresh the page. I hope my question is clear enough and that you can understand me. Below is the HTML cod ...

javascripthtml

What are the steps to make a counter-clockwise dial with jQuery Knob?

Is there a way to use multiple instances of jQuery.countdown? Can I create countdown circles using jQuery Knob? Find examples here and here. Using Multiple instances of jQuery.countdown <div data-countdown="2016/01/01"></div> <div data-co ...

javascriptjqueryhtmlcss

Discovering useful data like metadata and subject matter through the utilization of either a URL or the webpage itself alongside JQUery

Imagine you have a URL and you want to display information related to that URL on your webpage, similar to how Facebook or LinkedIn does. You input a URL and the website data is retrieved for display. I am working on an application using JQuery and HTML ...

javascriptjquery

Reduce the size of your CSS files using Gulp through the .pipe method

Is it feasible to incorporate a plugin like clean-css to minify CSS every time a page is refreshed or saved? How can I chain it through pipes to ensure that the minified file ends up in the dist folder? Thank you for any assistance! Presented below is the ...

cssgulpbundling-and-minificationgulp-clean-css

What is the best way to organize my defaultdict for optimal structure?

I have a defaultdict within my views.py file that looks like this: defaultdict(<class 'list'>, {'List of tubes': ['2324', '98', '7654', 'List of auto:': [147, 10048, 1009, 10050, 10, 1647, 1 ...

pythonhtmldjangolistbutton

Add a background image to the parent element while preserving the existing background color

Can you help me figure out how to apply a background image to the menu while still keeping the background color? HTML: <div class="top"> <div class="menu"> Nop. </div> Nam hendrerit erat eget tellus mollis facilisis. ...

htmlcss

How can I adjust the regular font size within a paragraph or link using bootstrap?

Looking at the fs-* classes can be very helpful, you can find them here: https://i.sstatic.net/l1Y22.png The issue I'm facing is that these classes only work for h1 to h6 headings, and not for smaller text. For example, I am unable to adjust the fo ...

htmlcsstwitter-bootstrapbootstrap-5

Transferring a PHP session variable to JavaScript in a separate file

I successfully imported data from a CSV file into PHP and organized it into a nested array. To ensure the data is easily accessible across different files, I stored the array as a session variable. Now, the challenge lies in accessing this session variable ...

javascriptphphtmlsession

Is an external source compatible with Jquery autocomplete/combobox?

Searching for a selectbox autocompleter that mimics the functionality of a combobox, where if a value does not exist it returns false/null. http://jqueryui.com/demos/autocomplete/#combobox Is there a method to integrate an external datasource with the co ...

jqueryajaxautocompletecombobox

Placement of navigation bar on top of picture

Creating a gaming website and encountering challenges with text alignment. The goal is to have the navbar text positioned on top of a customized navbar background. Current appearance navbar example <!DOCTYPE html> <html> <head> ...

htmlcss

Exploring the varying treatment of the noscript tag across different web browsers

I've been searching everywhere, but I can't find any information on this topic. What I really want to understand is what browsers do with the content inside a noscript tag when JavaScript is enabled. Let's consider an example: According t ...

javascripthtmlcsscross-browsernoscript

Using Javascript and jQuery to create an infinite animated background change with fade effect

I am struggling to figure out how to automatically change the background of a div every 3 seconds, looping through a series of images. I posted about this issue before but didn't receive much help. function animate() { change1(); change2() ...

javascriptjquery

Leveraging jQuery to send data to MySQL with the click of a button

I am attempting to utilize jQuery in order to post a variable to a MySQL/PHP query. The button with the class="button" has the following code: $(".button").click(function(e){ e.preventDefault(); $.post("some.php", { var_today : <?php echo $new_var; ...

phpjquerymysql

Managing information from forms that are generated dynamically

My idea involves creating multiple forms dynamically and using jQuery to handle their submission. To generate the forms, I would use PHP code similar to the following: while(some condition) { echo "<form method=post action=specific_url.php name=so ...

phpjquerydynamicform

HR | extends all the way down the table, creating a vertical boundary

I am currently working on developing an Email Signature Generator. My goal is to extend the blue line (visible in the program) all the way down without affecting the layout of other elements. I suspect that because everything is contained within a table, a ...

htmlcss

Define CSS styles based on the content of a specific cell within a table

Is there a way to target a <td> in CSS based on its content value? <table> <tr> <td>Name</td> <td>John</td> <tr> </table> For instance, how can I apply the color:bl ...

javascriptjqueryhtmlcsshtml-table

Choose the list item below

I'm working on a website that includes a select list with images. Here's what I have so far: When I choose an image from the list, it should display below. <?php // Establish database connection $con=mysqli_connect("******","***","*** ...

phpjavascripthtmlweb

Achieving Vertical Alignment of Text with CSS

Can you figure out what's wrong with the placement of content outside the <footer> tag in this HTML? Also, why is the text not perfectly vertically middle-aligned? <html> <head> <style> body { ...

csshtmllayoutcss-float

The index "visible" in $_POST has been flagged as not defined

I am currently developing a PHP project and have a form that needs to be submitted. The form code is as follows: <h2>Create Subject</h2> <form action="create_subject.php" method="post"> <p>Subject name: <inp ...

phphtmlformsvalidationundefined-index

Utilizing JavaScript for the removal or hiding of span elements with specific class attributes

I am currently working on a software project that involves compiling HTML fragments and then exporting them to Microsoft Word. My goal is to create a script that will cycle through these compiled fragments and remove specific tags that have a particular CS ...

javascriptjquery