/    Sign up×
Community /Pin to ProfileBookmark

How to put a menu at the left side in a div with a video?

[upl-image-preview url=https://www.webdeveloper.com/assets/files/2020-03-23/1584971432-353074-picca-index.png]

Hello people does somebody know how I can put a nav menu at the left side with the width 25% and height 100% of the div.

My html code :

[code]<!DOCTYPE html>
<html>
<head>
<title>Controlmydestiny.com</title>
<div class=”header”>
<div class=”category”>
</div>

<nav class=”navigation”>
<a href=”#” class=”navbar-logo”>Logo</a>
<div class=”navbar-right”>
<a href=”#”>About</a>
<a href=”#”>Blog</a>
<a href=”#”>Contact</a>
</div>
</nav>

<div class=”video-container”>
<video autoplay loop muted id=”video-bg”>

<source src=”http://bigcom.com/assets/2014/08/iChooseB.mp4″ type=”video/mp4″>

</video>
</div>
</div>
<link rel=”stylesheet” type=”text/css” href=”styles.css”>
</head>
<body>

</body>
[/code]

And CSS:

[code].navigation{
padding-top:30px;
padding-bottom:30px;
position:absolute;
top:0;
width:100%;
z-index:1;
}

.navbar-right{
float:right;
padding-right:10%;
}

.navbar-right a{
text-decoration:none;
padding:10px;
color: #fff;
font-family:Arial;
font-weight:900;
}

.navbar-right a:hover{
text-decoration:underline;
}
.navbar-logo{
padding-left:10%;
font-family:Arial;
font-size:30px;
font-weight:bold;
text-decoration:none;
color:#fff;
}

.video-container {
z-index: -100;
width:100%;
height:100%;
overflow:hidden;
position:absolute;
top:0;
left:0;
}

#video-bg{
width:100%;

}[/code]

to post a comment
CSSHTML

3 Comments(s)

Copy linkTweet thisAlerts:
@SempervivumMar 23.2020 — Very often float and absolute positioning are not a solution but a reason for issues. Make yourself familiar with flex layout, using it it will be easy to arrange your elements as you require.

https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Copy linkTweet thisAlerts:
@SempervivumMar 23.2020 — BTW: Please use code tags when posting code: `your code here`
Copy linkTweet thisAlerts:
@cootheadMar 23.2020 — Hi there iweniviraldo,

here is a basic example for you to play around with...

``<i>
</i>&lt;!DOCTYPE HTML&gt;
&lt;html lang="en"&gt;
&lt;head&gt;

&lt;meta charset="utf-8"&gt;
&lt;meta name="viewport" content="width=device-width,height=device-height,initial-scale=1"&gt;

&lt;title&gt;Untitled Document&lt;/title&gt;

&lt;!--&lt;link rel="stylesheet" href="screen.css" media="screen"&gt;--&gt;

&lt;style media="screen"&gt;

body {
margin: 0;
background-color: #f0f0f0;
font: normal 1em / 150% sans-serif;
}

#video-bg {
position: absolute;
width: 100%;
height: auto;
z-index: -1;
}

#header {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding:1em 4em;
}

#header ul {
display: flex;
justify-content: space-between;
padding: 0;
margin: 0;
list-style:none;
}

#header li {
margin-left: 1em;
}

#header a {
display: block;
padding: 0.25em 0.5em;
margin-bottom: 0.5em;
font-size: 1.5em;
color: #fff;
text-decoration: none;
text-shadow: 0 0 1px #000,0 0 2px #000 ;
}

@media ( max-width: 34em ) {
#header {
justify-content: space-around;
}
}
&lt;/style&gt;

&lt;/head&gt;
&lt;body&gt;

&lt;video autoplay loop muted id="video-bg"&gt;
&lt;source src="http://bigcom.com/assets/2014/08/iChooseB.mp4" type="video/mp4"&gt;
&lt;/video&gt;

&lt;div id="header"&gt;
&lt;a href="#" class="navbar-logo"&gt;Logo&lt;/a&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Blog&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;
``

_coothead_
×

Success!

Help @iweniviraldo spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 3.28,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,

tipper: Anonymous,
tipped: article
amount: 10 SATS,
)...