In the process of crafting a storyboard for a new graphic novel

For my latest project, I am working on creating a comic book page. After successfully designing a cover that opens up, I am now facing a challenge in adding separate blocks to the first page to resemble a classic comic book layout.

However, every time I attempt to integrate these blocks, it seems to disrupt the positioning of my cover. You can see an example here: https://codepen.io/reallynotprogramming/pen/GadVZJ

I have tried nesting individual divs within my main container div, but unfortunately, it doesn't seem to be resolving the issue.

body {
     background-image: url('images/Avenger\ vs\ Justice\ League2-01.jpg');
     background-size: contain;
     background-position: center;  
    }
    
.flex-container {
    /* display: flex;
    flex-direction: row; */
    background-color: white;
    height: 820px;
    width: 700px;
    margin-top:40px; 
    margin-bottom: 40px;
    margin-left: 500px; 
    box-shadow: 20px 20px;
}

.cover {
    background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/0/0b/Symbol_from_Marvel%27s_The_Avengers_logo.svg/877px-Symbol_from_Marvel%27s_The_Avengers_logo.svg.png);
    width: 700px;
    height: 820px;
    transform: rotateY(0deg);
    background-color: blue;
    transform-style: preserve-3d;
    transform-origin: left;
    transition: all .5s ease-in;
}

.flex-container:hover .cover{
    transform: rotateY(-180deg);
}

