Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [XML][CSS]Jak umieścić text na obrazku za pomocą css
Forum PHP.pl > Forum > Przedszkole
Blon_
30.03.2010, 15:52:16
Mam pytanie jak za pomocą css umieścić tekst na obrazku..

[XML] pobierz, plaintext 
  1. <div id="kartka"> 
  2.      <h1><image src="Image/kartka.png"></h1>
  3.  
  4.  
  5.    <div id="tekst">    
  6.        	<div class="column">
  7.               <div class="box">
  8.               <p>bla bla blabla bla blabla bla blabla bla blabla bla blabla bla bla</p>
  9.               </div>
  10.  
  11.           <div class="column">
  12.               <div class="box">
  13.                <p>bla bla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla </p>
  14.                 </div>
  15.  
  16.            </div>
  17.            </div>
  18.            </div> 
  19.  
[XML] pobierz, plaintext



męczę się a tekst w tym przypadku dwie kolumny jest pod obrazkiem albo obok nie wiem jak zrobić żeby był na nim np wycentrowany albo u dołu obrazku. Może ktoś pomódz jest jakiś sposób.
maniak70
30.03.2010, 16:34:06
Możesz wytłumaczyć o co ci chodzi? Bo widzę że szybko pisałeś i trudno jest cię zrozumieć... snitch.gif
Volume
30.03.2010, 16:45:33
np.
[HTML] pobierz, plaintext 
  1. <style type="text/css">
  2. div#kartka {
  3. position: relative;
  4. }
  5. p#tekst_na_obrazek {
  6. position: absolute;
  7. top: 5px;
  8. left: 10px;
  9. }
  10. </style>
[HTML] pobierz, plaintext 


[HTML] pobierz, plaintext 
  1. <div id="kartka">
  2. <h1><image src="Image/kartka.png" /></h1>
  3. <p id="tekst_na_obrazek">tekst tekst</p>
  4. </div>
[HTML] pobierz, plaintext
mortus
30.03.2010, 16:52:57
Nie rób sobie jaj człowieku, wczoraj Cię odesłałem do Wujka Google i dzisiaj robię to samo. Kto to widział, aby w <h1></h1> umieszczać tło dla strony. Źle się do tego zabierasz, ale to już słyszałeś. A tak w ogóle, to czy Twój kod (X)HTML jest zgodny z jakimikolwiek standardami. Ja mam tylko nadzieję, że strona http://studio-www.pl/ nie traktuje o Tobie, bo nie mógłbym uwierzyć, że skończyłeś Politechnikę Szczecińską. Jeśli jednak traktuje o Tobie, to powinieneś się wstydzić, bo się błaźnisz. Naprawdę weź zacznij od jakiegoś prostego kursu HTML + CSS, bo w taki sposób niczego nie osiągniesz. Przecież nikt nie będzie za Ciebie roboty odwalał.
Blon_
30.03.2010, 17:00:06
chce żeby tekst był na obrazku.. a nie wiem jak to zrobić.. zawsze jest pod tym obrazkiem h1 



[XML] pobierz, plaintext 
  1.  
  2.  
  3. <link rel="stylesheet" href="style.css" media="screen" type="text/css" />
  4.  
  5. </head>
  6. <body>
  7.  
  8.       <div id="kartka"> 
  9.  
  10.           <h1><image src="Image/kartka.png"></h1> 
  11.  
  12.  
  13.     <div id="tekst">    
  14.  
  15.          <div class="column">
  16.             	<div class="box">
  17.                 <p> tekst tekst tekst tekst tekst tekst tekst tekst</p>
  18.                 </div>
  19.  
  20.           <div class="column">
  21.               <div class="box">
  22.               <p>tekst tekst tekst tekst tekst tekst tekst tekst</p>
  23.               </div>
  24.  
  25.          </div>
  26.       </div>
  27.     </div> 
  28.   </div>
  29. </div>
  30.  
  31.  
  32.  
[XML] pobierz, plaintext 



