Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [CSS] Pozycjonowanie Div (uzupełniony link)
pwojciechowski
post
Post #1





Grupa: Zarejestrowani
Postów: 10
Pomógł: 0
Dołączył: 4.01.2011

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

Witam, Mam taki problem, chciałbym aby jeden z div'ow pojawiał się tylko do wielkości monitora, jeśli ktoś ma monitor duży pojawia mu się cały, jeśli mniejszy pojawia mu się część, chodzi o div id="logo_right", aktualnie obrazek tam jest ustawiony jako tło, div pozycjonowany jest pozycjonowane przez "absolute" względem div-a "container", próbowałem już przez wyłączenia scroolbar x, ale nie dość, że nie przechodzi wtedy walidacji css, to cały czas można było przesunąć myszką tło.


Link http://alcopone.pl/test/


[HTML] pobierz, plaintext 
  1.     body {
  2.         background: url(img/bg.png) top center repeat-x;
  3.  
  4.     }
  5.  
  6. 	#container {
  7. 		background: url(img/header.png) top center no-repeat;
  8. 		height: 800px;
  9. 		width: 1081px;
  10. 		margin: auto;
  11. 	}
  12.  
  13. 	#logo_right {
  14. 		background: url(img/logo_right.png) top left no-repeat;
  15. 		position: absolute;
  16. 		top: 70px;
  17. 		left: 900px;
  18. 		width: 100%;;
  19. 		height: 300px;
  20. 	}
  21.  
  22. <body>
  23. 	<div id="container">
  24. 		<div id="logo_right">
  25.  
  26. 		</div>
  27. 		<div id="header">
  28. 			Logo
  29. 		</div>
  30. 	</div>
  31.  
  32. </body>
  33.  
  34.  
[HTML] pobierz, plaintext


Ten post edytował pwojciechowski 13.01.2011, 12:49:09
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 4)
Damonsson
post
Post #2





Grupa: Zarejestrowani
Postów: 2 355
Pomógł: 533
Dołączył: 15.01.2010
Skąd: Bydgoszcz

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

div id="logo_right" jest pozycjonowany względem body, nie okłamuj nas (IMG:style_emoticons/default/winksmiley.jpg)
A dlaczego względem body? A no dlatego, że określając position dla children, musimy też określić position dla parent, bo children będzie próbował pozycjonować się tak długo względem każdego rodzica wyżej, jak długo nie będzie któryś miał określonego position. A jeżeli żaden nie będzie miał określonego position, to dojdzie aż do body i wypozycjonuje się względem body.
A skoro kontener ma być pozycjonowany relatywnie, to powinieneś rozwiązać zagadkę (IMG:style_emoticons/default/winksmiley.jpg)

A żeby Twój logo_right dochodził do końca, a nie tworzył się scroll-x to pokombinuj z overflow.

Ten post edytował Damonsson 13.01.2011, 14:50:41
Go to the top of the page
+Quote Post
pwojciechowski
post
Post #3





Grupa: Zarejestrowani
Postów: 10
Pomógł: 0
Dołączył: 4.01.2011

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

Dzięki za pomoc!
Zapomniałem o tej jednej właściwości, nadałem elementowi #container "position: relative", do body dołożyłem "overflow-x: hidden;"
I teraz działa tak jak chciałem, co prawda nie przechodzi walidacji, ale coś za coś (IMG:style_emoticons/default/winksmiley.jpg) <am jeszcze jeden mały problem, chcialbym aby obrazek z #logo_right był w jako w tle, teraz wychodzi na górę, próbowałem przez z-index - ale ten chyba działa tylko dla dwóch elementów pozycjonowanych "posion: absolute", zamieniałem też miejscem kodzie dwa elementy div, efekt ten sam - > logo nachodzi cały czas na mapkę. Masz może pomysł jak to rozwiązać.

http://alcopone.pl/
Go to the top of the page
+Quote Post
Damonsson
post
Post #4





Grupa: Zarejestrowani
Postów: 2 355
Pomógł: 533
Dołączył: 15.01.2010
Skąd: Bydgoszcz

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

W takiej sytuacji miej głęboko w... validator, dla CSS3 jest ok (IMG:style_emoticons/default/smile.gif)

Aby działał z-index, musi być zdefiniowane position.

Dodaj do 'map' position: relative i z-index:9999

Podstawy podstaw.
Go to the top of the page
+Quote Post
pwojciechowski
post
Post #5





Grupa: Zarejestrowani
Postów: 10
Pomógł: 0
Dołączył: 4.01.2011

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

Witam Serdecznie,
Odkopuje temat, ponieważ nie mogę sobie poradzić jeszcze z jednym problemem, a na pewno są one powiązane.
Niestety w Operze, a to na tą chwilę 10% użytkowników według ranking.pl, strona nie wyświetla się prawidłowo, a mianowicie
pasek przewijania się nie pojawia, ale niestety można przesunąć cały obraz w prawo do końca obrazka, błąd nie występuje
na ff, safari i chrome.

Pozdrawiam
Paweł Wojciechowski
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

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

 

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

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

RSS Aktualny czas: 23.08.2025 - 18:48
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn