Witam :) To znów ja ze swoimi problemami. Tym razem problemy z navigacją. Odwzorowuje stronę w ramach nauki i mam problem z nav'em, tą navigacją aby ją odwzorować tak jak tam jest. Inspektor mowi że zrobili to flexem, ale ja nie chce go używać, ani grida. Zrobiłęm własną siatkę (albo raczej skopiowałem jej wartości z przykładu) i z niej korzystam przy odwzorowywaniu strony (w ramach treningu). Ale nie wiem jak mam zrobić tego nava żeby był taki jak u nich czyli: opcje wyboru rozciągnąć w tym navie aby były na całej szerokości, zrobić między kolejnymi opcjami odstęp, nie wiem jak by też zrobić height tego nava inaczej niż przez podanie dokładnej wartości (np.height:50px). A to przy skalowaniu strony psuje responsywność (chyba odpada), co więcej jezeli nie dodam dokładnego heightu, mam problem jak ustawić potem wartość dla a:hover tych linków wewnątrz menu, aby background-color podświetlenia był wysoki na wysokość navu. :/
Przepraszam jeżeli będzie coś niezrozumiałe... Kiepski ze mnie opisywator :) W razie pytań, o co mi chodzi pytajcie :D Pozdrawiam MIchał ;)
Wklejam header + jego formatowanie, może łatwiej bedzie zobaczyc jak to wyglada :)
<header> <!-- Struktura zaczynam od hedera w kotrym umieszcze tytul strony+logo i nawigacje -->
<div class="about"> <!--Czesc hedera górna z nazwa strony mottem i linkami -->
<h1>
<a href="/Grid">Grid by Example</a>
</h1>
<p>Everything you need to learn CSS Grid Layout</p>
</div>
<div class="twitter">
<div class="TwitterLink">Ptoszek Follow @rachelandrew </div>
<div class="TwitterInfo">36.4k followers</div>
</div>
<nav>
<ul>
<li><a href="">Start Here</a></li>
<li><a href="">Examples</a></li>
<li><a href="">Patterns</a></li>
<li><a href="">Video Tutorial</a></li>
<li><a href="">Resources</a></li>
</ul>
</nav>
</header>
header {
position:relative;
color: white;
background-color: rgba(0, 0, 0, 0.98);
background-image: url("/img/tlo.png");
h1 {
a {
color: white;
text-decoration: none;
}
a:hover{
color:white;
text-decoration:none;
}
}
.about{
line-height: 1.2;
padding: 100px 10% 40px;
}
.twitter{
position:absolute;
top:20px;
right:15px;
.TwitterLink{
background-color:#1b95e0;
border-radius:10px;
padding:5px;
display:inline-block;
}
.TwitterInfo{
background-color:white;
color:black;
padding:5px;
border-radius:10px;
display:inline-block;
}
}
nav {
background-color: rgba(207, 205, 205, 0.6);
ul {
list-style-type: none;
text-align:center;
li {
padding:10px 20px;
display:inline-block;
a {
display:block;
font-weight:bold;
color: black;
text-decoration: none;
transition: background-color .5s;
-webkit-transition: background-color .5s;
&:hover{
background-color:rgba(219, 219, 219, 0.6);
}
}
}
}
}
}
Ps. Sorrcia za formatowanie CSSa ale SCSSa używam no i zagnieżdżam jak tylko się da :P