Chirurgia cranio-cerebrală minim invazivă
Tehnicile minim invazive impun utilizarea unei tehnologii ultramoderne. Endoscoapele operatorii de diverse tipuri, microscopul operator dedicat, neuronavigația, neuroelectrofiziologia, tehnicile avansate de anestezie, chirurgia cu pacientul treaz reprezintă armamentarium fără de care neurochirurgia prin "gaura cheii" nu ar fi posibilă. Folosind tehnicile de mai sus, tratăm un spectru larg de patologii cranio-cerebrale. www.neurohope.ro |
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
▶ 0 user(s) are reading this topic
0 members, 0 guests, 0 anonymous users