Forum PHP.pl > [CSS] Pozycjonowanie Div (uzupełniony link)

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [CSS] Pozycjonowanie Div (uzupełniony link)

pwojciechowski

13.01.2011, 12:06:50

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 
    body {
        background: url(img/bg.png) top center repeat-x;
 
    }
 
	#container {
		background: url(img/header.png) top center no-repeat;
		height: 800px;
		width: 1081px;
		margin: auto;
	}
 
	#logo_right {
		background: url(img/logo_right.png) top left no-repeat;
		position: absolute;
		top: 70px;
		left: 900px;
		width: 100%;;
		height: 300px;
	}
 
<body>
	<div id="container">
		<div id="logo_right">
 
		</div>
		<div id="header">
			Logo
		</div>
	</div>
 
</body>
 
 
[HTML] pobierz, plaintext

Damonsson

13.01.2011, 14:37:51

div id="logo_right" jest pozycjonowany względem body, nie okłamuj nas

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ę

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

pwojciechowski

13.01.2011, 16:04:42

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ś

<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/

Damonsson

13.01.2011, 16:25:05

W takiej sytuacji miej głęboko w... validator, dla CSS3 jest ok

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

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

Podstawy podstaw.

pwojciechowski

2.04.2011, 22:02:07

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

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.