Just starting out with CSS and coding. Setting up radio buttons and divs for a simple beginner's gallery

One challenge that perplexes me is how to reposition the concealed divs below the radio buttons with labels.

Check out my HTML here

View my CSS code here 

    /*color palette: abls
    [lightest to darkest]
    #eeeeee
    #eaffc4
    #b6c399
    #6a856a
    #333333
    */
    
    <!-- CSS code goes here -->


    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">
        <link href="./NewbTests.css" rel="stylesheet" type="text/css">
        <link rel="shortcut icon" type="image/png" href="./Assets/SumisoulLogo.png">
        <title>Viewport</title>
      </head>


            <!-- HTML code goes here -->

I would have linked a few images to illustrate what is happening but I'm limited in links.

In essence; Before: (button 1)(button 2)(button 3)

Upon clicking any button: (button 1)[_______________________] (button 2)(button 3)

The div shows up on the side of the corresponding button. I don't really know what to do to have it align in a column without separating all of the divs and breaking the inline style of the buttons

htmlcssflexboxradio-buttonposition

Answer №1

Let's hope this solution is effective

  body, html {
  padding: 0;
  margin: 0;
}

body {
  background: linear-gradient(top left, red, orange);
}

span {
  display: none;
  position: absolute;
  max-width: 450px;
  left: 17px;
  top: 48px;
  padding: 3px;
  min-height: 30px;
  border-top: 1px solid #d3d3d3;
}

label {
  cursor: pointer;
  display: inline-block;
  padding: 10px;
  margin: 10px 0 0 0;
  background: #e0e0e0;
  color: black;
}
label:first-child {
  margin-left: 10px;
}

input {
  display: none;
}
input:checked + span {
  display: initial;
}

h3 {
  border-top: 1px solid;
  padding-top: 5px;
  position: absolute;
  top: 150px;
  left: 15px;
}
<label for="btn_one">Gallery 1</label>
<input type="radio" id="btn_one" name="nesto" checked="checked"/>
<span class="tab1">Gallery One</span>
<label for="btd_two">Gallery 2</label>
<input type="radio" id="btd_two" name="nesto"/>
<span class="tab2">Gallery two</span>
<label for="btd_tree">Gallery 3</label>
<input type="radio" id="btd_three" name="nesto"/>
<span class="tab3">Gallery Three</span>

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

Reformat an input number by substituting commas with periods

Here's the code I'm working with: <input type="number" tabindex="3" placeholder="Item Price" step="0.01" min="0.10" max="999.99"> An example value inside this input is 1,95. I need to replace the comma with a dot. Can this be done using ...

jqueryhtmlformsformat

Ways to enable automatic scrolling of a page as the content expands (Utilizing collapsible elements)

For a recent project I've been working on, I decided to include 4 collapsible text boxes. However, I encountered an issue where opening content1 would expand and push down content2-4, requiring the user to manually scroll to view the remaining collaps ...

javascripthtmlcss

Issues with triggering onScroll event in Internet Explorer 11

<html> <head> <style> div {`border: 1px solid black; width: 200px; height: 100px; overflow: scroll;` } </style> </head> <body> <p>Experience the magic of scrollbar within ...

javascripthtmlcss

Tips for making an input form that triggers an alert popup

After creating an HTML form with text input, utilizing Javascript for validation as shown below: I am trying to trigger an alert box thanking the user for entering data when the submit button is clicked. I have faced challenges in implementing this witho ...

javascriptcssformsvalidation

Responsive design for iPad and larger screens - adjusting to different screen sizes

Does anyone know of a CSS code that can effectively target both iPad and desktop devices with a max-width of 768? I attempted the following code, however it seems to only work for desktops: @media only screen and (max-width: 768px) Due to this limitatio ...

cssipadmedia

The output of VueJs hooks shows a blank refs object first, followed by the referenced elements

Below is the HTML VueJS code sample that I am working with: <div v-for="site in topSites" ref="ts"><a :href="site.url"> ... </div> Update: Here is the full div code: <div v-for="site in topSites& ...

javascripthtmlvue.jsvuejs2vue-component

Selecting a webpage from a dropdown list to display its specific content within an iframe

