Drukowana wersja tematu

Napisany przez: rafalek1001 16.11.2018, 03:37:29

Witam. Mam problem z wyśrodkowaniem diva. Mam panel nawigacyjny w którym znajdują się menu oraz div logowania (jak na obrazku poniżej):



Na czerwono menu, na żółto panel logowania.

Teraz chciałbym żeby menu zawsze było wyśrodkowane, niezależnie ilości dodanych tam opcji oraz żeby obok menu znajdował się panel logowania, w ten sposób:



Niestety, kiedy ustawiam width menu na 100% kontenera i wyśrodkowuję text-align: center; to wtedy panel logowania przeskakuje na dół, jak na screenie:



Próbowałem już wszystkiego i mam świadomość że jeżeli div się nie mieści to przeskoczy niżej, ale ustawiałem także szerokość menu na auto, tak aby zajmowała tyle ile rzeczywiście mierzy, div logowania na trochę mniejszy procentowo i także to nie zdaje egzaminu. Albo przeskakuje do następnej linii albo menu się nie środkuje i tak na zmianę...

Mógłby ktoś dać jakieś wskazówki odnośnie tego jak to ustawić tak jak na drugim screenie?

Mój kod na tę chwilę jest taki:

PHP:

[PHP] pobierz, plaintext 
<div id="panel">
 
	<ul id="menu">
		<li><a href="index.php">Strona główna</a></li>
		<li><a href="typy.php">Typy</a></li>
		<li><a href="archiwum.php">Archiwum</a></li>
		<li><a href="eksperci.php">Eksperci</a></li>
		<li><a href="onas.php">O nas</a></li>
		<li><a href="kontakt.php">Kontakt</a></li>
	</ul>
 
	<?php
 
	if(!http://www.php.net/isset($_SESSION['zalogowany']))
	{
 
	?>
 
	<div id="panellogowania">
 
		<form action="zaloguj.php" method="post">
 
			<h4>Login:</h4> <br /> <input type="text" name="login" /> <br />
			<h4>Hasło:</h4> <br /> <input type="password" name="haslo" /> <br /><br />
			<input type="submit" value="Zaloguj się" />
 
		</form>
 
		<?php
 
			if(http://www.php.net/isset($_SESSION['blad']))
			http://www.php.net/echo $_SESSION['blad'];
			http://www.php.net/unset($_SESSION['blad']);
 
		?>
 
	</div>
 
	<?php
 
	} else {
 
	?>
 
	<div class="panellogowania">
 
		<h3><a href="logout.php">Wyloguj się!</a></h3>
 
	</div>
 
	<?php
 
	}
 
	?>
 
</div>
[PHP] pobierz, plaintext 

[HTML] pobierz, plaintext 
#panel
{
    background-color: #20B2AA;
	width: 100%;
	height: 150px;
}
 
#panel h4
{
	font-size: 12px;
	margin: 0;
	color: #000000;
}
 
#panel br 
{
	display: block;
	margin: 0;
}
 
#menu
{
    list-style-type: none;
	margin: 10px;
	padding-left: 0px;
	font-size: 18px;
	line-height: 740%;
	float: left;
	width: auto;
	height: 100%;
	text-align: center;
}
 
#menu > li
{
    display: inline-block;
	padding-left: 20px;
	padding-right: 20px;
	border-right: 1px dashed #0a2b42;
}
 
#menu > li:first-child
{
    border-left: 1px dashed #0a2b42;
}
 
#menu a
{
    color: #fff;
	text-decoration: none;
}
 
#menu a:hover
{
    color: #0a2b42;
}
 
#panellogowania
{
	height: 100%;
	width: 20%;
	text-align: center;
}
 
#panellogowania form
{
	margin-top: 5px;
}
 
#panellogowania input[type=submit]
{ 
    padding: 2px 6px;
    background: #ccc;
    border: 0 none;
    cursor: pointer;
    -webkit-border-radius: 5px;
    border-radius: 5px;
	margin-top: 11px;
}
[HTML] pobierz, plaintext 

Napisany przez: Tomplus 16.11.2018, 07:22:23

panel logowania musisz zrobić tak aby pływał.

użyć: float: right;

Tylko wiesz, czym więcej wpisów w menu tym menu będzie nachodzić pod panel logowania. Albo jak zmniejszysz ekran. (wystarczy zrobić okno na 4:3)

Napisany przez: rafalek1001 16.11.2018, 11:01:50

Z float:right; też nie działa. Panel logowania zawsze przeskakuje do drugiej linii.

Napisany przez: viking 16.11.2018, 11:19:30

Zdejmij mu width bo najwyraźniej nie mieści się przez 20%. I poczytaj o flex.

Napisany przez: trueblue 16.11.2018, 14:12:11

Jeśli chcesz aby było tak jak na zdjęciu nr 2, to #panellogowania powinien mieć pozycję absolutną, a #panel pozycję relatywną.

Napisany przez: rafalek1001 16.11.2018, 21:55:49

Udało się! Rzeczywiście użyłem pozycjonowania relatywnego oraz absolutnego i uzyskałem zamierzony efekt. Co zabawniejsze jeszcze przed założeniem tematu zrobiłem dokładnie to samo, ale strona mi się lekko rozszerzała w prawo (przez to że miałem dodany margin w menu, a przeoczyłem to) i porzuciłem ten pomysł. Ale wszystko już śmiga . Dziękuję wszystkim za pomoc Te flex boxy też sobie już dzisiaj ogarniałem i bardzo fajna sprawa z tym