How to change the location of my yt video ( I want to move it approximately 10 cm down and 10cm to the right so that it doesnt clash)


Tags: html,css

Problem :

i want to more the yt video i have on my webpage so that it doesnt clash with my nav bar, i want to move i about 10 cm to the right and 10 cm down.

I also want to add a title or logo in my nav bar on the top left hand side and dont know how to do this either. below i have included both the html and css for my code, thanks.

<!DOCTYPE html> 
        <html>
        <head> 
        <title>Muhammed's Webpage</title> 

        <link rel="stylesheet" type="text/css" href="Homepage.css">
        <script type="text/javascript" href="Homepage.js"> </script> 

        <link href='https://fonts.googleapis.com/css?family=Raleway:700|Arya:400,700|Nunito:700' rel='stylesheet' type='text/css'>

        </head>

        <body> 
        <div id="page">

        <div id="navbar"> 
        <ul> 
        <li><a href="#BasicInfo"> BASIC INFORMATION </a></li> 
        <li><a href="#Curriculum Vitae"> CURRICULUM VITAE </a></li>
        <li><a href="#Portfolio"> PORTFOLIO </a></li> 
        <li><a href="#Report"> REPORT </a></li>
        </ul>

        </div> 

        <iframe width="800" height="400"
src="http://www.youtube.com/embed/nKIu9yen5nc">
</iframe>

        <div class="content" id="Basic Information"> 
        <h3 class="contentbox"> <u>Basic Information</u> </h3> 
        <p>In this section i will have some information about myself. <br> 
        For my finished website i'd like to make it responsive, so that it alters and readjusts 
        well to different screen sizes. I'd also like to include a gallery that uses javascript as
        i haven't used any javascript on this site yet. <br> 
        <br> 
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.

        </p>
        </div> 

        <div class="content" id="Curriculum Vitae"> 
        <h3 class="contentbox"> <u>Curriculum Vitae</u> </h3>
        <p> 
        Here i will have my twitter, instagram and facebook feed <br>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
        Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis
        dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec,
        pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo
        </div>

        <div class="content" id="Portfolio">
        <h3 class="contentbox"> <u>Portfolio</u> </h3> 
        <p>
        Here i will showcase some of my current projects and completed projects. <br>Lorem ipsum dolor
        sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
        Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
        Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat 
        massa quis enim.  
        </p>
        </div>


        <div class="content" id="Report">
        <h3 class="contentbox"> <u>Report</u> </h3> 
        <p>
        Here i will showcase some of my current projects and completed projects. <br>Lorem ipsum dolor
        sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
        Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
        Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat 

        </div>

        <br>
        <br>

        </body>
        </html>

#page {
    margin: auto;
    max-width: 85%; 
    font-family: 'Arya', sans-serif;
    color: white;
    padding-top: 50px;
}

#navbar {
    position: fixed; 
    top: 0;  
    width: 100%;
    margin-left: 11%;
    opacity: 0.8;
    max-width: 85%;

}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: white;
    position: fixed;
}
li {
    float: left;
    border-right: 2px solid black;
}

li:first-child {
    border-left: 2px solid black;
}
li a {
    display: inline-block;
    color: black;
    text-align: justify;
    padding: 36px 40px; 
    text-decoration: underline; 
    font-family: 'Raleway', sans-serif;
}
li a:hover {
    background-color: #5c5c5c;
    color: white; 
}
.contentbox {
    font-family: 'Arya', sans-serif;
    font-weight: 700;
    font-size: 2em;
    padding-left: 10px;
    padding-bottom: 0;
    margin-bottom: 0;
    background-color:  grey;
}
.content {
    background-color: grey;
}
p {
    text-indent: 3%; 
    margin: auto;
    max-width: 95%;
}
h3 {
    margin-left: 5px;
    max-width: 95%;
}


Solution :

Fastest way to move your iframe is to put it inside a <div> and give it the margin you desire. To add a logo to your nav bar simply put a <img> inside your div 'navbar'

<div id="youtube-vid">
   <iframe width="800" height="400"
   src="http://www.youtube.com/embed/nKIu9yen5nc">
   </iframe>
</div>


<div id="navbar">
<img src="path/to/img"> 
     <ul> 
        <li><a href="#BasicInfo"> BASIC INFORMATION </a></li> 
        <li><a href="#Curriculum Vitae"> CURRICULUM VITAE </a></li>
        <li><a href="#Portfolio"> PORTFOLIO </a></li> 
        <li><a href="#Report"> REPORT </a></li>
     </ul>
</div>

    CSS Howto..

    How to keep symmetry with CSS fluid spacing of dynamic content

    how to I use an Arabic font in my css?

    How can I get the dots that surround some elements to go away/become solid lines?

    In firefox, how to change color of text in a treecell using javascript

    How to avoid the particular class from applying css

    How do I make an image shrink and grow according to re-sizing the browser.

    How to create CSS heart? / Why is this CSS creating a heart shape?

    Angularjs: How to *retrieve* css property from element in directive?

    How to set min-height for bootstrap container

    How to position and style blockquote in css

    How to return a “text” in css less?

    My YouTube video wont show in iframe

    How to point to CSS default class using the class attribute

    How to stop floating right image inside div bleeds over in Google Chrome

    How can i change jquery-div creation to some other method

    How to fit an image according to screen size

    how does the jquery resultview on Airbnb Search Page work?

    how to hide html video controls in micorostf edge (fullscreen mode)

    How to only underline text element inside an element in CSS?

    How do I use a gradient as a font color in CSS?

    how to create arrow between two background images in css

    efficient way to show an beside each instance

    How to update current css version in asp.net

    How to show borders of th elements with gradient fills in IE9?

    CSS: How to theme only submit button (and not cancel or back button) - I´m using Drupal 6

    ASP.NET How to set Text to the right side of image

    How do you disable the set width of parent element for child element?

    How to draw an inner div over an outer div using css?

    CSS: How to center text vertically and horizontally over an image

    What is SVG and how does it work?