how was this created?

[chuongy]

hi everyone,

im a newbie here. Just want to ask if anyone know how they built this site (http://www.umeric.com/). I really like the simple layout that allows each block (image/video) to fill up the screen when you minimize/maximize the window. Also when you click on each image/video it loads up the content there and pushes everything away. If anyone know if there is some sort of help/tutorials/template that i can read up on that would be awesome.

thanks for your help.

chowwy

 

[lolkaykay]

Floats

It's done by putting each column of boxes in it's own div and then floating those divs with CSS.

It would be something like this:

<div>
<img src="1.gif" />
<img src="1.gif" />
</div>

<div>
<img src="2.gif" />
<img src="2.gif" />
</div>

<div>
<img src="3.gif" />
<img src="3.gif" />
</div>

And the CSS would be:

div {
float: left;
}

img {
display: block;
}

This code is just the bare basics, without all the extra aesthetics and styling. Also, my css is applied to divs and imgs, but in a real webpage you will have other divs and imgs that you don't want this style to be applied to. In that case, you will need to add a class to the divs and imgs, and use the styling on those instead.

Alternatively, you can wrap the boxes in another div, give that a class, and access the div and img with the class name followed by div, or img.

I'm not sure if that was confusing. If you have no idea what I just said in the last two paragraphs, just say it and I'll clarify with more code examples :]

 

[chuongy]

thanks for the tip lolkaykay.

my css is very basic so this is something new to me. i sort of get the idea of what float and block do but writing up a whole set of functional css can be challenging. also how does the expand work when you click on one of these items so that the content appears at the same location of that item?

 

[lolkaykay]

That would be some sort of javascript that would really be hard to explain. If you want to learn more about html, css, javascript, and other languages for the web, visit w3schools.com. They have great tutorials there on a lot of programming and markup languages.