[XML] pobierz, plaintext 
  1. BODY 
  2.  
  3.      {
  4.       background: url(Image/tlo.jpg);
  5.       background-repeat: repeat;
  6.       }
  7.  
  8.  
  9.       #kartka {
  10.       position: relative;
  11.       background-repeat: no-repeat;
  12.       width: 800px;
  13.       height: 820px;
  14.       margin: 0 auto;
  15.       }
  16.  
  17.  
  18.       /* tekst */
  19.  
  20.       #kartka #tekst .column {
  21.       float: left;
  22.       margin-left: 30px;
  23.       }
  24.  
  25.  
  26.       #kartka #tekst .box {
  27.       width: 350px;
  28.       padding: 28px 14px 14px;
  29.       margin-bottom: 34px;
  30.       }
[XML] pobierz, plaintext
krzysztof_kf
30.03.2010, 17:27:25
Witam tak jak mortus dla znaczników h1 używa się nazwa itp a nie do grafiki

Kod
<style>
BODY

     {
      background: url(Image/tlo.jpg);
      background-repeat: repeat;
      }


      #kartka {
      position: relative;
      background-repeat: no-repeat;
      width: 800px;
      height: 820px;
      margin: 0 auto;
      }


      /* tekst */

      #kartka #tekst .column {
      float: left;
      margin-left: 30px;
      position: absolute;
      }


      #kartka #tekst .box {
      width: 350px;
      padding: 28px 14px 14px;
      margin-bottom: 34px;
      }
      
      #kartka img {
      float: left;
      }
      
      #kartka p {
      color: #00ff00;
      }
      
      </style>

</head>
<body>

      <div id="kartka">
      <img src="kif.jpg">
      
    <div id="tekst">

         <div class="column">
                <div class="box">
                <p> tekst tekst tekst tekst tekst tekst tekst tekst</p>
                </div>

          <div class="column">
              <div class="box">
              <p>tekst tekst tekst tekst tekst tekst tekst tekst</p>
              </div>

         </div>
      </div>
    </div>
  </div>
</div>


dużo chaosu
Blon_
30.03.2010, 17:30:24
o właśnie nie wiedziałem że dla <p> można nadać id dzięki
mortus
30.03.2010, 18:12:39
Cytat(Blon_ @ 30.03.2010, 18:30:24 ) *
o właśnie nie wiedziałem że dla <p> można nadać id dzięki
Przecież <p> nie ma w powyższym kodzie żadnego id nadanego. Widzisz gdzieś <p id="identyfikator">? Zapis
[CSS] pobierz, plaintext 
  1. #kartka p
[CSS] pobierz, plaintext
oznacza uwzględnij wszystkie elementy <p>, które znajdują się w elemencie o id="kartka". Jeszcze raz powtarzam, zacznij od prostego kursu (X)HTML + CSS, bo nawet kodu nie potrafisz zinterpretować.
david8213
21.03.2020, 17:34:50
Jak umiescić tekst w prawym górnym rogu obrazka

[XML] pobierz, plaintext 
  1.  
  2. <style>
  3.  
  4.  
  5.  
  6. .img_my { 
  7. background: #008bc4; 
  8. position: absolute; 
  9. top: 0; right: 0; 
  10. bottom: 0; left: 0; 
  11. margin: auto; 
  12. max-width:100%;
  13. max-height:100%;
  14. padding:12px;
  15. background-color: red;
  16. }
  17.  
  18. .container {
  19. padding:2px; 
  20. background-color: inherit; 
  21. position: absolute; 
  22. height:70%;
  23. top: 0; 
  24. right: 0; 
  25. bottom: 0; 
  26. left: 0; 
  27. margin: auto; 
  28.  }
  29.  
  30.  
  31. p#tekst_na_obrazek {
  32. position: absolute;
  33. top: 5px;
  34. left: 100px;
  35. }
  36.  
  37.  
  38. </style>
  39.  
  40.  
  41. <div class="container">
  42. <img class="img_my" src="03.jpeg">
  43. <p id="tekst_na_obrazek">tekst tekst</p>
  44. </div>
  45.  
[XML] pobierz, plaintext
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.