.page1 {
    width: 700px;
    height: 820px;
    margin-top: 75px;
    margin-left: 100px;
    background-color: green;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Avengers vs JL</title>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- CSS Link -->
        <link rel="stylesheet" type="text/css" href="project.css">

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    </head>
    <body>
        
        <!--Comic Book-->
        <div class="flex-container">
            <div class="cover"></div>
            <div class="page1">Test</div>
        </div>

        <!-- Optional JavaScript -->

        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    </body>
</html>

htmlcss

Answer №1

Your issue stems from the fact that block elements do not naturally stack on top of each other. In web design, elements typically flow in a linear manner. To achieve a stacked or bunched appearance, you will need to adjust their layout. One simple way to accomplish this is by using the "absolute" position directives. I have made some modifications to your example, which you can view here:

https://codepen.io/anon/pen/yWELQM

You may notice that the page now appears underneath due to the following CSS rule:

.page1{
    width: 700px;
    height: 820px;
    margin-top: 39px;
    padding: 2em;
    color: white;
    background-color: green;
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: -1;
}

I recommend further research on how HTML element layouts function to gain a deeper understanding of these concepts.

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

The texture rendered by Three.js WebGL is not displaying correctly on the plane and appears

Currently, I am working on a WebGL scene that consists of 2 planes. One of the planes displays a transparent texture perfectly, while the other plane is supposed to showcase a high-resolution, non-transparent texture as a background. Unfortunately, I am fa ...

javascripthtmlthree.jstextures

Getting the value of "Page=?" from the href attribute in an HTML tag can be done using Selenium Webdriver and Java

I am looking to extract the value "page = ?" from a specific "href" tag in the HTML code below. I need this value for my Selenium WebDriver script so that my loop can iterate up to page 53. Can someone guide me on how to retrieve the "page =" value mentio ...

javajavascripthtmlselenium-webdriver

Can elements be styled differently using the CSS :hover selector even if the hovered element and affected element are not related?

Within this demonstration fiddle, hovering over the element a triggers a change in background color for the First paragraph to red. Since a and #p1 are siblings, By altering the selector between them, this method (changing the relationship between elem ...

csscss-selectors

Bootstrap 4 did not achieve the desired responsiveness for the image and h1 element

I am having trouble with my two Div elements, one for an image and one for a heading. I have set different font sizes based on different media queries in my CSS file. While it works when shrinking the width, the heading does not break into two lines. Addit ...

htmlcssbootstrap-4

When the size is reduced, the content spills out of the div

I made a div container and added some callouts inside it. You can find my code uploaded here https://codepen.io/muhammad-usman-the-animator/pen/mKgoNj .name { color: black; font-weight: bold; margin-left: 20px; font-size: 20px; } .det ...

htmlcssbootstrap-4

Ways to customize the font style, size, and height of Mui TextField

I am struggling to modify the font family of the label within the Mui component TextField. It seems that the sx property does not properly change the font family, although it works for adjusting the width. I also attempted to use the rows property for he ...

cssreactjsmaterial-ui

Is it possible to conceal a menu or title on a webpage and have the text automatically show up after a set number of seconds?

For my school project, I came up with an idea that involves hiding the title and menu for a few seconds before displaying them on the webpage. I've been doing some online research on how to achieve this using CSS or JavaScript. I considered using a di ...

javascriptjquerycsshtml

Get a calendar that displays only the month and year

I am looking to incorporate two unique PrimeFaces calendars on a single page. The first calendar will display the date, while the second one will only show the month and year. To achieve this, I have implemented the following JavaScript and CSS specifica ...

javascriptcssprimefacesdatepickercalendar

Setting the opacity of an image will also make the absolute div transparent

I currently have an image gallery set up with the following structure : <div class="gallery"> <div class="message"> Welcome to the gallery </div> <img src="http://placehold.it/300x300" /> </div> Here ...

cssimageopacityabsolute

Exploring the Potential of CSS Styling within Vue.js

I am in the process of creating a website and I am looking for a way to manage my styles through Vue. I want to be able to utilize CSS with Vue, as the style of .skill-bar serves as the background of the bar, while .skill-bar-fill represents the green fil ...

javascriptcssvue.jsvuejs2vue-component

Is it necessary to create a separate animation class to trigger CSS keyframe animations based on scroll position?

My website has a background animation that controls various shapes, each with their own unique animation styles: animation: animShape 50s linear infinite; The speed of the animations varies depending on the shape being displayed. The animShape keyframes ...

htmljquerycss

Modify the css within a Bootbox dialog box

I am looking to enhance the appearance of the text "Hello world" in the following code snippet by applying some styling such as making it bold: bootbox.alert("Hello world!", function() { Example.show("Hello world callback"); }); Your help is greatly a ...

javascriptcsstwitter-bootstrap

What is the most effective method for populating an array with all images from a particular directory?

I recently installed a pdf viewer plugin on my website (check it out here: ), and I have a question regarding its functionality. I am looking to include approximately 60 - 70 pages in this flip book, but I am unsure of how to proceed. I have attempted var ...

javascriptjqueryhtmlpdf

Creating an HTML div that fills the remaining height available

Currently, I'm developing a web application and aiming to have the content span the full height of the screen. Is there a way to make the div element (other-child) automatically fill its parent without having to manually set its height? html { heig ...

htmlcss

Tips for implementing a linear gradient on a bar graph using Highcharts

I'm trying to create a bar chart using highcharts, and I want to apply a linear gradient for the bar fill color. However, I am not sure how to set this up. Can anyone provide some guidance or ideas? Here is an example of what I'm hoping to achie ...

jquerycsshighcharts

NodeJs: express wreaks havoc on the generated HTML markup

Similar Question: ExpressJS: how to output pretty html While using Express as my framework for node.js, everything is running smoothly except for one minor issue. When I view the page source by right-clicking on the browser, all my HTML code appears u ...

htmlnode.jsexpress

Using a combination of AND and OR in XPATH

Recently, I encountered the following HTML code: <div><h6>abc/h6><p>date</p></div> Using Selenium, I managed to locate this element based on text. However, the issue arises when <h6> can contain various words like "d ...

htmlseleniumselenium-webdriverxpathselenium-chromedriver

Upon clicking on a different div, a div will elegantly slide down from above the footer

I'm struggling with sliding a div from the bottom of the page. Here is my JSFIDDLE Currently, when I click on the blue box (arrow-hover), the div slides up (box-main). However, to hide the div (box-main) again, I have to click inside the box-main d ...

javascriptjqueryhtmlcss

Require the header text to appear black on a white background and white on a dark background

As someone who is not experienced in coding, I have tried multiple methods without success. It seems like none of the solutions available are compatible with my Squarespace theme. Any assistance you can provide would be greatly appreciated! Here is a link ...

css

How can you use JQuery to create a fading effect on colors while keeping the boxes stationary?

I have designed a grid of 16x16 boxes. When you hover your mouse over a box, it turns pink. However, I want the box to remain visible when you move away from it, with the pink color gradually fading back to the original gray after a second. Here is the HT ...

javascriptjqueryhtmlcss