Jump to content

SUBIECTE NOI
« 1 / 5 »
RSS
problema adresa gmail cu punct

Cadastru gratuit imobil?

Invataturile lui nea` Goe Bas(gra...

Teltonika Romania - legit?
 Grup whatsapp bloc

Acasa TV devine televiziune gener...

[Recomandare] Caut scara de 7 m (...

Procedura Rabla 2024
 "File Explorer" pentru un...

Inel de logodna

Ati auzit de scandalul in care es...

Iaz 12 m3
 Recomandare masina de tuns gazon

Recomandare rulouri/rolete/jaluze...

Zgarda capuse /pureci + hrana

Scula taiere plastic
 

Butoanele asezate in CSS Grid nu stau la mijloc vertical

- - - - -
  • Please log in to reply
No replies to this topic

#1
danctes

danctes

    Active Member

  • Grup: Members
  • Posts: 1,030
  • Înscris: 08.02.2009
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

Second Opinion Second Opinion

Folosind serviciul second opinion ne puteți trimite RMN-uri, CT -uri, angiografii, fișiere .pdf, documente medicale.

Astfel vă vom putea da o opinie neurochirurgicală, fără ca aceasta să poată înlocui un consult de specialitate. Răspunsurile vor fi date prin e-mail în cel mai scurt timp posibil (de obicei în mai putin de 24 de ore, dar nu mai mult de 48 de ore). Second opinion – Neurohope este un serviciu gratuit.

www.neurohope.ro

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

Forumul Softpedia foloseste "cookies" pentru a imbunatati experienta utilizatorilor Accept
Pentru detalii si optiuni legate de cookies si datele personale, consultati Politica de utilizare cookies si Politica de confidentialitate