Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [HTML][CSS]obrazek na obrazku + tekst
Michał90
post 17.02.2011, 14:06:01
Post #1





Grupa: Zarejestrowani
Postów: 267
Pomógł: 0
Dołączył: 16.05.2007

Ostrzeżenie: (0%)
-----

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
Go to the top of the page
+Quote Post
askone
post 17.02.2011, 14:24:56
Post #2





Grupa: Zarejestrowani
Postów: 654
Pomógł: 121
Dołączył: 27.10.2007
Skąd: Poznań, Łódź

Ostrzeżenie: (0%)
-----

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

Ten post edytował askone 17.02.2011, 14:26:08


--------------------
Kliknij jeśli moja odpowiedź Ci pomogła.
askone.pl
Go to the top of the page
+Quote Post
Michał90
post 17.02.2011, 14:53:15
Post #3





Grupa: Zarejestrowani
Postów: 267
Pomógł: 0
Dołączył: 16.05.2007

Ostrzeżenie: (0%)
-----

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
Go to the top of the page
+Quote Post
askone
post 17.02.2011, 15:14:33
Post #4





Grupa: Zarejestrowani
Postów: 654
Pomógł: 121
Dołączył: 27.10.2007
Skąd: Poznań, Łódź

Ostrzeżenie: (0%)
-----

Masz to dostępne gdzieś online??


--------------------
Kliknij jeśli moja odpowiedź Ci pomogła.
askone.pl
Go to the top of the page
+Quote Post
Michał90
post 17.02.2011, 21:27:33
Post #5





Grupa: Zarejestrowani
Postów: 267
Pomógł: 0
Dołączył: 16.05.2007

Ostrzeżenie: (0%)
-----

http://www.graphicforart.pl/1/index.html
Go to the top of the page
+Quote Post
askone
post 18.02.2011, 07:40:00
Post #6





Grupa: Zarejestrowani
Postów: 654
Pomógł: 121
Dołączył: 27.10.2007
Skąd: Poznań, Łódź

Ostrzeżenie: (0%)
-----

Patrząc teraz na udostępnioną wersję online mam wrażenie, iż już sobie poradziłeś z problemem?


--------------------
Kliknij jeśli moja odpowiedź Ci pomogła.
askone.pl
Go to the top of the page
+Quote Post
Michał90
post 18.02.2011, 10:03:12
Post #7





Grupa: Zarejestrowani
Postów: 267
Pomógł: 0
Dołączył: 16.05.2007

Ostrzeżenie: (0%)
-----

nie do końca.. ten pasek przewijania na dole ...
Go to the top of the page
+Quote Post
askone
post 18.02.2011, 10:37:51
Post #8





Grupa: Zarejestrowani
Postów: 654
Pomógł: 121
Dołączył: 27.10.2007
Skąd: Poznań, Łódź

Ostrzeżenie: (0%)
-----

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


--------------------
Kliknij jeśli moja odpowiedź Ci pomogła.
askone.pl
Go to the top of the page
+Quote Post
Michał90
post 18.02.2011, 12:01:21
Post #9





Grupa: Zarejestrowani
Postów: 267
Pomógł: 0
Dołączył: 16.05.2007

Ostrzeżenie: (0%)
-----

Dzięki!
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 22.05.2025 - 15:40
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn