Witam.
Po kliknięciu na przycisk LOGOWANIE znajdujący się po prawej stronie, wyskakuje mi pole logowania, na którym są pola do wypełniania + przyciski. Niestety pozycjonowanie tego pola logowania muszę ustalać kierunkami typu top albo right na wysokości wrappera. Do right musiałem przypisać 189px, aby to wyglądało sensownie Przy zapisie:
#fieldnet_login
{
top: 0px;
right: 0px;
}
pole logowania znajduje się na wysokości wrappera tuż po prawej stronie całej zawartości strony. Czy dałoby się zrobić tak, aby pozycjonowanie pola logowania można było ustalać tylko na szerokości wrappera? Ustalić float: right i pozycjonować to pole w 10-20px, a nie w setkach pikseli. A najlepiej, aby to pole znajdowało się tuż pod przyciskiem LOGOWANIE nie ustalając pozycjonowania w px.
<body>
<div class="wrapper">
<nav class="main-nav">
<ul>
<div class="login">LOGOWANIE</div>
<div id="fieldnet_login">
zawartość pola logowania
</div>
</ul>
</nav>
</div>
<script type="text/javascript">
$(document).ready(function() {
$(".login").click(function() {
$('#fieldnet_login').toggle();
});
});
</script>
<script type="text/javascript">
var one = document.querySelector(".login");
one.addEventListener("click", function () {
document.querySelector(".login").classList.toggle("purple")
}, false);
</script>
</body>
body
{
background-color: #31434A;
font-family: Verdana;
margin: 0px;
width: 100%;
position: relative;
}
.wrapper
{
width: 1000px;
margin-left: auto;
margin-right: auto;
}
.main-nav
{
overflow: hidden;
background-color: #C34F4F;
padding: 6px;
margin-top: 10px;
}
.main-nav ul
{
margin: 0;
padding: 0;
list-style-type: none;
}
.login
{
float: right;
display: block;
padding: 5px;
background-color: #000000;
color: white;
font-size: 11px;
text-decoration: none;
outline: none;
}
.login:hover
{
background-color: #800080;
color: white;
cursor: pointer;
}
.purple
{
background-color: #800080;
}
#fieldnet_login
{
display: none;
width: 212px;
height: 270px;
background-color: #800080;
color: white;
font-size: 11px;
padding: 10px;
position: absolute;
z-index: 2;
top: 30px;
right: 189px;
}