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ń:
  1. <div id="szary">
  2. <form>
  3. <input id="niebieski"/>
  4. </form>
  5. </div>


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)

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


  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. }


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

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


  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. }


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

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

 



RSS Wersja Lo-Fi Aktualny czas: 1.05.2025 - 06:04