html - How to make a header's size be equal in both margins?

Question

Welcome To Ask or Share your Answers For Others

html - How to make a header's size be equal in both margins?

posted Oct 7, 2021 in Technique[技术] by 深蓝 (71.8m points)

html - How to make a header's size be equal in both margins?

I'm new to CSS, started a week and a half ago, and I'm having an issue that I have a hard time solving a problem. I need my webpage to look Like this, I have tried lots of stuff but I can't come up with a solution yet. It doesn't look right, it doesn't look 50%-50%

<body>
    <header class= "header">
            <div class="box-1">
                <h1>TOP STUDENTS</h1>
                <b>Historic best averages</b>
            </div>
    </header>


/*Now to CSS*/
.header{
    display: inline-block;
    top:2vw;
    left:2vh;
    width:50vh;
    right:2vh;
    height:5vh;
    margin:5% 25%;
    position:relative;
}

.box-1{
    min-width:400px;
    min-height:60px;
    padding-top:5px;
    padding-bottom:5px;
    text-align:center;
    box-sizing:border-box;
    border: 4px rgba(24, 26, 1, 0.705) solid;
    font-size:24px;
    display:inline-block;
    background-color: rgba(200, 220, 150, 0.7);
    box-shadow: inset 0 0 15px rgba(0,0,0,.5);
}

.box-1:hover{
    width:400px;
    height:110%;
    font-size:30px;
    background-color:rgba(226, 208, 40, 0.822);
    transition: 2s;
}

I have two monitors with different resolutions and when I swap the page it destroys itself but the objective is not correcting that since that's not what the exercises ask for. I already tried a few suggested solutions here but nothing seems to work out. I'm doing something very wrong apparently enter image description here The page was doing fine until I started working to correct it and make the header look like it should (orange is the header), it isn't right though. Thanks VERY important clarification: I can not use flexbox because the exercise explicitly tells me not to.

question from:https://stackoverflow.com/questions/65894253/how-to-make-a-headers-size-be-equal-in-both-margins

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-06T19:17:28+0000

The below is a CSS reset that you should try and add to your code:

body {
   margin: 0;
   padding: 0;
}

Your question is quite obscure and it isn't very clear exactly what you are asking for. Also, when I run the code you have provided it is not the same as what you have provided in the image..

I have had a look at your code now, you shouldn't really be applying you sizing to the header itself, but rather the content within. I have cleaned up the code and bit and centered it using 'margin-left: auto;' and 'margin-right: auto;'.

See the code below and let me know if this helps:

        body {
            margin: 0;
            padding: 0;
        }
        .header{
            width: 100%;
            height: 500px;
            position:relative;
            background-color: #121212;
        }

        .box-1{
            width: 400px;
            height: 200px;
            padding-top:5px;
            margin-left: auto;
            margin-right: auto;
            padding-bottom:5px;
            text-align: center;
            box-sizing: border-box;
            border: 4px rgba(24, 26, 1, 0.705) solid;
            font-size:24px;
            background-color: rgba(200, 220, 150, 0.7);
            box-shadow: inset 0 0 15px rgba(0,0,0,.5);
        }

        .box-1:hover{
            width: 500px;
            height: 260px;
            font-size:30px;
            background-color:rgba(226, 208, 40, 0.822);
            transition: 2s;
        }

<!DOCTYPE html>
<head lang="en">
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <header class= "header">
            <div class="box-1">
                <h1>TOP STUDENTS</h1>
                <b>Historic best averages</b>
            </div>
    </header>
</body>

Categories

html - How to make a header's size be equal in both margins?

html - How to make a header's size be equal in both margins?

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags