adam2350

Wyśrodkowanie elementu w trybie @media

14 postów w tym temacie

Siemka !

Jak mam wyśrodkować element (jak zimniejsze stronę) ten zielony. Tak aby menu ułożyło się jedno pod drugim a na środku było zielone pole z napisem. 

<nav>
<ul class="lewy">
<li>to na srodek</li>
</ul>
<ul class="prawy"> 
<li><a href="#">Home</a></li>
<li><a href="#">Oferta</a></li>
<li><a href="#">Kontakt</a></li>
<li><a href="#">Panel Klineta</a></li>
</ul>
</nav>
*{
  margin: 0;
  font-family: 'Open Sans', sans-serif;
}
nav{
  background-color: #363A3F;
  color: white;
  margin: 0;
  padding: 0;
}
li{
  list-style-type: none;
}
.lewy li{
    color: #ffffff;
    background-color: #5cb85c;
    float: left;
    padding: 20px 15px;
    font-size: 25px;
    line-height: 20px;
    font-weight: bold;  
    height: 20px;
}
.prawy{
  text-align: right;
  	font-size:20px;
	max-height:40px;
	padding:10px;
	margin:0;
	line-height:200%;
}
.prawy li{
  display:inline-block;
	padding-left: 20px;
	padding-right:20px;
}
.prawy a{
  text-decoration: none;
	color: #ffffff;
	transition: all .2s ease-in-out;
}
.prawy a:hover{
  color:#D60202;
}
@media (max-width: 680px){
	.prawy{
  font-size:19px;
	min-height:40px;
	max-height: 300px;
	padding:10px;
	margin:0;
	line-height:200%;
		text-align: center;
}
.prawy li{
	display: flex;
	flex-direction: column;
	padding-left: 20px;
	padding-right:20px;
	border-top: 1px solid;
}
	.lewy li{
    padding: 20px 15px;
    font-size: 25px;
    line-height: 20px; 
}
}

Dziękuję :) 

Udostępnij tego posta


Odnośnik do posta
Udostępnij na stronach

Naszkicuj to, bo mało zrozumiałem z opisu.

Udostępnij tego posta


Odnośnik do posta
Udostępnij na stronach

@Mativve Przerobiłem to po swojemu ale nie działa mi animacja przejścia (usunąłem przed dodaniem), pole zielone wychodzi po za menu zaraz po zmniejszeniu strony.

 

Udostępnij tego posta


Odnośnik do posta
Udostępnij na stronach
8 minut temu, Mativve napisał:

@adam2350 ale co tam w moim kodzie przerabiać? Dałem Ci gotowy kod

Powiem że zbytnio mi on nie leży dokładnie zielone wystaje po za menu 

Udostępnij tego posta


Odnośnik do posta
Udostępnij na stronach

@adam2350 wyślij mi na PW całą stronę bo nie ma opcji żeby cokolwiek wystawało

 

Udostępnij tego posta


Odnośnik do posta
Udostępnij na stronach
4 minuty temu, Mativve napisał:

@adam2350 wyślij mi na PW całą stronę bo nie ma opcji żeby cokolwiek wystawało

 

to jest cała strona 

Zrzut ekranu (2)_LI.jpg

Edytowane przez adam2350

Udostępnij tego posta


Odnośnik do posta
Udostępnij na stronach

Masz to wrzucone gdzieś na serwer czy lokalnie? Nie ma opcji żeby coś wychodziło

Udostępnij tego posta


Odnośnik do posta
Udostępnij na stronach

@adam2350

nav a, #logo{
  padding:1em;
  overflow:hidden;
}

 

zmień w css na to, powinno działac

Udostępnij tego posta


Odnośnik do posta
Udostępnij na stronach
<head>
<link type="text/css" rel="stylesheet" href="1.css" />
</head>
<nav>
<ul class="lewy">
<li>to nie działa</li>
</ul>
<ul class="prawy"> 
<li><a href="#">Home</a></li>
<li><a href="#">Oferta</a></li>
<li><a href="#">Kontakt</a></li>
<li><a href="#">Panel Klineta</a></li>
</ul>
</nav>

css

*{
  margin: 0;
  font-family: 'Open Sans', sans-serif;
}
nav{
  background-color: #363A3F;
  color: white;
}
li{
  list-style-type: none;
}
.lewy{
    color: #ffffff;
    background-color: #5cb85c;
    float: left;
    padding: 20px 15px;
    font-size: 25px;
    line-height: 20px;
    font-weight: bold;  
    height: 20px;
}
.prawy{
  text-align: right;
  font-size:20px;
	max-height:40px;
	padding:10px;
	margin:0;
	line-height:200%;
}
.prawy li{
  display:inline-block;
	padding-left: 20px;
	padding-right:20px;
}
.prawy a{
  text-decoration: none;
	color: #ffffff;
	transition: all .2s ease-in-out;
}
.prawy a:hover{
  color:#D60202;
}
@media (max-width: 680px){
	.lewy {   
	text-align: center;
		width: 100%;
	}
	  .lewy li:first-child {
    margin-right: 0;
	}
	.prawy {
	min-height: 100px;	
	max-height: 250px;
	}
	.prawy li{
	display: flex;
	flex-direction: column;
  text-align:center;
	}
	 nav ul li:first-child {
    margin-right: 0;
  }
}

1 minutę temu, Mativve napisał:

@adam2350

nav a, #logo{
  padding:1em;
  overflow:hidden;
}

 

zmień w css na to, powinno działac

ja to wszystko pozmieniałem

 

 

Udostępnij tego posta


Odnośnik do posta
Udostępnij na stronach

Dodaj:

* {
  box-sizing: border-box;
}

I popraw stylowanie. To powyżej, to już standard na witrynach. Aż dziw, że nie ma tego jako domyślny argument przeglądarek...

2 osoby lubią to

Udostępnij tego posta


Odnośnik do posta
Udostępnij na stronach

Żeby dodać komentarz, musisz założyć konto lub zalogować się

Tylko zarejestrowani użytkownicy mogą dodawać komentarze

Rejestracja

Załóż nowe konto. To bardzo proste!


Zaloguj się

Posiadasz już konto? Zaloguj się tutaj.


Zaloguj się teraz