Сетка переполняется на div ниже - PullRequest
Новая
       14

Сетка переполняется на div ниже

0 голосов
/ 28 мая 2019

Я создаю персональный веб-сайт, чтобы похвастаться другими своими работами, и решил, что хочу создать сайт с нуля, чтобы освоить навык.Я закончил «раздел портфолио», в котором используется display: grid для создания нескольких плиток, каждая из которых представляет проект, над которым я работал.Он прекрасно работает и делает именно то, что я хотел бы.Я сейчас создаю раздел контактов, но область портфолио перекрывает созданный мной новый контактный элемент и не знаю, почему.Любая помощь приветствуется.

Фотография вопроса (линии, проходящие через ячейки протфолио, должны обозначать контакт и располагаться под портфелем. Я установил минимальную высоту контакта на 800 пикселей, и показывается только 150-200, поскольку она начинается в началеРаздел портфолио также. Site visual

У меня также есть модальные контейнеры, которые скрыты до нажатия кнопки, которая находится ниже окончательного кода контакта, но это, похоже, не проблемапоэтому я не публиковал.

Код: 

// ----------------------Portfolio Tile Styles----------------------//

.portfolio{
  width: 100%;
  background-color: rgb(245,245,245); 
}

//Styles for the portfolio buttons
.btn-container{
  margin-top:50px;
  background-color: rgb(245,245,245); 
  text-align: center;
  

}

//Styles to set all portfolio tiles to be initally hidden;
  .photogrammetry, .cv, .dev{
    display: none;
  }
  

.filter-btn{
  padding: 5px 20px;
  margin:10px 5px;
  border: 2px solid #e31b6d;
  color: #e31b6d;
  cursor: pointer;
  letter-spacing: 1px;
  background-color: white;
  text-transform: uppercase;
  transition:transform .3s;
  transition: color .3s;
  transition: background-color .3s;
}

.filter-btn:hover{
  color:white;
  background-color: #e31b6d;
}

.gallery-wrapper{
  position: absolute;
  width:100%;
  display: flex;
  background-color: rgb(245,245,245); 
}

// Portfolio Gallery Styles
.gallery{
  position: relative;
  width: 100%;
  padding: 0 7%;
  overflow: hidden;
  margin: 0% 5% 2% 5%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));

}

/* The "show" class is added to the filtered elements */
.show {
  display: block;
}

.card{
  overflow: hidden;  
  align-items: center;
  width: auto;
  height: 250px;
  margin: 5px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  background-size: cover;



}


.top-text{
  text-align: center;
  transform:translateY(-100px);
  transition:transform .3s;
}

.card-btn,{
  width:50%;
  padding: 5px;
  text-transform: uppercase;;
  letter-spacing: 1px;
  background: transparent;
  color: #e31b6d;
  opacity: 1;
  border: 2px solid #e31b6d;
  outline: none;
  cursor: pointer;
  transform:translateY(100px);
  transition:transform .3s;
  transition: color .3s;
  transition: background-color .3s;
}



.card:hover{
   .card-btn{
    transform: translateY(0px);
  }

  .top-text{
  transform:translateY(0px);
  }
}

.card-btn:hover{
    color:white;
    background-color: #e31b6d;
  }

//Tile Backgrounds
.AutoFP {
    background: url("../images/portfolioTile/AFP_Tile.png") center no-repeat; 
    background-size: cover;
  }
