Środkowanie diva Opcje

[rafalek1001]

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(!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(isset($_SESSION['blad']))
			echo $_SESSION['blad'];
			unset($_SESSION['blad']);
 
		?>
 
	</div>
 
	<?php
 
	} else {
 
	?>
 
	<div class="panellogowania">
 
		<h3><a href="logout.php">Wyloguj się!</a></h3>
 
	</div>
 
	<?php
 
	}
 
	?>
 
</div>
[PHP] pobierz, plaintext 

CSS:

[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 

Nie daje to niestety nic:



Ten post edytował rafalek1001 16.11.2018, 03:43:22