Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS] cos a'la tabelka z rownymi odstepami wierszy
Forum PHP.pl > Forum > Przedszkole
lnn
28.12.2009, 13:40:43
witam!

probowalem zrobic cos podobnego jak na ponizszym obrazku tylko ze w CSS'ie 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



z gory dzieki za pomoc (+ POMOGŁ) jak ktos pomoze to rozwiazac 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 tongue.gif
vokiel
28.12.2009, 13:43:13
Da się, trzeba się pobawić ustawieniami dla inputa i dla labela (height, line-height, padding, font-size)
lnn
28.12.2009, 17:59:32
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 tongue.gif
Natalka
28.12.2009, 18:44:19
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 smile.gif
Crozin
28.12.2009, 19:01:12
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
lnn
28.12.2009, 21:12:27
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 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 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 tongue.gif
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.