Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS/wyrównanie] wyrównanie checkbox do tekstu
Forum PHP.pl > Forum > Przedszkole
oomaster
25.07.2008, 19:26:40
Witam

mam mały problem nie mogę wyrównać checkbox do tekstu. Cały czas checkbox wyrównany jest w dół nie wiem dlaczego, a oto mój kod.

Kod
input.ict {vertical-align: top;}
#pw1 {width: 20px; float: left; overflow: hidden; vertical-align: top;}
#pw2 {width: 380px; float: left; overflow: hidden;}


[HTML] pobierz, plaintext 
  1. <form action="test.php" method="post" >
  2. <div id="pw1"><input class="ict" type="checkbox" /></div>
  3. <div id="pw2">testowy tekst :)</div>
[HTML] pobierz, plaintext


Próbowałem wyrównywać na siłę do góry ale nic z tego już nie wiem co może być
Inti
25.07.2008, 21:40:09
Spróbuj zastosować coś takiego, nie jestem pewien ale elementy muszą chyba być właśnie inline

[HTML] pobierz, plaintext 
  1. #pw1 {width: 20px; float: left; overflow: hidden; vertical-align: top; display: inline;}
  2. #pw2 {width: 380px; float: left; overflow: hidden;}
[HTML] pobierz, plaintext 


[HTML] pobierz, plaintext 
  1. <form action="test.php" method="post" >
  2. <div id="pw1"><input type="checkbox" /></div>
  3. <div id="pw2">testowy tekst :)</div>
[HTML] pobierz, plaintext


Pozdrawiam Inti
oomaster
25.07.2008, 22:05:49
dzięki za odpowiedź ale problem dalej istnieje sad.gif przypomnę tylko ,że ten checkbox nie jest o jedną linie w dół przesunięty. On jest w dół przesunięty o ok.3-5px
Shili
25.07.2008, 22:14:54
Daj inputowi float: left i pozycjonuj go marginesami.
Inti
25.07.2008, 22:24:24
Rzeczywiści mój błąd Wyrównane zostały bowiem tylko bloki względem siebie a nie ich zawartości Zatem możesz przesunąć sam input, od jego aktualnej pozycji od dołu do góry o daną wielkość

[HTML] pobierz, plaintext 
  1. input.ict {position: relative; bottom: 3px}
  2. #pw1 {width: 20px; float: left; overflow: hidden;}
  3. #pw2 {width: 380px; float: left; overflow: hidden;}
[HTML] pobierz, plaintext 


[HTML] pobierz, plaintext 
  1. <form action="test.php" method="post" >
  2. <div id="pw1"><input type="checkbox" /></div>
  3. <div id="pw2">testowy tekst :)</div>
[HTML] pobierz, plaintext


Sprawdź tylko czy rozwiązanie dobrze będzie działać we wszystkich przeglądarkach, ale powinno być oki

Pozdrawiam Inti
oomaster
26.07.2008, 09:22:53
też nie działa ale wpadłem na pomysł aby tego diva umieścić na warstwach tylko to rozwiązanie też nie che zadziałać teraz :/ inne rozwiązania gorsze co tekst leci na dół działają sad.gif
Inti
26.07.2008, 09:53:51
Oczywiście wcześniej zjadłem dopis klasy do inputa tongue.gif, więc style nie zostały mu przypisane - mam nadzieję, że to zauwarzyłeś:

[HTML] pobierz, plaintext 
  1. input.ict {position: relative; bottom: 3px}
  2. #pw1 {width: 20px; float: left; overflow: hidden; display: inline;}
  3. #pw2 {width: 380px; float: left; overflow: hidden;}
[HTML] pobierz, plaintext 


[HTML] pobierz, plaintext 
  1. <form action="test.php" method="post" >
  2. <div id="pw1"><input class="ict" type="checkbox" /></div>
  3. <div id="pw2">testowy tekst :)</div>
[HTML] pobierz, plaintext


Ewentualnie jeśli ustawisz je ilnline i tak jak pisałem wcześniej to powinny wyrównać się względem siebie - oczywiście same bloki div, bowiem to one ze sobą sąsiadują Wtedy operuj klasą elementu input Czyli moja pierwsza propozycja powinna wyglądać niestety tak:

[HTML] pobierz, plaintext 
  1. input.ict {vertical-align: top;}
  2. #pw1 {width: 20px; float: left; overflow: hidden; display: inline;}
  3. #pw2 {width: 380px; float: left; overflow: hidden;}
[HTML] pobierz, plaintext 


