Pozycjonowanie pola logowania tylko pod przyciskiem LOGOWANIE

pytanie zadane 28 maja 2017 w HTML i CSS przez Krzysiek_34 Mądrala (6,090 p.)
zamknięte 1 czerwca 2017 przez Krzysiek_34

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;
}

komentarz zamknięcia: Problem został rozwiązany.

1 odpowiedź

odpowiedź 28 maja 2017 przez Chess Szeryf (76,710 p.)
edycja 28 maja 2017 przez Chess

<body>
 
    <div class="wrapper">
     
        <nav class="main-nav">
            <ul>
                <div class="login">LOGOWANIE</div>
                   
            </ul> 
			<div id="fieldnet_login">
				<form method="post" action="">
                   <p><div class="frameset">Podaj haslo: </div><input type="text"/></p>
				   <p><div class="frameset">Podaj: email: </div><input type="email"/></p>
				   <p><div class="frameset">Podaj: email: </div><input type="submit"/></p>
				</form>
            </div>
        </nav>
 
    </div>
</body>

body
{
    background-color: #31434A;
    font-family: Verdana;
    margin: 0px;
}
.login{ 
	background-color:green;
	display:inline-block;
	padding:10px;
	width:200px;
	float:right;
	transition:2s;
}
.login:hover{
	background-color:blue;
}
ul{ 
	background-color:orange;float:right;
	width:100%;
	padding:10px 10px 10px 0;
}
#fieldnet_login{
	display:none;
	float:right;
	margin-right:40px;
}
.frameset{
	width:200px;
}

var login = document.getElementsByClassName('login')[0];
var fieldnet_login = document.getElementById('fieldnet_login');
	
	function displayed(){
		 //console.log(fieldnet_login.style.display);
		 if(fieldnet_login.style.display == 'block'){
			 fieldnet_login.style.display = 'none';
			 login.innerHTML = 'pokaz logowanie';
		 }else{ 
			 fieldnet_login.style.display = 'block';
			 login.innerHTML = 'ukryj logowanie';
		 }
		
		 
	}
	
login.addEventListener('click',displayed,false);

Pokaż 10 poprzednich komentarzy

komentarz 28 maja 2017 przez Krzysiek_34 Mądrala (6,090 p.)

To co mi przysłałeś, jest nieprzydatne. Raczej nie da się tego zrobić. Dzięki chociaż za próbę pomocy.

komentarz 28 maja 2017 przez Chess Szeryf (76,710 p.)

Dlaczego nieprzydatne?

komentarz 28 maja 2017 przez Krzysiek_34 Mądrala (6,090 p.)

Próbowałem stosować wiele kombinacji przy pomocy tego kodu i Twoich poprzednich, niestety nie przyniosło to zamierzonego efektu. Chyba, że Ty wiesz jak to zrobić nie zmieniając za bardzo mojego kodu...

komentarz 29 maja 2017 przez Chess Szeryf (76,710 p.)

<input type="checkbox" name="toggle" id="toggle" />

<label for="toggle"></label>
 
<div style="clear:both;background:brown;width:100%;height:20px"></div>
  
<div class="message"> 
 
<form method="post" action="">
	<input type="text" />
	<input type="submit"/>
</form>

</div>

body{ 
	background:green;
	margin:0;
}

.message {
	background:#181818;
	color:#FFF;
	position: relative;
	top: -250px;
	float:right;
	padding: 20px;
	transition: top 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
	overflow: hidden;
	box-sizing: border-box;
 
}
 
#toggle {
  position:absolute;
  appearance:none;
  cursor:pointer;
  left:-100%;
  top:-100%;
}

#toggle + label {
	position:relative;
	cursor:pointer;
	padding:10px;
	background: #26ae90;
	width: 100px;
	border-radius: 3px;
	padding: 8px 10px;
	color: #FFF;
	line-height:20px;
	font-size:12px;
	text-align:center;
	-webkit-font-smoothing: antialiased;
	cursor: pointer;
	float:right;
 
 
}
#toggle + label:after {
	content:"Open" 
}

#toggle:checked ~ .message {
	top: 0;
}

#toggle:checked + label:after {
	content:"Close"
}

Źródło: https://codepen.io/surjithctly/pen/pLDwe

komentarz 29 maja 2017 przez Krzysiek_34 Mądrala (6,090 p.)

Zrobiłem tak, że w pewnym sensie dało to zamierzony efekt. Wystarczyło wprowadzić kilka poprawek w CSS:

#fieldnet_login
{
	display: none;
	width: 212px;
	height: 270px;
	background-color: #800080;
	color: white;
	font-size: 11px;
	padding: 10px;
	position: absolute;
	z-index: 2;
	margin-left: 756px;
	margin-top: 24px;
}

Gdy ustawię w margin-left: 0px, to pole logowania pojawi się po lewej stronie samego wrappera. Natomiast gdy ustawię w margin-left: 800px albo więcej, to niestety pole logowania nadal będzie się przesuwało w prawo opuszczając zawartość wrappera i zmierzając do prawej strony. Stosowałem też float: right, ale to nic nie pomogło.