What is the best way to insert a block of text above a slideshow without causing it to move downwards?

I've successfully integrated a slideshow within a section tag using a div tag. To include text above the slideshow, I placed another div tag above the slideshow div. However, when adding more text, it causes the images in the slideshow to get pushed down and cut off. Is there a solution to prevent this from happening? Thank you

<!DOCTYPE html>
<html>
        <head> 
            <title> AnimeExpoBd </title>
            <link rel="stylesheet" href="style.css">
        </head>
            <body>
                    <header>   
                                <ul>
                                        <li class="logo"><a href="index.html">ANIME EXPO LOGO</a></li>
                                        <li class="navbar"><a href="index.html">HOME</a></li>
                                        <li class="navbar"><a href=#gotoaboutus>ABOUT US</a></li> 
                                        <li class="navbar"><a href="moreaboutus.html">SCHEDULE</a></li>
                                        <li class="navbar"><a href="contactus.html">CONTACT US</a></li>
                                </ul>                               
                    </header>
                    <section class="feature-box opening">
                        <div id="gotoaboutus" class="about-us"><strong>ABOUT US</strong><p class="descpara">We aim to popularize and educate the Bangladesh public about Japanese anime and manga culture, as well as provide a forum to facilitate communication between professionals and fans. We're passionate about all things anime. We're here to help you discover hidden gems, learn more about new and current anime, find fan art and cosplay of all your faves, and get your opinions!</div>
                        <div class="Images"></div>
                    </section>
                    <section class="feature-box closing">
                            <div class="sched">Section A<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eaque exercitationem ad sed enim maiores cum recusandae numquam quibusdam. Perferendis reiciendis ut tenetur dignissimos neque hic impedit optio quasi libero sunt. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eligendi, ipsum? Exercitationem accusantium quaerat numquam architecto cum culpa magnam illo quos quod. Eligendi placeat repellendus perferendis veritatis ducimus iure maxime vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae rerum quia odit veniam natus consequuntur iste eum eos officiis ab optio sed itaque quasi possimus voluptatibus, velit est dolor quo. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quaerat nostrum in, quidem totam a atque obcaecati natus ratione quae rem ipsam sed hic laudantium enim aspernatur nemo cum, nobis eius.</p></div>
                            <div class="slidershow middle">
                                <div class="header">Header and Description</div>      
                                <div class="slides">
                                    <input type="radio" name="r" id="r1" checked>
                                    <input type="radio" name="r" id="r2">
                                    <input type="radio" name="r" id="r3">
                                    <input type="radio" name="r" id="r4">
                                    <input type="radio" name="r" id="r5">

                                     <div class="slide s1">
                                        <img src="images/1.jpg" alt="">
                                    </div>
                                    <div class="slide">
                                        <img src="images/2.jpg" alt="">
                                    </div>
                                    <div class="slide">
                                        <img src="images/3.png" alt="">
                                    </div>
                                    <div class="slide">
                                        <img src="images/4.jpg" alt="">
                                    </div>
                                    <div class="slide">
                                        <img src="images/5.jpg" alt="">
                                    </div>
                                    </div>
                                <div class="navigation">
                                    <label for="r1" class="bar"></label>
                                    <label for="r2" class="bar"></label>
                                    <label for="r3" class="bar"></label>
                                    <label for="r4" class="bar"></label>
                                    <label for="r5" class="bar"></label>
                                </div>
                            </div>
                    </section>
                    <footer>footer</footer>
            </body>
</html>
section.feature-box.closing {
    margin: 5px;
    padding: 10px;
    height: 620px;
    width: 1310px;
    background-color: #34495e;
    display: flex;
}
section.feature-box.closing div.slidershow div.header {
    font-size: medium;
    color: white;
    padding-bottom: 20px;
    text-align: center;
    margin-top: 5px;
}
section.feature-box.closing div.sched {
    width: 481px;
    text-align: center;
    color:black;
    font-size: medium;
    background-color: #c3edea;
}
section.feature-box.closing div.slidershow {
    width: 700px;
    height: 400px;
    overflow: hidden;
}
section.feature-box.closing div.middle {
    position: relative;
    top: 68%;
    left: 31%;
    transform: translate(-50%, -50%);
}
section.feature-box.closing div.navigation {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
}   
section.feature-box.closing div.navigation label.bar {
    width: 50px;
    height: 10px;
    border: 2px solid #fff;
    margin: 6px;
    cursor: pointer;
}
section.feature-box.closing div.navigation label.bar:hover {
    background-color: white;
}
input[name="r"]{
    position: absolute;
    visibility: hidden;
}
section.feature-box.closing div.slides {
    width: 500%;
    height: 100%;
    display: flex;
    background-size: 100%;
}
section.feature-box.closing div.slides div.slide {
    width: 20%;
    transition: 0.6s;
}
section.feature-box.closing div.slides div.slide img{
    width: 100%;
    height: 100%;
}
#r1:checked ~ .s1 {
    margin-left: 0;
}
#r2:checked ~ .s1 {
    margin-left: -20%;
}
#r3:checked ~ .s1 {
    margin-left: -40%;
}
#r4:checked ~ .s1 {
    margin-left: -60%;
}
#r5:checked ~ .s1 {
    margin-left: -80%;
}

Answer №1

Check out this code snippet:

