Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [CSS][HTML] 4 obrazki w każdym rogu strony
smiesznylolek
post 27.11.2014, 09:07:33
Post #1





Grupa: Zarejestrowani
Postów: 62
Pomógł: 0
Dołączył: 27.12.2011

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

mam taki problemik, kombinuję i nie mogę sobie dać z tym rady.
Robię stronie w stylu "w trakcie budowy". Na samym środku umieściłem grafikę w trakcie budowy. I chciałem jeszcze zrobić tak aby w każdym rogu strony znalazło się logo. Ale za skurczybyka nie mogę dojść do tego jak umieścić to logo w tych rogach... Próbowałem z backgroud image i co prawda mi się mniej więcej udało tylko że w jednym rogu, a ja bym chciał żeby to logo znalazło się w każdym
Póki co mam tyle 
[HTML] pobierz, plaintext 
  1. <!doctype html>
  2. <html>
  3. <head>
  4. 	<meta charset="utf-8">
  5. 	<title>tytul</title>
  6. <link rel="stylesheet" type="text/css" href="style.css" />
  7. </head>
  8. <body>
  9.  
  10. <img src="strona_w_budowie.jpg"></img>
  11.  
  12.  
  13.  
  14. </body>
  15. </html>
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
  1. body{
  2. margin: 0px;
  3. padding: 0px;
  4. background-color:#C63D0F;
  5.  
  6. }
  7. img {
  8.   margin: auto;
  9.   position: absolute;
  10.   top: 0; left: 0; bottom: 0; right: 0;
  11.  box-shadow: 5px 5px 5px;
  12. }
  13.  
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
Turson
post 27.11.2014, 09:19:01
Post #2





Grupa: Zarejestrowani
Postów: 4 291
Pomógł: 829
Dołączył: 14.02.2009
Skąd: łódź

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

Jak masz obraz (logo) to piszesz 4 klasy dla nich
1: top:0;left:0;
2: top:0;right:0;
3: bottom:0;left:0;
4: bottom:0;right:0;
wypozycjonowane absolutnie
Go to the top of the page
+Quote Post
smiesznylolek
post 27.11.2014, 10:16:46
Post #3





Grupa: Zarejestrowani
Postów: 62
Pomógł: 0
Dołączył: 27.12.2011

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

czyli mam w pliku html wstawić jakby 4 razy to logo i dla każdego inna klasa u ułożeniem?
Go to the top of the page
+Quote Post
Turson
post 27.11.2014, 10:22:29
Post #4





Grupa: Zarejestrowani
Postów: 4 291
Pomógł: 829
Dołączył: 14.02.2009
Skąd: łódź

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

Dokladnie
Go to the top of the page
+Quote Post
smiesznylolek
post 27.11.2014, 10:25:56
Post #5





Grupa: Zarejestrowani
Postów: 62
Pomógł: 0
Dołączył: 27.12.2011

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

ok działa, dzięki wielkie:)
ale mam jeszcze taki problem że teraz stronka zrobiła się przewijana w prawo-lewo i góra dół. Bo te loga pojawiły się jakby poza ekranem i trzeba do nich scrollować. Sprawdziłem i problem stwarza img{ position:absolute;}. Ale bez tego obrazek który ma być po środku, tam się nie znajduje..
mam teraz tak:
[HTML] pobierz, plaintext 
  1. <body>
  2.  
  3. <img src="strona_w_budowie.jpg"></img>
  4. <div class="logo1"><img src="logo.png"/></div>
  5. <div class="logo2"><img src="logo.png"/></div>
  6. <div class="logo3"><img src="logo.png"/></div>
  7. <div class="logo4"><img src="logo.png"/></div>
  8. </body>
[HTML] pobierz, plaintext 


[HTML] pobierz, plaintext 
  1. body{
  2. margin: 0px;
  3. padding: 0px;
  4. background-color:#C63D0F;
  5.  
  6.  
  7. }
  8. img {
  9.   margin: auto;
  10.   position: absolute;
  11.   top: 0; left: 0; bottom: 0; right: 0;
  12. }
  13. .logo1{
  14. top:0;
  15. left:0;
  16. position:absolute;
  17. }
  18. .logo2{
  19. top:0;
  20. right:0;
  21. position:absolute;
  22. }
  23. .logo3{
  24. bottom:0;
  25. left:0;
  26. position:absolute;
  27. }
  28. .logo4{
  29. bottom:0;
  30. right:0;
  31. position:absolute;
  32. }
[HTML] pobierz, plaintext


Ten post edytował smiesznylolek 27.11.2014, 10:33:52
Go to the top of the page
+Quote Post
Turson
post 27.11.2014, 10:38:10
Post #6





Grupa: Zarejestrowani
Postów: 4 291
Pomógł: 829
Dołączył: 14.02.2009
Skąd: łódź

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

Wrzuc na jsfiddle
Go to the top of the page
+Quote Post
smiesznylolek
post 27.11.2014, 10:41:25
Post #7





Grupa: Zarejestrowani
Postów: 62
Pomógł: 0
Dołączył: 27.12.2011

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

ok poradziłem sobie. "w budowie" wsadziłem w diva i do niego przypisałem te style które były dla img + szerokość i wysokość zdjęcia w und_con. Dla potomnych jak co
[HTML] pobierz, plaintext 
  1. <body>
  2.  
  3. <div class="und_con"><img src="strona_w_budowie.jpg"></img></div>
  4.  
  5. <div class="logo1"><img src="logo.png"/></div>
  6. <div class="logo2"><img src="logo.png"/></div>
  7. <div class="logo3"><img src="logo.png"/></div>
  8. <div class="logo4"><img src="logo.png"/></div>
  9. </body>
[HTML] pobierz, plaintext 


[HTML] pobierz, plaintext 
  1. body{
  2. margin: 0px;
  3. padding: 0px;
  4. background-color:#C63D0F;
  5. }
  6. .und_con{
  7.   margin: auto;
  8.   position:absolute;
  9.   top: 0; left: 0; bottom: 0; right: 0;
  10.   width: 700px;
  11.   height:338px;
  12. }
  13. .logo1{
  14. top:3px;
  15. left:3px;
  16. position:absolute;
  17. }
  18. .logo2{
  19. top:3px;
  20. right:3px;
  21. position:absolute;
  22. }
  23. .logo3{
  24. bottom:3px;
  25. left:3px;
  26. position:absolute;
  27. }
  28. .logo4{
  29. bottom:3px;
  30. right:3px;
  31. position:absolute;
  32. }
[HTML] pobierz, plaintext


Ten post edytował smiesznylolek 27.11.2014, 10:44:08
Go to the top of the page
+Quote Post
kreatiff
post 27.11.2014, 12:27:24
Post #8





Grupa: Zarejestrowani
Postów: 324
Pomógł: 105
Dołączył: 7.08.2012

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

Inne rozwiązanie, bez dodatkowego kodu html, tylko w samym css:
[HTML] pobierz, plaintext 
  1. html,
  2. body {
  3. 	height: 100%;
  4. 	width: 100%;
  5. 	padding:0;
  6. 	margin:0
  7. }
  8.  
  9. body {
  10. 	background: url('logo.jpg') left top no-repeat,
  11. 	url('logo.jpg') right top no-repeat,
  12. 	url('logo.jpg') left bottom no-repeat,
  13. 	url('logo.jpg') right bottom no-repeat;
  14. }
[HTML] pobierz, plaintext
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: 13.05.2025 - 10:51
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn