betta
Coder
Hi,
I created two navbar now (left and right). I am trying to put the audio video section in the middle of the page but at the moment I've got this. Any help or tips to solve this please? Find attached a screenshot of how appears + codings.
Thank you very much!
Best,
Elisabetta.
I created two navbar now (left and right). I am trying to put the audio video section in the middle of the page but at the moment I've got this. Any help or tips to solve this please? Find attached a screenshot of how appears + codings.
Thank you very much!
Best,
Elisabetta.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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>Elisabetta Senesi</title>
<link type="text/css" rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<!-- Left section -->
<nav>
<ul class="navbar">
<li><a href="https://spokenweb.tumblr.com/">SPOKEN WEB</a></li>
<li><a href="http://streams.soundtent.org/2021/streams/utc2_florence">REVEIL STREAM</a></li>
<li><a href="https://citiesandmemory.com/travel/">UNTIL WE TRAVEL</a></li>
<li><a href="https://walklistencreate.org/forums/users/elisabetta-senesi/?sub=events" target="_blank">FIESOLE URBANA</a></li>
<li><a href="https://www.dropbox.com/s/7wuofltwow6zm17/5%20Ottobre.mp4?dl=0" target="_blank"> SONIC SOMATIC</a></li>
<li><a href="https://www.dropbox.com/s/pq3xy0gfz7vgkat/4%20Ottobre.mp4?dl=0" target="_blank">CASCINE WALK</a></li>
<li><a href="https://drive.google.com/file/d/1ekMQOXZS8QILSmYPI2lGi0HCLj7Zgbbz/view?usp=sharing" target="_blank">SIENA LISTENING</a></li>
<li><a href="https://drive.google.com/file/d/1ZPmv4bbidgjy14cs75MQm_0vv6wooBg5/view?usp=sharing" target="_blank"> VALDARNO WALK</a></li>
<li><a href="https://www.youtube.com/watch?v=xdQ835sPQs4" target="_blank"> STILLHOMESCAPE</a></li>
<li><a href="https://vimeo.com/97237206" target="_blank">NOISECALMZONE</a></li>
<li><a href="https://vimeo.com/16530498" target="_blank">SONIC GARDEN</a></li>
<li><a href=" https://vimeo.com/7763171" target="_blank">HANDLEWITHCARE</a></li>
</ul>
</nav>
<!-- Right section -->
<nav>
<ul class="navbar">
<li><a href="walks.html"target="_blank">LISTENING WALKS</a></li>
<li><a href="sonic_install.html"target="_blank">INSTALLATIONS</a></li>
<li><a href="https://www.mixcloud.com/betta-senesi/">AUDIO WORKS</a></li>
<li><a href="https://soundcloud.com/betta77" target="_blank">RADIO PIECES</a></li>
<li><a href="http://tabsil.wordpress.com/" target="_blank">BLOG</a></li>
<li><a href="ISSUES.html" target="_blank">ISSUES</a></li>
<li><a href="CV_2014.html" target="_blank">CV</a></li>
<li><a href="bio.html" target="_blank">BIO</a></li>
<li><a href="https://goldsmiths.academia.edu/ElisabettaSenesi" target="_blank">ACADEMIC</a></li>
<li><a href="mailto:[email protected]" target="_blank">DROP ME A LINE</a></li>
</ul>
<! -- Center section -->
<div class="section">
<div class="yt-video">
<iframe width="565" height="350" src="https://www.youtube.com/embed/PqiEmPf0QlE" title="YouTube video player" frameborder="no" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div>
<iframe style="width: 100%;height: 200px;" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https://api.soundcloud.com/tracks/1052516986&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe>
<div style="font-size:10px; color: #cccccc;line-break: anywhere;word-break: normal;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; font-family: Interstate,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Garuda,Verdana,Tahoma,sans-serif;fontweight:100;">
<a href="https://soundcloud.com/n-n-n-s-1" title="SpokenWebSymposium" target="_blank" style="color: #cccccc; text-decoration: none;">SpokenWeb Symposium</a> ·
<a href="https://soundcloud.com/n-n-n-s-1/elisabetta-senesisoundwalk-may-20-2021" title="Elisabetta Senesi, Soundwalk, May 20, 2021" target="_blank" style="color: #cccccc; text-decoration: none;">Elisabetta Senesi, Soundwalk, May 20, 2021</a>
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
* {
margin: 0;
padding: 0;
}
html, body {
font-family:Tahoma, Geneva, sans-serif;
background: #CCC;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
.container {
width: 100%;
display: flex;
justify-content: space-between;
}
/* Nav */
nav {
padding: 2rem;
background-color: #666
}
.navbar li {
margin: 10px 0;
}
.navbar a {
color: #fff;
}
/* Section */
.section {
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: justify;
}
.yt-video {
margin: 1rem 0 2rem 0;
}