Home>
Coding concept when realizing a multi-layered design


I would like to know how to configure the coding when creating such a design.


  

<dl>
<dt>Subtitle</dt>
<dd>Body text Body text</dd>
</dl>


html
`` ```

Make the body part of main_word the center of the screen
I'd like to make the white background of contents_box shift only on the left side and cover the photo.
How smart is it to write CSS?

I haven't written CSS yet.
It may be a fairly rudimentary question, but
I would appreciate it if you could give me some advice.

Thanks for your cooperation.

///////////////////////////
Postscript

The screen is supposed to be responsive, so
The photo area and contents_box also extend to the left and right.

I would appreciate it if you could help me.

  • Answer # 1

    You can also set a negative margin for contents_box without touching the position attribute.

    #contents_box {
     background: antiquewhite;
     margin-top: -50px;
     width: 600px;
     height: 500px;
     padding: 50px 10px 10px 100px;
    }

  • Answer # 2

    Please stick it as it is.
    The point is

    position: relative;
    position: absolute;

    Is not it.

    <! DOCTYPE html>
    <html lang = "ja">
    <HEAD>
    <meta charset = "UTF-8">
    <meta name = "viewport" content = "width = 960">
    <title>TEST</title>
    <style>
    * {padding: 0;margin: 0;box-sizing: border-box;}
    html, body {
        background: #eee;
        height: 100%;
        width: 100%;
        font-family: unset;
        letter-spacing: 0.1em;
        font-size: 12px
    }
    h1 {
        font-size: 3rem;
        line-height: 6rem;
        text-align: center;
        background: white;
        width: 800px;
        margin: 0 auto;
    }
    #main_box {
        background: white;
        width: 800px;
        margin: 0 auto;
        position: relative;
    }
    #ph_box {
        height: 300px;
        background: linear-gradient (blue 0%, cyan 100%);
    }
    #contents_box {
        position: absolute;
        top: 250px;
        background: white;
        width: 600px;
        padding: 50px 10px 10px 100px;
    }
    dt {
        font-size: 2rem;
        line-height: 3rem;
        border-bottom: 3px solid black;
    }
    dd {
        padding: 1rem 0;
    }
    </style>
    </HEAD>
    <body>
     Title 
         
        
            
                 Subtitle 
                 Body text 
            
        
    </body>
    </html>

  • Answer # 3

    Will the background image be expanded to fill the width of the screen?
    I will answer on that premise.
    (If you don't want to fill the screen width, you can set the width in .main_box.)

    The background image should be set in the CSS background to make it responsive.

    It's a good idea to use a negative margin to cover your photos with contents_box.

    To make the background white only on the left side, the background of contents_box is linear-gradient, the left half is white, and the right half is transparent. The width is 100%.

    Set the width to .main_word to center it and make the background white.

    
       Title 
      
      
      
        
           Subtitle 
           Body text Body text 
        
      
    
    h1 {
      text-align: center;
    }
    .ph_box {
      width: 100%;
      height: 400px;
      background: center/cover url (image path)
    }
    .contents_box {
      margin-top: -5rem;
      background: linear-gradient (to right, white 50%, rgba (255,255,255,0) 50%);
      width: 100%;
    }
    .main_word {
      max-width: 800px;
      margin: 0 auto;
      background-color: white;
      padding: 1rem;
    }
    dt {
        font-size: 2rem;
        line-height: 3rem;
        border-bottom: 3px solid;
    }
    dd {
        padding: 1rem 0;
    }

    CodePen sample

  • Answer # 4

    ophiacodon, hatena19
    Thank you for your polite explanation of the non-specific questions.
    We were able to respond with the ideas shown above.
    Thank you very much.