Forum PHP.pl > [CSS] Pomoc przy ustawieniu DIV

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [CSS] Pomoc przy ustawieniu DIV

daves

13.03.2012, 21:24:15

Nie mogę sobie poradzić ze złożeniem divów na stronie.
Próbuję zbudować widok jak na tym zdjęciu
PEŁNY WIDOK
Zrobić to na tabelkach nie ma problemu ale chcę to zrobić divami.
Wyciąłem górną część DIV1
oraz obraz do drugiego div'a DIV2
Obrazki w obu divach ustawiam w BACKGROUND natomiast obraz w DIV2 robię repeat by wypełnił mi cały obszar.

[HTML] pobierz, plaintext 
<DIV id='DIV1' style='background: url('gora.png')'>
 <DIV id='DIV2' style='background: url('tlo') repeat-y'>
--dostęp do pełnego obszaru widoku i dalsze pozycjonowanie bloków
 </DIV>
<DIV>
[HTML] pobierz, plaintext

Jeżeli ustawię oba divy w identycznym położeniu to jeden przykrywa mi obraz drugiego a chciałbym widzieć i jeden i drugi i mieć dostęp do pełnego obszaru.
Próbowałem też odwrotnie to zrobić.. pierw div z tłem a później div z górą ale ten drugi ale efekt mam taki, że mam obraz góry i niżej sam kolor diva.
bawiłem się też opacity ale działa to na cały background i też dupa.
Jak z tym sobie poradzić?

lobopol

13.03.2012, 21:27:44

wrzuć całość na jakiś serwer bo tu nic nam nie pokazałeś praktycznie, jeżeli dobrze ciebie zrozumiełem, to odwrotnie powinno być div1 ma mieć tło powtarzalne, a div2 niepowtarzalne

daves

13.03.2012, 21:31:21

Cytat(lobopol @ 13.03.2012, 21:27:44 )

wrzuć całość na jakiś serwer bo tu nic nam nie pokazałeś praktycznie,

Wrzuciłem na imageshack - są odnośniki.

Cytat(lobopol @ 13.03.2012, 21:27:44 )

jeżeli dobrze ciebie zrozumiełem, to odwrotnie powinno być div1 ma mieć tło powtarzalne, a div2 niepowtarzalne

Tak

lobopol

13.03.2012, 21:35:13

Imageshack za bardzo css i układu nie pokaże

13.03.2012, 21:41:38

[HTML] pobierz, plaintext 
<div id='wrap'>
  <div id="div1"></div>
  <div id="div2"></div>
</div>
[HTML] pobierz, plaintext

ja zrozumiałem to tak..

ale moze o to ci chodzi ?

[HTML] pobierz, plaintext 
<DIV id='DIV1' style='background: url('gora.png');'>
 <DIV id='DIV2' style='margin-top: 50px; background: url('tlo') repeat-y;'>
--dostęp do pełnego obszaru widoku i dalsze pozycjonowanie bloków
 </DIV>
<DIV>
[HTML] pobierz, plaintext

gdzie margin-top to wysokość obrazka gora.png

napisz więcej info.

daves

13.03.2012, 21:51:08

Html:

[HTML] pobierz, plaintext 
	<body>
		<div id="DIV1">
			<div id="DIV2">			
	   		 {$layout->content}
	   		</div>
	   	</div>
	</body>
[HTML] pobierz, plaintext

CSS:

[HTML] pobierz, plaintext 
#DIV1{
	width: 900px;
	height: 456px;	
	background-image: url(tlo.png);
	background-repeat: repeat-y
	border:solid 1px black;
}
 
 
#DIV2{
	width: 100%;
	height: 100%;	
 
	background-image: url(img_gora.png);
	background-repeat: no-repeat;	
}
[HTML] pobierz, plaintext

W takim układzie div2 przykryje mi całe tło z div1 i w efekcie mam tylko obrazek góry i pustka

pa-jong

13.03.2012, 22:25:07

strzelam...

[HTML] pobierz, plaintext 
#DIV1{
	width: 900px;	
	background-image: url(img_gora.png);
	background-repeat: no-repeat;	
}
#DIV2{
	width: 900px;
	margin: 456px;	
	background-image: url(tlo.png);
	background-repeat: repeat-y
	border:solid 1px black;
}
 
[HTML] pobierz, plaintext

daves

13.03.2012, 22:42:24

strzał w stopę..
potrzebuję aby div1 i div2 pokrywały ten sam obszar ale do tego potrzebuję widzieć tło oraz górę

pa-jong

13.03.2012, 23:08:12

[HTML] pobierz, plaintext 
<style>
#DIV1{
	width: 900px;
	height: 456px;	
	background-image: url(http://img15.imageshack.us/img15/9807/gradientdw.png);
	background-repeat: repeat-y
	border:solid 1px black;
}
 
 
#DIV2{
	width: 100%;
	height: 100%;	
 
	background-image: url(http://img43.imageshack.us/img43/9826/imggora.png);
	background-repeat: no-repeat;	
}
</style>
 
		<div id="DIV1">
			<div id="DIV2">			
	   		 {$layout->content}
	   		</div>
	   	</div>
[HTML] pobierz, plaintext

dałem to do siebie lokalnie i działa dokladnie jak tutaj
http://imageshack.us/photo/my-images/837/menutb.png
dalej kwestia pozycjonowania zawartości {$layout->content}

daves

14.03.2012, 21:43:18

faktycznie.. Miałem wczoraj jakieś zaćmienie...

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.