Keskustelu: Nettisivujen teko: CSS-ongelma

Matso [19.12.2007 22:29:23]

En nyt millään keksi miten tän saa toimimaan :F

Eli A ja B pitäis venyä aina täys pituseks pystysuunnassa kun toi laatikko venyy pystysuuntasesti aina sisällön mukaan.

Merri [20.12.2007 01:17:07]

Mää jaksoin. Tein vähän eri tavoin. Yritin arvata mitä hait takaa. Toimii Firefox 2 ja IE7. Tosin sulla tarvitsee säätää noista PNG-kuvista gammakanava pois ettei tule väärän värisinä, eli etsi joku optimoija.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="fi" xml:lang="fi"><head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>Bluebox</title>
	<style type="text/css">

div.bluebox {
	background : #6B8EAE url('http://jouluserver.com/~matso/problem/pics/bluebox_middle_left.png') repeat-y;
	margin : 36px 0;
	position : relative;
	width : 60%;
}

div.bluebox div {
	background : url('http://jouluserver.com/~matso/problem/pics/bluebox_middle_right.png') repeat-y 100% 0;
	width : 100%;
}

div.bluebox div div {
	background : transparent;
	margin : 0 24px;
}

div.bluebox b.top {
	display : block;
	height : 24px;
	left : 0;
	line-height : 24px;
	position : absolute;
	width : 100%;
	top : -24px;
}

div.bluebox b.top b.t1 {
	background : url('http://jouluserver.com/~matso/problem/pics/bluebox_top_left.png') no-repeat;
	float : left;
	height : 24px;
	width : 24px;
}

div.bluebox b.top b.t2 {
	background : url('http://jouluserver.com/~matso/problem/pics/bluebox_top_right.png') no-repeat 100% 0;
	float : right;
	height : 24px;
	width : 24px;
}

div.bluebox b.top b.t3 {
	background : url('http://jouluserver.com/~matso/problem/pics/bluebox_top_middle.png') repeat-x;
	display : block;
	height : 24px;
	margin : 0 24px;
}

div.bluebox b.bottom {
	bottom : -24px;
	display : block;
	height : 24px;
	left : 0;
	line-height : 24px;
	position : absolute;
	width : 100%;
}

div.bluebox b.bottom b.b1 {
	background : url('http://jouluserver.com/~matso/problem/pics/bluebox_bottom_left.png') no-repeat;
	float : left;
	height : 24px;
	width : 24px;
}

div.bluebox b.bottom b.b2 {
	background : url('http://jouluserver.com/~matso/problem/pics/bluebox_bottom_right.png') no-repeat 100% 0;
	float : right;
	height : 24px;
	width : 24px;
}

div.bluebox b.bottom b.b3 {
	background : url('http://jouluserver.com/~matso/problem/pics/bluebox_bottom_middle.png') repeat-x;
	display : block;
	height : 24px;
	margin : 0 24px;
}

	</style>
</head><body>
	<div class="bluebox"><div>
		<b class="top"><b class="t1"></b><b class="t2"></b><b class="t3"></b></b>
		<div>
			<h2>OMG!</h2>
			<p>Sisältöä</p>
			<p>Heehee!!!!</p>
		</div>
		<b class="bottom"><b class="b1"></b><b class="b2"></b><b class="b3"></b></b>
	</div></div>
</body></html>

Merri [20.12.2007 01:36:14]

Koska minulla on tällä hetkellä aikaa puuhailla kaikkea turhaa... korjailin hieman ja tein mahdolliseksi laittaa laatikon laatikon sisään:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="fi" xml:lang="fi"><head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>Bluebox</title>
	<style type="text/css">
html,body { font-family : 'Trebuchet MS', Tahoma, Arial, sans-serif; margin : 0; padding : 0; }

div.bluebox,div.bluebox div.bluebox {
	background : #6B8EAE url('http://jouluserver.com/~matso/problem/pics/bluebox_middle_left.png') repeat-y;
	height : 100%;
	margin : 36px;
	position : relative;
}

div.bluebox div.bluebox { margin : 36px auto; width : 70%; z-index : 1; }

div.bluebox div,div.bluebox div.bluebox div {
	background : url('http://jouluserver.com/~matso/problem/pics/bluebox_middle_right.png') repeat-y 100% 0;
	height : 100%;
	margin : 0;
}

div.bluebox div div,div.bluebox div.bluebox div div {
	background : transparent;
	margin : 0 24px;
}

div.bluebox b.top {
	display : block;
	height : 24px;
	left : 0;
	line-height : 24px;
	position : absolute;
	width : 100%;
	top : -24px;
}

div.bluebox b.top b.t1 {
	background : url('http://jouluserver.com/~matso/problem/pics/bluebox_top_left.png') no-repeat;
	float : left;
	height : 24px;
	width : 24px;
}

div.bluebox b.top b.t2 {
	background : url('http://jouluserver.com/~matso/problem/pics/bluebox_top_right.png') no-repeat 100% 0;
	float : right;
	height : 24px;
	width : 24px;
}

div.bluebox b.top b.t3 {
	background : url('http://jouluserver.com/~matso/problem/pics/bluebox_top_middle.png') repeat-x;
	display : block;
	height : 24px;
	margin : 0 24px;
}

div.bluebox b.bottom {
	bottom : -24px;
	display : block;
	height : 24px;
	left : 0;
	line-height : 24px;
	position : absolute;
	width : 100%;
}

div.bluebox b.bottom b.b1 {
	background : url('http://jouluserver.com/~matso/problem/pics/bluebox_bottom_left.png') no-repeat;
	float : left;
	height : 24px;
	width : 24px;
}

div.bluebox b.bottom b.b2 {
	background : url('http://jouluserver.com/~matso/problem/pics/bluebox_bottom_right.png') no-repeat 100% 0;
	float : right;
	height : 24px;
	width : 24px;
}

div.bluebox b.bottom b.b3 {
	background : url('http://jouluserver.com/~matso/problem/pics/bluebox_bottom_middle.png') repeat-x;
	display : block;
	height : 24px;
	margin : 0 24px;
}

	</style>
</head><body>
	<div class="bluebox"><div>
		<b class="top"><b class="t1"></b><b class="t2"></b><b class="t3"></b></b>
		<div>
			<h2>OMG!</h2>
			<p>Sisältöä</p>
			<p>Heehee!!!!</p>
			<div class="bluebox"><div>
				<b class="top"><b class="t1"></b><b class="t2"></b><b class="t3"></b></b>
				<div>
					<h3>Äiti äiti!</h3>
					<p>Voiks meil olla toinenkin laatikko?</p>
				</div>
				<b class="bottom"><b class="b1"></b><b class="b2"></b><b class="b3"></b></b>
			</div></div>
			<p>Hauskaa.</p>
		</div>
		<b class="bottom"><b class="b1"></b><b class="b2"></b><b class="b3"></b></b>
	</div></div>
</body></html>

Matso [20.12.2007 12:47:39]

Kiitos. Täytyypä tutkia tosta. Viitti valmista koodia kopsata. Mun periaatteiden vastasta :>

Vastaus

Aihe on jo aika vanha, joten et voi enää vastata siihen.

Kirjautuminen

Haku