• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

question-closed Pozycjonowanie pola logowania tylko pod przyciskiem LOGOWANIE

VPS Starter Arubacloud
0 głosów
204 wizyt
pytanie zadane 28 maja 2017 w HTML i CSS przez Krzysiek_34 Mądrala (6,050 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ź

0 głosów
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,050 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,050 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,050 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.

Podobne pytania

0 głosów
1 odpowiedź 178 wizyt
pytanie zadane 16 stycznia 2020 w Sieci komputerowe, internet przez Lodomir Początkujący (480 p.)
+1 głos
1 odpowiedź 179 wizyt
pytanie zadane 24 sierpnia 2019 w HTML i CSS przez Majdan Nowicjusz (230 p.)
0 głosów
1 odpowiedź 149 wizyt
pytanie zadane 5 listopada 2018 w HTML i CSS przez Sandy Boy Początkujący (430 p.)

92,453 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...