Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [CSS/wyrównanie] wyrównanie checkbox do tekstu
oomaster
post
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;}


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

[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
Go to the top of the page
+Quote Post
oomaster
post
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 (IMG:http://forum.php.pl/style_emoticons/default/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
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
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ść

[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
Go to the top of the page
+Quote Post
oomaster
post
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ą (IMG:http://forum.php.pl/style_emoticons/default/sad.gif)
Go to the top of the page
+Quote Post
Inti
post
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 (IMG:http://forum.php.pl/style_emoticons/default/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
Go to the top of the page
+Quote Post
oomaster
post
Post #8





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

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

ok (IMG:http://forum.php.pl/style_emoticons/default/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:
(IMG:http://i37.tinypic.com/qz0nls.gif)

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
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 (IMG:http://forum.php.pl/style_emoticons/default/co_jest.gif)

Pozdrawiam Inti
Go to the top of the page
+Quote Post
Shili
post
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
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 (IMG:http://forum.php.pl/style_emoticons/default/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
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 (IMG:http://forum.php.pl/style_emoticons/default/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ń (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg)
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

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

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 26.08.2025 - 04:31
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn