I would like to have these images on top of the title and that their size affects the size of the div they are in to work something like in this website: https://nomadgoods.com/collections/cases
I have managed to put a picture one above the other and make the hover function work but making that with "position: absolute;" will make it so that the images dont afect any othe elemets, Is there any way of having one on top of the other with no "position: absolute;" or that even if they use these the still will afect the rest of the elements.
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: auto;
}
body {
margin: 0px;
-webkit-font-smoothing: antialiased;
background: #f2f2f2;
color: #000;
font-family: Gotham-Bold,sans-serif;
font-size: 16px;
font-weight: 400;
letter-spacing: 0;
line-height: 0.5;
}
.nav {
width: 100%;
min-height: 60px;
max-height: 60px;
border: 0px;
position: absolute;
justify-content: top;
}
.banner-box {
margin-top: 0px;
width: 100%;
height: 100%;
max-height: 550px;
min-height: 200px;
max-width: auto;
min-width: 768px;
background-image: url(assets/img/Desktop_1.jpg);
background-position: var(--backgroundPosition);
background-repeat: no-repeat;
background-size: cover;
opacity: 1;
/* Title alignment*/
align-items: center;
color: #fff;
display: flex;
flex-direction: column;
height: 100%;
justify-content: center;
margin: auto;
padding-bottom: 10px;
}
.banner-title {
font-family: Gotham-Bold,sans-serif;
font-size: 78px;
font-weight: 800;
letter-spacing: -.02em;
line-height: 0.3px;
text-align: center;
}
.banner-subtitle {
font-family: Gotham-Bold,sans-serif;
font-size: 30px;
font-weight: 400;
letter-spacing: -.02em;
line-height: 1;
text-align: center;
}
.body-w {
margin-left: 5%;
margin-right: 5%;
}
/* Product section */
.product-container {
margin-left: 2.5%;
margin-right: 2.5%;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.product-container *{
margin-top: 10px;
margin-left: 5px;
margin-right: 5px;
margin-bottom: 10px;
}
.product-box {
max-width: auto;
min-width: 150px;
padding: 5px;
background-color: #fff;
border-radius: 5px;
position: relative;
overflow: hidden;
}
.product-img {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
background-color: #f3f3f3;
transition: opacity .3s ease;
max-width: 100%;
max-height: 100%;
object-fit: contain;
position: absolute;
top: 0;
left: 0;
}
.product-img.is-visible {
opacity: 1;
z-index: 1;
}
.product-img.is-visible:hover{
opacity: 0;
z-index: 2;
}
.color-container *{
margin-left: 1px;
margin-right: 1px;
}
.product-color {
min-height: 20px;
min-width: 20px;
border: 2.5px;
border-style: solid;
border-color: #c1c1c1;
border-radius: 15px;
}
<html lang="en">
<head>
<!-- meta data -->
<meta name="author" content="Rafa Ponce Vivancos">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- meta data end -->
<title>Testing</title>
<link href="css/testing.css" rel="stylesheet">
</head>
<body>
<!-- Body-->
<div class="body-w">
<!-- product section 1 -->
<div>
<!-- product containers -->
<div>
<div class="product-container">
<!-- product box -->
<div class="product-box">
<div>
<img src="https://res.cloudinary.com/shogun-frontend/image/fetch/f_auto,q_auto,c_limit,w_360/https://f.shgcdn.com/885a5c28-be17-44a2-8c0a-b013e03d4e29/" class="product-img is-visible">
<img src="https://res.cloudinary.com/shogun-frontend/image/fetch/f_auto,q_auto,c_limit,w_360/https://f.shgcdn.com/9b3222b9-1125-42ca-a623-5b64903835e1/" class="product-img ">
</div>
<h3>Product name</h3>
<p>Product specifications</p>
<div class="color-container" style="display: flex;">
<button class="product-color" style="background-color: black;"></button>
<button class="product-color" style="background-color: rgb(60,33,21);"></button>
<button class="product-color" style="background-color: rgb(105,77,59);"></button>
</div>
</div>
<!-- product box end -->
</div>
</div>
</div>
</div>
</body>
</html>
To solve this you can just set one element's position to absolute and the other's relative.
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: auto;
}
body {
margin: 0px;
-webkit-font-smoothing: antialiased;
background: #f2f2f2;
color: #000;
font-family: Gotham-Bold,sans-serif;
font-size: 16px;
font-weight: 400;
letter-spacing: 0;
line-height: 0.5;
}
.nav {
width: 100%;
min-height: 60px;
max-height: 60px;
border: 0px;
position: absolute;
justify-content: top;
}
.banner-box {
margin-top: 0px;
width: 100%;
height: 100%;
max-height: 550px;
min-height: 200px;
max-width: auto;
min-width: 768px;
background-image: url(assets/img/Desktop_1.jpg);
background-position: var(--backgroundPosition);
background-repeat: no-repeat;
background-size: cover;
opacity: 1;
/* Title alignment*/
align-items: center;
color: #fff;
display: flex;
flex-direction: column;
height: 100%;
justify-content: center;
margin: auto;
padding-bottom: 10px;
}
.banner-title {
font-family: Gotham-Bold,sans-serif;
font-size: 78px;
font-weight: 800;
letter-spacing: -.02em;
line-height: 0.3px;
text-align: center;
}
.banner-subtitle {
font-family: Gotham-Bold,sans-serif;
font-size: 30px;
font-weight: 400;
letter-spacing: -.02em;
line-height: 1;
text-align: center;
}
.body-w {
margin-left: 5%;
margin-right: 5%;
}
/* Product section */
.product-container {
margin-left: 2.5%;
margin-right: 2.5%;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.product-container *{
margin-top: 10px;
margin-left: 5px;
margin-right: 5px;
margin-bottom: 10px;
}
.product-box {
max-width: auto;
min-width: 150px;
padding: 5px;
background-color: #fff;
border-radius: 5px;
position: relative;
overflow: hidden;
}
.product-img {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
background-color: #f3f3f3;
transition: opacity .3s ease;
max-width: 100%;
max-height: 100%;
object-fit: contain;
margin: 0;
}
.product-img:not(.is-visible) {
position: absolute;
}
.product-img.is-visible {
display: block;
opacity: 1;
position: relative;
z-index: 1;
}
.product-img.is-visible:hover{
opacity: 0;
}
.color-container *{
margin-left: 1px;
margin-right: 1px;
}
.product-color {
min-height: 20px;
min-width: 20px;
border: 2.5px;
border-style: solid;
border-color: #c1c1c1;
border-radius: 15px;
}
<html lang="en">
<head>
<!-- meta data -->
<meta name="author" content="Rafa Ponce Vivancos">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- meta data end -->
<title>Testing</title>
<link href="css/testing.css" rel="stylesheet">
</head>
<body>
<!-- Body-->
<div class="body-w">
<!-- product section 1 -->
<div>
<!-- product containers -->
<div>
<div class="product-container">
<!-- product box -->
<div class="product-box">
<div>
<img src="https://res.cloudinary.com/shogun-frontend/image/fetch/f_auto,q_auto,c_limit,w_360/https://f.shgcdn.com/9b3222b9-1125-42ca-a623-5b64903835e1/" class="product-img ">
<img src="https://res.cloudinary.com/shogun-frontend/image/fetch/f_auto,q_auto,c_limit,w_360/https://f.shgcdn.com/885a5c28-be17-44a2-8c0a-b013e03d4e29/" class="product-img is-visible">
</div>
<h3>Product name</h3>
<p>Product specifications</p>
<div class="color-container" style="display: flex;">
<button class="product-color" style="background-color: black;"></button>
<button class="product-color" style="background-color: rgb(60,33,21);"></button>
<button class="product-color" style="background-color: rgb(105,77,59);"></button>
</div>
</div>
<!-- product box end -->
</div>
</div>
</div>
</div>
</body>
</html>
You are making position of both images to absolute this is causing the problem . Make one image absolute and position it above the other image. When you hover over image at the top disappears and image in the background become visible.
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: auto;
}
body {
margin: 0px;
-webkit-font-smoothing: antialiased;
background: #f2f2f2;
color: #000;
font-family: Gotham-Bold,sans-serif;
font-size: 16px;
font-weight: 400;
letter-spacing: 0;
line-height: 0.5;
}
.nav {
width: 100%;
min-height: 60px;
max-height: 60px;
border: 0px;
position: absolute;
justify-content: top;
}
.banner-box {
margin-top: 0px;
width: 100%;
height: 100%;
max-height: 550px;
min-height: 200px;
max-width: auto;
min-width: 768px;
background-image: url(assets/img/Desktop_1.jpg);
background-position: var(--backgroundPosition);
background-repeat: no-repeat;
background-size: cover;
opacity: 1;
/* Title alignment*/
align-items: center;
color: #fff;
display: flex;
flex-direction: column;
height: 100%;
justify-content: center;
margin: auto;
padding-bottom: 10px;
}
.banner-title {
font-family: Gotham-Bold,sans-serif;
font-size: 78px;
font-weight: 800;
letter-spacing: -.02em;
line-height: 0.3px;
text-align: center;
}
.banner-subtitle {
font-family: Gotham-Bold,sans-serif;
font-size: 30px;
font-weight: 400;
letter-spacing: -.02em;
line-height: 1;
text-align: center;
}
.body-w {
margin-left: 5%;
margin-right: 5%;
}
/* Product section */
.product-container {
margin-left: 2.5%;
margin-right: 2.5%;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.product-container *{
margin-top: 10px;
margin-left: 5px;
margin-right: 5px;
margin-bottom: 10px;
}
.product-box {
max-width: auto;
min-width: 150px;
padding: 5px;
background-color: #fff;
border-radius: 5px;
position: relative;
overflow: hidden;
}
.product-img {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
background-color: #f3f3f3;
transition: opacity .3s ease;
max-width: 100%;
max-height: 100%;
object-fit: contain;
position: relative;
top: 0;
left: 0;
}
.main-image
{
position:absolute;
margin-top:6.5%;
margin-left:4%;
}
.product-img.is-visible {
opacity: 1;
z-index: 1;
}
.product-img.is-visible:hover{
opacity: 0;
z-index: 2;
}
.color-container *{
margin-left: 1px;
margin-right: 1px;
}
.product-color {
min-height: 20px;
min-width: 20px;
border: 2.5px;
border-style: solid;
border-color: #c1c1c1;
border-radius: 15px;
}
<html lang="en">
<head>
<!-- meta data -->
<meta name="author" content="Rafa Ponce Vivancos">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- meta data end -->
<title>Testing</title>
<link href="css/testing.css" rel="stylesheet">
</head>
<body>
<!-- Body-->
<div class="body-w">
<!-- product section 1 -->
<div>
<!-- product containers -->
<div>
<div class="product-container">
<!-- product box -->
<div class="product-box">
<div>
<img src="https://res.cloudinary.com/shogun-frontend/image/fetch/f_auto,q_auto,c_limit,w_360/https://f.shgcdn.com/9b3222b9-1125-42ca-a623-5b64903835e1/" class="product-img ">
<img src="https://res.cloudinary.com/shogun-frontend/image/fetch/f_auto,q_auto,c_limit,w_360/https://f.shgcdn.com/885a5c28-be17-44a2-8c0a-b013e03d4e29/" class="product-img main-image is-visible">
</div>
<h3>Product name</h3>
<p>Product specifications</p>
<div class="color-container" style="display: flex;">
<button class="product-color" style="background-color: black;"></button>
<button class="product-color" style="background-color: rgb(60,33,21);"></button>
<button class="product-color" style="background-color: rgb(105,77,59);"></button>
</div>
</div>
<!-- product box end -->
</div>
</div>
</div>
</div>
</body>
</html>
Related
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css">
<title>Contact Us</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
.hero {
width: 100%;
height: 100vh;
background-image: linear-gradient(black 0%, black 34%, white 34%, white 100%);
position: relative;
padding: 0 5%;
display: flex;
align-items: center;
justify-content: center;
overflow: auto;
}
nav {
width: 100%;
position: absolute;
top: 0;
left: 0;
padding: 20px 8%;
display: flex;
align-items: center;
justify-content: space-between;
}
nav .logo {
width: 100px;
margin-left: -80px;
}
nav ul li {
list-style: none;
display: inline-block;
margin-left: 40px;
}
nav ul li a {
text-decoration: none;
color: #fff;
font-size: 17px;
}
.content {
text-align: left;
}
.content h1{
font-size: 70px;
color: rgb(255, 255, 255);
font-weight: 600;
transition: 0.5s;
margin-bottom: 700px;
}
.content h1:hover{
-webkit-text-stroke: 2px #fff;
color: transparent;
}
.banner {
position: relative;
width: 90%;
margin: 50px auto;
}
.heading {
position: absolute;
top: 50%;
width: 50%;
margin-top: -400px;
margin-left: 650px;
text-align: center;
font-size: 3rem;
}
.food{
width: 400px;
position:absolute;
margin-top: -500px;
margin-left: 580px;
opacity: 0.4;
transition: opacity .3s ease;
background-color: rgba(0,0,0,0.6);
}
.contact-info{
display: inline;
width: 100%;
max-width: 1200px;
align-items: center;
justify-content: center;
padding: 0 20px;
margin-top: 320px;
}
.card{
background: #fff;
padding: 0 20px;
margin: 0 10px;
width: calc(33% - 20px);
height: 200px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: rgb(0, 0, 0);
cursor: pointer;
}
.card-icon{
font-size: 28px;
background: #ff6348;
width: 60px;
height: 60px;
text-align: center;
line-height: 60px !important;
border-radius: 50%;
transition: 0.3s linear;
}
.card:hover .card-icon{
background: none;
color: #ff6348;
transform: scale(1.6);
}
.card p{
margin-top: 20px;
font-weight: 300;
letter-spacing: 2px;
max-height: 0;
opacity: 0;
transition: 0.3s linear;
}
.card:hover p{
max-height: 40px;
opacity: 1;
}
.contact{
position: relative;
min-height: 100vh;
padding: 50px 100px;
display: inline;
justify-content: center;
align-items: center;
flex-direction: column;
}
.contactform {
width: 500px;
padding: 10px;
background: #fff;
margin-top: 280px;
}
.contatform h2 {
font-size: 30px;
color: #333;
font-weight: 500;
}
.contactform .inputBox{
position: relative;
width: 100%;
margin-top: 10px;
}
.contactform .inputBox input,
.contactform .inputBox textarea{
width: 100%;
padding: 5px 0;
font-size: 16px;
margin: 10px 0;
border: none;
border-bottom: 2px solid #333;
outline: none;
resize: none;
}
.contactform .inputBox input [type="submit"]
{
width: 100px;
background: #00bcd4;
color: #fff;
border: none;
cursor: pointer;
padding: 10px;
font-size: 18px;
}
.map iframe {
width: 300px;
height: 400px;
display: flex;
flex-direction: row;
margin-top: 100px;
}
#media (max-width: 991px)
{
.contact{
padding:50px;
}
.container {
flex-direction: column;
}
.container .contact-info2 {
margin-bottom: 40PX;
}
.container .contact-info2,
.contatform{
width: 100%;
}
}
#media screen and (max-width:800px) {
.contact-info{
flex-direction: column;
}
.card{
width: 100%;
max-width: 300px;
margin: 10px 0;
}
}
footer {
text-align: center;
background-color: rgb(29, 17, 17);
color: #fff;
padding: 12px;
position: absolute;
bottom: 0;
width: 100%;
margin-top: 40px;
}
</style>
</head>
<body>
<div class="hero">
<nav>
<img src="logo.png" class="logo">
<ul>
<li>Home</li>
<li>Photos</li>
<li>Menu</li>
<li>Contact Us</li>
</ul>
</nav>
<div class="content">
<div class ="row">
<div class = "banner">
<img class="food" src="food.jpeg" alt="[food]">
<h1 class ="heading">Contact Us</h1>
</div>
</div>
</div>
<div class="contact-info">
<div class="card">
<i class="card-icon far fa-envelope"></i>
<p>Mehmet.under#gmail.com</p>
</div>
<div class="card">
<i class="card-icon fas fa-phone"></i>
<p>+4799221199</p>
</div>
<div class="card">
<i class="card-icon fas fa-map-marker-alt"></i>
<p>Karl Johans gate 5, 0154 OSLO</p>
</div>
</div>
<div class="map">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2000.2351438173973!2d10.
746176751774849!3d59.911644771148914!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x46416e89e0be32c5%
3A0xa9aad198e39ddef9!2sKarl%20Johans%20gate%205%2C%200154%20Oslo!5e0!3m2!1sno!2sno!4v1667850923403!5m2!1sno!2sno"
style="border:0;"
allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade">
</iframe>
</div>
<section class="contact">
<div class="contactform">
<form action="">
<h2>Send Message</h2>
<div class="inputBox">
<input type="text" name="" placeholder= "Full Name" required="required">
</div>
<div class="inputBox">
<input type="text" name="" placeholder="Email" required="required">
</div>
<div class="inputBox">
<textarea placeholder="Type Your Message" required="required"></textarea>
</div>
<div class="inputBox">
<input type="submit" name="" value="Send">
</div>
</div>
</form>
</section>
<footer>
<p>Just Turkey Grill is a 501c(3)
organization, and your contributions are tax
deductible.</p>
<p id="copyright">Copyright © 2022 by the Just Turkey Grill.
Questions?
<a href="mailto:Mehmet.under#gmail.com"
>Mail Mehmet Under.</a></p>
</footer>
<!-- footer -->
</div>
</body>
</html>
I did nothing special. The first second it worked and the other, it stopped being clickable. I need help straight away because I have to give in this task about 2 hours. The only thing I changed was the section area, but nothing more. I just changed the form and added back the map, and changed and added more css code.
Just add z-index: 1 to your navbar and should be work
With the inspector of your browser you can see that the "contact" section goes over the navbar, you have to put a higher z-index on the navbar so that it goes over it
I am doing a simple homepage with only HTML and CSS, and I have a problem that it shows too much space underneath that is not coming from any of the divs that I tested.
What could be causing it?
I tried to remove the negative top position and add a displa:flex to the main container but it did not help either.
Here is my code snippet:
#font-face {
font-family: 'open-sans';
src: url('/font/opensans-variablefont_wdthwght-webfont.woff2') format('woff2'),
url('/font/opensans-variablefont_wdthwght-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
min-height: 100%;
width: auto;
}
.logo {
width: 100%;
}
button {
display: inline-block;
position: relative;
top: -45px;
width: 222px;
height: 35px;
padding: 5px 14px 0 18px;
background-color: #a2dc3c;
background-image: linear-gradient(to bottom, #a2dc3c 0%, #81b427 100%);
border: none;
color: #fff;
border-radius: 5px;
font-size: 16px;
font-weight: 700;
cursor: pointer;
font-family: open-sans, sans-serif;
}
.main {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.main-content {
text-align: center;
font-family: open-sans, sans-serif;
font-size: 15px;
padding: 0 20px;
line-height: 30px;
}
a { color: #80b529 }
.content {
margin-top: 30px;
}
.coy-logo {
position: relative;
display: inline-flex;
max-width: 200px;
top: -10px;
}
.tavarlin-logo {
position: relative;
margin: auto;
height: auto;
top: -50px;
max-width: 180px;
}
.keto-logo {
position: relative;
height: auto;
top: -50px;
max-width: 140px;
}
.bottom-logos {
display: flex;
flex-direction: column;
justify-content: center;
}
.footer-nav {
width: 80%;
}
.footer-nav li {
padding-inline: 4px;
}
.bottom-nav {
list-style: none;
display: flex;
justify-content: end;
margin-top: 16px;
margin-bottom: 16px;
}
h1 {
margin-bottom: 20px;
font-size: 25px;
line-height: 16px;
}
h2 {
font-size: 20px;
margin-top: 40px;
margin-bottom: 40px;
}
h4 {
color: black;
margin-bottom: 12px;
font-size: 20px;
}
h5 {
font-size: 16px;
}
p {
display: block;
margin-bottom: 24px;
}
li {
padding-left: 20px;
margin-bottom: 10px;
}
.impressum-content {
font-size: 15px;
line-height: 24px;
margin: 0 auto;
padding: 0 22px;
position: relative;
width: 80%;
}
.impressum-content .footer-nav,
.datenschutz-content .footer-nav
{
width: 100%;
}
.content-area {
margin-top: 25px;
}
.datenschutz-content {
font-size: 17px;
display: block;
line-height: 24px;
margin: 0 auto;
padding-left: 22px;
list-style-position: inside;
width: 75%;
}
.datenschutz-text {
margin-top: 25px;
}
hr {
border-top: 1px solid #a2dc3c;
}
header.header {
display: flex;
justify-content: center;
align-items: center;
margin-inline: auto;
}
/* Bigger screens */
#media screen and (min-width: 800px) {
.logo {
transform: translate(0px, 30px);
}
.main-content {
font-size: 24px;
line-height: 50px;
}
.content {
margin-top: 55px;
margin-bottom: 20px;
}
.bottom-logos {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
}
.coy-logo {
max-width: 400px;
margin-top: -10px;
}
.tavarlin-logo {
max-width: 328px;
margin: 0;
}
.keto-logo {
max-width: 300px;
}
button {
display: inline-block;
width: 400px;
padding: 8px 12px 8px 12px;
top: -15px;
margin-bottom: 40px;
background-color: #a2dc3c;
background-image: linear-gradient(to bottom, #a2dc3c 0%, #81b427 100%);
border: none;
color: #fff;
border-radius: 5px;
position: relative;
font-size: 20px;
font-weight: 700;
cursor: pointer;
font-family: open-sans, sans-serif;
}
}
/* Landscape */
#media screen and (min-width: 480px){
.logo {
display: inline-block;
text-align: center;
max-width: 320px;
transform: translate(0px, 8px);
}
.img-container {
display: inline-flex;
flex-direction: row;
margin: 0 40px;
max-width: 800px;
}
button {
top: -35px;
width: 300px;
height: 35px;
}
}
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Nu Prevento</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/normalize.css">
<link rel="stylesheet" type="text/css" media="screen" href="css/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
</head>
<body>
<div class="main">
<div class="main-content">
<a href="https://www.gesundheitsmanufaktur.de/marken/nuprevento" target="_blank" rel="nofollow noopener">
<img src="img/logonuprevento.png" alt="Nuprevento" class="logo">
</a>
<div class="btn-link">
<form action="https://www.gesundheitsmanufaktur.de/marken/nuprevento" method="get">
<button type="submit" formtarget="_blank">Produkte im Partnershop</button>
</form>
</div>
<p>Die Homepage der NuPrevento GmbH befindet sich in der Überarbeitung.</p>
<p>
Schreiben Sie uns bei Fragen oder Anregungen gern eine Mail an:
<a href='mailto:in%66o#nu%70re%76en%74o.co%6D'>
info#nuprevento.com</a>
</p>
<p class="content">Besuchen Sie in der Zwischenzeit gern unsere Partnerwebseiten:</p>
<div class="content">
<a href="https://www.dr-coy.info/" target="_blank">
<img src="img/logojohannescoy.png" class="coy-logo" alt="Johannes Coy">
</a>
</div>
<div class="bottom-logos">
<a href="https://www.tavarlin.com/" target="_blank">
<img src="img/logotavarlin.png" class="tavarlin-logo" alt="Tavarlin">
</a>
<a href="https://www.keto-drink.com/" target="_blank">
<img src="img/ketodrink.svg" class="keto-logo" width="300" height="300" alt="Keto-Drink">
</a>
</div>
</div>
<div class="footer-nav">
<hr>
<ul class="bottom-nav">
<li>Impressum</li>
<li>Datenschutzerklärung</li>
</ul>
</div>
</div>
</body>
</html>
How can I make this textarea (the one with class="proxi-output" responsive?
When I try to resize the page it overlaps div (class="resi-gen") and it breaks the whole web.
*{
font-family: 'Montserrat', sans-serif;
}
body,
html{
margin: 0px;
padding: 0px;
background-image: url(../img/agreya-bg.png);
background-repeat: no-repeat;
background-size: cover;
background-color: #0E0E0E;
}
.side-panel{
background-color: #050707;
height: 100vh;
width: 250px;
margin: 0px;
z-index: 10;
position: absolute;
}
.logo{
margin: 0px;
color: #FFFFFF;
padding: 35px 20%;
letter-spacing: 2px;
}
.sub-pages{
text-align: center;
justify-content: center;
margin: 150px auto;
}
.sub-pages a{
display: block;
font-size: 20px;
text-decoration: none;
color: #FFFFFF;
margin: 45px 0px;
}
.sub-pages a:hover{
color: #E1E777;
}
#current{
color: #E1E777;
}
.heading{
color: #FFFFFF;
text-align: center;
font-weight: 500;
letter-spacing: 2px;
}
.wrapper{
float: right;
width: 100vw;
height: 100vh;
margin: 0px;
}
.resi-gen{
position: relative;
background-color: #050707;
margin-top: 20%;
width: 70%;
height: 45%;
border: 2px solid transparent;
border-radius: 50px;
/* width: 1100px;
height: 400px; */
margin-left: 290px;
}
.resi-gen h2{
display: inline-block;
color: #FFFFFF;
margin-top: 20px;
margin-left: 30px;
font-weight: 500;
letter-spacing: 1.5px;
}
#proxi-output{
position: absolute;
margin-top: 2%;
margin-left: 5%;
height: 85%;
width: 70%;
resize: none;
background-color: #818181;
cursor: pointer;
outline: none;
border: 2px solid transparent;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/residental.css">
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/29441bec37.js" crossorigin="anonymous"></script>
<title>Agreya - Register</title>
</head>
<body>
<div class="wrapper">
<div class="side-panel">
<h1 class="logo">AGREYA</h1>
<div class="sub-pages">
<a id="current" href="residental.html">Residental</a>
Datacenter
Purchase
Settings
</div>
</div>
<h1 class="heading">Residental proxies</h1>
<div class="resi-gen">
<h2>Generate Proxies</h2>
<textarea id="proxi-output" name="output"></textarea>
</div>
</div>
</body>
</html>
Problem: I have to arrange these LI in a very specific way. Here is the image:
but I can't seem to break the boxes up. I have tried Flexbox, ClearFix, etc... no luck.
Please look at the picture so you can see how I am suppose to make this look.
* {
box-sizing: border-box;
}
a {
color: #777777;
}
html, body {
height: 100%;
}
#wrap {
margin: 0 auto;
text-align: center;
width: 960px;
}
.contentBox {
margin: 0 auto;
width: 960px;
height: 80%;
background-color: #ffffff;
border: #dddddd;
border-style: solid;
border-width: .01em;
}
#firstName {
color: white;
margin: 0 auto;
background-color: #4aaaa5;
width: 300px;
height: 85px;
float: left;
font-family: Georgia, 'Times New Roman', Times, serif;
line-height: 250%;
text-align: center;
}
#menu {
color: #777777;
background-color: #ffffff;
width: 300px;
height: 85px;
font-family: Georgia, 'Times New Roman', Times, serif;
float: right;
display: flex;
justify-content: space-between;
align-items: center;
}
hr {
clear: both;
border-width: .03em;
border-bottom-style: solid;
margin: 0 auto;
width: 100%;
align-self: center;
border-color: #777777;
}
#backgroundTest {
background-image: url(https://grobconnolly.github.io/myportfolio/assets/images/swirl_pattern.png);
background-repeat: repeat;
padding: 70px;
height: calc(100% - 87px);
}
#portfolioWrap {
margin: 0 auto;
width: 960px;
background-color: #ffffff;
border: #dddddd;
border-style: solid;
border-width: .01em;
}
.contentHeading {
clear: both;
color: #4aaaa5;
margin: 15px 0 15px 15px;
}
.grayLine {
margin: 15px auto;
color: #777777;
width: 930px;
border-width: 1px;
align-self: center;
}
#footerBox {
margin-top: 50px;
width: 100%;
background-color: #666666;
height: 4rem;
border-top-style: solid;
border-top-color: #4aaaa5;
border-top-width: 10px;
align-self: center;
bottom: 0;
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
#copyright {
text-align: center;
color: white;
overflow: hidden;
}
body {
margin: 0 auto;
}
#robImage {
width: 200px;
height: 200px;
float: left;
margin: 0px 15px 0px 15px;
}
p {
color: #777777;
text-align: left;
margin-left: 15px;
margin-right: 15px;
word-spacing: 3px;
font-family: Arial, Helvetica, sans-serif;
line-height: 1.5;
}
#footerLine {
color: #4aaaa5;
}
#cr1 {
color: white;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}
/* contact us page CSS */
#contentPadding {
background-image: url("https://lh3.googleusercontent.com/MtzMSUjbfaDQY8xgppp8r826LVuwgwCkTE9aMTfPdHC5OUWr5UcBB4ulo1O_mzdaC6MAkzeN9G_11dSYYZCNfUM1lZKQW9xOfO3gDmeGi9ZW8FysGaSUoRqUctnzDBxjPUu2CF7GbOVdn8WOQviSnopCBSrqraAm0CFro5iQSvor-a513LA2Q4eCi88oB5PIZmJxn_av7T0kHVngc5BNKykQJNR13g4kep_BcaN_YbTrqAZBYfMy2FdD0klkUoQbLshgItmWQ6gH-Q-Ef3gjC0kLbxJBF4nTJJAJ027dahF-Cv_scyWwDDSxS4nNqQ4vsdFahevNFQItM94j8938kSyzw-99t3Ss6K7jo4YmV8Q8ixY5CCuL7-syMcbz6bJ3AMOOth2qjon9IQqr0fao4jqLQaMLK0I2bE8PcTHNISWz95VFiWOYnCxo76YOoClTl4zCO8obfxbo9TKdClhyjxYZ6BmSosFxGhd59YPcmdFmRIO18Vei4PBUyKK8pTPLwixUuG9AEkpljz-A7URK5AZxbUT_VlWBdqZWPbf8kaiiX24eY10BP15A-57I1AeVEuNlV61OsC2xr43YSf3M8-xYb2k1wqsWIE0mocY-L8h_jb8RCISwHmSlwNWGEiVGMvFHpsktw0szLV0UzRydDma0S9tisXJfiQPRzWxFc4aRfyJ2PQmg=s400-no");
background-repeat: repeat;
padding: 70px;
height: 100%;
}
/* Style inputs with type="text", select elements and textareas */
input[type=text],
select,
textarea {
width: 100%;
/* Full width */
padding: 12px;
/* Some padding */
border: 1px solid #cccccc;
/* Gray border */
border-radius: 4px;
/* Rounded borders */
box-sizing: border-box;
/* Make sure that padding and width stays in place */
margin-top: 6px;
/* Add a top margin */
margin-bottom: 16px;
/* Bottom margin */
resize: vertical
/* Allow the user to vertically resize the textarea (not horizontally) */
}
/* Style the submit button with a specific background color etc */
input[type=submit] {
background-color: #4aaaa5;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
font-family: Arial, Helvetica, sans-serif;
}
/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
background-color: #4aaaa5;
font-family: Arial, Helvetica, sans-serif;
}
/* Add a background color and some padding around the form */
.container {
border-radius: 5px;
border-color: #cccccc;
background-color: #ffffff;
padding: 20px;
align-self: center;
font-family: Arial, Helvetica, sans-serif;
color: #777777;
}
/* start of portfolio css */
/*
#boxClass {
display: flex;
width: 540px;
height: 800px;
align-items: flex-start;
justify-content: space-between;
text-align: center; */
#boxTitleHangman {
list-style: none;
height: 150px;
width: 200px;
margin: 10px 15px 30px 15px;
background-size: 100%;
float: left;
background-image: url(https://grobconnolly.github.io/myportfolio/assets/images/hangman.jpg);
}
#hangmanText {
background: #4aaaa5;
width: 200px;
height: 40px;
color: white;
text-align: center;
align-items: center;
position: relative;
top: 80px;
right: 15px;
line-height: 40px;
}
#boxTitleTrivia {
list-style: none;
height: 150px;
width: 200px;
margin: 10px 15px 30px 15px;
background-size: 100%;
float: left;
background-image: url(https://grobconnolly.github.io/myportfolio/assets/images/trivia.jpg);
}
#triviaText {
background: #4aaaa5;
width: 200px;
height: 40px;
color: white;
text-align: center;
align-items: center;
position: relative;
top: 80px;
right: 15px;
line-height: 40px;
}
#boxTitleRock {
list-style: none;
height: 150px;
width: 200px;
margin: 10px 15px 30px 15px;
background-size: 100%;
float: left;
background-image: url(https://grobconnolly.github.io/myportfolio/assets/images/rps.jpg);
}
#rockText {
background: #4aaaa5;
width: 200px;
height: 40px;
color: white;
text-align: center;
align-items: center;
position: relative;
top: 80px;
right: 15px;
line-height: 40px;
}
#boxTitleRpg {
list-style: none;
height: 150px;
width: 200px;
margin: 10px 15px 30px 15px;
background-size: 100%;
float: left;
background-image: url(https://grobconnolly.github.io/myportfolio/assets/images/rpg.jpg);
}
#rpgText {
background: #4aaaa5;
width: 200px;
height: 40px;
color: white;
text-align: center;
align-items: center;
position: relative;
top: 80px;
right: 15px;
line-height: 40px;
}
#boxTitleRutgers {
list-style: none;
height: 150px;
width: 200px;
margin: 10px 15px 30px 15px;
background-size: 100%;
float: left;
background-image: url(https://grobconnolly.github.io/myportfolio/assets/images/rutgers.jpg);
}
#rutgersText {
background: #4aaaa5;
width: 200px;
height: 40px;
color: white;
text-align: center;
align-items: center;
position: relative;
top: 80px;
right: 15px;
line-height: 40px;
}
.portfolioTitle {
background: #4aaaa5;
width: 200px;
height: 40px;
color: white;
text-align: center;
align-items: center;
position: relative;
top: 100px;
right: 15px;
line-height: 40px;
}
#hangmanBackground {
height: 150px;
width: 200px;
margin: 10px 15px 30px 15px;
background-size: 100%;
float: left;
}
#triviaBackground {
height: 150px;
width: 200px;
margin: 10px 15px 30px 15px;
background-size: 100%;
float: left;
}
#rockBackground {
height: 150px;
width: 200px;
margin: 10px 15px 30px 15px;
background-size: 100%;
float: left;
}
#rpgBackground {
height: 150px;
width: 200px;
margin: 10px 15px 30px 15px;
background-size: 100%;
float: left;
}
#rutgersBackground {
height: 150px;
width: 200px;
margin: 10px 15px 30px 15px;
background-size: 100%;
float: left;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Rob Connolly's Portfolio</title>
<link rel="stylesheet" href="./assets/css/style.css">
</head>
<body>
<!-- this div contains the header-->
<div id="wrap">
<header>
<!-- name in header-->
<h1 id="firstName">
Rob Connolly
</h1>
</header>
<!-- Header-->
<div id="menu">
<span>
About
</span>
<span>
Portfolio
</span>
<span>
Contact
</span>
</div>
</div>
<!-- clear fix cleard float-->
<hr id="clearfix">
<!-- background image-->
<div id="backgroundTest">
<!-- Wrap2 wraps portfolio content section-->
<div class="contentBox">
<!-- Portfolio Heading-->
<h2 class="contentHeading">
Portfolio
</h2>
<!-- gray line in about me section-->
<hr class="grayLine">
<!-- Portfolio Form-->
<ul id="boxList">
<li id="boxTitleHangman">
<p id="hangmanText">
Hangman
</p>
</li>
<li id="boxTitleTrivia">
<p id="triviaText">
Trivia
</p>
</li>
<li id="boxTitleRock">
<p id="rockText">
Rock
</p>
</li>
<li id="boxTitleRpg">
<p id="rpgText">
Rpg
</p>
</li>
<li id="boxTitleRutgers">
<p id="rutgersText">
Rutgers
</p>
</li>
</ul>
<!--
<div id="hangman">
<div id="hangmanBackground" style="background-image: url('assets/images/hangman.jpg');">
<p class="portfolioTitle">Hangman</p>
</div>
<div id="trivia">
<div id="triviaBackground" style="background-image: url('assets/images/trivia.jpg');">
<p class="portfolioTitle">Trivia Game</p>
</div>
<div id="rock">
<div id="rockBackground" style="background-image: url('assets/images/rps.jpg');">
<p class="portfolioTitle">Rock Paper Scissors</p>
</div>
</div>
<div id="row2">
<div id="rpg">
<div id="rpgBackground" style="background-image: url('assets/images/rpg.jpg');">
<p class="portfolioTitle">RPG Game</p>
</div>
<div id="rutgers">
<div id="rutgersBackground" style="background-image: url('assets/images/rutgers.jpg');">
<p class="portfolioTitle">Rutgers Info Widget</p>
</div>
</div>
</div>
</div>
</div>
</div> -->
<!-- Start of footer-->
<div id="footerBox">
<!-- Text for footer-->
<p id="cr1"> © Copyright</p>
</div>
</div>
</div>
</div>
</body>
</html>
Welcome to SO, Its simple use column-count: property on ul
Here is updated snippet.
* {
box-sizing: border-box;
}
a {
color: #777777;
}
html, body {
height: 100%;
}
#wrap {
margin: 0 auto;
text-align: center;
width: 960px;
}
.contentBox {
margin: 0 auto;
width: 960px;
height: 100vh;
background-color: #ffffff;
border: #dddddd;
border-style: solid;
border-width: .01em;
}
#firstName {
color: white;
margin: 0 auto;
background-color: #4aaaa5;
width: 300px;
height: 85px;
float: left;
font-family: Georgia, 'Times New Roman', Times, serif;
line-height: 250%;
text-align: center;
}
#menu {
color: #777777;
background-color: #ffffff;
width: 300px;
height: 85px;
font-family: Georgia, 'Times New Roman', Times, serif;
float: right;
display: flex;
justify-content: space-between;
align-items: center;
}
hr {
clear: both;
border-width: .03em;
border-bottom-style: solid;
margin: 0 auto;
width: 100%;
align-self: center;
border-color: #777777;
}
#backgroundTest {
background-image: url(https://grobconnolly.github.io/myportfolio/assets/images/swirl_pattern.png);
background-repeat: repeat;
padding: 70px;
height: 100vh;
}
#portfolioWrap {
margin: 0 auto;
width: 960px;
background-color: #ffffff;
border: #dddddd;
border-style: solid;
border-width: .01em;
}
.contentHeading {
clear: both;
color: #4aaaa5;
margin: 15px 0 15px 15px;
}
#boxList{
column-count: 2;
}
.grayLine {
margin: 15px auto;
color: #777777;
width: 930px;
border-width: 1px;
align-self: center;
}
#footerBox {
margin-top: 50px;
width: 100%;
background-color: #666666;
height: 4rem;
border-top-style: solid;
border-top-color: #4aaaa5;
border-top-width: 10px;
align-self: center;
bottom: 0;
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
#copyright {
text-align: center;
color: white;
overflow: hidden;
}
body {
margin: 0 auto;
}
#robImage {
width: 200px;
height: 200px;
float: left;
margin: 0px 15px 0px 15px;
}
p {
color: #777777;
text-align: left;
margin-left: 15px;
margin-right: 15px;
word-spacing: 3px;
font-family: Arial, Helvetica, sans-serif;
line-height: 1.5;
}
#footerLine {
color: #4aaaa5;
}
#cr1 {
color: white;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}
/* contact us page CSS */
#contentPadding {
background-image: url("https://lh3.googleusercontent.com/MtzMSUjbfaDQY8xgppp8r826LVuwgwCkTE9aMTfPdHC5OUWr5UcBB4ulo1O_mzdaC6MAkzeN9G_11dSYYZCNfUM1lZKQW9xOfO3gDmeGi9ZW8FysGaSUoRqUctnzDBxjPUu2CF7GbOVdn8WOQviSnopCBSrqraAm0CFro5iQSvor-a513LA2Q4eCi88oB5PIZmJxn_av7T0kHVngc5BNKykQJNR13g4kep_BcaN_YbTrqAZBYfMy2FdD0klkUoQbLshgItmWQ6gH-Q-Ef3gjC0kLbxJBF4nTJJAJ027dahF-Cv_scyWwDDSxS4nNqQ4vsdFahevNFQItM94j8938kSyzw-99t3Ss6K7jo4YmV8Q8ixY5CCuL7-syMcbz6bJ3AMOOth2qjon9IQqr0fao4jqLQaMLK0I2bE8PcTHNISWz95VFiWOYnCxo76YOoClTl4zCO8obfxbo9TKdClhyjxYZ6BmSosFxGhd59YPcmdFmRIO18Vei4PBUyKK8pTPLwixUuG9AEkpljz-A7URK5AZxbUT_VlWBdqZWPbf8kaiiX24eY10BP15A-57I1AeVEuNlV61OsC2xr43YSf3M8-xYb2k1wqsWIE0mocY-L8h_jb8RCISwHmSlwNWGEiVGMvFHpsktw0szLV0UzRydDma0S9tisXJfiQPRzWxFc4aRfyJ2PQmg=s400-no");
background-repeat: repeat;
padding: 70px;
height: 100%;
}
/* Style inputs with type="text", select elements and textareas */
input[type=text],
select,
textarea {
width: 100%;
/* Full width */
padding: 12px;
/* Some padding */
border: 1px solid #cccccc;
/* Gray border */
border-radius: 4px;
/* Rounded borders */
box-sizing: border-box;
/* Make sure that padding and width stays in place */
margin-top: 6px;
/* Add a top margin */
margin-bottom: 16px;
/* Bottom margin */
resize: vertical
/* Allow the user to vertically resize the textarea (not horizontally) */
}
/* Style the submit button with a specific background color etc */
input[type=submit] {
background-color: #4aaaa5;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
font-family: Arial, Helvetica, sans-serif;
}
/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
background-color: #4aaaa5;
font-family: Arial, Helvetica, sans-serif;
}
/* Add a background color and some padding around the form */
.container {
border-radius: 5px;
border-color: #cccccc;
background-color: #ffffff;
padding: 20px;
align-self: center;
font-family: Arial, Helvetica, sans-serif;
color: #777777;
}
/* start of portfolio css */
/*
#boxClass {
display: flex;
width: 540px;
height: 800px;
align-items: flex-start;
justify-content: space-between;
text-align: center; */
#boxTitleHangman {
list-style: none;
height: 150px;
width: 200px;
margin: 10px 15px 30px 15px;
background-size: 100%;
float: left;
background-image: url(https://grobconnolly.github.io/myportfolio/assets/images/hangman.jpg);
}
#hangmanText {
background: #4aaaa5;
width: 200px;
height: 40px;
color: white;
text-align: center;
align-items: center;
position: relative;
top: 80px;
right: 15px;
line-height: 40px;
}
#boxTitleTrivia {
list-style: none;
height: 150px;
width: 200px;
margin: 10px 15px 30px 15px;
background-size: 100%;
float: left;
background-image: url(https://grobconnolly.github.io/myportfolio/assets/images/trivia.jpg);
}
#triviaText {
background: #4aaaa5;
width: 200px;
height: 40px;
color: white;
text-align: center;
align-items: center;
position: relative;
top: 80px;
right: 15px;
line-height: 40px;
}
#boxTitleRock {
list-style: none;
height: 150px;
width: 200px;
margin: 10px 15px 30px 15px;
background-size: 100%;
float: left;
background-image: url(https://grobconnolly.github.io/myportfolio/assets/images/rps.jpg);
}
#rockText {
background: #4aaaa5;
width: 200px;
height: 40px;
color: white;
text-align: center;
align-items: center;
position: relative;
top: 80px;
right: 15px;
line-height: 40px;
}
#boxTitleRpg {
list-style: none;
height: 150px;
width: 200px;
margin: 10px 15px 30px 15px;
background-size: 100%;
float: left;
background-image: url(https://grobconnolly.github.io/myportfolio/assets/images/rpg.jpg);
}
#rpgText {
background: #4aaaa5;
width: 200px;
height: 40px;
color: white;
text-align: center;
align-items: center;
position: relative;
top: 80px;
right: 15px;
line-height: 40px;
}
#boxTitleRutgers {
list-style: none;
height: 150px;
width: 200px;
margin: 10px 15px 30px 15px;
background-size: 100%;
float: left;
background-image: url(https://grobconnolly.github.io/myportfolio/assets/images/rutgers.jpg);
}
#rutgersText {
background: #4aaaa5;
width: 200px;
height: 40px;
color: white;
text-align: center;
align-items: center;
position: relative;
top: 80px;
right: 15px;
line-height: 40px;
}
.portfolioTitle {
background: #4aaaa5;
width: 200px;
height: 40px;
color: white;
text-align: center;
align-items: center;
position: relative;
top: 100px;
right: 15px;
line-height: 40px;
}
#hangmanBackground {
height: 150px;
width: 200px;
margin: 10px 15px 30px 15px;
background-size: 100%;
float: left;
}
#triviaBackground {
height: 150px;
width: 200px;
margin: 10px 15px 30px 15px;
background-size: 100%;
float: left;
}
#rockBackground {
height: 150px;
width: 200px;
margin: 10px 15px 30px 15px;
background-size: 100%;
float: left;
}
#rpgBackground {
height: 150px;
width: 200px;
margin: 10px 15px 30px 15px;
background-size: 100%;
float: left;
}
#rutgersBackground {
height: 150px;
width: 200px;
margin: 10px 15px 30px 15px;
background-size: 100%;
float: left;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Rob Connolly's Portfolio</title>
<link rel="stylesheet" href="./assets/css/style.css">
</head>
<body>
<!-- this div contains the header-->
<div id="wrap">
<header>
<!-- name in header-->
<h1 id="firstName">
Rob Connolly
</h1>
</header>
<!-- Header-->
<div id="menu">
<span>
About
</span>
<span>
Portfolio
</span>
<span>
Contact
</span>
</div>
</div>
<!-- clear fix cleard float-->
<hr id="clearfix">
<!-- background image-->
<div id="backgroundTest">
<!-- Wrap2 wraps portfolio content section-->
<div class="contentBox">
<!-- Portfolio Heading-->
<h2 class="contentHeading">
Portfolio
</h2>
<!-- gray line in about me section-->
<hr class="grayLine">
<!-- Portfolio Form-->
<ul id="boxList">
<li id="boxTitleHangman">
<p id="hangmanText">
Hangman
</p>
</li>
<li id="boxTitleTrivia">
<p id="triviaText">
Trivia
</p>
</li>
<li id="boxTitleRock">
<p id="rockText">
Rock
</p>
</li>
<li id="boxTitleRpg">
<p id="rpgText">
Rpg
</p>
</li>
<li id="boxTitleRutgers">
<p id="rutgersText">
Rutgers
</p>
</li>
</ul>
<!--
<div id="hangman">
<div id="hangmanBackground" style="background-image: url('assets/images/hangman.jpg');">
<p class="portfolioTitle">Hangman</p>
</div>
<div id="trivia">
<div id="triviaBackground" style="background-image: url('assets/images/trivia.jpg');">
<p class="portfolioTitle">Trivia Game</p>
</div>
<div id="rock">
<div id="rockBackground" style="background-image: url('assets/images/rps.jpg');">
<p class="portfolioTitle">Rock Paper Scissors</p>
</div>
</div>
<div id="row2">
<div id="rpg">
<div id="rpgBackground" style="background-image: url('assets/images/rpg.jpg');">
<p class="portfolioTitle">RPG Game</p>
</div>
<div id="rutgers">
<div id="rutgersBackground" style="background-image: url('assets/images/rutgers.jpg');">
<p class="portfolioTitle">Rutgers Info Widget</p>
</div>
</div>
</div>
</div>
</div>
</div> -->
<!-- Start of footer-->
<div id="footerBox">
<!-- Text for footer-->
<p id="cr1"> © Copyright</p>
</div>
</div>
</div>
</div>
</body>
</html>
I would suggest you use the id you have given the <ul> tag i.e boxlist and then apply the display as flex this way all your li elements will be in a flex box.Then work with the <li> elements as flex box elements here is a link that could help you out:-
https://www.w3schools.com/css/css3_flexbox.asp
I would highly recommend you to use grid as it can be more usefull and I like it better than flex box,here is the link you can use to refer how a grid box is used:-
https://www.w3schools.com/css/css_grid.asp
Gridview
<ul class="gridview grid-3">
<li><p>Hello<br>Hello</p></li>
<li><p>Hello<br>Hello<br>Hello<br>Hello</p></li>
<li><p>Hello</p></li>
<li><p>Hello<br>Hello<br>Hello</p></li>
<li><p>Hello</p></li>
<li><p>Hello<br>Hello</p></li>
<li><p>Hello</p></li>
<li><p>Hello<br>Hello<br>Hello</p></li>
<li><p>Hello</p></li>
<li><p>Hello<br>Hello</p></li>
</ul>
ul.gridview > li {
display: block;
float: left;
padding: 0;
margin: 0;
}
ul.gridview > li p {
background: #ddd;
padding: 5px;
margin: 0;
}
/* Grid-3 */
ul.grid-3 > li {
width: calc(100% / 3 - 2 * 10px / 3);
}
ul.grid-3 > li:nth-child(n + 4) {
margin-top: 10px;
}
ul.grid-3 > li:nth-child(3n + 1) {
clear: left;
}
ul.grid-3 > li:not(:nth-child(3n + 1)) {
margin-left: 10px;
}
/* Grid-4 */
ul.grid-4 > li {
width: calc(100% / 4 - 3 * 10px / 4);
}
ul.grid-4 > li:nth-child(n + 5) {
margin-top: 10px;
}
ul.grid-4 > li:nth-child(4n + 1) {
clear: left;
}
ul.grid-4 > li:not(:nth-child(4n + 1)) {
margin-left: 10px;
}
Codepen
I have nav menu you can look at the snippet. (its not responsive in this case). And my problem is that i want to make searchbar (on hover with page max-width980px) to hide all elements and to be full width in nav menu. Problem is that i have very poor understanding of javascript so if is there any css only solution. I tried adding z-index but without effect.
/* Navigation menu */
.resmenu {
display: none;
cursor: pointer;
}
.resmenuitems {
display: none;
}
.navmenu {
width: 100%;
height: 55px;
border-bottom: 1px solid rgb(240,240,240);
}
.logo {
color: black;
display: flex;
justify-content: center;
align-items: center;
width: 100px;
height: 100%;
font-size: 1.5em;
font-weight: bold;
float: left;
margin-left: 3%;
padding: 10px 0px 10px 0px;
}
.navlinksr {
float: right;
margin-right: 2%;
width: 490px;
height: 100%;
display: flex;
align-items: center;
justify-content:space-around;
}
.navlinksr a {
float: right;
text-decoration: none;
color: black;
font-size: 0.95em;
font-family: 'Roboto', sans-serif;
font-weight: bold;
}
.navlinksline {
height: 40%;
width: 1px;
background-color: grey;
}
.logodif {
background-color: black;
color: white;
padding: 7px;
border-radius: 3px;
}
.rlynothing {
margin-left: 4%;
float: left;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.rlynothingagain {
height: 40%;
width: 1px;
background-color: grey;
}
/* SEARCH */
.swrap{
height: 100%;
float:left;
margin: auto;
display: flex;
align-items: center;
margin-left: 30px;
}
.search-container {
float:left;
display: flex;
width: 30px;
padding: 8px;
transition: width .2s;
overflow: hidden;
}
.search-container:hover{
width: 200px;
border: 2px solid black;
border-radius: 2px;
}
.search-input {
flex: 1;
display: flex;
}
.search-input input {
flex: 1;
background-clip: padding-box;
border: 0;
padding: 0;
outline: 0;
margin-left: 4px;
}
.navlinkborder {
background-color: limegreen;
padding: 10px;
border-radius: 3px;
}
.navlinkborder:hover {
background-color: green;
color: white;
transition: .5s;
}
<!DOCTYPE html>
<html lang="sk">
<head>
<!-- Site info -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- CSS -->
<link rel="stylesheet" href="styles/normalize.css">
<link rel="stylesheet" href="styles/bootstrap-grid.css">
<link rel="stylesheet" href="styles/style.css">
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet">
<script defer src="https://use.fontawesome.com/releases/v5.0.4/js/all.js"></script>
</head>
<body>
<!-- BEGIN - Header -->
<div class="navmenu">
<a href="index.php">
<div class="logo">
<p>Coding</p> <p class="logodif">Hub</p>
</div>
</a>
<div class="rlynothing">
<div class="rlynothingagain">
</div>
</div>
<div class="swrap">
<div class="search-container">
<div class="search-icon-btn">
<i class="fa fa-search fa-lg"></i>
</div>
<div class="search-input">
<input type="search" class="search-bar" placeholder="Hľadať...">
</div>
</div>
</div>
<div class="resmenu" id="flip">
<i class="fas fa-bars fa-2x"></i>
</div>
<div class="navlinksr">
Archív
Live
PODPORIŤ
Kontakt
<a class="navlinksline"></a>
Prihlásiť sa
</div>
</div>
<div id="panel" class="resmenuitems">
Archív
PODPORIŤ
Live
Kontakt
Prihlásiť sa
</div>
<!-- END - HEADER -->
Try below
set the header as fixed
.logo {
margin-left: 30px;
}
.rlynothing {
margin-left: 40px;
}
set search container full width
.search-container {
float:left;
display: flex;
width: 30px;
padding: 8px;
overflow: hidden;
position: absolute;
z-index: 1;
border: 2px solid white;
border-radius: 2px;
transition: all .2s;
}
.search-container:hover{
background: white;
width: calc(100% - 264px); /* 264px is the width of Header Image */
border-color: black;
}
You can calculate the width search bar using calc().
And to show the search bar above other elements, use position: absolute(relative) and z-index.
For z-index to work, you need to use position : absolute or position : relative
/* Navigation menu */
.resmenu {
display: none;
cursor: pointer;
}
.resmenuitems {
display: none;
}
.navmenu {
width: 100%;
height: 55px;
border-bottom: 1px solid rgb(240,240,240);
}
.logo {
color: black;
display: flex;
justify-content: center;
align-items: center;
width: 100px;
height: 100%;
font-size: 1.5em;
font-weight: bold;
float: left;
margin-left: 30px;
padding: 10px 0px 10px 0px;
}
.navlinksr {
float: right;
margin-right: 2%;
width: 490px;
height: 100%;
display: flex;
align-items: center;
justify-content:space-around;
}
.navlinksr a {
float: right;
text-decoration: none;
color: black;
font-size: 0.95em;
font-family: 'Roboto', sans-serif;
font-weight: bold;
}
.navlinksline {
height: 40%;
width: 1px;
background-color: grey;
}
.logodif {
background-color: black;
color: white;
padding: 7px;
border-radius: 3px;
}
.rlynothing {
margin-left: 40px;
float: left;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.rlynothingagain {
height: 40%;
width: 1px;
background-color: grey;
}
/* SEARCH */
.swrap{
height: 100%;
float:left;
margin: auto;
display: flex;
align-items: center;
margin-left: 30px;
}
.search-container {
float:left;
display: flex;
width: 30px;
padding: 8px;
overflow: hidden;
position: absolute;
z-index: 1;
border: 2px solid white;
border-radius: 2px;
transition: all .2s;
}
.search-container:hover{
background: white;
width: calc(100% - 264px); /* 264px is the width of Header Image */
border-color: black;
}
.search-input {
flex: 1;
display: flex;
}
.search-input input {
flex: 1;
background-clip: padding-box;
border: 0;
padding: 0;
outline: 0;
margin-left: 4px;
}
.navlinkborder {
background-color: limegreen;
padding: 10px;
border-radius: 3px;
}
.navlinkborder:hover {
background-color: green;
color: white;
transition: .5s;
}
<!DOCTYPE html>
<html lang="sk">
<head>
<!-- Site info -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- CSS -->
<link rel="stylesheet" href="styles/normalize.css">
<link rel="stylesheet" href="styles/bootstrap-grid.css">
<link rel="stylesheet" href="styles/style.css">
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet">
<script defer src="https://use.fontawesome.com/releases/v5.0.4/js/all.js"></script>
</head>
<body>
<!-- BEGIN - Header -->
<div class="navmenu">
<a href="index.php">
<div class="logo">
<p>Coding</p> <p class="logodif">Hub</p>
</div>
</a>
<div class="rlynothing">
<div class="rlynothingagain">
</div>
</div>
<div class="swrap">
<div class="search-container">
<div class="search-icon-btn">
<i class="fa fa-search fa-lg"></i>
</div>
<div class="search-input">
<input type="search" class="search-bar" placeholder="Hľadať...">
</div>
</div>
</div>
<div class="resmenu" id="flip">
<i class="fas fa-bars fa-2x"></i>
</div>
<div class="navlinksr">
Archív
Live
PODPORIŤ
Kontakt
<a class="navlinksline"></a>
Prihlásiť sa
</div>
</div>
<div id="panel" class="resmenuitems">
Archív
PODPORIŤ
Live
Kontakt
Prihlásiť sa
</div>
<!-- END - HEADER -->