• 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

VPS Starter Arubacloud
0 głosów
190 wizyt
pytanie zadane 3 lutego 2019 w HTML i CSS przez bugs55 Obywatel (1,090 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 2019 przez Tomek Sochacki Ekspert (227,510 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 2019 przez bugs55 Obywatel (1,090 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 2019 przez Tomek Sochacki Ekspert (227,510 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 2019 przez bugs55 Obywatel (1,090 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 2019 przez Tomek Sochacki Ekspert (227,510 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ź 121 wizyt
0 głosów
1 odpowiedź 585 wizyt
pytanie zadane 16 sierpnia 2019 w HTML i CSS przez Radek Koniarski Użytkownik (870 p.)
+2 głosów
0 odpowiedzi 118 wizyt
pytanie zadane 25 czerwca 2020 w HTML i CSS przez Tomasz Serfer Nowicjusz (210 p.)

92,454 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

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

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...