Forum PHP.pl > [CSS] dziwne odstępy w liście

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [CSS] dziwne odstępy w liście

adam_per

5.07.2012, 02:20:00

witam,
tworzę stronę jakiejś "firmie". Już od początku były problemy z listą, z której stworzyłem menu. Obecnie występują jakieś dziwne odstępy, próbowałem paddingiem, marginem, a nawet borderem. Nic to nie pomogło, może coś to zmienia, że menu jest zrobione z obrazków? Nie wiem, zawsze robiłem menu z backgroundu, bez obrazków. Jednak może coś przeoczyłem?

Kod

#menu_poziome{
margin:0px;
padding:0px;
text-align:center;
}

#menu_poziome li{
display:inline;
margin: 0px;
padding: 0px;
text-align:center;
width:200px;
height: 80px;
border: 0px;
}

#menu_poziome ul{
width:1000px;
height:300px;
margin: 0px;
padding: 0px;
text-align:center;
float:left;
}

Kod

link do strony http://firma.netne.net

na obrazku

Tuminure

5.07.2012, 06:54:37

Te "dziwne odstępy", to po prostu spacje

.

Obejść to można na bardzo wiele sposobów. Z pewnością wygoglujesz/wymyślisz sobie ten, który Ci się najbardziej spodoba.

IProSoft

5.07.2012, 08:06:46

W deklaracji

Kod

#menu_poziome li

zmienń display: inline na

Kod

display: inline-block;

lub

Kod

display: block;
float: left;

d.stp

5.07.2012, 08:23:15

ta grafika mnie przerasta

Shido

5.07.2012, 08:50:56

Cytat(d.stp @ 5.07.2012, 09:23:15 )

ta grafika mnie przerasta

Grafiki nie ma co się czepiać, ja jak tworze to też mam w zwyczaju na pierwszy ogień dawać strasznie krzykliwe kolory i kontrastujące kolory - wtedy widać co jak i dlaczego się układa.

b4rt3kk

5.07.2012, 11:09:52

Wypierdziel te obrazki z linków, a będzie git, daj je w tle linka, a w linkach pozostaw czysty tekst.

Np.

[HTML] pobierz, plaintext 
<li><a href="">HOME</a></li>
[HTML] pobierz, plaintext

Dopisz do tego w css:

[HTML] pobierz, plaintext 
ul li a {
background: top left url('url_do_grafiki.jpg') repeat-x;
display: block;
width: 100px;
height: 50px;
line-height: 50px;
}
[HTML] pobierz, plaintext

adam_per

5.07.2012, 19:22:28

Cytat(Tuminure @ 5.07.2012, 07:54:37 )

Te "dziwne odstępy", to po prostu spacje

.

Obejść to można na bardzo wiele sposobów. Z pewnością wygoglujesz/wymyślisz sobie ten, który Ci się najbardziej spodoba.

wygoglowałem (w ks-ekspert):

Kod

bez żadnej spacji i entera (tu chyba tego nie widać), no i działa, zmieściło się w jednej linii, nie ma odstępu, ale to jest porąbane, kod w moim edytorze nie jest przejrzysty, jedna linia ciągnie się i ciągnie. Macie jakieś inne pomysły lub ulepszenie tego co zastosowałem? IProSoft, display:inline-block; sprawia, że obrazki są ściśnięte, nie w naturalnych rozmiarach, więc odpada. b4rt3kk, tym razem chce tak zrobić, z obrazkami, bo zawsze robiłem w proponowany ciebie sposób.

Quarr

6.07.2012, 09:38:30

W jednej linii bez odstępów tylko to wklej skasuj od razu resztę identyfiaktorów pozostawiając w jednym tylko
#menu_poziome{
width: 1000px;
margin: 0 auto;
}

Potem wklej to wszystkie są koło siebie jeden dotyka drugiego.

Kod

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

ul {
    position: absolute;
}

ul li {
    float: left;

}

ul a:link {
    text-decoration: none;
    display: block;
    width: 250px;     <---- zmieniając wielkość width robisz ostępy pomiędzy grafiką, zmniejszając nakładasz je na siebie jak by jeszcze były za daleko

    text-align: center;
    padding: 5px 0;
}

Chyba że masz na stronie dodatkowe menu tworzone z listy to zastosuj #menu_poziome w tym co ja nie robiłem

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.