.fpl-1 {
    background: url(https://media.defense.gov/2013/Jul/16/2000032379/-1/-1/0/130628-F-DQ639-002.JPG) center no-repeat; 
    background-size: cover;
  }

.fpl-2 {
    background: url("../images/portfolioTile/IS_Tile.jpg") center no-repeat; 
    background-size: cover;

  }

.fpl-3 {
  background: url("../images/portfolioTile/Algae_Tile.png") center no-repeat;  
  background-size: cover;
}
.fpl-4 {
  background: url("../images/portfolioTile/AFP_Tile.jpg") center no-repeat;  
  background-size: cover;

}
.fpl-5 {
  background: url("../images/portfolioTile/UCW_Tile.png") center no-repeat;  
  background-size: cover;
}
.fpl-6 {

  background: url("../images/portfolioTile/Portrait_Tile.png") center no-repeat;  
  background-size: 100%;
  background-color: white;
}
.fpl-7 {
  background: url("../images/portfolioTile/CamCal_Tile.png") center no-repeat;  
  background-size: contain;
  background-color: white;
}

//Faded Tile Background
.AutoFP:hover{
    background: linear-gradient(rgba(255,255,255,0.7), rgba(255,255,255,0.7)),url("../images/portfolioTile/AFP_Tile.png") center no-repeat;
    background-size: cover;
}
.fpl-1:hover {
  background: linear-gradient(rgba(255,255,255,0.7), rgba(255,255,255,0.7)),url(https://media.defense.gov/2013/Jul/16/2000032379/-1/-1/0/130628-F-DQ639-002.JPG) center no-repeat; 
  background-size: cover;
}

.fpl-2:hover {
  background: linear-gradient(rgba(255,255,255,0.7), rgba(255,255,255,0.7)),url("../images/portfolioTile/IS_Tile.jpg") center no-repeat; 
  background-size: cover;
}

.fpl-3:hover {
  background: linear-gradient(rgba(255,255,255,0.7), rgba(255,255,255,0.7)),url("../images/portfolioTile/Algae_Tile.png") center no-repeat;  
  background-size: cover;
} 
.fpl-4:hover {
  background: linear-gradient(rgba(255,255,255,0.7), rgba(255,255,255,0.7)),url("../images/portfolioTile/AFP_Tile.jpg") center no-repeat;  
  background-size: cover;
}
.fpl-5:hover {
  background: linear-gradient(rgba(255,255,255,0.7), rgba(255,255,255,0.7)),url("../images/portfolioTile/UCW_Tile.png") center no-repeat;  
  background-size: cover;
}
.fpl-6:hover {

  background: linear-gradient(rgba(255,255,255,0.7), rgba(255,255,255,0.7)),url("../images/portfolioTile/Portrait_Tile.png") center no-repeat;  
  background-size: 100%;
  background-color: rgba(255,255,255,0.7);
}
.fpl-7:hover {
  background: linear-gradient(rgba(255,255,255,0.7), rgba(255,255,255,0.7)),url("../images/portfolioTile/CamCal_Tile.png") center no-repeat;  
  background-size: contain;
  background-color: rgba(255,255,255,0.7);
}
<!---------------------- Portfolio Gallery ---------------------->
	<!-- Where the tiles will go shocasing work -->
	<div class="portfolio" id="portfolio">
		<h1>Projects</h1>
		<div class = "btn-container">
			<button class="btn active filter-btn" onclick="filterSelection('all')">All</button>
			<button class="btn filter-btn" onclick="filterSelection('photogrammetry')">Photogrammetry</button>
			<button class="btn filter-btn" onclick="filterSelection('cv')">Computer Vision</button>
			<button class="btn filter-btn" onclick="filterSelection('dev')">Developer</button>

		</div>

		<div class = "gallery-wrapper">
			
			<div class = "gallery">
				<!-- Tile 1 -->
				<div class = "photogrammetry dev filterDiv">
					<div class = "AutoFP card ">
						<div class ="top-text">
							<h3 class = "card-heading">Automated FlightPlanning</h3>
							<span>Electron, Python</span>
						</div>
						<button class="card-btn" id ="AutoFP">Learn More</button>
					</div>
				</div>
				<!-- Tile 2 -->
				<div class = "dev cv filterDiv">
					<div class = "fpl-1 card ">
						<div class ="top-text">
							<h3 class = "card-heading">Change Detection</h3>
							<span>OpenCV, Python</span>
						</div>
						<button class="card-btn" id ="cd">Learn More</button>
					</div>
				</div>
				<!-- Tile 3 -->
				<div class = "dev cv filterDiv">
					<div class = "fpl-2 card ">
						<div class ="top-text">
							<h3 class = "card-heading">Image Stitching</h3>
							<span>C++, OpenCV</span>
						</div>
						<button class="card-btn" id ="imgStitch">Learn More</button>
					</div>
				</div>
				<!-- Tile 4 -->
				<div class = "dev cv filterDiv">
					<div class = "fpl-3 card " >
						<div class ="top-text">
							<h3 class = "card-heading">Algae Detection</h3>
							<span>OpenCV, Python</span>
						</div>
						<button class="card-btn" id ="AlgDec">Learn More</button>
					</div>
				</div>
				<!-- Tile 5 -->
				<div class = "photogrammetry filterDiv">
					<div class = "fpl-4 card ">
						<div class ="top-text">
							<h3 class = "card-heading">Aerial 3D Model</h3>
							<span>DJIFlightPlanner, MetaShape  </span>
						</div>
						<button class="card-btn" id ="A3DM">Learn More</button>
					</div>
				</div>
				<!-- Tile 6 -->
				<div class = "dev filterDiv">
					<div class = "fpl-5 card ">
						<div class ="top-text">
							<h3 class = "card-heading">University Course Website</h3>
							<span>HTML, CSS</span>
						</div>
						<button class="card-btn" id ="UCW">Learn More</button>
					</div>
				</div>
				<!-- Tile 7 -->
				<div class = "photogrammetry filterDiv">
					<div class = "fpl-6 card ">
						<div class ="top-text">
							<h3 class = "card-heading">University Course Website</h3>
							<span>Research Paper</span>
						</div>
						<button class="card-btn" id ="RP">Learn More</button>
					</div>
				</div>
				<!-- Tile 8 -->
				<div class = "photogrammetry filterDiv">
					<div class = "fpl-7 card ">
						<div class ="top-text">
							<h3 class = "card-heading">Camera Calibration of "Prosumer" drones</h3>
							<span>Journal Article</span>
						</div>
						<button class="card-btn" id ="JA">Learn More</button>
					</div>
				</div>
	   		</div>
		</div>
	</div>
	

	<!---------------------- Contact Page ---------------------->
	<div>
		<div class = contact-wrapper>
			<h1>CONTACT</h1>
		</div>
	</div>
...