Drukuj stronę - Lista wyświetla się poza swoim div-em

Tytuł: Lista wyświetla się poza swoim div-em
Wiadomość wysłana przez: Sooly on 24.07.2010, 17:47:00

mam takie menu umieszczone w div-ie o id "top":

Kod:

<div id="top">
	<img src="Img/logo.png" alt="TwojaNazwa" />
	<ul>
		<li><a href="index.html">Home</a></li>
		<li><a href="index.html">About</a></li>
		<li><a href="index.html">Portfolio</a></li>
		<li><a href="index.html">Solutions</a></li>
		<li><a href="index.html">Products</a></li>
		<li><a href="index.html">Contact</a></li>
	</ul>
</div>

Kod:

#top 
{
	background: #383838;
	height: 78px;
	width: 900px;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: auto;
	margin-right: auto;
	padding: 0;
}

ul, ul li 
{
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
}

ul li 
{
	display: inline;
	white-space: nowrap;
}

I to menu wyświetlane jest przez przeglądarkę poza div-em, dokładnie pod nim.
Mogę ustawić ujemny margines dla listy, ale czy nie powinna już bez niego znajdować się w obrębie swojego div-u?
Co powinienem poprawić?

Tytuł: Odp: Lista wyświetla się poza swoim div-em
Wiadomość wysłana przez: Mishell on 24.07.2010, 18:11:01

skopiowałem twój kod, otworzyłem w IE i Firefoxie i działa bez zarzutu :-X

ewentualnie zastanowiłbym się nad podwójnym ustawieniem display dla 'ul li' najpierw piszesz block, potem inline.

Cytuj

ul, ul li
{
   display: block;
   list-style: none;
   margin: 0;
   padding: 0;
}

ul li
{
   display: inline;
   white-space: nowrap;
}

zamieniłbym na:

Kod:

ul
{
display: block;
}
ul, ul li 
{
	list-style: none;
	margin: 0;
	padding: 0;
}

ul li 
{
	display: inline;
	white-space: nowrap;
}

ale to tylko gdybanie :P

Tytuł: Odp: Lista wyświetla się poza swoim div-em
Wiadomość wysłana przez: Sooly on 24.07.2010, 18:15:04

Może lepiej pokażę, jak to wygląda w połączeniu z resztą aktualnego kodu.

(http://www.gimpuj.info/gallery/17327_24_07_10_5_13_57.png)

Div "top" to ten z szarym tłem, jak widać w kodzie jego rozmiary są ograniczone do tych widocznych, a jednak menu wyświetla się poniżej.
Spróbowałem Twojej modyfikacji, ale to nic nie zmieniło.

Tytuł: Odp: Lista wyświetla się poza swoim div-em
Wiadomość wysłana przez: Mishell on 24.07.2010, 18:25:10

Może pomogłoby zwiększenie wysokości div-a - tak żeby menu pokazało się pod obrazkiem. Albo dodać do obrazka styl float: left, żeby menu pokazało się po jego prawej stronie?

@down cieszę się że mogłem pomóc ^^

Tytuł: Odp: Lista wyświetla się poza swoim div-em
Wiadomość wysłana przez: Sooly on 24.07.2010, 18:37:06

Z float działa! Dzięki serdeczne. :)

Tytuł: Odp: Lista wyświetla się poza swoim div-em
Wiadomość wysłana przez: savaro on 17.09.2010, 19:37:27

Trochę odświeżę.
Dlaczego nie pozbyć się obrazka z html i nie umieścić w css:

Kod:

#top 
{
    background: #383838 url(.Img/logo.png) 50px 0 no-repeat;
    height: 78px;
    width: 900px;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
}

Tytuł: Odp: Lista wyświetla się poza swoim div-em
Wiadomość wysłana przez: Rodez on 18.09.2010, 11:43:23

A czy to ma jakieś znaczenie, czy obrazek jest w html, czy w CSS? Jak dla mnie bez różnicy, chociaż sam używam wersji z CSS...

Tytuł: Odp: Lista wyświetla się poza swoim div-em
Wiadomość wysłana przez: savaro on 18.09.2010, 12:21:51

Głównie poprawia estetykę kodu. Chociaż w niektórych przypadkach przeniesienie obrazka z html do css znacznie ułatwia formatowanie.

Polskie Forum Użytkowników GIMP-a

Ogólne dyskusje => Webmastering & Webdesign => Wątek zaczęty przez: Sooly on 24.07.2010, 17:47:00