Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][HTML] 4 obrazki w każdym rogu strony
Forum PHP.pl > Forum > Przedszkole
smiesznylolek
27.11.2014, 09:07:33
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
Turson
27.11.2014, 09:19:01
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
smiesznylolek
27.11.2014, 10:16:46
czyli mam w pliku html wstawić jakby 4 razy to logo i dla każdego inna klasa u ułożeniem?
Turson
27.11.2014, 10:22:29
Dokladnie
smiesznylolek
27.11.2014, 10:25:56
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
Turson
27.11.2014, 10:38:10
Wrzuc na jsfiddle
smiesznylolek
27.11.2014, 10:41:25
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
kreatiff
27.11.2014, 12:27:24
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
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.