How can I make this header with CSS?
Question
I need to make this header exactly like the image below. With the text in the center and the 2 images on each side. I've tried everything and the only way I had success was making the hole header into a whole image (not good). By the way, it needs to be responsive to mobile access, as the whole page is (I'm using bootstrap). Here is my whole code (I guess the only important part is the <header> though):
<body>
<header>
<div class="row">
<div class="col-sm-2 col-xs-1"></div>
<div class="col-sm-8 col-xs-10">
<img class="img-responsive logoheader" src="files/Screenshot_1.png" alt=""/>
</div>
<div class="col-sm-2 col-xs-1"></div>
</div>
</header>
<div class="jumbotron">
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-xs-1"></div>
<div class="col-sm-6 col-xs-10">
<center>
<h4>INSCRIÇÕES PARA EDUCAÇÃO INFANTIL - 0 ATÉ 5 ANOS</h4>
<h5>DECRETO 122/2017</h5>
</center>
<br>
<div id="dangerindex" class="alert alert-danger" style="display:none;"> </div>
<div id="warningindex" class="alert alert-warning" style="display:none;"> </div>
<form name="main-form" id="main-form" method="post" action="index2.php">
<label> NOME COMPLETO DA CRIANÇA:*</label>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input maxlength="100" onblur="this.value=this.value.toUpperCase()" type=text name="crianca-nome" id="criancaNome" value="" class="form-control" />
</div>
<label> DATA DE NASCIMENTO DA CRIANÇA:*</label>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
<input readonly style="background-color: white !important;" type="text" name="crianca-nascimento" id="crianca-nascimento" class="form-control datepicker">
</div>
<button class="btn btn-primary visible-md visible-lg" style="float:right;" type="button" onclick="ChecaIdade()">Próximo</button>
<button class="btn btn-primary btn-block visible-sm visible-xs" style="float:right;" type="button" onclick="ChecaIdade()">Próximo</button>
</form>
</body>
As you can see, the header is just a screenshot of what I want. How can I make it properly with CSS?
Here is the image (Screenshot_1.png):
And this is how my page looks like right now:
2 answers
solution1
0 ACCPTED 2017-09-29 22:55:02
Edited based on comment.
- Make your image logos the same dimension (I used 600 × 345px but tweak to your benefit).
- Set your row container to flex to vertically center text to the logos.
- Make
imgwidth:100%in your CSS to keep ratio on viewport resize. - Tweak
.headerTextfont-sizeto your benefit.
With this setup you can maintain the row on mobile as well, considering it's 3 pictures, it may be too much to stack them vertically.
img { width: 100%; } .headerText { font-size: 9px; line-height: 1.4; display: flex; flex:1; align-items: center; } .flex { display: flex; flex-flow: row wrap; justify-content: space-between; align-items: center; } /* make text smaller on mobile */ @media (max-width: 767px) { .headerText { font-size: 9px; } }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <header> <div class="row flex"> <div class="col-xs-4"> <img class="img-responsive logoheader" src="https://i.imgur.com/wuEStaT.jpg" alt="" /> </div> <div class="col-xs-4 text-center text-uppercase headerText"> <span> prefeitura municipal de guaiba<br> estado do rio grande do sul<br> gestao 2017/2020<br> secretaria municipal de educacao </span> </div> <div class="col-xs-4"> <img class="img-responsive logoheader" src="https://i.imgur.com/NInC1cx.jpg" alt="" /> </div> </div> </header> <div class="jumbotron"> <div class="container-fluid"> <div class="row"> <div class="col-sm-3 col-xs-1"></div> <div class="col-sm-6 col-xs-10"> <center> <h4>INSCRIÇÕES PARA EDUCAÇÃO INFANTIL - 0 ATÉ 5 ANOS</h4> <h5>DECRETO 122/2017</h5> </center> <br> <div id="dangerindex" class="alert alert-danger" style="display:none;"> </div> <div id="warningindex" class="alert alert-warning" style="display:none;"> </div> <form name="main-form" id="main-form" method="post" action="index2.php"> <label> NOME COMPLETO DA CRIANÇA:*</label> <div class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span> <input maxlength="100" onblur="this.value=this.value.toUpperCase()" type=text name="crianca-nome" id="criancaNome" value="" class="form-control" /> </div> <label> DATA DE NASCIMENTO DA CRIANÇA:*</label> <div class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span> <input readonly style="background-color: white !important;" type="text" name="crianca-nascimento" id="crianca-nascimento" class="form-control datepicker"> </div> <button class="btn btn-primary visible-md visible-lg" style="float:right;" type="button" onclick="ChecaIdade()">Próximo</button> <button class="btn btn-primary btn-block visible-sm visible-xs" style="float:right;" type="button" onclick="ChecaIdade()">Próximo</button> </form>
solution2
0 2017-09-29 23:09:09
Step One: Divide your (Screenshot_1.png) image file
Firstly, you are going to need to divide your image (Screenshot_1.png) into 3 parts. In doing so, you will have 3 image files, as follows:
- Image 1: Your left Emblem.
- Image 2: Your central text.
- Image 3: Your right logo.
In dividing your image into 3 parts, you will find that you will be able to ensure that they become responsive to the screen sizes they are displayed on. Both in terms of size and also in that they then 'stack' on top of each other on smaller devices, such as Mobile Phones.
Step Two: Bootstrap Installation:
Head over to Bootstrap and follow their guide on installing Bootstrap to your website. Once you have successfully installed Bootstrap, you will be able to access their CSS Classes, which will allow your website to become responsive.
Additional Resource: Bootstrap Grid Layout
Step Three: Modify your HTML Code:
If you have correctly installed the Bootstrap files, you can then replace your header code, with the below code. Don't forget to replace [Image 1], [Image 2] and [Image 3] with the correct Image SRC.
<header>
<div class="row">
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">[Image 1]</div>
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">[Image 2]</div>
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">[Image 3]</div>
</div>
</header>
As a side note, it is worth knowing that each Row is made up of 12 'Columns'. When assigning a Column Number ('col-xs-4' etc), ensure that each row's columns add up to 12. The above should work fine but you would likely need to tinker with the numbers, in order to achieve the right column widths for your website.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.