Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS]obrazek na obrazku + tekst
Forum PHP.pl > Forum > Przedszkole
Michał90
17.02.2011, 14:06:01
Witam,
chce zrobić coś takiego:


kolor biały- tło
kolor czerwony - obrazek
kolor niebieski - obrazek (input obrazkowy)
kolor siwy- obrazek

Jak to zrobić na divach ? w szczególności mam problem dania tego niebieskiego obrazka na ten siwy..

Prosze o pomoc

Pozdrawiam
askone
17.02.2011, 14:24:56
Jeśli ten "siwy" ma być tłem dla formularza zawierającego "niebieski" input to wystarczy że zrobisz coś w ten deseń:
[HTML] pobierz, plaintext 
  1. <div id="szary">
  2.  <form>
  3.   <input id="niebieski"/>
  4.  </form>
  5. </div>
[HTML] pobierz, plaintext


edit:
Oczywiście div "szary" musi mieć nadane w css wymiary, inaczej będzie niewidoczny...

Pozdrawiam
Michał90
17.02.2011, 14:53:15
Zrobiłem coś takiego (bardzo nieestetycznie to wygląda)

[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <link href="style.css" rel="stylesheet" type="text/css" media="screen" />
  4.  
  5. </head>
  6. <body>
  7. <div><img src="images/ekran-1_02.jpg" alt="forum graficzne"/></div>
  8.  
  9. <div><img src="images/ekran-1_04.jpg" alt="forum graficzne"/>
  10. <div id="obrazek"><form><input type="text" class="gh" src="images/pole.jpg" name="imie" value="tekst" ></input>
  11. <input type="submit" class="gg" src="images/ok.jpg" name="imie" value="" ></input></form></div></div>
  12.  
  13. </body>
  14. </html>
[HTML] pobierz, plaintext 


[HTML] pobierz, plaintext 
  1. body{
  2. background: url("tlo.jpg");
  3.  
  4. }
  5.  
  6. #obrazek
  7. {
  8. background: url(images/pole.jpg) no-repeat;
  9.  
  10. position: relative; 
  11. left: 350px; bottom:222px;
  12.  z-index: ;
  13. }
  14. div{
  15. position: relative; 
  16.  
  17. }
  18. .gh {
  19.     display: inline;
  20. color: #fff;
  21.     float: left;
  22.     width: 185px;
  23.     height: 34px;
  24.     background-image: url(images/pole.jpg);
  25.     border: 0px;
  26.  
  27. 	padding-left: 10px;
  28. }
  29. .gg {
  30.     display: inline;
  31. color: #fff;
  32.     float: left;
  33.     width: 54px;
  34.     height: 34px;
  35.     background-image: url(images/ok.jpg);
  36.     border: 0px;
  37. }
[HTML] pobierz, plaintext


chciałbym to wszystko wyśrodkować, żeby nie było paska przewijania na dole bo teraz tak to zrobiłem, że nie potrzebnie sie pasek pokazał..


ekran-1_02.jpg = kolor czerwony
ekran-1_04.jpg = kolor siwy
pole.jpg = kolor niebieski input
ok.jp = przycisk submit po prawej str. koło pole.jpg
askone
17.02.2011, 15:14:33
Masz to dostępne gdzieś online??
Michał90
17.02.2011, 21:27:33
http://www.graphicforart.pl/1/index.html
askone
18.02.2011, 07:40:00
Patrząc teraz na udostępnioną wersję online mam wrażenie, iż już sobie poradziłeś z problemem?
Michał90
18.02.2011, 10:03:12
nie do końca.. ten pasek przewijania na dole ...
askone
18.02.2011, 10:37:51
Troszkę zmieniłem strukturę strony, style też uległy zmianie. Popatrz i wyciągnij wnioski wink.gif

[HTML] pobierz, plaintext 
  1. <body>
  2. 	<div id="container" style="margin: 0pt auto; width: 1100px;">
  3. 		<div style="width: 925px; margin: 0pt auto;">
  4. 			<img alt="forum graficzne" src="images/ekran-1_02.jpg">
  5. 		</div>
  6. 		<div style="width: 925px; margin: 0pt auto; background: url("images/ekran-1_04.jpg") no-repeat scroll 0pt top transparent; height: 252px;">
  7. 			<form style="width: 100%; height: 100%;">
  8. 				<input type="text" class="gh" src="images/pole.jpg" name="imie" value="tekst">
  9. 				<input type="submit" class="gg" src="images/ok.jpg" name="imie" value="">
  10. 			</form>
  11. 		</div>
  12. 	</div>
  13. </body>
[HTML] pobierz, plaintext 


[CSS] pobierz, plaintext 
  1. body {
  2.     background: url("tlo.jpg") repeat scroll 0 0 transparent;
  3. }
  4. #obrazek {
  5.     background: url("images/pole.jpg") no-repeat scroll 0 0 transparent;
  6.     bottom: 222px;
  7.     left: 350px;
  8.     position: relative;
  9. }
  10. div {
  11.     position: relative;
  12. }
  13. .gh {
  14.     background-image: url("images/pole.jpg");
  15.     border: 0 none;
  16.     color: #FFFFFF;
  17.     display: inline;
  18.     float: left;
  19.     height: 34px;
  20.     left: 320px;
  21.     padding-left: 10px;
  22.     position: relative;
  23.     top: 40px;
  24.     width: 185px;
  25. }
  26. .gg {
  27.     background-image: url("images/ok.jpg");
  28.     border: 0 none;
  29.     color: #FFFFFF;
  30.     display: inline;
  31.     float: left;
  32.     height: 34px;
  33.     left: 321px;
  34.     position: relative;
  35.     top: 40px;
  36.     width: 54px;
  37. }
[CSS] pobierz, plaintext


Pozdrawiam
Michał90
18.02.2011, 12:01:21
Dzięki!
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.