[CSS] dziwne odstępy w liście Opcje

[adam_per]

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

<ul id="menu_poziome">
<li><a href="ofirmie.html"><img src="ofirmie.png" alt="o firmie"/></a></li>
<li><a href="oferta.html"><img src="oferta.png" alt="oferta"/></a></li>
<li><a href="realizacje.html"><img src="realizacje.png" alt="realizacje"/></a></li>
<li><a href="cennik.html"><img src="cennik.png" alt="cennik"/></a></li>
</ul>

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

na obrazku

Ten post edytował adam_per 5.07.2012, 03:14:55

[Tuminure]

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]

W deklaracji

Kod

#menu_poziome li

zmienń display: inline na

Kod

display: inline-block;

lub

Kod

display: block;
float: left;

Ten post edytował IProSoft 5.07.2012, 08:07:08

[d.stp]

ta grafika mnie przerasta

[Shido]

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]

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]

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

<ul id="menu_poziome">
<li><a href="ofirmie.html"><img src="ofirmie.png" alt="o firmie"/></a></li><li><a href="oferta.html"><img src="oferta.png" alt="oferta"/></a></li><li><a href="realizacje.html"><img src="realizacje.png" alt="realizacje"/></a></li><li><a href="cennik.html"><img src="cennik.png" alt="cennik"/></a></li>



</ul>

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]

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

Ten post edytował Quarr 6.07.2012, 09:42:11