2 Divy obok siebie też w IE (trochę inaczej)

[DJWW]

Witam,
dopiero zaczynam przygodę z css'ami więc może pytanie zabrzmi banalnie.


Tworzę master page dla SharePointa. Jako, że ponoć teraz tabele są passe, postanowiłem wszystko robić na divach i CSSach. Generalnie mi to wychodzi, ale utknąłem na treści strony. Po lewej mam boczną nawigację mającą stałą szerokość, a po prawej resztę. Jako, że jest to master page, reszta może mieć różną długość w tym i taką która powinna wywołać poziomy scroll. Moim problemem jest to, że w IE (który jest korporacyjnym standardem), kiedy pojawi się taki element, div treści ląduje pod divem bocznej nawigacji (w FF jest tak, jak chcę). Próbowałem to obejść na różne sposoby, ale:
- position:absolute odpada, bo pod tym wszystkim ma być jeszcze stopka
- (tego na razie nie udało mi się zrobić) tło nagłówka strony powinno się rozszerzyć razem ze stroną (w tej chwili kończy się w miejscu gdzie kończy się szerokość wyświetlanej strony).


będę wdzięczny za wszelką napisaną w miarę jasno pomoc

Pozdrawiam
WW

[slawko]

Możesz pokazać źródło strony i stylów css.

[knight-rider]

sprawdz szerokosci, marginesy i paddingi tych divow, potestuj z nimi

[DJWW]

Hej,
dzięki za odzew. Wklejam kod dopiero teraz bo robię to w pracy Nie będe wklejał wszystkiego, tylko istotne fragmenty:

kod strony w skrócie wygląda tak:

Kod: Zaznacz cały

<div id="wholePageDiv">
//kontrolki powyżej treści strony

	<div id="contentAndNavOuter">	
		
		<div id="leftContentAndNav">	
		
		//placeholdery dla nawigacji i innych kontrolek występujących w tym miejscu
		
		</div>
		
		<div id="contentSection">
		
					<div id="editConsole">
								<!--- --- --- Page Status Console --- --- --->
							<wssuc:DesignModeConsole id="IdDesignModeConsole" runat="server"/>	
							
							<!--- --- --- Page Edit Toolbar --- --- --->
							<PublishingConsole:Console runat="server"/>	
					</div>
		
		<!--- --- ---  Page Content --- --- --->	
		
		<asp:ContentPlaceHolder id="PlaceHolderMain" runat="server" />
		
		
		</div>
	
	</div>
</div>

a wybrane cssy tak:

Kod: Zaznacz cały

div#wholePageDiv
{
	width=100%;
	position:absolute;
	top:0;
	left:0;
	bottom:0;
	right:0;
}

div#contentAndNavOuter{	
		width:auto;	
}

div#leftContentAndNav
{
	float:left;
	width:246px;
	background-color:white;
	display:inline;
	
	
}
div#contentSection
{
		
	margin:0 0 0 248px;		
	width:expression((document.body.clientWidth-300)+"px"); 
	
}

W tej chwili efekt mam taki, że jak coś w contentSection jest szersze niż pozostałość strony to to ląduje pod menu ( z zachowaniem odległości 246px). Cel jest taki, żeby było obok niezależnie od wszystkiego W tej chwili jest tak tylko w firefoxie, a wymaganiem jest takie samo zachowanie w IE.

[Lobo]

witam, masz dar tak pokrętnego mówienia, że ledwo cie idzie zrozumieć.

Na początek wkleiłem ten twój kod i zarówno pod ff i pod ie wygląda tak samo (po wypełnieniu diva "content" oczywiście) i jego zawartość wcale nie zachodzi pod menu. Div rozciąga się w dół żeby pomieścić treść czyli działa tak jak powinien(nie opływa menu).

Nie wiem czy chcesz żeby menu i content były jednej długości jeśli tak to dajesz odpowiedni background(np pasek 1px wys. powielany w pionie) dla elementu dla nich nadrzędnego(który rozciągnie się razem z najdłuższym elementem w nim zawartym czyli divem "content"). Sposób tak zwany "faux columns"

jak chcesz żeby treść rozciągała ci div na szerokość ( ten twój "poziomy scroll") to szczerze nie wiem, można się bawić w jakieś horizontal sliders przy użyciu jquery. W każdym razie skoro mówisz, że "w ff masz tak jak chcesz" wnioskuje, że mogło chodzić o pionowy scroll wtedy radze zapoznać się z pojęciami pion, poziom, szerokość i wysokość.

