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 make a drop down menu fixed from the top with css?

    How to remove Left property when position: absolute?

    How to adjust table or content in CSS when printing?

    How to change the selection tip of custom cursor using css

    How to prevent rendering css when loading stylesheet from local storage?

    How can i make an inline li 100% width of window with horizontal scrolling viewport

    How to set browser full width navigation?

    How to create a card flip effect on DIV using javascript

    CSS: how to make background on left and right of the content

    How to align list items

    How to make margin collapsing work with input type=button/submit?

    how to make DIV show up on top of other Divs

    How to make in CSS an overlay over an image?

    HTML/CSS slideshow without javascript

    How would you code this: Grid-breaking shapes

    How to fix misaligned rows alt the last records, after using vertical scroll and frozen column?

    How to make a Check Button? (hidden checkbox with label as a button: CSS only)

    How well does iOS / mobile safari comply with modern browser standards?

    How to make my

    How do I use a wildcard asterisk CSS selector in SASS? [closed]

    Devtools audit shows unwanted/injected css rules

    How to animate multiple elements at the same time?

    CSS: How to align elements around a centered element?

    .show() not working on page load

    How to change text color of a css class?

    How to reveal content behind a div with pure css?

    Google font - how to specific font-family If they have the same name?

    How to remove white border from blur background image

    How to get the first ClassB inside ClassA?

    How can I make this menu's “clear:both” work in Google Chrome?