Utilizing dual <legend> elements within a fieldset

I am attempting to include two legends within a fieldset. The first legend consists of an image in the center of the fieldset, while the other legend should be another image aligned to the very right side of the fieldset. The code snippet below demonstrates my attempt, where the first legend is functioning as intended. However, I am unsure of how to implement a second legend, as depicted in the image below.

<fieldset style="width: 500px;">
    <legend style="display: block; margin: 0 auto;">
      <img style="height: 200px;" src="https://i.imgur.com/3RyXECr.jpg">
    </legend>

    <legend style="display: block;">
      <img style="height: 20px;" src="https://i.imgur.com/dOhyP62.png">
    </legend>

</fieldset>

https://i.sstatic.net/zEdLC.png

htmlcsscss-position

Answer №1

It's not possible to have more than one, so you should just position the image absolutely in relation to the parent element without using a legend tag

fieldset {
  position: relative;
  border:1px solid grey;
}

.close {
  position: absolute;
  right:0;
  top:100px; /* half height of legend image */
  transform:translate(50%, -50%);
  background:white;
  box-shadow: 0 0 0 4px white;
}
<fieldset style="width: 400px;">
    <legend style="display: block; margin: 0 auto;">
      <img style="height: 200px;" src="https://i.imgur.com/3RyXECr.jpg">
    </legend>
      <img style="height: 20px;" src="https://i.imgur.com/dOhyP62.png" class="close">

</fieldset>

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

Transforming Input Background Color with jQuery based on Matching PHP Array Entry

I am looking for a solution to implement form validation in PHP. The form has 3 fields: user, id, and email. When a user enters their name or id in the respective input fields, I want to check if the entered value matches any of the values in the PHP arra ...

phpjquerycssinput

The getElementByID function functions properly in Firefox but does encounter issues in Internet Explorer and Chrome

function switchVideo() { let selectedIndex = document.myvid1.vid_select.selectedIndex; let videoSelect = document.myvid1.vid_select.options[selectedIndex].value; document.getElementById("video").src = videoSelect; } <form name="myvid1"> <s ...

javascripthtml

html code abruptly halted due to an unexpected termination of the file

I'm experiencing an issue with my senaraiperalatanstaf.php file. I inserted some PHP code in between, but now I'm getting a parse error indicating an unexpected end of the file. I've tried troubleshooting it without success. Any help would b ...

phphtmltags

JQuery / Javascript - Mouse Position Erroneously Detected

I'm currently working on developing a drawing application where users can freely draw by moving their mouse over a canvas. My goal is to create a pixel at the precise location where the user drags their mouse. However, I've encountered an issue ...

javascriptjqueryhtmlcanvas

Issue encountered with Tailwind Color Classes not functioning correctly when triggered by a button click within NextJS and React Vite framework

Recently, I've developed a component showcasing the "Text Gradient" effect in Tailwind + React. The component comprises of 4 select dropdowns and a "randomize" button. Upon clicking the button or selecting an option from the dropdowns, the changes are ...

cssreactjsnext.jsstatetailwind-css

Can you explain the variance between a DIV using display: inline-block versus a SPAN element?

Can you explain the distinction between a DIV using display: inline-block and a SPAN? Furthermore, what sets apart a SPAN with display: block from a DIV? ...

htmlcss

The Carousel feature functions properly with 3 or more slides, but malfunctions when there are only 2 slides present

After implementing a minimal carousel, I discovered that it functions perfectly with 3 or more slides. However, as soon as I remove some slides, issues start to arise. Some of the problems I encountered include: The sliding animation is removed on ' ...

javascriptjqueryhtmlcss

Tips for successfully passing a Prop using the Emotion CSS function

Passing props through styled() in Emotion is something I'm familiar with. For example: const Container = styled("div")<{ position: string }>` display: flex; flex-direction: ${({ position }) => (position === "top" ? "column" : "row ...

cssstyled-componentsemotion

Align a button to the left or right based on its position within the layout

On the left side, there is dynamic text and on the right side, a button is displayed as shown below: <div class="dynamic-text"> {{ dynamicText }} </div> <div class="some-button"> < ...

htmlcssvue.js

WebDriverException: Error: {"errorMessage":"The object is undefined"

I encountered an error while running the code on this HTML page, specifically at /html/body/div[3]/div[1]/div[1]/div[1]/div/div[10]/a/div[1]/div[2]: WebDriverException: Message: {"errorMessage":"null is not an object (near '...ull).singleNodeVa ...

pythonhtmlseleniumphantomjs

Concealing overflow in a sticky container when a fixed child element is present

I am currently working on a website where I have implemented slide-up section panels using position: sticky while scrolling. However, I am encountering issues with fixed elements within the sticky panels not properly hiding outside of the respective sectio ...

javascripthtmlcssreactjs

Using jQuery's .load() method to load a PHP file can result in an exponential increase in XHR finished loading time with each subsequent load

There seems to be an issue with my code using .load() to load a PHP page into a div whenever the navbar or link is clicked. After multiple clicks, I noticed that the "XHR finished loading" increases exponentially and it appears that the same PHP file is be ...

javascriptphpjqueryhtmlperformance

displaying a separate HTML file with its own distinct CSS styling

Recently, I was tasked with investigating an existing website. Currently, the website utilizes a single root html file that contains multiple iframes linking to external html pages. However, the team behind the website has noticed that this setup is causin ...

phphtml

Interactive ajax and php dropdown menu

Hey there, I'm running into a small snag with my dynamic select feature, as mentioned in the title. I am aiming to achieve the following outcome: When a user selects an instrument from the first dropdown menu, the second dropdown menu labeled "Besetzu ...

javascriptphpjqueryhtmlajax

Set up dynamic restrictions for the length of an HTML paragraph with PHP

I am attempting to dynamically set the limit of content retrieved from a database in PHP. Specifically, I need to trim the input from the database before assigning it to an HTML paragraph. I attempted to use the substr function but was unsuccessful. Can y ...

phphtml

Looping through images using JQuery

I'm struggling with an image animation and can't quite figure out how to make it work. <div id="img_loop"> <img src="img/img1.jpg" alt="image1" /> <img src="img/img2.jpg" alt="image2" class="hidden" /> <img src="im ...

javascriptjqueryhtmlcss

Expand the <div> to match the complete height of its containing <div> element

There are multiple div blocks within a parent block: one for the menu on the left, and one for the text on the right. How can you make the right inner block stretch to the full height of the parent block like the left one? The parent block has a minimum he ...

htmlcss

Is there a way to create a timed fadeIn and fadeOut effect for a div using HTML and CSS?

I have a single div that initially displays text, and I want it to fade out after a specific time so that another div will then fade in. However, my attempt at coding this transition is not producing the desired result: $(function() { $(".preloa ...

javascripthtmljquerycss

Implementing jQuery selector for CSS and properly handling special characters in the code

I've been attempting to use jQuery to change the background color of a radio button. I provided the CSS code below, but even after escaping special characters in jQuery as shown below, the solution still isn't working. #opt5 > [type="radio"]: ...

javascriptjquerycssjquery-selectorscss-selectors

Can text automatically adjust its size based on the browser's dimensions using CSS?

Can text automatically resize as the browser size decreases for liquid-based design using percentages? While images and divs can rescale, text scaling in percentages seems impossible! When set in percentages, it only changes the unified em setting for tha ...

css