How to position a Span tag on the page?

2

I'm studying ASP.NET MVC 5 and I'm trying to create a page where in the upper left corner I would have a "Menu" button, I could create the button and action but I'm having trouble locating the button on the page. / p>

I want this button to be on the top left of the page and do not go down even though the text is large, however the way I am doing, as the text grows the button goes down.

HTML code:

    @model WebApplication3.Models.MenuInicialModels

@{
    ViewBag.Title = "Inicial";
}

<h1>TESTE 1</h1>
<h2>TESTE</h2>
<h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sapien sem, viverra sed semper non, elementum ut mi. Nullam quis rutrum nisl, non pharetra magna. Ut fringilla sollicitudin aliquam. Maecenas et felis non nibh consequat lobortis. Phasellus ornare sagittis tortor a dapibus. Pellentesque eget sapien condimentum, suscipit orci et, mollis lacus. Donec sit amet sodales arcu. Sed est urna, imperdiet ac sollicitudin at, posuere quis nibh. Integer sollicitudin gravida velit, non dapibus tortor accumsan eget. Praesent vitae eleifend nibh. Vivamus mollis sit amet tellus eu ultrices. Fusce in libero egestas, bibendum neque nec, porta dui. Sed sagittis posuere massa eget vulputate. Donec ipsum eros, congue et ante sit amet, finibus faucibus velit. Donec rhoncus vel mauris venenatis feugiat.

Duis metus enim, interdum vel nunc varius, iaculis placerat metus. Aliquam sagittis consequat magna, eu volutpat ipsum efficitur non. Nulla tincidunt vehicula metus, sed dignissim ligula tincidunt vel. Sed vitae nibh ac quam pellentesque varius in et neque. Vestibulum lobortis venenatis rhoncus. Integer maximus porttitor volutpat. Duis arcu orci, ultricies ut ullamcorper at, vulputate sit amet sem. Vivamus nec libero nec risus condimentum fringilla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed ultricies dui et orci sagittis, quis maximus est gravida. Praesent quis sollicitudin nunc. Sed eu nunc aliquet, vulputate justo vel, iaculis sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur neque ac ante porta congue.</h4>

<div id="mySidenav" class="sidenav">
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
    <a href="#">About</a>
    <a href="#">Services</a>
    <a href="#">Clients</a>
    <a href="#">Contact</a>
</div>

<div id="Open_menu">
    <span onclick="openNav()">Menu</span>
</div>

CSS Code:

    .sidenav {
    height: 100%; /* 100% Full-height */
    width: 0; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    z-index: 1; /* Stay on top */
    top: 0;
    left: 0;
    background-color: #111; /* Black*/
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 60px; /* Place content 60px from the top */
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}

/* The navigation menu links */
.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover, .offcanvas a:focus{
    color: #f1f1f1;
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
    position: absolute;
    top: 50px;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
    transition: margin-left .5s;
    padding: 20px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
}

#Open_menu {
    position: fixed;
    z-index: 999;
    cursor:pointer;
    margin-left: -120px;
    margin-bottom: 100px;
    margin-top: -100px;
    font-size: 20px;
}

Page:

Usingtheposition:fixedbutton,thebuttonwasinthefixedpositionwhenscrollingthepage,butwhenlargertextwasadded,thebuttonwentdown:

Itseemsthatitis"linked" with the footer, because if you change the value of the tag margin-top: the footer also accompanies the modification.

    
asked by anonymous 21.10.2016 / 22:11

1 answer

4

In any case, you can use (as one of the options) position:fixed .

#Open_menu {
    position: fixed;
    z-index: 999;
    margin-top : 70px;
    margin-left: 33px;
    cursor:pointer;
    font-size: 20px;            
}

Or you can switch to:

    @model WebApplication3.Models.MenuInicialModels

@{
    ViewBag.Title = "Inicial";
}
<div id="mySidenav" class="sidenav">
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
    <a href="#">About</a>
    <a href="#">Services</a>
    <a href="#">Clients</a>
    <a href="#">Contact</a>
</div>
<div id="Open_menu">
    <span onclick="openNav()">Menu</span>
</div>
<h1>TESTE 1</h1>
<h2>TESTE</h2>
<h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sapien sem, viverra sed semper non, elementum ut mi. Nullam quis rutrum nisl, non pharetra magna. Ut fringilla sollicitudin aliquam. Maecenas et felis non nibh consequat lobortis. Phasellus ornare sagittis tortor a dapibus. Pellentesque eget sapien condimentum, suscipit orci et, mollis lacus. Donec sit amet sodales arcu. Sed est urna, imperdiet ac sollicitudin at, posuere quis nibh. Integer sollicitudin gravida velit, non dapibus tortor accumsan eget. Praesent vitae eleifend nibh. Vivamus mollis sit amet tellus eu ultrices. Fusce in libero egestas, bibendum neque nec, porta dui. Sed sagittis posuere massa eget vulputate. Donec ipsum eros, congue et ante sit amet, finibus faucibus velit. Donec rhoncus vel mauris venenatis feugiat.

Duis metus enim, interdum vel nunc varius, iaculis placerat metus. Aliquam sagittis consequat magna, eu volutpat ipsum efficitur non. Nulla tincidunt vehicula metus, sed dignissim ligula tincidunt vel. Sed vitae nibh ac quam pellentesque varius in et neque. Vestibulum lobortis venenatis rhoncus. Integer maximus porttitor volutpat. Duis arcu orci, ultricies ut ullamcorper at, vulputate sit amet sem. Vivamus nec libero nec risus condimentum fringilla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed ultricies dui et orci sagittis, quis maximus est gravida. Praesent quis sollicitudin nunc. Sed eu nunc aliquet, vulputate justo vel, iaculis sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur neque ac ante porta congue.</h4>

And in css

#Open_menu {
    float: left;
    margin-top : 70px;
    margin-left: 33px;
    cursor:pointer;
    font-size: 20px;            
}
    
21.10.2016 / 22:23