[HTML][CSS] problem z height Opcje

[kamilo818]

Może ktoś podpowie.

Nie mogę sobie poradzić z wysokością diva.
Mam ustawionego diva na 90% wysokości okna. W nim ma być kolejny div w którym jest tekst. Jak tekstu jest więcej to ma się przewijać ale nie powiększać diva. Wszytko niby ustawion ok ale nie działa. Nawet jak wrzuca mniej tekstu to przy zmianie wielkosci okna dzieje się to samo.

Możecie podejrzeć to na stronie: www.page4u.waw.pl/galeria
Chodzi o zakładkę 'reduta'

[tomi1985]

[HTML] pobierz, plaintext 
scroll:overflow;
[HTML] pobierz, plaintext 

i pokazuj kod bo tak to wiesz...

Ten post edytował tomi1985 2.09.2014, 16:12:23

[djgarsi]

[HTML] pobierz, plaintext 
scroll:overflow;
[HTML] pobierz, plaintext 

i pokazuj kod bo tak to wiesz...

Hehe. Odwrotnie

Kod

overflow: scroll;

[tomi1985]

heheh w sumie racja

[kamilo818]

Oślepłem nie widze co tu nie gra.
index

[PHP] pobierz, plaintext 
		<div class="slide" id="reduta">
			<div class="fake_menu"></div>
			<div class="content">
 
				<div class="container">
					<div class="opis">
						<div class="txt">
		                                        jh adhj hjdljah ladh da hj kadhj ladkjha djh adhj hjdljah ladh da hj kadhj ladkjha djh adhj hjdljah ladh da hj
						</div>
					</div>
					<div class="galeria">
						<div class="galeria_main cycle-slideshow"
								data-cycle-fx="fade"
								data-cycle-timeout=0
								data-cycle-prev="#prev"
								data-cycle-next="#next"
								data-cycle-center-horz=true
    								data-cycle-center-vert=true
 
							>
							<img src="img/promenada.jpg"/>
							<img src="img/reduta.jpg"/>
							<img src="img/manufaktura.jpg"/>
							<img src="img/glodzka.jpg"/>
							<img src="img/arkadia.jpg"/>
						</div>
						<div id="prev"></div>
						<div id="next"></div>
					</div>
				   	<div class="mapa">
				   		<iframe src="" frameborder="0" style="border:0"></iframe>
				   	</div>
				</div>
				<div class="navigation">
					 <div style="width:300px; height:20px; padding:0; margin:auto; display:table;">
						<div id="opis"> Opis </div>
						<div id="galeria"> Galeria </div>
						<div id="mapa"> Mapa </div>
					</div>
				</div>
			</div>
			<div class="fake_right"></div>
		</div>
[PHP] pobierz, plaintext 

css

[PHP] pobierz, plaintext 
html{
	margin:0;
	padding:0;
	width:100%;
	height:100%;
}
 
body{
	margin:0;
	padding:0;
	width:100%;
	height:100%;
	overflow:scroll; //docelowo hidden
	font-family:Arial;
}
div.slide{
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    display:table;
}
div#reduta{
	background-image:url('img/reduta.jpg');
}
div.fake_menu {
	width:250px;
}
div.fake_right{
	width:5%;
}
div.fake_menu, div.content, div.fake_right{
	display:table-cell;
	position:relative;
	height:100%;
	border:0px solid;
	vertical-align:top;
}
div.container{
	width:100%;
	border:0px solid white;
	height:90%;
	overflow:hidden;
	position:relative;
 
}
div.navigation{
	width:100%;
	border:0px solid;
	height:10%;
	text-align:center;
	background-color:#4E8FFF;
	opacity:0.9;
 
 
 
}
div.navigation div{
	color:#ffffff;
	text-decoration: none;
	font-size:20px;
 
	display:table-cell;
	cursor:pointer;
 
 
 
}
div.opis{
	background: rgba(78, 143, 255, 0.9);
 
 
	border:1px solid #ffffff;
	width:99%;
	max-height:99%;
	overflow-x:hidden;
	margin:auto;
 
}
div.txt{
	color:#ffffff;
	font-size:17px;
	padding:40px;
	text-align:justify;
 
}
#reduta .galeria, #reduta .mapa{
	display:none;
}
.galeria img{
	max-width:100%;
	max-height:100%;
 
}
div.navigation a.cycle-pager-active{
	font-size:30px;
 
}
#reduta div.mapa{
	width:100%;
	height:100%;
}
#reduta div.galeria{
	width:100%;
	height:100%;
}
div.galeria_main{
	position:relative;
 
}
div#prev, div#next{
	position:absolute;
	top:0;
	background-color:#ffffff;
	width:20%;
	z-index:99999;
	height:100%;
	opacity:0;
 
}
div#next{
	right:0;	
	background: url('next.png') no-repeat scroll 50% 50% transparent;
	background-size: 80px 80px;
 
}
div#prev{
	left:0;	
	background: url('prev.png') no-repeat scroll 50% 50% transparent;
	background-size: 80px 80px;
}
div#prev:hover, div#next:hover{
	opacity:0.7;
	cursor:pointer;
}
[PHP] pobierz, plaintext 

Ten post edytował kamilo818 2.09.2014, 18:55:54

[trueblue]

Zmień display:table i display:table-cell na domyślny (usuń).
Potem dostosuj layout, tak aby układ był taki jak teraz.
"Block" będzie trzymać wysokość.

Ten post edytował trueblue 2.09.2014, 19:11:39

[tzm]

i jesli scroll jest opcjonalny, tz nie zawsze wystepuje to zamiast overflow:scroll zrob overflow:auto

[kamilo818]

i jesli scroll jest opcjonalny, tz nie zawsze wystepuje to zamiast overflow:scroll zrob overflow:auto

ma być niewidoczny zawsze


Ten post edytował kamilo818 2.09.2014, 19:43:27

[Turson]

Jak ma być niewidoczny to overflow: hidden jak to podpowiedziano wcześniej

[kamilo818]

Nie daje rady tego pozmieniać.
jak zmieniam na block to rozjeżdza sie wszystko i nie jestem w stanie ustawić divów obok siebie.
lewy div 250px szerokosci prawy 5% szerkosci a srodkowy ma wypełnić reszte strony. Przy table-cell to bez problemu ale bez tego nie wiem jak to ustawić.

edit:
Problem rozwiązany.
Zamiast dodawać fake_div użyłem margin lefti right, zmieniłem z dispaly na domyślne i działa.


Ten post edytował kamilo818 3.09.2014, 08:58:36