i am very new to html and css so apologies for any stupid mistakes. what i have done is created a website in which an "articles" section is to directly above a "reviews" section of a blog i am making for my project. what keeps happening is that the text box for reviews keeps appearing right below the box for articles and not the black box i made to go between them
my html is as follows:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>DeepSound</title>
<style type="text/css">
@import url("CSS.css");
</style>
</head>
<body>
<section class="articlesection">
<a class="titlebox" href="articles.html">articles.</a>
<ul class="articlesimg">
<li class="pics"><a class="article" href="#"><img class="picspace" src="spotify.png" alt="Spotify Logo"><div class="headline2">SPOTIFY OPENS NEW DOORS</div></a></li>
<li class="pics"><a class="article" href="#"><img class="picspace" src="tchami.png" alt="Tchami"><div class="headline2">TCHAMI GETS TIKTOK</div></a></li>
<li class="pics"><a class="article" href="#"><img class="picspace" src="owslaxfreelife.png" alt="OWSLA X FREELIFE"><div class="headline2">OWSLA X FREELIFE COLLAB NOW LIVE</div></a></li>
</ul>
</section>
<section class="reviewsection">
<a class="titlebox" href="reviews.html">reviews.</a>
</section>
</body>
</html>
my css is as follows:
@charset "utf-8";
.articlesection {
position:relative;
}
.titlebox {
color: black;
text-decoration: none;
font-size: 25px;
font-weight: bold;
display:inline-block;
margin-top: 20px;
border: 1px solid black;
padding:0px 5px;
background-color:white;
}
.titlebox:hover {
background-color: black;
color:white;
border: 1px solid white;
}
.articlesimg {
background-color: black;
width:100%;
max-width:1440px;
height:auto;
display: flex;
margin-top:-13px;
padding-top: 50px;
padding-left:20px;
float: left;
position: absolute;
z-index: -5;
justify-content: center;
align-items: center;
}
.picspace {
width:100%;
max-width:450px;
height:auto
}
.pics {
margin-right:20px;
position: relative;
text-align: left;
background-color:white;
}
.pics img:hover {
opacity: .8;
}
.headline2 {
position: absolute;
bottom: 8px;
left: 16px;
background-color: black;
color:white;
font-family:helvetica;
font-size: 14px;
padding: 5px;
}
.headline2:hover {
background-color: white;
color:black;
}
.reviewsection {
position:absolute;
}
Aucun commentaire:
Enregistrer un commentaire