HTML ändert seine Position beim Ändern der Größe des Fensters

{% load staticfiles %} 
<!DOCTYPE html> 
<html> 
<head> 
<title>Example</title> 
<link href="{% static 'css/hover.css' %}" rel="stylesheet" media="all"> 
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" media="all"> 

<!-- CSS -->  
<style> 

.menu { 
font-family: sans-serif; 
background: blue; 
padding: 5px; 
width: 130px; 
z-index: 100; 
bottom: 200px; 
right: 700px; 
box-shadow: 5px 5px 5px; 
border-radius:5px 5px 5px 5px; 
margin-bottom: 160px; 
position: relative;left:700px;top:250px; 

} 

.menu a, 
.menu h3 { 
font-size: 0.9em; 
display: block; 
margin: 0 0.5em; 
color: white; 
} 

input { 
    width: 120px; 
} 

</style> 
</head> 
<body> 


<!-- HTML --> 
<main> 

<nav class="menu"> 
<div id='wrapper'> 
<h3>Login</h3> 

<form method='POST' class= "post-form"> {{ form.as_p }} </form> 

<a href="#" class="hvr-grow">Create Account</a> 
</div> 

</nav> 

</main> 

</body> 
</html>

Es zeigt nur ein quadratisches Menü in der Mitte des Bildschirms an, bis ich die Größe des Fensters ändere. Es bleibt nicht mehr im Zentrum, wie kann ich das ändern? Ich habe versucht, min-width zu verwenden, aber ohne Erfolg. Wie bekomme ich es, an Ort und Stelle zu bleiben?HTML ändert seine Position beim Ändern der Größe des Fensters

Quelle

2017-02-13 Amon

dieses

.menu { 
 
font-family: sans-serif; 
 
background: blue; 
 
padding: 5px; 
 
width: 130px; 
 
z-index: 100; 
 
box-shadow: 5px 5px 5px; 
 
border-radius:5px 5px 5px 5px; 
 
margin-bottom: 160px; 
 
position: relative; 
 
top:250px; 
 
margin: auto; 
 
} 
 

 
.menu a, 
 
.menu h3 { 
 
font-size: 0.9em; 
 
display: block; 
 
margin: 0 0.5em; 
 
color: white; 
 
} 
 

 
input { 
 
    width: 120px; 
 
}

<main> 
 
    <nav class="menu"> 
 
    <div id='wrapper'> 
 
     <h3>Login</h3> 
 
     <form method='POST' class= "post-form"> {{ form.as_p }} </form> 
 
     <a href="#" class="hvr-grow">Create Account</a> 
 
    </div> 
 
    </nav> 
 
</main>

JsFiddle Versuchen - https://jsfiddle.net/f39wurmn/

Quelle

2017-02-13 05:06:07 grinmax

Ihnen danken, dass schien zu funktionieren! Was ist der Unterschied zwischen "margin-top" und "top"? – Amon

@Amon besser verstehen Sie die CSS-Eigenschaften und wie sie funktionieren – grinmax

es ist ein anderes Wert Positionierungselement, Top funktioniert, wenn das Element Position hat: relativ oder absolut – grinmax

Sie haben die Positionierung Ihres Menüs hart codiert. Stellen Sie stattdessen den Körper auf position: relative und Ihr Navigationsgerät auf position: absolute. Dann können Sie die Funktion css calc() verwenden, um Ihr Navigationsgerät auf einer beliebigen Seitengröße zu zentrieren. Siehe Beispiel:

html { 
 
    min-height: 100%; 
 
    } 
 
body { 
 
    height: 100vh; 
 
    width: 100%; 
 
    position:relative; 
 
    } 
 

 
.menu { 
 
position: absolute; 
 
font-family: sans-serif; 
 
background: blue; 
 
padding: 5px; 
 
width: 130px; 
 
z-index: 100; 
 
top:calc((100vh - 2.7em - 10px)/2); 
 
right:calc((100% - 140px)/2); 
 
box-shadow: 5px 5px 5px; 
 
border-radius:5px 5px 5px 5px; 
 

 

 

 
} 
 

 
.menu a, 
 
.menu h3 { 
 
font-size: 0.9em; 
 
display: block; 
 
margin: 0 0.5em; 
 
color: white; 
 
} 
 

 
input { 
 
    width: 120px; 
 
}

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" media="all"> 
 

 

 

 

 
<!-- HTML --> 
 
<main> 
 

 
<nav class="menu"> 
 
<div id='wrapper'> 
 
<h3>Login</h3> 
 

 
<form method='POST' class= "post-form"> {{ form.as_p }} </form> 
 

 
<a href="#" class="hvr-grow">Create Account</a> 
 
</div> 
 

 
</nav> 
 

 
</main>

Quelle

2017-02-13 05:15:31 wlh

Das funktioniert auch gut, der Unterschied zwischen dieser Antwort und der anderen ist, dass diese eine scrollbare Seite ergibt. Ist das besser oder schlechter? – Amon

HTML ändert seine Position beim Ändern der Größe des Fensters

Antwort

Verwandte Themen