Witam wszystkich!
Jestem w trakcie pisania własnego motywu pod Wordpressa, który docelowo będzie blogiem. Miałem problem z ułożeniem zdjęcia i nava tak aby były wyśrodkowane wertykalnie w sekcji header. Rozwiązałem to paddingami, jednak chciałbym dowiedzieć się czy jest to dobre rozwiązanie? Macie inne propozycje?
Przy okazji chciałbym Wam zadać kilka pytań które nurtują mnie od jakiegoś czasu:
1. Czy uzależnienie wysokości header od paddingu to dobry pomysł, czy raczej używać stałej wysokości?
2. Przy dodawaniu przejść do elementu trzeba dodawać wszystkie opcje typu -moz, -o, -webkit, czy wystarczy tylko -webkit?
3. Czy używacie opcji "minify" do waszych plików?
Niżej dodaję mój kod
<!DOCTYPE html>
<html lang="pl-PL">
<head>
<title>He Reads! | Z książką w ręce</title>
<meta charset="utf-8">
<meta name="author" content="Konrad Szczepanowski">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,800&subset=latin-ext" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style/css-reset.css">
<link rel="stylesheet" type="text/css" href="style/style.css">
</head>
<body>
<header>
<div class="container">
<img src="img/hereads-logo.png" alt="He Reads!" class="float">
<nav class="float">
<ul>
<li><a href="#">Książka</a></li>
<li><a href="#">Serial</a></li>
<li><a href="#">Wylosuj</a></li>
</ul>
</nav>
<div style="clear: both;"></div>
</div>
</header>
</body>
</html>
.float {
float: left;
}
body {
background-color: #E5E5E5;
font-family: 'Montserrat', sans-serif;
}
header {
background-color: #fff;
border-bottom: 4px solid #E88F30;
font-weight: 800;
overflow: auto;
padding: 25px 0;
box-shadow: 0 8px 25px #c2c2c2;
}
header img {
width: 250px;
margin-right: 30px;
}
header nav {
text-transform: uppercase;
padding: 20px 0 0;
box-sizing: border-box;
}
header nav ul li {
float: left;
padding: 10px;
border-radius: 7px;
-webkit-transition: background-color 0.3s ease-in-out;
-moz-transition: background-color 0.3s ease-in-out;
-o-transition: background-color 0.3s ease-in-out;
transition: background-color 0.3s ease-in-out;
}
header nav ul li:hover {
background-color: #EDB034;
}
header nav ul li a:link {
color: #121212;
}
header nav ul li a:hover {
text-decoration: none;
}
Z góry dziękuję za wszystkie odpowiedzi