Butoanele asezate in CSS Grid nu stau la mijloc vertical
Last Updated: May 31 2021 20:57, Started by
danctes
, May 31 2021 20:57
·
0

#1
Posted 31 May 2021 - 20:57

Salutare tuturor si multumesc celor care vor incerca sa ajute.
In navbar, care de fapt e primul element grid, incerc sa aliniez si sa stea la mijloc butoanele de navigare atunci cand redimensionez vertical viewport-ul. Logo-ul sta cuminte acolo in mijloc desi este supus acelorasi conditii. Se vede cum se misca butoanele doar in Inspect Element si zoom 50%. * { padding: 0; box-sizing: border-box; border-radius: 5px; text-align: center; } body { background: #F7DAD4; } .grid { display: grid; height: 98vh; grid-template-columns: 1fr 4fr 1fr; grid-template-rows: 0.5fr 1fr 3.5fr 1fr; grid-gap: 2vh; grid-template-areas: "nav nav nav" "header header header" "left main right" "footer footer footer"; } nav { background: #0A3409; color: #F7DAD4; grid-area: nav; position: relative; } .logo { float: left; position: relative; left: 10vw; top: 50%; transform: translate(0, -50%); } .logo a { color: #F7DAD4; text-decoration: none; font-family: arial black; font-size: 2em; } ul { float: right; list-style: none; } ul li { position: relative; display: inline; right: 10vw; top: 50%; transform: translate(0, -50%); border: 1px solid white; } li a { text-decoration: none; color: #F7DAD4; font-family: arial; font-weight: bold; font-size: 1.5em; transition: 0.2s; border-radius: initial; padding: 0 20px; } li a:hover { color: #0A3409; background-color: #F7DAD4; } header { background: #0A3409; color: #F7DAD4; grid-area: header; } .left { background: #FD3A0F; color: #F7DAD4; grid-area: left; } main { background: #559E54; color: #0A3409; grid-area: main; } .right { background: #17B814; color: #F7DAD4; grid-area: right; } footer { background: #0A3409; color: #F7DAD4; grid-area: footer; } @media only screen and (max-width: 768px) { .grid { grid-template-columns: 3fr 2fr; grid-template-rows: 0.5fr 1fr 1.75fr 1.75fr 1fr; grid-template-areas: "nav nav" "header header" "main left" "main right" "footer footer"; } } @media only screen and (max-width: 500px) { .grid { grid-template-columns: 1fr; grid-template-rows: 0.5fr 1fr 3.5fr 1fr 1fr 1fr; grid-template-areas: "nav" "header" "main" "left" "right" "footer"; } } <div class="grid"> <nav> <div class="logo"> <a href="#">danctes</a> </div> <ul> <li><a href="#">Funny</a></li> <li><a href="#">Relatable</a></li> <li><a href="#">Dark</a></li> <li><a href="#">Latest</a></li> <li><a href="#">Best</a></li> </ul> </nav> <header>Header</header> <div class="left">Left</div> <main>Main</main> <div class="right">Right</div> <footer>Footer</footer> </div> |
Anunturi
Bun venit pe Forumul Softpedia!
▶ 0 user(s) are reading this topic
0 members, 0 guests, 0 anonymous users