Fit logo in header

Question

Fit logo in header

Navigation

#1 by (1 votes)

0

I want to make a header that has the logo on the left and then put three lines with:

Name of the person,
Specific data of the person,
Three buttons: phone, mail and whatsapp.

But I have several problems:

I want the logo to fit the height of the header and it does not.

The width of the logo should be self-adjusted according to the height of the logo to maintain the proportions.

I do not focus the buttons (I have not put style to not complicate the code)

If I narrow the screen a lot, the second cell overlays the logo and cuts it

Can anyone guide me?

I paste the code:

* {
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  font-family: Arial, Helvetica, Verdana, Times New Roman, sans-serif;
  font-size: 100%;
  /* Lo pongo =100% para que coja la letra por defecto del browser*/
  text-align: center;
  -webkit-text-size-adjust: none;
  /* Utilizo box-sizing para que los bordes me queden dentro de los elementos.*/
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
}

body {
  background-color: white !important;
}


/* No quiero que los link cambien de color ni queden subrayados */

a {
  text-decoration: none;
}

.header {
  position: fixed;
  width: 100%;
  height: 15%;
  background-color: white !important;
  border-bottom: rgba(192, 32, 23, 1) solid 2px;
  display: table;
}

.header_logo {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  border: red solid 1px;
  margin: 0 0 0 2px;
}

.header img {
  max-height: 100%;
  min-height: 100%;
  margin: 0 5px 0 2px;
}

.header_text {
  display: table-cell;
  text-align: left;
  vertical-align: middle;
  border: red solid 2px;
  font-size: 2rem;
}

<br>
<div class="header">
  <div class="header_logo">
    <img src="http://fangosto.com/apcs/web.png" />
  </div>
  <!-- header_logo -->
  <div class="header_text">
    <h1 style="color:black;text-decoration:bold;">JAVIER ANGOSTO nº 001</h1>
    <p style="color:grey;">Espediente nº 45.567</p>
    <div style="display:inline-block; vertical-align: middle;text-align:middle;">
      <button onclick="location.href='/SCRN/ID=Main_Screen'">INIZIO</button>
      <button onclick="location.href='/SCRN/ID=Caldaia'">CALDAIA</button>
      <button onclick="location.href='/SCRN/ID=Filtraggio'">FILTRAGGIO</button>
    </div>
  </div>
  <!-- header_text -->
</div>
<!-- header -->

html5 html css3 css

asked by Fco. Javier Angosto Gomis 07.03.2018 в 23:54

source

1 answer

How can I change a comma separator by tab delimiter [duplicated] BINARY 32 BITS TO REAL CONVERTER

score 1 · Accepted Answer

To scale the image you must play a bit with the proportions, use width as its initial value and then use the height to define the maximum and minimum sizes:

.header img {
     max-height:100%;
     min-height:20%;
     width:50%;/*valor inicial*/
}

to center the buttons you must forsozamente specify the size with width and then only occupy margin: 0 auto; for perfect centering:

<div style="display:inline-block; margin: 0 auto; width:100%;">

To avoid overlapping elements in different screen sizes, use the <meta> tag in <head> to set the viewport :

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">

Here the implementation

* {		
    margin: 0; 
    padding: 0; 
    border:0; 
    overflow: hidden;
    font-family: Arial, Helvetica,Verdana, Times New Roman, sans-serif; 
    font-size:100%; /* Lo pongo =100% para que coja la letra por defecto del browser*/
    text-align:center;	
    -webkit-text-size-adjust: none;
    /* Utilizo box-sizing para que los bordes me queden dentro de los elementos.*/
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;	
} 
      
html,body{width:100%;height:100%;}

body{
    background-color:white !important;
}
 
a { 
    text-decoration:none;
}
    

.header{
    position:fixed;
    width:100%;
	height:15%; 
	background-color:white !important;
	border-bottom: rgba(192,32,23,1) solid 2px;
	display:table;
 }

.header_logo{
	display:table-cell;
	text-align:center;
	vertical-align:middle;  
    border:red solid 1px;
    margin:0 0 0 2px;
}

.header img {
     max-height:100%;
     min-height:20%;
     width:50%;
}

.header_text{   
	display:table-cell;
	text-align:left;
	vertical-align:middle;    
    border:red solid 2px;
    font-size:2rem;
}

<div class="header">
  <div class="header_logo">
     <img src="http://fangosto.com/apcs/web.png"/>
  </div><!-- header_logo --> 
  <div class="header_text">
    <h1 style="color:black;text-decoration:bold;">JAVIER ANGOSTO nº 001</h1>
    <p style="color:grey;">Espediente nº 45.567</p>
    <div style="display:inline-block; margin: 0 auto; width:100%;">
      <button onclick="location.href='/SCRN/ID=Main_Screen'">INIZIO</button>
      <button onclick="location.href='/SCRN/ID=Caldaia'">CALDAIA</button>
      <button onclick="location.href='/SCRN/ID=Filtraggio'">FILTRAGGIO</button>
    </div>    
  </div><!-- header_text -->
</div><!-- header -->