Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [CSS/wyrównanie] wyrównanie checkbox do tekstu
oomaster
post 25.07.2008, 19:26:40
Post #1





Grupa: Zarejestrowani
Postów: 305
Pomógł: 3
Dołączył: 4.08.2006
Skąd: GDA

Ostrzeżenie: (0%)
-----


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;}


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


Próbowałem wyrównywać na siłę do góry ale nic z tego już nie wiem co może być
Go to the top of the page
+Quote Post
Inti
post 25.07.2008, 21:40:09
Post #2





Grupa: Zarejestrowani
Postów: 67
Pomógł: 12
Dołączył: 20.01.2008
Skąd: Toruń

Ostrzeżenie: (0%)
-----


Spróbuj zastosować coś takiego, nie jestem pewien ale elementy muszą chyba być właśnie inline

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


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


Pozdrawiam Inti
Go to the top of the page
+Quote Post
oomaster
post 25.07.2008, 22:05:49
Post #3





Grupa: Zarejestrowani
Postów: 305
Pomógł: 3
Dołączył: 4.08.2006
Skąd: GDA

Ostrzeżenie: (0%)
-----


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
Go to the top of the page
+Quote Post
Shili
post 25.07.2008, 22:14:54
Post #4





Grupa: Zarejestrowani
Postów: 1 085
Pomógł: 231
Dołączył: 12.05.2008

Ostrzeżenie: (0%)
-----


Daj inputowi float: left i pozycjonuj go marginesami.
Go to the top of the page
+Quote Post
Inti
post 25.07.2008, 22:24:24
Post #5





Grupa: Zarejestrowani
Postów: 67
Pomógł: 12
Dołączył: 20.01.2008
Skąd: Toruń

Ostrzeżenie: (0%)
-----


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ść

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


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


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

Pozdrawiam Inti
Go to the top of the page
+Quote Post
oomaster
post 26.07.2008, 09:22:53
Post #6





Grupa: Zarejestrowani
Postów: 305
Pomógł: 3
Dołączył: 4.08.2006
Skąd: GDA

Ostrzeżenie: (0%)
-----


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
Go to the top of the page
+Quote Post
Inti
post 26.07.2008, 09:53:51
Post #7





Grupa: Zarejestrowani
Postów: 67
Pomógł: 12
Dołączył: 20.01.2008
Skąd: Toruń

Ostrzeżenie: (0%)
-----


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ś:

  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;}


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


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:

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


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


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
Go to the top of the page
+Quote Post
oomaster
post 26.07.2008, 10:53:40
Post #8





Grupa: Zarejestrowani
Postów: 305
Pomógł: 3
Dołączył: 4.08.2006
Skąd: GDA

Ostrzeżenie: (0%)
-----


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>
Go to the top of the page
+Quote Post
Inti
post 26.07.2008, 11:13:52
Post #9





Grupa: Zarejestrowani
Postów: 67
Pomógł: 12
Dołączył: 20.01.2008
Skąd: Toruń

Ostrzeżenie: (0%)
-----


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
Go to the top of the page
+Quote Post
Shili
post 26.07.2008, 12:00:21
Post #10





Grupa: Zarejestrowani
Postów: 1 085
Pomógł: 231
Dołączył: 12.05.2008

Ostrzeżenie: (0%)
-----


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 ^^

Ten post edytował Shili 26.07.2008, 12:41:22
Go to the top of the page
+Quote Post
oomaster
post 26.07.2008, 12:28:08
Post #11





Grupa: Zarejestrowani
Postów: 305
Pomógł: 3
Dołączył: 4.08.2006
Skąd: GDA

Ostrzeżenie: (0%)
-----


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
Go to the top of the page
+Quote Post
Inti
post 26.07.2008, 12:40:48
Post #12





Grupa: Zarejestrowani
Postów: 67
Pomógł: 12
Dołączył: 20.01.2008
Skąd: Toruń

Ostrzeżenie: (0%)
-----


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
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Aktualny czas: 18.08.2025 - 23:21