I have a dropdown menu similar to this: <form name="change"> <SELECT NAME="options" ONCHANGE="document.getElementById('frame1').src = this.options[this.selectedIndex].value"> <option value="">Choose</option> <opti ...

javascripthtmliframedropdowngetelementbyid

Alter the class of a div when a key is pressed

Whenever I press the down arrow key, the class of a div changes. However, the class only applies while I keep my finger on the button and gets removed when I release it. I would like the class to remain permanently. What am I doing incorrectly in this code ...

jqueryhtml

Transforming the MVC model attribute into an HTML attribute

Is there a way to include model attributes in the HTML input tag? Code [Required] [StringLength(20)] public string Username { get; set; } [Required] [StringLength(20)] [DataType(DataType.Password)] public string Password { get; set; } Expected Output: ...

asp.netasp.net-mvchtml

Making the most of Material Design icons in MaterializeCSS: A step-by-step guide

I am looking to customize my mdi icons by adding my own set of icons into custom classes. The existing mdi classes do not match my requirements. Is there a way for me to add these icons and use them just like the default ones? <i class="mdi-image-face ...

cssmaterial-designmaterialize

Troubleshooting the issue with generateStaticParams() in NextJs/TypeScript

My NextJs app has a products page that should render dynamic routes statically using generateStaticParams(). However, this functionality does not work as expected. When I run "npm run build," it only generates 3 static pages instead of the expected number. ...

javascripthtmlreactjstypescriptnext.js

I am trying to connect HTML input with Python but I am not sure how to do it

As part of our capstone course team project, we are developing a self-hosted calendar app specifically designed for college students. One of our team members has taken the initiative to create HTML webpages for this self-hosted server. My current task is t ...

pythonhtml

Activate the WebDAV feature within the .htaccess file

Can WebDAV be activated through an .htaccess file? I'm experiencing issues with Plesk not recognizing my modified config files that have WebDAV enabled. Is it feasible to enable WebDAV without using an .htaccess file? ...

phphtml.htaccesswebdavplesk

What is the solution to eliminating the MultiValueDictKey error when making an AJAX get request?

When handling multiple divs on a web page, each containing a form, I encountered the need to utilize AJAX Get functionality. The goal was to pass the text entered into a form along with the ID of the corresponding div to a Django view for storage in a data ...

javascriptjqueryhtmlajaxdjango

Troubleshooting CSS Code Issues on Myspace

Greetings! I am currently working on enhancing a friend's profile on myspace.com. I have two divs on each side of the screen that I want to align next to each other. I have tried using float: left; and float: right;, as well as experimenting with marg ...

cssmyspace

Here is a guide on updating HTML table values in Node.js using Socket.IO

I successfully set up socket io communication between my Node.js backend and HTML frontend. After starting the Node.js server, I use the following code to emit the data 'dRealValue' to the client side: socket.emit ('last0', dRealValue) ...

javascripthtmlnode.jssocket.io

What is the best way to dynamically convert a lodash object (specifically a filter object) into jQuery's listview component?

After referencing the answer to this topic as my first step, which can be found here, my next goal is to utilize a filter function to retrieve all matching entries from a JSON file based on a search term. The objective is to loop through each match and con ...

javascriptjquerycssjsonsearch

Unable to load CSS in Node.js when the parameter in Express.js is too long

I have been working on an application using Node.js, express.js, and ejs. I am utilizing the following code to incorporate ejs and load css: app.engine('.html', require('ejs').__express); app.set('views', __dirname + '/vi ...

cssnode.jsexpressparametersejs

What is causing jQuery toggleClass to fail in removing a class?

I have successfully implemented a Skills accordion feature, but I am now trying to add a button that toggles all the skill sections at once. However, I am facing issues with jQuery not correctly adding or removing classes on the .accordion-trigger-all elem ...

javascripthtmljquerycss

Vue alert: Issue encountered in watcher 'childItems' callback - 'TypeError: Unable to access property 'tag' as it is undefined'

I am currently in the process of developing the Store page for a web application. I am utilizing Axios to retrieve product data and display it in a Vue template. While the backend functionality is working correctly and the frontend is rendering successfull ...

javascripthtmlvue.jsvuejs2buefy