CODEWITHSUNDEEP
jqueryhtmlcsslayoutitunes
Liam
Liam

Reputation: 788

iTunes style layout using CSS

What is the best way (using HTML/CSS) to create an iTunes-style layout with the following features:

Here is an example:

iTunes layout example as described above

I'm happy to use Javascript/JQuery if there really isn't a pure CSS solution.

Thanks!

Upvotes: 3

Views: 2277

Answers (3)

reisio
reisio

Reputation: 3242

http://fiddle.jshell.net/RAkKN/show/:

<!doctype html>
<html>
	<head>
		<title></title>
		<style>
body {
	margin: 0;
	padding: 0;
}
div {
	opacity: 0.5;
}
#red { background: red; }
#green { background: lime; }
#blue { background: blue; }
#green, 
#blue {
	width: 200px;
	position: fixed;
	left: 0;
}
#green {
	bottom: 0;
	height: 200px;
}
#blue {
	bottom: 200px;
	top: 0;
	overflow: auto;
}
#red {
	margin: 0 0 0 200px;
}
span { /* force overflow, for example */
	display: block;
	height: 3000px;
}
		</style>
	</head>
	<body>
		<div id="blue">
			<span></span>
		</div>
		<div id="green"></div>
		<div id="red">
			<span></span>
		</div>
	</body>
</html>

This does not support IE6; there are a number of different ways you can go to get the exact same thing or merely similar in IE6 (even without JavaScript), but the least tedious probably is just to use JavaScript.

Upvotes: 3

David Murdoch
David Murdoch

Reputation: 89332

The way I see it...you would want something like the following psudeo-css (this won't work IRL, you wouldn't want #left and #right measuring in percent [this should be set with javascript]).

html, body{height:100%;width:100%;margin:0;padding:0;}
    .clearfix{/****the usual clearfix code****/}
        #left {height:100%;float:left;width:25%;}
            #top{height:75%;overflow:auto;}
            #bottom{height:25%;}
        #right {height:100%;width:75%;float:left;overflow:auto;}

You could also use, dare I say it...TABLES!

--

And lastly..you will need to use javascript.

Upvotes: -1

D&#39;Arcy Rittich
D&#39;Arcy Rittich

Reputation: 171511

I would suggest you look at ExtJs for this.

It will let you do quite sophisticated flexible layouts, and would work well for this kind of app, e.g., portal example.

Upvotes: 1

Related Questions