section.feature-box.closing div.slidershow div.header {
    font-size: medium;
    color: white;
    padding-bottom: 20px;
    text-align: center;
    margin-top: 5px;
    position: absolute;
    left: 40%;
}

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

Angular is not properly integrating Bootstrap features

I've been attempting to create bootstrap accordion items, but unfortunately they're not functioning correctly as shown in the Bootstrap documentation or YouTube tutorials. In my angular.json file, I have included both bootstrap and jQuery for te ...

Vuejs components that have checkboxes already selected out of the box

Hey there, I'm facing a small issue. Whenever I click on the areas highlighted in the image, the checkbox on the left gets marked as well. Any idea why this might be happening? https://i.stack.imgur.com/nqFip.png <div class="form-check my-5&qu ...

Unable to write to csv file in UTF-8 using PHP fwrite, experiencing issues

Looking for assistance with handling PHP fwrite as CSV file is displaying incorrect characters. The output appears like this: općšpšćšćšp ćpšćpšćp šćpšćpšć This is the PHP code being used fo ...

Column flexbox self is not functioning properly with text ellipsis

Is there a way to apply text-overflow: ellipsis to a flexbox element? I know I need to set the width and overflow: hidden, but how can I achieve the ellipsis effect within the grey block when the text overflows? Removing the flexbox property from the < ...

Tips on creating a responsive div element within the viewport?

I have a variety of nested div elements within a parent div, set up like this: #mycontent > div { width: 14.28%; } <div id="myheader">some header content</div> <div class="container" id="mycontent"> <div class="outerdiv" id= ...

Trouble viewing Three.js content in Index.html

My current project involves building a website using three.js with typescript. However, I am facing an issue where only the header from my index.html file is displayed when I try to load the website onto a local server. The main problem arises when I atte ...

Seamless movements to the exact midpoint

I am trying to find a method to create a smooth transition when removing the center class from p.title.class, allowing it to smoothly move to its new position. JSfiddle Here is an excerpt of my HTML: <body> <div class="wrapper-top"> ...

Exploring the world of HTML5 speed testing: getting started

Can anyone provide guidance on how to begin with an HTML5 bandwidth test? I am trying to replicate a flash-based version and any recommendations would be greatly appreciated. ...

Is it possible to connect to standard Bluetooth devices using the Chrome Bluetooth API on a webpage? (excluding BLE)

Currently, I am conducting research on how to establish connections with Bluetooth devices through a web page. My goal is for the webpage to display a list of paired devices and be able to connect to them (specifically bluetooth printers). While I have com ...

Can an advertisement's appearance be altered to include custom content using only CSS?

Dealing with SAP for our ticket system has been quite a challenge due to the design that is causing some frustration. In an attempt to make it more tolerable, I used CSS to make some adjustments. However, my problem now lies in the fact that they keep maki ...

Applying a left margin has caused the right border to disappear

After adding a margin-left to the box, I noticed that my right border is missing. You can see the issue in this example. However, when I remove the margin-left property, everything looks fine as shown in this example. Is there any way to solve this proble ...

AngularJs - Show the response only upon verifying the correct answer

Let me provide an overview of what has been implemented so far: When a user selects an answer in radio buttons and clicks on "Check Answer", the system displays either "Correct" (in green) or "Incorrect" (in red) in the first answer field. Additionally, th ...

MUI Typography - Text turns white when hovered over

I've created a customized component that turns green on hover. Here's the code for it: const ProjectAdd= styled.div` background-color: white; list-style-type: none; list-style: none; height: 100%; width: 10%; height: 100%; border-ra ...

How to properly size a child div inside a parent container

I'm having trouble with sizing a child div inside a parent div. The problem is that the child div's size changes according to the number of elements it contains, but I want all the child divs to be the same size regardless. This issue arises with ...

When the radio button is selected, show a variety of buttons

I'm facing an issue with rendering different buttons for two radio buttons within a view. Here is the rendered HTML code for the radio buttons: <input checked="checked" id="Isattending_0" name="Isattending" type="radio" value="Yes" /> <inpu ...

Is there a way I can modify the display setting to show 4 slides per view?

var swiper = new Swiper(".new-arrival", { slidesPerView: 4, centeredSlides: false, spaceBetween: 30, autoplay: { delay: 5500, disableOnInteraction: false, }, pagination: { el: ".swiper-pagination", type: &qu ...

What is the process for modifying two IDs simultaneously?

I'm struggling to include more than one ID in my CSS. I want the box border to have four different hover effects and three gradient buttons (e.g., play, pictures, etc.). Here is my HTML: <h2><a id="hover-1" href="">Hov ...

What is the best way to adjust the Material Drawer width in Reactjs to match the width of its children?

Currently, I am utilizing the Material-ui Drawer component to toggle the display of content on the right side of the screen. The functionality I am aiming for is that when the Drawer opens, it will shrink the existing content on the right without any overl ...

Modifying the color of Bootstrap icons

When I use PHP code to print this icon into a table, it looks like this: echo '<button Onclick="" style="border: none; background: none; color:green"><a title="Reenviar" data-toggle="tooltip"><i class="material-icons">&#xE0BE;&l ...

What is the best way to access the camera of a mobile phone through a web application?

Whenever I try to access the camera on my mobile device through a web app, I encounter an issue. While the camera works perfectly fine on the web version, it fails to show up on my mobile device unless I add https:// in the URL. How can I resolve this prob ...