[HTML] pobierz, plaintext 
  1. <form action="test.php" method="post" >
  2. <div id="pw1"><input class="ict" type="checkbox" /></div>
  3. <div id="pw2">testowy tekst :)</div>
[HTML] pobierz, plaintext


małe niedopatrzenie.

Oczywiście jeśli jednak nic z tego nie zadziała, to możesz zrobić tak Ustaw border obydwu div na 1px i sprawdź wpierw jak się elementy do siebie mają i ich elementy wewnętrze Wtedy napisz co się dzieje i będzie można dalej myśleć - ewentaulnie podaj jeszcze ustawienia bloku, w którym się znajdują już te 2 div'y

Pozdrawiam Inti
oomaster
26.07.2008, 10:53:40
ok smile.gif problem rozwiązany dla zainteresowanych przedstawiam rozwiązanie może się przydać w przypadku budowy systemu wiadomości między użytkownikami.

Oto jak wygląda teraz:


I mój kod CSS, xhtml:
Cytat
input.ict {vertical-align: top;}
#pw1 {width: 30px; height:20px; float: left; overflow: hidden; padding-right:10px; display: inline;}
#pw2 {width: 380px; height:20px; float: left; overflow: hidden; padding-right:10px; padding-top:2px}
#pw3 {width: 200px; height:20px; float: left; overflow: hidden; padding-right:10px; padding-top:2px}
#pw4 {width: 100px; height:20px; float: left; overflow: hidden; padding-top:2px}


Kod
<form action=\"pw.php\" method=\"post\" name=\"myForm\" >
<div id=\"pw1\"><input type=\"checkbox\" class=\"ict\" /></div>
<div id=\"pw2\"><b>Temat</b></div>
<div id=\"pw3\"><b>Autor</b></div>
<div id=\"pw4\"><b>Wysłano</b></div>
<div class=\"clear\"></div><div class=\"mm\"></div><br/>

<div id=\"pw1\"><input type=\"checkbox\" class=\"ict\" /></div>
<div id=\"pw2\">Temat mój długi który komputerowo ktoś napisać</div>
<div id=\"pw3\">bolek_rtwe_polero</div>
<div id=\"pw4\">21.03 21:30</div>
<div class=\"clear\"></div><div class=\"mm\"></div><br/>

<div id=\"pw1\"><input type=\"checkbox\" class=\"ict\" /></div>
<div id=\"pw2\">Temat mój długi który komputerowo ktoś napisać</div>
<div id=\"pw3\">maciek_z_klanu</div>
<div id=\"pw4\">12.04 13:32</div>
<div class=\"clear\"></div><div class=\"mm\"></div><br/>

</form>
Inti
26.07.2008, 11:13:52
Dziwne zabiegi - napewno istnieje prostrze rozwiązanie, pamiętam coś w książki "CSS wedłueg Erica Meyera", ale nie mam jej teraz u siebie :]

Zastanawia mnie tylko w jaki sposób to całość działa, skoro identyfikator jest selektorem, który może wystąpić tylko raz obrębie strony co_jest.gif

Pozdrawiam Inti
Shili
26.07.2008, 12:00:21
Swoją drogą przekombinowałeś. To co prezentujesz to jest tabela i trzymanie tego w divach jest nadużyciem semantycznym. Tak na marginesie.

@down
I dziewczyny ^^
oomaster
26.07.2008, 12:28:08
sorry chłopaki poważny błąd smile.gif działać działa ale brzydko wygląda te id muszę zamienić na class

A co do książki "CSS wedłueg Erica Meyera" mam ją w domu ale nie sprawdzałem czy tam jest coś o checkbox'ach. Ale zajrzę dzisiaj
Inti
26.07.2008, 12:40:48
Cytat(oomaster @ 26.07.2008, 13:28:08 ) *
sorry chłopaki poważny błąd smile.gif działać działa ale brzydko wygląda te id muszę zamienić na class

A co do książki "CSS wedłueg Erica Meyera" mam ją w domu ale nie sprawdzałem czy tam jest coś o checkbox'ach. Ale zajrzę dzisiaj


To jeśli ją masz to przeczytaj sobie wnikliwie rodział dotyczący formularzy raz za razem, o ile pamiętam tam jest to zrobione na tabelach i tak jak Shili pisał będzie to o wiele lepsze rozwiązanie Owszem tabel trzeba unikać, ale nie za wszelką cenę - po coś się one czasem i przydają oprócz samych zestawień winksmiley.jpg
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.