[DJWW]

Hej,
skoro pokrętnie to spróbuję jeszcze raz:

Tworzę master page, więc w tych divach mogą znaleźć się różne rzeczy:
Po lewej zawsze mam menu o stałej szerokości.
Po prawej może być tekst, który oczywiście się zwinie w dół i będziemy mieli pionowy suwak, ale może być też element (długi wykres, web part, grafika itd), który nie zwija się tak jak tekst, tylko zachowuje swoją szerokość. Kiedy szerokość takiego elementu w sumie z szerokością menu i odstępów jest większa niż szerokość przeglądarki, prawy div (contentSection) ląduje pod menu. Zamiast tego, powinien zostać na jednym poziomie z menu i powinien się pojawić poziomy suwak.

[Lobo]

teraz już troche jaśniej jest

bez określenia szerokości ciężko jest się pozbyć floatowych bugów. Z tego co patrzyłem to zadziała pod ie6 pozycjonowanie absolutne i ustawienie konkretnej odległości np "position:absolute;top:0" dla tego div ( z content) ew. jeszcze wartość "left" na szerokość menu i zmniejszenie marginesu do 0 . Jak będą rozbieżności pod ff to zamieścić to by pasowało zrobić osobny css dla ie. Tylko wiadomo wiąże się to z tym że pasuje ci wiedzieć jaki odstęp strony będzie od brzegu okna przeglądarki. Ale z drugiej strony jak nie centrujesz strony(a nie centrujesz bo ci się ma rozjechać w poziomie) to chyba nie problem.

pod ie7 ani 8 nie patrzyłem ale jak 6 łyknie to raczej nie będzie większego problemu z nimi, co do twojego kodu to wywaliłem expressions i style wszystkie oprócz styli menu i content.

...

generalnie to lubisz sobie utrudniać życie. jak grafika jest większa niż te 700-800 px (czy ile tam wyjdzie po dojęciu tych 248px od 1024) to zawsze można ją pomniejszyć na stronie i podlinkować pod obrazek o pełnych rozmiarach co daje możliwość ustawienia stałej szerokości strony, co rozwiązuje mnóstwo problemów.

[DJWW]

Hej,
próbowałem z absoloute, ale jeżeli dobrze rozumiem działanie tego to wtedy te divy są "wyjęte" z dokumentu i nie wiem gdzie się kończą, a pod spodem ma być jeszcze stopka. (chyba, że jest na to sposób).
Co do grafiki to był przykład. Tak na prawdę jest to web part, który mniejszy nie będzie ze względu na swoją funkcję. Poza tym to master page więc w tym divie może też się pojawić np. lista z dużą ilością kolumn i ona też się nie zwinie.

Wracając do absolute. to jest jakiś sposób żeby te divy będąc w takiej pozycji wypychały mi stopkę pod spód a nagłówek rozpychały w prawo?

[Lobo]

szczerze nie wiem. Możesz próbować js obliczającego wysokośc diva content i pozycjonować absolutnie fotera w oparciu o to. Ale jak dla mnie to sztuka dla sztuki. Nie wiem czym ten master page cały ma być ale radził bym ci się dobrze zastanowić nad reprezentacją danych na stronie i jej układem. Jak ci się coś na stronie nie mieści to albo podlinkuj do pliku z orginalnym rozmiarem(jakaś grafika, excel) albo rozłóż to na większą ilość stron zamiast robić z tego papier toaletowy rozwijany w prawo.

[DJWW]

Dzięki za chęci. Niestety w końcu się poddałem i tę część, która odpowiada za boczne menu i zawartość zamknąłem w tabeli - rozwiązało to wszystkie problemy.

Nie wiem czym ten master page cały ma być ale radził bym ci się dobrze zastanowić nad reprezentacją danych na stronie i jej układem.

Master page jest taką ogólną definicją układu strony dla wielu stron. Decydujesz jakiego rodzaju zawartości gdzie będą (np. boczne menu będzie po lewej pod górną nawigacją), ale nie definiujesz w nim szczegółowo treści (poza wyjątkami, np. stopka, górny baner). Treść sama w sobie pojawia się później na poszczególnych stronach i nierzadko dodają ją użytkownicy (już wiem, że będzie np. Gantt 2 razy szerszy niż strona).