Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS]Ustawienie diva na odpowiedniej wysokości
Forum PHP.pl > Forum > Przedszkole
riczlogan
26.10.2012, 21:07:09
Mój kod oraz wynik wyglądają tak: http://jsfiddle.net/b42jW/1/

Chciałbym żeby przycisk "Button był w mniej więcej w tym miejscu:


Jak coś takiego osiągnąć?
Mega_88
26.10.2012, 21:20:43
Teraz powinno być ok. Zobacz, że całość wrzuciłem w jednego diva "test" który ma 900px szerokość a w nim dopiero umieściłem pozostałe lewy i prawy o szerokościach nie przekraczających 900px

[HTML] pobierz, plaintext 
  1. <html>
  2.    <head>
  3.  
  4.    </head>
  5.    <body>
  6.       <div id="test">
  7.           <div id="timeline">
  8.               <div id="data">
  9.             <div class="imagex"><img src="images/avatar3.png" /></div>
  10.             <div class="text1"> Text: </div>
  11.             <div class="text2">Text2</div>
  12.          </div>
  13.          <div id="data">
  14.             <div class="imagex"><img src="images/avatar3.png" /></div>
  15.             <div class="text1"> Text: </div>
  16.             <div class="text2">Text2</div>
  17.          </div>
  18.          <div id="data">
  19.             <div class="imagex"><img src="images/avatar3.png" /></div>
  20.             <div class="text1"> Text: </div>
  21.             <div class="text2">Text2</div>
  22.          </div>           </div>
  23.  
  24.           <div id="button_add">
  25.             <button class="btn span2" type="submit">Button</button>
  26.          </div> 
  27.      </div> 
  28.    </body>
  29. </html>
[HTML] pobierz, plaintext 


[HTML] pobierz, plaintext 
  1. #test { float:left;width:900px; } 
  2.  
  3.         #timeline {
  4.          padding-left: 0px;
  5.          padding-top: 60px;
  6.          width: 600px;
  7.          height: 2000px;
  8.          margin-left: 0px;
  9.          float: left;
  10.          border: 1px solid #DFDEDF;
  11.          background-color: #f1f1f1;
  12.          font-family: "OpenSansRegular",Tahoma,Arial,Helvetica,Sans-Serif;
  13.          }
  14.          #data{
  15.          width: 500px;
  16.          height: 80px;
  17.          background-color: #f1f1f1;
  18.          border-bottom: 1px solid #DFDEDF;
  19.          }
  20.          #data:hover{
  21.          background-color: #d8d8d8;
  22.          }
  23.          .text1{
  24.          display: inline;
  25.          font-size: 15px;
  26.          margin-top: 20px;
  27.          float: left;
  28.          vertical-align: middle;
  29.          margin-top: 27px;
  30.          margin-left: 4px;
  31.          }
  32.          .text2{
  33.          display: inline;
  34.          font-size: 24px;
  35.          margin-top: 20px;
  36.          float: left;
  37.          vertical-align: middle;
  38.          margin-top: 27px;
  39.          margin-left: 10px;
  40.          }
  41.          .text3{
  42.          display: inline;
  43.          font-size: 12px;
  44.          margin-top: 20px;
  45.          float: left;
  46.          vertical-align: middle;
  47.          margin-top: 27px;
  48.          margin-left: 10px;
  49.          }
  50.          #button_add{
  51.          float: right;
  52.          width:200px;
  53.          margin:50px 0px 0px 0px
  54.          }
[HTML] pobierz, plaintext
riczlogan
26.10.2012, 21:27:17
Dziękuje, a nie ma możliwości go tak ustawić bez dodawania diva "test" ?
Mega_88
26.10.2012, 21:32:15
Na dobrą sprawę się da, możesz usunąć diva "test" wraz z jego wartościami w .css i też powinno być ok.
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.