Witamy, Gość. Zaloguj się lub zarejestruj.
Czy dotarł do Ciebie email aktywacyjny?


Zaloguj się podając nazwę użytkownika, hasło i długość sesji

Strony: [1]
DrukujPobierz PDF
Autor Wątek: Lista wyświetla się poza swoim div-em  (Przeczytany 3159 razy)
0 użytkowników i 1 Gość przegląda ten wątek.
Sooly
Emeryt

Reputacja: 9 Offline Offline

Płeć: Mężczyzna
GIMP: 2.6 + GAP
Licencja: CC-NC-BY-SA
Wiadomości: 1 838
Galeria Użytkownika



Zobacz profil WWW
« : 24.07.2010, 16: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ć?
Zapisane

Mishell
Użytkownik

Reputacja: 0 Offline Offline

Płeć: Mężczyzna
GIMP: 2.4
Licencja: Copyright
Wiadomości: 68
Galeria Użytkownika

Mishell


Zobacz profil
« Odpowiedz #1 : 24.07.2010, 17:11:01 »

skopiowałem twój kod, otworzyłem w IE i Firefoxie i działa bez zarzutu  Buzia na kłódkę

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 Język
Zapisane
Sooly
Emeryt

Reputacja: 9 Offline Offline

Płeć: Mężczyzna
GIMP: 2.6 + GAP
Licencja: CC-NC-BY-SA
Wiadomości: 1 838
Galeria Użytkownika



Zobacz profil WWW
« Odpowiedz #2 : 24.07.2010, 17:15:04 »

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



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.
Zapisane

Mishell
Użytkownik

Reputacja: 0 Offline Offline

Płeć: Mężczyzna
GIMP: 2.4
Licencja: Copyright
Wiadomości: 68
Galeria Użytkownika

Mishell


Zobacz profil
« Odpowiedz #3 : 24.07.2010, 17: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 Uśmiech 2
« Ostatnia zmiana: 24.07.2010, 17:38:37 wysłane przez Mishell » Zapisane
Sooly
Emeryt

Reputacja: 9 Offline Offline

Płeć: Mężczyzna
GIMP: 2.6 + GAP
Licencja: CC-NC-BY-SA
Wiadomości: 1 838
Galeria Użytkownika



Zobacz profil WWW
« Odpowiedz #4 : 24.07.2010, 17:37:06 »

Z float działa! Dzięki serdeczne. Uśmiech
Zapisane

savaro
Użytkownik

Reputacja: 2 Offline Offline

GIMP: 2.6
Licencja: Copyright
Wiadomości: 88
Galeria Użytkownika



Zobacz profil
« Odpowiedz #5 : 17.09.2010, 18: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;
}
Zapisane

Rodez
Użytkownik

Reputacja: 2 Offline Offline

Płeć: Mężczyzna
GIMP: 2.6
Licencja: Copyright
Wiadomości: 209
Galeria Użytkownika



Zobacz profil
« Odpowiedz #6 : 18.09.2010, 10: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...
Zapisane

savaro
Użytkownik

Reputacja: 2 Offline Offline

GIMP: 2.6
Licencja: Copyright
Wiadomości: 88
Galeria Użytkownika



Zobacz profil
« Odpowiedz #7 : 18.09.2010, 11:21:51 »

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

Strony: [1]
DrukujPobierz PDF
Polskie Forum Użytkowników GIMP-aOgólne dyskusjeDyskusjeWebmastering & WebdesignWątek: Lista wyświetla się poza swoim div-em
Skocz do: