Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [css] float: right zmienia kolejność wyświetlania div'a
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
projektGraf
22.02.2010, 13:33:57
Witam

Na stronie potrzebuje aby menu było pozycjonowane do prawej krawędzi.
Napisałem taki kod:

[HTML] pobierz, plaintext 
  1. <ul style="font: bold 14px Arial; color: #FFFFFF; list-style: none;">
  2. <li style="float: right;">gdae 1</li>
  3. <li style="float: right;">gdae 2</li>
  4. <li style="float: right;">gdae 3</li>
  5. </ul>
  6.  
[HTML] pobierz, plaintext


W rezultacie mam menu po prawej stronie z tym że zmieniła się kolejność menu.

Teraz jest: gdae 3 gdae 2 gdae 1 a powinno być: gdae 1 gdae 2 gdae 3

Jak odwrócić kolejność wyświetlania float: right;

Pozdrawiam

Lion_87
22.02.2010, 13:37:23
hmmm moze odwrotnie zapisz?...
projektGraf
22.02.2010, 13:39:18
No właśnie problem w tym że nie mogę zapisać odwrotnie.
Lion_87
22.02.2010, 13:42:41
bo?
pedro84
22.02.2010, 13:43:02
Cytat(projektGraf @ 22.02.2010, 13:33:57 ) *
Witam

Na stronie potrzebuje aby menu było pozycjonowane do prawej krawędzi.
Napisałem taki kod:

[HTML] pobierz, plaintext 
  1. <ul style="font: bold 14px Arial; color: #FFFFFF; list-style: none;">
  2. <li style="float: right;">gdae 1</li>
  3. <li style="float: right;">gdae 2</li>
  4. <li style="float: right;">gdae 3</li>
  5. </ul>
  6.  
[HTML] pobierz, plaintext


W rezultacie mam menu po prawej stronie z tym że zmieniła się kolejność menu.

Teraz jest: gdae 3 gdae 2 gdae 1 a powinno być: gdae 1 gdae 2 gdae 3

Jak odwrócić kolejność wyświetlania float: right;

Pozdrawiam



Skoro potrzebujes ustalić pozycję dla menu to dlaczego nie widzę, żebyś gdziekolwiek to robił? To co robisz to prowizorka. Dla <li> daj display:inline; lub float:left;, jak tam potrzebujesz. A pozycjonuj <ul> za pomocą, np. float:right, czy jak tam potrzebujesz.
Ravik
22.02.2010, 13:43:40
O_O co to w ogóle jest ?

Lepiej będzie zrobić to na divie
[HTML] pobierz, plaintext 
  1. <div align="right">
  2. <ul>
  3. <li>twoj tekst</li>
  4. <li>twoj tekst</li>
  5. <li>twoj tekst</li>
  6. </ul>
  7. </div>
[HTML] pobierz, plaintext


Poza tym nie masz zielonego pojęcia o stylach css, poczytaj o tym

i jak już to:

[HTML] pobierz, plaintext 
  1. <ul style="font-size:14px; font-weight:bold; font-family: Arial; color: #FFFFFF; list-style-type: none;">
[HTML] pobierz, plaintext


A tekst zmienia kolejność dlatego, że ustawiłeś dla niego atrybut float, czyli tak jakby początek z którego ma się zaczynać, gdybyś ustawił float:right; tylko dla <ul>, powinno być ok, ale lepszym rozwiązaniem jest div obejmujący całe wypunktowanie.

Wpisz w google: "kurs css".
pedro84
22.02.2010, 13:47:32
@Ravik, ano nie ma pojęcia smile.gif Ale powiedz mi, po kiego ten div? Przecież może zrobić dokładnie to samo nie wciskając wszędzie, gdzie się da diva, a kod ma czystszy, czytelniejszy.
projektGraf
22.02.2010, 13:49:33
Ravik a czytałeś czasem że dla wyszukiwarek (googlebot) menu powinno być zawsze ul li. Proponuje zapoznaj się z SEO.
Ravik
22.02.2010, 14:24:19
Cytat(pedro84 @ 22.02.2010, 13:47:32 ) *
@Ravik, ano nie ma pojęcia smile.gif Ale powiedz mi, po kiego ten div? Przecież może zrobić dokładnie to samo nie wciskając wszędzie, gdzie się da diva, a kod ma czystszy, czytelniejszy.


Podałem jedno z rozwiązań, a to czy użyje float:right dla ul czy też diva to jego sprawa, a jeden div więcej to jeszcze nic strasznego smile.gif



Cytat(projektGraf @ 22.02.2010, 13:49:33 ) *
Ravik a czytałeś czasem że dla wyszukiwarek (googlebot) menu powinno być zawsze ul li. Proponuje zapoznaj się z SEO.


Nie rozumiem Cię, mimo że zajmuję się pozycjonowaniem od 2 lat nie potrafię zrozumieć tej sentencji.

Przykład który ci podałem jest najbardziej czystym przykładem zastosowania ul li, więc nie wiem o co Ci chodzi.

Pozdrawiam
pedro84
22.02.2010, 14:28:05
Cytat(projektGraf @ 22.02.2010, 13:49:33 ) *
Ravik a czytałeś czasem że dla wyszukiwarek (googlebot) menu powinno być zawsze ul li. Proponuje zapoznaj się z SEO.

A na czym On pokazał rozwiązanie? Na tabelach?

Cytat(Ravik @ 22.02.2010, 14:24:19 ) *
Podałem jedno z rozwiązań, a to czy użyje float:right dla ul czy też diva to jego sprawa, a jeden div więcej to jeszcze nic strasznego smile.gif

No tak, oczywiście, ale ten div jest naprawdę zbędny. Rozwiązanie, które podałeś, działa, a pewnie. Ale powinno się ograniczać ilość znaczników (pomijam, że i CSS wtedy przyjemniejszy).


Cytat(Ravik @ 22.02.2010, 14:24:19 ) *
Nie rozumiem Cię, mimo że zajmuję się pozycjonowaniem od 2 lat nie potrafię zrozumieć tej sentencji.
Przykład który ci podałem jest najbardziej czystym przykładem zastosowania ul li, więc nie wiem o co Ci chodzi.

Ktoś chyba chciał błysnąć biggrin.gif
krzysztof_kf
22.02.2010, 14:38:12
taki problem to nie problem czemu nie zrobisz tego za pomocą jednej komendy display: block; i float: right dla wszystkich elmentów

poczytaj sobie to http://www.kurshtml.boo.pl/css/wstep,menu.html

łap kod

Kod
<style type="text/css">
ul {
        float: right;
        }

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

</style>
<ul>
<li><a href="index.php">Podstrona 1</a></li>
<li><a href="index.php">Podstrona 2</a></li>
<li><a href="index.php">Podstrona 3</a></li>
</ul>

</body>
</html>
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.
Invision Power Board © 2001-2025 Invision Power Services, Inc.