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

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

Twoja pierwsza odpowiedź nie przyniosła zamierzonego efektu w:

.login
{
	display: inline-block;
}

pozbywając się display: block.

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

W takim razie jaki chcesz osiągnąć efekt?

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

Taki efekt, aby przy zapisie:

#fieldnet_login
{
	top: 0px;
	right: 0px;
}

to pole logowania nie było przyczepione do prawej strony, tylko znajdowało się pod przyciskiem LOGOWANIE.

Przy zapisie:

#fieldnet_login
{
	top: 30px;
	right: 189px;
}

to wygląda tak:

http://imageshack.com/a/img923/7544/HrA9Bz.jpg

Natomiast przy zapisie:

#fieldnet_login
{
	top: 0px;
	right: 0px;
}

to wygląda tak:

http://imageshack.com/a/img923/5866/ImDWia.jpg

Spójrz jaka jest różnica.

komentarz 28 maja 2017 przez Shaoi Mądrala (7,020 p.)

Da się.

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

<body>
 
    <div class="wrapper">
     
        <nav class="main-nav">
            <ul>
                <a href="#fieldnet_login"><div class="login">LOGGING</div></a>
                   
            </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>
				<a href="#fieldnet_login2">Hidden</a>
            </div>
        </nav>
 
    </div>
Lorem Ipsum (...).
  
</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{
 
	float:right;
	 display:none;
}
.frameset{
	width:200px;
}
#fieldnet_login:target { display:block }

https://developer.mozilla.org/en-US/docs/Web/CSS/:target

http://www.kurshtml.edu.pl/css/etykieta,pseudoklasy.html

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

Podałeś mi zupełnie inny zapis w JS. Uważam, że zmiana zapisu JS jest bezsensu. Takie jest moje zdanie.

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

Nie wiem, gdzie ty w powyższym kodzie widzisz JavaScript.

<body>

    <div class="wrapper">
     
        <nav class="main-nav"> 
            <ul>
				
               <label for="item-1"><div class="login">LOGGING</div></label>
                   
            </ul> 
			<input type="checkbox" id="item-1"/>
			<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>
Lorem Ipsum (...).
  
</body>

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

 input#item-1[type=checkbox]:checked + #fieldnet_login {
	 opacity:0;
 }
 
 input#item-1 {
	position:absolute;
	left:-999em
}

Tut: https://codepen.io/paulobrien/pen/tpmAi

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

A co to jest?:

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

Wysłałeś mi to.

Byłoby super, gdyby dało się to zrobić wprowadzając kilka drobnych poprawek w samym CSS. Najlepiej bez zmian w zapisie HTML i JS.

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

body
{
    background-color: #31434A;
    font-family: Verdana;
    margin: 0px;
}
 
 
#id1,#id2{ 
	background:red;
	display:inline-block;
	float:right;
}
span#content{ 
	float:right;
}

input#show,input#hide {
display:none;
 
}

span#content {
    display:none;
}

input#show:checked ~ span#content{
  display:block;
}

input#show:checked ~ label#id1{
  display:none;
}
input#show:checked ~ label#id2{
  display:block;
}

input#hide:checked ~ label#id2{
  display:none;
}
input#hide:checked ~ label#id1{
  display:block;
}
input#hide:checked ~ span#content{
    display:none;
}

<input type="radio" id="show" name="group"/>
<input type="radio" id="hide" name="group"/>

    <label id="id1" for="show"><span id="id1">show</span></label>
	<label id="id2" for="hide"><span id="id2">hide</span></label>
	
<span id="content">
    <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>
</span>

Kod skopiowany z: http://jsfiddle.net/vtfqW/1/

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

Tak się zastanawiam czy coś wniosę z Twojego przysłanego kodu do tego mojego...

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.