• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Ułożenie elementów w nagłówku i inne nurtujące pytania

0 głosów
56 wizyt
pytanie zadane 3 lutego w HTML i CSS przez bugs55 Użytkownik (990 p.)

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 wink

<!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&amp;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 laugh

1 odpowiedź

+2 głosów
odpowiedź 3 lutego przez Tomek Sochacki Mędrzec (186,690 p.)

2. Przy dodawaniu przejść do elementu trzeba dodawać wszystkie opcje typu -moz, -o, -webkit, czy wystarczy tylko -webkit? 

Od tego używaj css prefixera przy buildzie np. webpacka. Takie rzeczy w ogóle nie powinny Cię interesować przy kodowaniu :)

3. Czy używacie opcji "minify" do waszych plików?

Podobnie jak wyżej, minifikacja css, html, js to zadanie dla automatów (np. webpack z odpowiednim pluginem), nie zastanawiaj się nad tym jako developer.

komentarz 3 lutego przez bugs55 Użytkownik (990 p.)
Rozumiem. Nie zamierzam tego robić własnoręcznie, używam pluginów w Visual Studio Code, chodziło mi bardziej o to, w szczególności przy 3 pytaniu, czy robić taką operację czy nie.
komentarz 3 lutego przez Tomek Sochacki Mędrzec (186,690 p.)
Generalnie zasada jest taka - w repo trzymasz kod "normalny", bez żadnych minifikacji itp., a w buildzie masz kod przemielony przez minifikatory, autoprefixery itp. itd. I nie korzystaj z pluginów do edytora. Od tego jest np. webpack. A to z prostej przyczyny - nie uzależniaj się od edytora czy IDE. Gdybyś teraz zmienił edytor to leżysz :) Czy chociażby pójdziesz na innego kompa i musisz od zera wgrać edytor i go skonfigurować. Naprawdę, nie bój się webpacka, zobaczysz, użyjesz go raz i już nie wrócisz do rozwiązani z pluginami :)
komentarz 3 lutego przez bugs55 Użytkownik (990 p.)

Dziękuję bardzo za pomoc, jednak mogę prosić a jakiś słowniczek do Pana wypowiedzi? ;x Mam pewien bagaż doświadczeń w pisaniu stron internetowych, ale znaczenia niektórych słów (repo, build, webpack), których Pan użył nie rozumiem... surprise

komentarz 3 lutego przez Tomek Sochacki Mędrzec (186,690 p.)

Mam pewien bagaż doświadczeń w pisaniu stron internetowych

jak Tyś się uchował jako front-end, że nie znasz builderów itp. :)?

Repo no to chodzi mi po prostu o repozytorium GIT, tu chyba nie ma co wyjaśniać, git to jak ręka, bez tego nie wyobrażam sobie robić jakiegokolwiek projektu.

Build, to chodzi mi po prostu o wersję produkcyjną aplikacji, czyli tą wyplutą już przez webpacka po wszystkich przetworzeniach, minifikacje, prefixy, transpilacja kodu jeśli potrzebujesz wspierać jakieś starsze środowiska i pisać w nowych ES itp.

Podobne pytania

0 głosów
1 odpowiedź 46 wizyt
0 głosów
3 odpowiedzi 164 wizyt
pytanie zadane 28 września 2016 w HTML i CSS przez Vromix Początkujący (330 p.)
0 głosów
2 odpowiedzi 166 wizyt
Porady nie od parady
Nie wiesz jak poprawnie zredagować pytanie lub pragniesz poznać którąś z funkcji forum? Odwiedź podstronę Pomoc (FAQ) dostępną w menu pod ikoną apteczki.FAQ

65,641 zapytań

112,265 odpowiedzi

236,884 komentarzy

46,639 pasjonatów

Przeglądających: 157
Pasjonatów: 7 Gości: 150

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...