[CSS]Rozjeżdżające sie menu Opcje

[badowl]

Witam, kiedy zamiast obrazka w div'ie logo był normalny tekst wszystko było w porządku. Menu z logiem było wyśrodkowane i poinie i poziomie. Zmieniłem go jednak na tekst. Wtedy całe menu, bez loga zjechało w dół.

[HTML] pobierz, plaintext 
<div name="menu" id="menu">
<ul id="main_menu">
<li id="logo"><img id="img_logo" src="scripts/logo.png" /></li>
<li><a href="index.php">INFORMACJE</a></li>
<li><a href="blog.php">BLOG</a></li>
<li><a href="forum.php">FOFUM</a></li>
<li><a href="about.php">O NAS</a></li>
<li><form name="wyszukiwarka" method="post" action="szukaj.php"><input type="text" name="szukaj" id="szukaj" onkeyup="send(event)" /></form></li>
</ul>
</div>
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
#menu {
    width:1400px;;
    height:45px;
    background-color:#1f1f1f;
    margin: 0 auto;
    text-align:center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index:99999999;
    vertical-align:middle;
}
ul#main_menu #logo {
	margin-left:5px;
	margin-right:5px;
	font-size:36px;
}
#szukaj {
	width:120px;
	height:20px;
	background-color:#2d65b8;
	border:0px;
}
form {
	display: inline;	
}
ul#main_menu, ul#main_menu li {
	position:relative;
	display: inline;
	list-style: none;
	margin: 5px;
	padding: 0;
	font-family:"Century Gothic";
	font-size:20px;
	color:#2d65b8;
	vertical-align:middle;
}
 
ul#main_menu li {
	display: inline;
	white-space: nowrap;
}
a {
	text-decoration:none;
	color:#2d65b8;
}
a:visited {
	text-decoration:none;
	color:#2d65b8;
}
a:hover {
	text-decoration:underline;
}
[HTML] pobierz, plaintext 

Byłbym wdzięczny za pomoc

Nikt nie wie?

[gitbejbe]

Twój problem najprawdopodobniej wynika z tego, że nie ustawiłeś rozmiarów dla wstawionego obrazka w <img>.
W stylu dodaj dla <li id="logo"> parametr width, height oraz dla <img> to samo. szerokość i wysokość obrazka nie może być większa niż ta w li id=logo.

Chyba, że źle Ciebie zrozumiałem bo napisałeś, że zanim wstawiłeś obrazek to był tekst i było ok, a później zmieniłeś na tekst i się rozsypało ;p przyjąłem, że chodzi Ci ciągle o problem ze wstawieniem obrazka.

EDIT:

np:
ul#main_menu #logo img{height:50px;width:50px;}

powinno pomóc : )

Ten post edytował gitbejbe 11.02.2013, 22:19:14

[badowl]

Niestety nie pomogło ;/
Najpierw był tekst w stylu

[HTML] pobierz, plaintext 
<li id='logo'>LOGO</li>
[HTML] pobierz, plaintext 

Poźniej zamiast LOGO wstawiłem obrazek. Obraz loga był tam gdzie powinien ale reszta menu zjechała o kilkanaście pikseli w dół

[Michasko]

Możesz to wrzucić na jsFiddle ? Twój HTML i CSS. Oczywiście z obrazkiem.

Ten post edytował Michasko 12.02.2013, 10:13:36

[badowl]

http://jsfiddle.net/kXFXZ/6/

[Michasko]

http://jsfiddle.net/eRtg7/5/

Formularz wyśrodkuj sobie jakimś padding`iem albo top`em.
edit: aha, i pousuwaj sobie jakieś zbędne śmieci. Jeśli korzystasz z 'vertical-align' to musisz mieć zdefiniowane line-height, a nie height ew. możesz traktować element macierzysty jako komórkę tabeli (display: table-cell).

Ten post edytował Michasko 12.02.2013, 11:14:26

[badowl]

Dzięki wielkie