• Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML & CSS adjust navbar and video section

betta

New 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.
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;
}
 

Attachments

  • home.jpg
    home.jpg
    104.2 KB · Views: 5

simong1993

Active Coder
Staff Team
Guardian
Hey and welcome, So first lets have a look into this :D So your first Nav is fine but your second nav and video are one, now this leaves me to believe we have a open tag :D

Line 35 <nav> is open, change line 50 to </nav><! -- Center section -->

Now this closes that issue and i have checked :D Next issue we have is HTML reads in order, so at the moment you are telling it to display Nav, Nav, Video so lets move your last nav to the end and wola we now work :D

I will upload the code and link to code pen so you can see it in action.

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 -->
         <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> 
        <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>
          
        
      </nav><! -- Center section -->
        
    </div>
</body>

</html>


Really easy mistakes, trust me ive spent days before stumped by a end tag missing :D Let me know if i can do anything else to help :D
 

OldMan

New Coder
Here's what I corrected.
Transitional ver. 1 of HTML ended in the 1800's. In 2021 we use HTML5. See my code.
CSS -> under .section{} Remove the 100% width.

In HtML section:
rearranged the three divs.
Added the closing </nav> for the right div.
Fixed this -> <!-- Center section --> You had <! -- Cente.... Notice the space.

Think that was all. Looks good, but you still have some tweaking to do.
 

betta

New Coder
Hey and welcome, So first lets have a look into this :D So your first Nav is fine but your second nav and video are one, now this leaves me to believe we have a open tag :D

Line 35 <nav> is open, change line 50 to </nav><! -- Center section -->

Now this closes that issue and i have checked :D Next issue we have is HTML reads in order, so at the moment you are telling it to display Nav, Nav, Video so lets move your last nav to the end and wola we now work :D

I will upload the code and link to code pen so you can see it in action.

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 -->
         <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>
        <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>
         
       
      </nav><! -- Center section -->
       
    </div>
</body>

</html>


Really easy mistakes, trust me ive spent days before stumped by a end tag missing :D Let me know if i can do anything else to help :D
Thanks Simon, very helpful and clear to me. I am going through the coding now. Ciao!
 

betta

New Coder
Here's what I corrected.
Transitional ver. 1 of HTML ended in the 1800's. In 2021 we use HTML5. See my code.
CSS -> under .section{} Remove the 100% width.

In HtML section:
rearranged the three divs.
Added the closing </nav> for the right div.
Fixed this -> <!-- Center section --> You had <! -- Cente.... Notice the space.

Think that was all. Looks good, but you still have some tweaking to do.
Wow, thank you. I am working on it. About the transitional 1 yes I know that is old but I am designing and building pages on dreamweaver with an old laptop!
 

betta

New Coder
Hey and welcome, So first lets have a look into this :D So your first Nav is fine but your second nav and video are one, now this leaves me to believe we have a open tag :D

Line 35 <nav> is open, change line 50 to </nav><! -- Center section -->

Now this closes that issue and i have checked :D Next issue we have is HTML reads in order, so at the moment you are telling it to display Nav, Nav, Video so lets move your last nav to the end and wola we now work :D

I will upload the code and link to code pen so you can see it in action.

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 -->
         <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>
        <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>
         
       
      </nav><! -- Center section -->
       
    </div>
</body>

</html>


Really easy mistakes, trust me ive spent days before stumped by a end tag missing :D Let me know if i can do anything else to help :D
Thank you, I am learning a lot. I am bit slow but almost there with what I want! Best
 

Top