[HTML] 100% ul Opcje

[Sebastian003]

Witam, mam problem z wycentrowanie calego ul na 100% strony probóję tak , ale nie wychodzi :/

[HTML] pobierz, plaintext 
#menudolne {text-align:center; margin:0 auto; width:100%;}
#menudolne li{float:left;}
#menudolne ul{width:100%;}
#stopa{background-image:url("images/obraz2.jpg"); background-repeat:repeat-x;height: 121px;width: 100%;}
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
<footer id="stopa">
      <nav id="menudolne">
        <ul>
          <li><a href="das" >cos</a></li>
          <li><a href="das">cos</a></li>
          <li><a href="">cos tam</a></li>
          <li><a href="">cos tam</a></li>>
        </ul>
      </nav>
    </footer>
[HTML] pobierz, plaintext 

[sliwa007]

Musisz nadać jakąś wartość dla <ul> bo standardowo jest na 100%. Kod:

[HTML] pobierz, plaintext 
#menudolne {text-align:center; margin:0 auto; width:100%;}
#menudolne li{float:left;}
#menudolne ul{width:200px;margin: 0 auto;}
#stopa{background-image:url("images/obraz2.jpg"); background-repeat:repeat-x;height: 121px;width: 100%;}
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
<footer id="stopa">
      <nav id="menudolne">
        <ul>
          <li><a href="das" >cos</a></li>
          <li><a href="das">cos</a></li>
          <li><a href="">cos tam</a></li>
          <li><a href="">cos tam</a></li>
        </ul>
      </nav>
    </footer>
[HTML] pobierz, plaintext 

[Sebastian003]

też tak próbowałem ale wszystko z li nie jest wycentrowane tylko bardziej do lewej :/ dziwne;/

[sliwa007]

To zostaje wsadzić to wszystko w tabele.Kod:

[HTML] pobierz, plaintext 
#menudolne {text-align:center; margin:0 auto; width:100%;}
#menudolne li{float:left;}
#menudolne ul{margin: 0; overflow:hidden;}
#stopa{background-image:url("images/obraz2.jpg"); background-repeat:repeat-x;height: 121px;width: 100%;}
table {margin: 0 auto;};
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
<footer id="stopa">
      <nav id="menudolne">
	  <table>
	  <tr>
	  <td>
        <ul>
          <li><a href="das" >cos</a></li>
          <li><a href="das">cos</a></li>
          <li><a href="">cos tam</a></li>
          <li><a href="">cos tam</a></li>
        </ul>
		</td>
		</tr>
		</table>
      </nav>
    </footer>
[HTML] pobierz, plaintext 

[Sebastian003]

tabela odpada :/

[Pawel_W]

poczytaj do czego służy float, zanim zaczniesz zadawać takie pytania (IMG:style_emoticons/default/smile.gif)

wskazówka: wywal float, dla li daj display: inline-block;

[ShadowD]

To zostaje wsadzić to wszystko w tabele.Kod:

[HTML] pobierz, plaintext 
#menudolne {text-align:center; margin:0 auto; width:100%;}
#menudolne li{float:left;}
#menudolne ul{margin: 0; overflow:hidden;}
#stopa{background-image:url("images/obraz2.jpg"); background-repeat:repeat-x;height: 121px;width: 100%;}
table {margin: 0 auto;};
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
<footer id="stopa">
      <nav id="menudolne">
	  <table>
	  <tr>
	  <td>
        <ul>
          <li><a href="das" >cos</a></li>
          <li><a href="das">cos</a></li>
          <li><a href="">cos tam</a></li>
          <li><a href="">cos tam</a></li>
        </ul>
		</td>
		</tr>
		</table>
      </nav>
    </footer>
[HTML] pobierz, plaintext 

Człowieku zmiłuj się i odczep się od tabel, nigdy nie radź nikomu takich "wynalazków"!

Ci do problemu, co chcesz uzyskać?

Jeśli wycentrować to nie określaj width na 100% a na właściwą szerokość, a następnie margin 0px auto.
Jeśli chcesz rozstrzelić na całą szerokość, to będzie problem w czystym html css..

[Sebastian003]

czyli jak inaczej moglbym to rozwiązać ?

[ShadowD]

Jeśli chodzi o display: inline-block; to ma przedziwne zachowania więc ja radzę uważać, ale na pewno jest przydatne i warto się pomęczyć. :-)

Kod

<style>

#stopa
{
    width: 1000px;
}

#stopa ul
{
    margin: 0px auto;
    padding: 0px;
    
    text-align: center;
    
    list-style: none;    
}

#stopa ul li
{
    display: inline-block;  
}

</style>

<footer id="stopa">
        <ul>
            <li><a href="das" >cos</a></li>
            <li><a href="das">cos</a></li>
            <li><a href="">cos tam</a></li>
            <li><a href="">cos tam</a></li>
        </ul>
</footer>

Coś takiego działa na pewno pod ff, pod innymi też powinno, a jeśli nie to trzeba zamiast text-align: center; dodać szerokość obiekty czyli w tym przypadku ~160px. Nie wiem czy jesiennieje lepsze poprawna deklaracja.

Ten post edytował ShadowD 28.10.2011, 17:20:55

[bmL]

Jaki chcesz efekt?
Ma być w dynamicznych odstępach na całą szerokość strony czy ma być po środku ze stałymi odstępami?

[Sebastian003]

cala strona 100%, na srodku menu 900px li z odstepami 5px; czyli po środku ze stałymi odstępami

Problem rozwiązany (IMG:style_emoticons/default/smile.gif)

Ten post edytował Sebastian003 28.10.2011, 17:35:50

[sliwa007]

Jeśli chodzi o display: inline-block; to ma przedziwne zachowania więc ja radzę uważać, ale na pewno jest przydatne i warto się pomęczyć. :-)

Kod

<style>

#stopa
{
    width: 1000px;
}

#stopa ul
{
    margin: 0px auto;
    padding: 0px;
    
    text-align: center;
    
    list-style: none;    
}

#stopa ul li
{
    display: inline-block;  
}

</style>

<footer id="stopa">
        <ul>
            <li><a href="das" >cos</a></li>
            <li><a href="das">cos</a></li>
            <li><a href="">cos tam</a></li>
            <li><a href="">cos tam</a></li>
        </ul>
</footer>

Coś takiego działa na pewno pod ff, pod innymi też powinno, a jeśli nie to trzeba zamiast text-align: center; dodać szerokość obiekty czyli w tym przypadku ~160px. Nie wiem czy jesiennieje lepsze poprawna deklaracja.

display: inline-block; nie działa pod IE mistrzu css

Ten post edytował sliwa007 28.10.2011, 20:04:43

[ShadowD]

display: inline-block; nie działa pod IE mistrzu css

"Jeśli chodzi o display: inline-block; to ma przedziwne zachowania więc ja radzę uważać, ale na pewno jest przydatne i warto się pomęczyć. :-)"
Dziękujemy Panu za uważne czytanie. :-)

Ps. http://kurs.browsehappy.pl/Bugi/InlineBlock

Ten post edytował ShadowD 28.10.2011, 20:23:03