i am a beginner with html and css so apologies for any silly mistakes. i have been working on a design for a music blog and i wanted to have a list of album covers with text underneath them lined up one after the other, to the right of a "review" section. Better explained by the wireframe i designed for it
however, ive been fiddling around with it and i cannot seem to get it right, i believe the problem is with my CSS. right now it looks like this
the html is as follows:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
@import url("yeyeyyey.css");
</style>
</head>
<body>
<section class="reviewsection">
<div class="reviews"><a href="reviews.html">reviews.</a></div>
<ul class="reviewsimg">
<li class="albumart"><a class="album" href="#"><img class="albumartspace" src="Sample-Logo-square-300x300.png" alt="Warehouse Project"></a></li>
<ul class="albumdetails">
<li class="artistname">Artist Name</li>
<li class="albumname"><a class="album">Album Name</a></li>
<ul class="edited">
<li class="author">Author /</li>
<li class="genre"> Genre </li>
<li class="lastedited">/ Last Edited</li>
</ul>
<li class="albumsummary"><p>[summary of album]</p></li>
</ul>
</ul>
</section>
<section class="releasesection">
<div class="releasecalendar"><a href="releasecalendar.html">release calendar.</a></div>
<ul class="calendarimg">
<ul class="artandtext">
<li class="calendarart"><a class="calendaralbum" href="#"><img class="calendarartspace" src="Sample-Logo-square-300x300.png" alt="Album"></a></li>
<li class="releasedate">Release Date</li>
<li class="name">Artist Name</li>
<li class="albumtitle">Album Title</li>
</ul>
<ul class="artandtext">
<li class="calendarart"><a class="calendaralbum" href="#"><img class="calendarartspace" src="Sample-Logo-square-300x300.png" alt="Album"></a></li>
<li class="releasedate">Release Date</li>
<li class="name">Artist Name</li>
<li class="albumtitle">Album Title</li>
</ul>
<ul class="artandtext">
<li class="calendarart"><a class="calendaralbum" href="#"><img class="calendarartspace" src="Sample-Logo-square-300x300.png" alt="Album"></a></li>
<li class="releasedate">Release Date</li>
<li class="name">Artist Name</li>
<li class="albumtitle">Album Title</li>
</ul>
<ul class="artandtext">
<li class="calendarart"><a class="calendaralbum" href="#"><img class="calendarartspace" src="Sample-Logo-square-300x300.png" alt="Album"></a></li>
<li class="releasedate">Release Date</li>
<li class="name">Artist Name</li>
<li class="albumtitle">Album Title</li>
</ul>
<ul class="artandtext">
<li class="calendarart"><a class="calendaralbum" href="#"><img class="calendarartspace" src="Sample-Logo-square-300x300.png" alt="Album"></a></li>
<li class="releasedate">Release Date</li>
<li class="name">Artist Name</li>
<li class="albumtitle">Album Title</li>
</ul>
</ul>
</section>
</body>
</html>
the CSS is as follows:
@charset "utf-8";
/* REVIEWS */
body {
font-family: courier;
}
.reviewsection {
float: left;
width:35%;
margin-right: 20px;
}
.reviews {display:inline-block;
padding-top: 10px}
.reviews a {
color: black;
text-decoration: none;
font-size: 25px;
font-weight: bold;
margin-top: 20px;
border: 1px solid black;
padding: 0px 5px;
background-color: white;
}
.reviews a:hover {
background-color: black;
color:white;
border: 1px solid white;
}
.reviewsimg {
display:flex;
padding:0px;
background-color:white;
border: 1px solid black;
width:100%;
height: 100%;
max-height: 350px;
margin-top: -13px;
list-style: none;
}
.albumartspace {
width:100%;
max-width:250px;
height:auto;
}
.albumart {
margin-top:22px;
margin-left: 10px;
margin-bottom: 5px;
position: relative;
}
.albumart img:hover {
opacity: .8;
}
.albumdetails {
padding-top: 20px;
padding-left: 20px;
list-style: none;
}
.artistname {
font-size: 25px;
font-weight: bold;
}
.albumname {
font-size: 20px;
font-weight: bold;
margin-bottom: 10px;
}
.edited {
padding-left:0px;
list-style-type: none;
font-style: italic;
}
.author {
display: inline;
}
.genre {
display: inline;
color: red;
}
.lastedited {
display: inline;
color: grey;
}
/* RELEASE CALENDAR */
.releasesection {
float:left;
width:42%;
height:auto;
}
.releasecalendar {
display:block;
padding-top: 10px;
float: left;
}
.releasecalendar a {
color: white;
text-decoration: none;
font-size: 25px;
font-weight: bold;
margin-top: 20px;
border: 1px solid white;
padding: 0px 5px;
background-color: black;
}
.releasecalendar a:hover {
background-color: white;
color:black;
border: 1px solid black;
}
.calendarimg {
float:left;
width:100%;
height:auto;
margin-left: 0px;
}
.artandtext {
display:inline;
width:20%;
height:auto;
float:left;
margin: 0px;
list-style: none;
}
.calendarart {
width:100%;
height:100%;
list-style-image: none;
margin-right: 0px;
}
.calendarartspace {
width:100%;
height:100%;
margin-right: 0px;
}
Aucun commentaire:
Enregistrer un commentaire