Jump to content
Sign in to follow this  
adam2350

Wyśrodkowanie elementu w trybie @media

Recommended Posts

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ę ☺️ 

Share this post


Link to post

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

Share this post


Link to post

@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.

 

Share this post


Link to post

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

Share this post


Link to post
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 

Share this post


Link to post

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

 

Share this post


Link to post
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

Edited by adam2350

Share this post


Link to post

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

Share this post


Link to post

@adam2350

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

 

zmień w css na to, powinno działac

Share this post


Link to post
<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

 

 

Share this post


Link to post

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...

  • Like 2

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Create a New Account. It’s free and easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  
×
×
  • Create New...