Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS]linia od prawej
Forum PHP.pl > Forum > Przedszkole
Johnas
  1. .spacer-5 {width:100%; background:url(../images/pic-1.gif) 200px 0 repeat-y;}

ten kod robi linie o odległości 200px od lewej strony ja chce to samo tyle ze od prawej. jest możliwość?
webfreak
Nie wiadomo co chcesz zrobić, ale dochodze do wniosku że masz już wycentrowaną stronę. Teraz nie wiem czy chcesz pomiędzy tymi liniami wkleic jakis tekst czy tylko te dwie linie jak dwie linie to



  1. .wrapper
  2. {
  3. width:100%;
  4. height:auto;
  5. float:left
  6. }
  7.  
  8. .left
  9. {
  10. width:200px;
  11. background:url('images/pic-1.gif') repeat-y; /* to 200px i 0px to background-position nie szerokość diva */
  12. float:left;
  13. }
  14.  
  15. .right
  16. {
  17. width:200px;
  18. background:url('images/pic-1.gif') repeat-y; /* to 200px i 0px to background-position nie szerokość diva */
  19. float:right;
  20. }
  21.  
  22.  



  1.  
  2. <div class="wrapper">
  3.  
  4. <div class="lewa"></div>
  5.  
  6. <div class="prawa"></div>
  7.  
  8. </div>
  9.  



jeśli chcesz uzyc tego sameog obrazka ale obrocic go horyzontalnie to sproboj uzyc


  1.  
  2. -moz-transform-origin: 0px 0px;
  3. -webkit-transform-origin: 0px 0px;
  4.  
  5. -moz-transform: rotate(180deg);
  6. -webkit-transform: rotate(180deg);
  7.  
  8.  
Johnas
Próbuje zrobić coś takiego:


Kodu jakiego używam wygląda tak:
  1. <section id="content">
  2.  
  3. <div class="container_24F">
  4.  
  5. <div class="wrapper spacer-5">
  6.  
  7. <div class="grid_18">
  8.  
  9. <!-- ==============================forums go================================ -->
  10. <div class="forumstart indent-bot4">
  11.  
  12. <div class="belka">
  13. <center><h3><strong>Nazwa dzialu</strong></h3></center>
  14. </div>
  15. </div>
  16.  
  17. <!-- ==============================forums end================================ -->
  18.  
  19.  
  20. </div>
  21.  
  22. <div class="grid_6">
  23.  
  24. <h3>Informacje kontaktowe:</h3>
  25.  
  26. <div id="slides">
  27.  
  28. <div class="slides_container">
  29.  
  30.  
  31. <div>
  32. <h3>Korespondencja:</h3>
  33. <div style="float:left; width:16px;">
  34. <img src="http://przewozy-osobowe.hsms.pl/images/fish_us1.gif" border="0" />
  35. </div>
  36. <div style="float:right; width:200px;">
  37. Ul. jakastam 44/32<br>
  38. Świnoujście 72-600<br /><br /><br /><br />
  39. </div>
  40. </div>
  41.  
  42. <div>
  43. <h3>Telefon:</h3>
  44. <div style="float:left; width:16px;">
  45. <img src="http://przewozy-osobowe.hsms.pl/images/fish_us2.gif" border="0" />
  46. </div>
  47. <div style="float:right; width:200px;">
  48. Webmaster:883-504-493<br>
  49. Grafik: 519-791-434<br><br /><br /><br />
  50.  
  51. </div>
  52. </div>
  53.  
  54. <div>
  55. <h3>E-mail:</h3>
  56. <div style="float:left; width:16px;">
  57. <img src="http://przewozy-osobowe.hsms.pl/images/fish_us3.gif" border="0" />
  58. </div>
  59. <div style="float:right; width:200px;">
  60. zlecenia@websmake.pl<br>
  61. grafik@websmake.pl
  62. webmaster@websmake.pl<br /><br /><br />
  63. </div>
  64. </div>
  65.  
  66. </div>
  67.  
  68. </div>
  69.  
  70. </div>
  71.  
  72. </div>
  73.  
  74. </div>
  75.  
  76. </section>

I css:
  1. #content {width:100%; padding:53px 0px 60px 0px;}
  2.  
  3. /* Forums
  4. ----------------------------------------------------------------------------------------------------*/
  5. .container_24F {
  6. margin-left: auto;
  7. margin-right: auto;
  8. width: auto;
  9. font-size:0.8125em;
  10. line-height:1.3846em;
  11. }
  12.  
  13. .container_24F .grid_18 {
  14. width:auto;
  15. }
  16.  
  17. .container_24F .grid_6 {
  18. width:230px;
  19. }
  20.  
  21. .wrapper {width:100%; overflow:hidden;}
  22.  
  23. .indent-bot4 {margin-bottom:25px;}
  24.  
  25. .spacer-5 {width:100%; background:url(../images/pic-1.gif) 200px 0 repeat-y;}
  26.  
  27. .forumstart {width:100%; height:680px;}
  28. .belka {
  29. width:700px;
  30. height:20px;
  31. background:url(../images/bg.jpg) center 0 no-repeat #090807;
  32. letter-spacing:1px;
  33. overflow:hidden;
  34. padding:1px 0 12px;
  35. border-radius:5px;
  36. -moz-border-radius:5px;
  37. -webkit-border-radius:5px;
  38. box-shadow:0 1px 2px rgba(0,0,0,0.75);
  39. -moz-box-shadow:0 1px 2px rgba(0,0,0,0.75);
  40. -webkit-box-shadow:0 1px 2px rgba(0,0,0,0.75);
  41. }
  42. .belka h3 { font-size:33px; line-height:0.8em; color:#94ca00; word-spacing:0.2em;}
  43. .belka h3 strong { color:#fff; word-spacing:normal; letter-spacing:1px;}
  44.  

Efekt do uzyskania:
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.