Forum PHP.pl > Jak zaprogramować takie coś

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: Jak zaprogramować takie coś

Forum PHP.pl > Forum > Po stronie przeglądarki > CSS

Szymciosek

3.10.2012, 17:40:28

Witam,
chcę zaprogramować (to dobre słowo ?) w CSS box, który zawsze będzie miał zawsze:
width: 100% - 20px; (z lewej i prawej po 10px)
height: 100% - 160px; (z góry 10px odstępu od brzegu strony, 150px od dołu strony)

Szary obiekt

Arcioch

3.10.2012, 17:53:46

[HTML] pobierz, plaintext 
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<style>
	body,html{
		width: 100%:
		height: 100%;
		padding: 0;
		margin: 0;
	}
	body{
		background: blue;
	}
 
	div#content{
		background: grey;
		float: left;
		margin: 10px 0px 0px 10px;
	}
</style>
<script>
$(function(){
	var width = $(window).width() - 20;
	var height =  $(window).height() - 160;
 
	$('div#content').css({
		'width': width,
		'height': height
	});
});
</script>
</head>
<body>
	<div id="content">
	</div>
</body>
</html>
[HTML] pobierz, plaintext

Jak dla mnie bez js się nie obejdzie

Pobieram szerokość i wysokość okna przeglądarki i odejmuje odpowiednią ilość pixeli

Szymciosek

3.10.2012, 19:08:50

No niby działa, ale nie do końca, bo nie zmienia się width tego boxu, gdy zmieniam rozmiar okna przeglądarki. Ogólnie to powinno pracować w trybie każdej rozdzielczości biorąc też pod uwagę to, że potencjalny Kowalski będzie sobie zmieniał rozmiar okna właśnie...

fleshgrinder

3.10.2012, 19:09:02

szerokość da się bez js, po prostu nie ustawiasz szerokości elementu tylko same marginesy, domyślnie rozciągnie się on na (szerokość rodzica - wartość marginesów)

z wysokością niestety tak jak napisał Arcioch, bez js ciężko. mój strzał: http://jsfiddle.net/8XMVK/

jeśli to mógłby być padding zamiast marginesów, rozważ użycie border-box: http://paulirish.com/2012/box-sizing-border-box-ftw/

Szymciosek

3.10.2012, 19:15:56

Może być js, pod warunkiem, że będzie działało po zmianie rozmiaru okna przeglądarki jak napisałem wyżej.

Arcioch

3.10.2012, 19:29:56

[HTML] pobierz, plaintext 
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<style>
	body,html{
		width: 100%:
		height: 100%;
		padding: 0;
		margin: 0;
	}
	body{
		background: blue;
	}
 
	div#content{
		background: grey;
		float: left;
		margin: 10px 0px 0px 10px;
	}
</style>
<script>
$(function(){
 
	function sprawdzRozmiarOkna() {
		var width = $(window).width() - 20;
		var height =  $(window).height() - 160;
 
		$('div#content').css({
			'width': width,
			'height': height
		});
	}
 
	sprawdzRozmiarOkna();
	$(window).resize(sprawdzRozmiarOkna);
});
</script>
</head>
<body>
	<div id="content">
	</div>
</body>
</html>
[HTML] pobierz, plaintext

Sprawdza rozmair okna i dostosowywuje

w tym dziale pisałem już coś takiego wystarczyło poszukać i dostosować

zegarek84

4.10.2012, 00:16:01

Cytat(Arcioch @ 3.10.2012, 18:53:46 )

Jak dla mnie bez js się nie obejdzie

Pobieram szerokość i wysokość okna przeglądarki i odejmuje odpowiednią ilość pixeli

Cytat(fleshgrinder @ 3.10.2012, 20:09:02 )

z wysokością niestety tak jak napisał Arcioch, bez js ciężko. ...

taaaaa... jasne...
jest na to kilka sposobów, ale jeśli to ma być box to podam najprostszy z pozycjonowaniem absolutnym...

[HTML] pobierz, plaintext 
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style>
	body,html{
		width: 100%;
		height: 100%;
		padding: 0;
		margin: 0;
		position: relative;
	}
	body{
		background: blue;
	}
 
	div#content{
		background: grey;
		padding: 0;
		margin: 0;
		position: absolute;
		top: 10px;
		bottom: 150px;
		left: 10px;
		right: 10px;
	}
</style>
</head>
<body>
	<div id="content">
	</div>
</body>
</html>
[HTML] pobierz, plaintext

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.