How to choose the padding to match my banner height? - html

Question

I am trying to do a project for my uni.
I would like to make a padding on my anchor to make them clickable.
#windows is a div that contains everything (maybe it could be substitute with a *?)
I chose the padding just with trying, but I'm not satisfied.
As you can see the logo is not centered because the padding changed the height of the banner (the grey part)
body {
margin: 0;
background-image: url("../img/background.png");
background-repeat: repeat;
}
#windows {
width: auto;
height: auto;
width: auto;
}
#banner {
height: 100%;
width: 100%;
background-image: url("../img/banner-background.png");
display: flex;
}
/*#banner p {
font-weight: bolder;
color: #1ea2c4;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
} */
#logo {
height: 50px;
width: 50px;
margin-left: 50%;
height: auto;
}
#logoutandcart {
margin-top: 1px;
margin-right: 30px;
margin-left: auto;
}
#logout,
#cart {
width: 50px;
margin-right: 5px;
width: fit-content;
float: right;
display: inline;
padding: 20px 5px 20px 5px;
}
<div id="window">
<div id="banner">
<div id="logo">
<a class="forwarder" href="home.php">
<img src=" ../img/nftlogo.png " alt="banner logo ">
</a>
</div>
<div id="logoutandcart">
<a class="conteiner" href="./login.php ">
<div id="logout">Log out
</div>
</a>
<a class="conteiner" href="./cart.php ">
<div id="cart">Carrello </div>
</a>
</div>
</div>

Answer 1

First lets discuss a few issues. If you use an ID of window then a selector of #windows your css will not work. Ensure that your ID and selectors always match. In this case it is ok because the width and height auto are not needed. Next there is no need to place a div inside of an a tag to contain your text. If you need to separate text in an a tag use a span. In this case it is not needed so Ill just remove it.
Next lets talk about a solution. You can use the header tag with a div inside that acts as a container. Place your banner background on the header tag and use the container to keep your banner centered when your screen becomes larger you can place a width on the container then use margin 0 auto to make it stay in the center and not go edge to edge. We can also make that container have a position of relative and a display of flex and control the space around the objects inside using the height. Align the items to the center and justify the content to the end of the flex object. This will only affect to two end links because we will do something different with the logo.
Since we always want the logo in the center we will give it a position of absolute. This will take it out of the "normal flow" of the document and allow us to place it where we want. In this case it will be to the top and left 50% of its closes relative parent the header-container. Then we will translate the object -50% of its height and width to center it within its parent.
Padding can then be added to the links on the right to separate them and make them a bit taller making them easier to click on.
Now you can change the height of your banner as you see fit and the objects inside will respond to their parents height and width.
body {
margin: 0;
}
.app-header {
background-color: #e6e6e6;
}
.header-container {
position: relative;
height: 50px;
display: flex;
align-items: center;
justify-content: flex-end;
}
.logo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.link-container a {
padding: 20px 5px;
}
#media only screen and (min-width: 800px) {
.header-container {
width: 800px;
margin: 0 auto;
}
}
<header class="app-header">
<div class="header-container">
<a class="logo" href="home.php">
<img src="https://via.placeholder.com/50" alt="banner logo ">
</a>
<div class="link-container">
Log out
Carrello
</div>
</div>
</header>