GoldenLine
Zaloguj się

konto usunięte

Temat: Kilka tabsów i rozjazdy ;)

Mam nadzieję, że nie przesadziłem z rozdzielczością obrazka:


Obrazek


Krótki opis: duży jquery.ui.tabs() po lewej i taki sam do logowania po prawej. Siatka to linijka z WebDeveloperToolbar, pluginu do Firefox'a. Naniosłem ją, żeby pokazać, zależność wysokości obu tabsów.

No i na czym problem polega? Pomarańczowe tło lewego tabsa to div, który ma zawsze identyczną wysokość, jak zawartość tabs'a po prawej. Tab's po prawej ma float: right i to chyba jedyna właściwość, którą posądzałbym o mieszanie. Poza tym wszystko jest jak trzeba (tak mi się wydaje). Macie jakieś pomysły jak to rozwiązać? Albo raczej - co powoduje konflikt?

PS. Przejrzałem właściwości lewego tabsa firebugiem i nie ma nigdzie w css wlasciwosci height: która moglby przejac po jakims zaplatanym rodzicu. Natomiast w "wygenerowany css" height jest i rowna sie prawie faktycznej jego wysokosci (w css jest 126, na ekranie zmierzone rulerem - 130, wiec pewnie padding jakis dodatkowo). Moze sam kod jquery.ui miesza lub cos ustawia "zaocznie" dla obu tabsow?

PS2. Faktycznie, wyłączenie "float: right" niweluje problem, ale go nie rozwiązuje. Może ten float nie jest zbyt elegancki, ale potrzebuję go, macie pomysł, co powoduje ten konflikt? :)

PS3. Walka trwa, więc na razie ustawiłem jeden div na float: left, drugi na float: right i jest ok. Ciekawi mnie jednak nadal geneza zjawiska.Grzegorz Kaszuba edytował(a) ten post dnia 26.08.09 o godzinie 13:18
Link do wypowiedziLink
Mirosław Szajner

Mirosław Szajner Fast Web
Architect/Developer

Temat: Kilka tabsów i rozjazdy ;)

Nie do końca zrozumiałem Twój problem - czy chodzi pozycjonowanie czy nieprawidłową wysokość?

Jeśli problem z pozycjonowaniem, to może spróbuj ustawić na tym divie po prawej stronie:

display: table-cell;

zamiast float: right;

Czasem mi to pomagało.
Link do wypowiedziLink

konto usunięte

Temat: Kilka tabsów i rozjazdy ;)

Ciężko mi streścić problem. Generalnie, jeśli są dwa taby (dwa osobne divy), tworzone z użyciem jquery ui i jeden z nich ma ustawioną właściwość float, to element drugiego div'a odpowiedzialny za tlo pod zakladkami dostaje tej samej wysokosci, co zawartosc pierwszego div'a.

Skomplikowane, ale nie wiem jak inaczej opowiedzieć :) Wydaje mi się, że wewnętrzne tworzenie tabsów i selectory jquery coś tu mieszają jednocześnie zadając wysokość dla pomaranczowego tla i wysokosci drugiego diva i może w nich być błąd.

PS. Nie chce mi sie szukac i sprawdzac, ale czy table-cell i wszystkie te pochodne tabelkowe style działają jak trzeba w IE? ostatnio coś mi nie chodziło jak chciałem...Grzegorz Kaszuba edytował(a) ten post dnia 26.08.09 o godzinie 14:00
Link do wypowiedziLink
Marcin Ważny

Marcin Ważny Student, Wyższa
Szkoła Informatyki i
Zarządzania w
Rzeszowie

Temat: Kilka tabsów i rozjazdy ;)

Witam

Proponuje jednak wkleić kod xhtml ze strukturą i CSS do niego. I wtedy konkretnie wyjaśnić który div, jak się wyświetla, a jak się powinien wyświetlać, bo szczerze mówiąc nie rozumiem problemu kompletnie.

Pozdrawiam
Link do wypowiedziLink
Michał K.

Michał K. Starszy Grafik,
home.pl

Temat: Kilka tabsów i rozjazdy ;)

a czy góra pomarańczowego tła po lewej, powinna być równa górze pomarańczowego po prawej? czyli zakładki na tej samej wysokości?

włącz sobie w webdeveloperze aby podświetlił elementy blokowe, bo może coś z prawego DIVa wybija lewego DIVa w dół...

jeśli to nie pomoże to sprawdź jakie style nadpisuje ui.tabs za pomocą Firebuga już po wygenerowaniu strony
Link do wypowiedziLink

konto usunięte

Temat: Kilka tabsów i rozjazdy ;)



<div id="edytuj_klub_tab">

	<ul>

		<li><a href="#blabla">Bla bla</a></li>

		<li><a href="#fubar">Fubar</a></li>

	</ul>

	<div id="blabla"></div>

	<div id="fubar"></div>

</div>



<div id="logtab" style="float: right">

		<ul>

		<li><a href="#logowanie">Logowanie</a></li>

		<li><a href="#rejestracja">Rejestracja</a></li>



		</ul>

		<div id="logowanie">

		</div>

		<div id="rejestracja">

		</div>

</div>


a w <head>



	$('#edytuj_klub_tab').tabs();

	$('#logtab').tabs();


a efekt jak na obrazku. Ale spoko, już zwalczyłem na tyle ile potrzebowałem.
Link do wypowiedziLink
« Wróć do tematów
Odpowiedz

Podobne tematy





Wyślij zaproszenie do
Anuluj