Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [HTML][CSS] cos a'la tabelka z rownymi odstepami wierszy
lnn
post
Post #1





Grupa: Zarejestrowani
Postów: 361
Pomógł: 11
Dołączył: 17.12.2008
Skąd: LU

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

witam!

probowalem zrobic cos podobnego jak na ponizszym obrazku tylko ze w CSS'ie (IMG:style_emoticons/default/tongue.gif) niestety jak wiadomo pole input jest nieco "wyzsze" niz tekst i sie nie zgrywaly w poziomie, czy da rade zrobic jakims sposobem mniej wiecej cos takiego

(IMG:http://img46.imageshack.us/img46/4562/tabelkap.jpg)

z gory dzieki za pomoc (+ POMOGŁ) jak ktos pomoze to rozwiazac (IMG:style_emoticons/default/smile.gif)
wiem ze sie odchodzi juz od przedstawiania takich rzeczy w tabelkach dlatego chcialem to profesjonalniej zrobic i moze w jakiejs petli utworzyc a nie tak wpisywac kazdy wiersz (IMG:style_emoticons/default/tongue.gif)
Go to the top of the page
+Quote Post
vokiel
post
Post #2





Grupa: Zarejestrowani
Postów: 2 592
Pomógł: 445
Dołączył: 12.03.2007

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

Da się, trzeba się pobawić ustawieniami dla inputa i dla labela (height, line-height, padding, font-size)
Go to the top of the page
+Quote Post
lnn
post
Post #3





Grupa: Zarejestrowani
Postów: 361
Pomógł: 11
Dołączył: 17.12.2008
Skąd: LU

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

hmm chodzi mi o cos takiego jak tu
[HTML] pobierz, plaintext 
  1. <style type="text/css">
  2. /* <![CDATA[ */
  3. div.table {
  4. border: 1px solid black;    
  5. margin: 0;                  
  6. padding: 2px;               
  7. width: 300px;               
  8. vertical-align: top;}       
  9.  
  10. div.linia {                 
  11. width: inherit;             
  12. padding: 4px 0 4px 0;    
  13. border: 0; }                
  14.  
  15. div.komorka {   
  16. display: inline;            
  17. width: 170px; }             
  18. /* ]]> */
  19. </style>
  20.  
  21.  
  22.  
  23. <div id="table"> 
  24. <div class="linia"> 
  25.     <div class="komorka">komorka 1</div>
  26.     <div class="komorka">komorka 2</div>
  27. </div>
  28. <div class="linia">
  29.     <div class="komorka">komorka 1 prawa</div>
  30.     <div class="komorka">komorka 2 prawa</div>
  31. </div> 
  32. </div>
[HTML] pobierz, plaintext

z tym że jak widac na zalaczonym przykladzie ze wszystko byloby ok gdyby text mial ta sama dlugosc, czerwona linia ktora dorysowalem oznacza to ze gorna z dolna komorka nie zbiega sie w tym samym miejscu (IMG:style_emoticons/default/tongue.gif)
(IMG:http://img12.imageshack.us/img12/3279/beztytuunft.jpg)
Go to the top of the page
+Quote Post
Natalka
post
Post #4





Grupa: Zarejestrowani
Postów: 59
Pomógł: 6
Dołączył: 28.10.2009
Skąd: że znowu...

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

Jak robisz to już takim sposobem to spróbuj (pisane z głowy):

Kod
<style type="text/css">
/* <![CDATA[ */

.linia {                
width:340px;        
padding: 4px 0 4px 0;    
border: 0; }                

.komorka {  
float:left;          
width: 170px; }    


.komorkaright {  
float:left;          
width: 170px; }
        
/* ]]> */
</style>




<div class="linia">
    <div class="komorka">komorka 1</div>
    <div class="komorkaright">komorka 1 prawa</div>
</div>
<div class="linia">
    <div class="komorka">komorka 2</div>
    <div class="komorkaright">komorka 2 prawa</div>
</div>



I teraz pobaw się line-height dla .komorka ,aby dostosować do .komorkaright (IMG:style_emoticons/default/smile.gif)

Ten post edytował Natalka 28.12.2009, 18:47:09
Go to the top of the page
+Quote Post
Crozin
post
Post #5





Grupa: Zarejestrowani
Postów: 6 476
Pomógł: 1306
Dołączył: 6.08.2006
Skąd: Kraków

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

CSS: display: table[-row|-cell]

A po stronie HTML może to być coś na kształt:
Kod
FORM
  FIELDSET
    DL
      DT LABEL /DT
      DD INPUT /DD
    /DL
    DL
      DT LABEL /DT
      DD INPUT /DD
    /DL
  /FIELDSET
/FROM
Go to the top of the page
+Quote Post
lnn
post
Post #6





Grupa: Zarejestrowani
Postów: 361
Pomógł: 11
Dołączył: 17.12.2008
Skąd: LU

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

Cytat(vokiel @ 28.12.2009, 13:43:13 ) *
Da się, trzeba się pobawić ustawieniami dla inputa i dla labela (height, line-height, padding, font-size)

dzieki za wskazowke, znalazlem kurs jakis i doszedlem jak to wykorzystac: http://kurs.browsehappy.pl/HTML/Formularze

Cytat(Natalka @ 28.12.2009, 18:44:19 ) *
Jak robisz to już takim sposobem to spróbuj (pisane z głowy):

I teraz pobaw się line-height dla .komorka ,aby dostosować do .komorkaright (IMG:style_emoticons/default/smile.gif)


zrobilem w koncu tak jak ponizej, dzieki temu da sie np dane wywolac z tablicy i utworzyc petle lub np z bazy danych (IMG:style_emoticons/default/smile.gif)
dzieki za pomoc +POMOGL
[HTML] pobierz, plaintext 
  1. <head>
  2. <style type="text/css">
  3. /* <![CDATA[ */
  4. div.table {
  5. border: 1px solid black;    
  6. margin: 0;                  
  7. padding: 2px;               
  8. width: 300px;               
  9. vertical-align: top;}       
  10.  
  11. div.row {                 
  12. width: inherit;             
  13. padding: 4px 0 4px 0;    
  14. border: 0; }                
  15.  
  16. div.cell_left {   
  17. display: inline;            
  18. width: 170px; }     
  19.  
  20. div.cell_right {
  21. display:inline;
  22. width: 170px;
  23. }
  24.  
  25. label {
  26. display:inline-block;
  27. width:150px;
  28. text-align:right;
  29. }       
  30. /* ]]> */
  31. </style>
  32. </head>
  33.  
  34. <body>
  35.  
  36. <div id="table"> 
  37.     <div class="row"> 
  38.         <div class="cell_left"><label for="imie1">Imie</label> </div>
  39.         <div class="cell_right"><input type="text" name="imie" id="imie1" /></div>
  40.     </div>
  41.     <div class="row">
  42.         <div class="cell_left"><label for="nazwisko">Nazwisko</label> </div>
  43.         <div class="cell_right"><input type="text" name="imie" id="nazwisko" /></div>
  44.     </div> 
  45. </div>
  46.  
  47. </body>
[HTML] pobierz, plaintext

powyzej kod, jakby kiedys ktos szukal takiego rozwiazania (IMG:style_emoticons/default/tongue.gif)
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: 28.09.2025 - 04:33
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn