960 grid system

HTML & CSS
1

Hi,

Important (possible) techniques: target, internal linking, float, box model, position, z-index, transition

Recreate what appears on the screen below (960gs is used as grid system, 600px in height container). When you click on one of the pictures link on the right side shall info about selected films emerge in the middle. The property position is possibly. Only allowed in movie information site. Use transition to create fade effect between the films.

1024×666 608 KB

This should I create.

But to code in 960 grid system, but I use photoshop first? someone who has done it before? Used grid in coding?

I use Notepad ++ editor.

2

What would be the point of using photoshop first?

Begin the coding. Let us know if you need help with your homework assignment.

3 
I don't know. 

This is how my coding looks like now.  How do I get the big text in the middle? And how do I get the picture, heading text and the light grey box a little to the right?

<!doctype html>




Blushop

body {
margin: 0;
padding: 0;
}
#Header h1 {
font-size:30px;
font-family:“Times New Roman”, Times, serif;
text-align:left;
color: #00FFFF;
}
#mainContent {
color: #000000;
}
#container {
max-width: 960px;
background-color: rgb(66, 69, 74);
margin:auto;
text-align:left;
}
#mainContent article {
width: 700px;
min-height: 360px;
background-color: rgb(230, 231, 232);
display:inline-block;
vertical-align:top;
margin: 50px 10px 15px 0px;
text-align:left;
}

<body>
<div id="container">
		<header id="mainHeader"> </header>
		<section id="mainContent">
				<div id="Container">
						<div id="Header">
								<h1>BluShop</h1>
						</div>
						<article>
						  <h4>Pacific Rim</h4>
								<img src="pacificRim.jpg" width="350" height="450"   alt="pacificRim" > 
								<p> When legions of monstrous creatures, known as Kaiju,
								started rising from the sea, a war began that would take millions of
								lives and consume humanity's resources for years on end. To combat the giant Kaiju,
								a special type of weapon was devised: massive robots, called Jaegers, which are controlled
								simultaneously by two pilots whose minds are locked in a neural bridge. But even the Jaegers
								are proving nearly defenseless in the face of the relentless Kaiju. On the verge of defeat,
								the forces defending mankind have no choice but to turn to two unlikely heroes a washed
								up former pilot (Charlie Hunnam) and an untested trainee (Rinko Kikuchi) who are teamed to
								drive a legendary but seemingly obsolete Jaeger from the past. Together,
								they stand as mankind's last hope against the mounting apocalypse.</p> 
</article>
						
						<article>
								
								<img src="worldWarZ.jpg" width="211" height="273"   alt="worldwarz" >
								 </article>
						<article>
							
								<img src="starTrek.jpg" alt="startrek" width="211" height="273" align="bottom"
						</article> 
								
								
				</div>
		</section>
</div>
</body>
</html>
4

Can we get your CSS as well?

5 
Ofc.  my bad.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blushop</title>
<style type="text/css">
body {
	margin: 0;
	padding: 0;
}
#Header h1 {
	font-size:30px;
	font-family:"Times New Roman", Times, serif;
	text-align:left;
	color: #00FFFF;
}
#mainContent {
	color: #000000;
}
#container {
	max-width: 960px;
	background-color: rgb(66, 69, 74);
	margin:auto;
	text-align:left;
}
#mainContent article {
	width: 700px;
	min-height: 360px;
	background-color: rgb(230, 231, 232);
	display:inline-block;
	vertical-align:top;
	margin: 50px 10px 15px 0px;
	text-align:left;
}
</style>
</head>

<body>
<div id="container">
		<header id="mainHeader"> </header>
		<section id="mainContent">
				<div id="Container">
						<div id="Header">
								<h1>BluShop</h1>
						</div>
						<article>
						  <h4>Pacific Rim</h4>
								<img src="pacificRim.jpg" width="350" height="450"   alt="pacificRim" > 
								<p> When legions of monstrous creatures, known as Kaiju,
								started rising from the sea, a war began that would take millions of
								lives and consume humanity's resources for years on end. To combat the giant Kaiju,
								a special type of weapon was devised: massive robots, called Jaegers, which are controlled
								simultaneously by two pilots whose minds are locked in a neural bridge. But even the Jaegers
								are proving nearly defenseless in the face of the relentless Kaiju. On the verge of defeat,
								the forces defending mankind have no choice but to turn to two unlikely heroes a washed
								up former pilot (Charlie Hunnam) and an untested trainee (Rinko Kikuchi) who are teamed to
								drive a legendary but seemingly obsolete Jaeger from the past. Together,
								they stand as mankind's last hope against the mounting apocalypse.</p> 
</article>
						
						<article>
								
								<img src="worldWarZ.jpg" width="211" height="273"   alt="worldwarz" >
								 </article>
						<article>
							
								<img src="starTrek.jpg" alt="startrek" width="211" height="273" align="right"
						</article> 
								
								
				</div>
		</section>
</div>
</body>
</html>
6

Few things:

  1. Not a good idea to have #container and #Container. Very confusing and you’ll likely screw it up.
  2. If you float the images, the text will rise up next to the images.
  3. Align attribute is deprecated and should not be used. Stick to floats. If your teacher is teaching that, get your money back from the course.

I’m not sure where your sidebar columns of 3 mini images are so I can’t help with that.

7

ok. thank you.
Im not sure how to get the sidebar columns of 3 mini images.

8

Make the column and we will go from there. It’s as simple as making 3 images, display:block, and wrapping those images with a <div>

<div>
<img/>
<img/>
<img/>
</div>
9 
Okey, 
where do I set up the "<div>
<img/>
<img/>
<img/>
</div>" ? 

Now my code looks like this: 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blushop</title>

<style type="text/css">

img {
    float: left;
	}
	
body {
	margin: 0;
	padding: 0;
}
#Header h1 {
	font-size:30px;
	font-family:"Times New Roman", Times, serif;
	text:left;
	color: #00FFFF;
}
#mainContent {
	color: #000000;
}
#container {
	max-width: 960px;
	background-color: rgb(66, 69, 74);
	margin:auto;
	text:left;
}
#mainContent article {
	width: 700px;
	min-height: 360px;
	background-color: rgb(230, 231, 232);
	display:inline-block;
	vertical:top;
	margin: 50px 10px 15px 0px;
	text:left;
}


	
</style>
</head>

<body>
<div id="container">
		<header id="mainHeader"> </header>
		<section id="mainContent">
	
   
				<div id="container">
						<div id="Header">
								<h1>BluShop</h1>
						</div>
						<article>
						  <h4>Pacific Rim</h4>
						  
								<img src="pacificRim.jpg" width="350" height="450" 
								}  alt="pacificRim" > 
								<p> When legions of monstrous creatures, known as Kaiju,
								started rising from the sea, a war began that would take millions of
								lives and consume humanity's resources for years on end. To combat the giant Kaiju,
								a special type of weapon was devised: massive robots, called Jaegers, which are controlled
								simultaneously by two pilots whose minds are locked in a neural bridge. But even the Jaegers
								are proving nearly defenseless in the face of the relentless Kaiju. On the verge of defeat,
								the forces defending mankind have no choice but to turn to two unlikely heroes a washed
								up former pilot (Charlie Hunnam) and an untested trainee (Rinko Kikuchi) who are teamed to
								drive a legendary but seemingly obsolete Jaeger from the past. Together,
								they stand as mankind's last hope against the mounting apocalypse.</p> 
</article>


<div>
<img/>
<img/>
<img/>
</div>
								
				</div>
		</section>
</div>
</body>
</html>
10

Hi,

This is probably no help but I would do it roughly like this:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blushop</title>
<style type="text/css">
html, body {
	margin: 0;
	padding: 0;
}
h1{color:#fff;text-align:center}
#container {
	max-width: 960px;
	background-color: rgb(66, 69, 74);
	margin:auto;
	text-align:left;
}
.subheader {
	font-size:30px;
	font-family:"Times New Roman", Times, serif;
	text-align:left;
	color: #00FFFF;
	margin:0 0 10px 10px;
}
.content {
	color: #000000;
	width:100%;
	background-color: rgb(66, 69, 74);
	margin:auto;
	display:table;
	border-spacing:10px;
	text-align:left;
}
.main {
	background-color: rgb(230, 231, 232);
	display:table-cell;
	vertical-align:top;
	padding: 50px 10px 15px 10px;
	text-align:left;
}
ul.thumbnails{
	margin:0;
	padding: 50px 10px 15px 10px;
	background-color: rgb(230, 231, 232);
	list-style:none;
	display:table-cell;
	vertical-align:top;
}
.side-img{
	float:left;
	margin: 0 20px 0 10px;
}
.side-img img{display:block}
.middle{overflow:hidden}

@media screen and (max-width:799px){
	.main,ul.thumbnails{display:block;width:auto;clear:both}
	.main{display:inline-block;margin:0 0 10px;}
	.content{border-spacing:0;margin:10px;width:auto;}
	ul.thumbnails {text-align:center;}
	ul.thumbnails li{display:inline-block;vertical-align:top;width:32%}
	ul.thumbnails img{width:100%;height:auto;}	
}
@media screen and (max-width:560px){
	.side-img{float:none;}
	.side-img img{
		max-width:380px;
		width:100%;
		height:auto;
		margin:10px auto;	
	}
}
</style>
</head>

<body>
<div id="container">
		<header id="mainHeader">
				<h1>Main header</h1>
		</header>
		<section id="mainContent">
				<h2 class="subheader">BluShop</h2>
				<div class="content">
				<article class="main">
						
					<h4 class="side-img">Pacific Rim <img src=" http://placehold.it/250x450" width="250" height="450"   alt="pacificRim" ></h4>
						<div class="middle">
								<p> When legions of monstrous creatures, known as Kaiju,
										started rising from the sea, a war began that would take millions of
										lives and consume humanity's resources for years on end. To combat the giant Kaiju,
										a special type of weapon was devised: massive robots, called Jaegers, which are controlled
										simultaneously by two pilots whose minds are locked in a neural bridge. But even the Jaegers
										are proving nearly defenseless in the face of the relentless Kaiju. On the verge of defeat,
										the forces defending mankind have no choice but to turn to two unlikely heroes a washed
										up former pilot (Charlie Hunnam) and an untested trainee (Rinko Kikuchi) who are teamed to
										drive a legendary but seemingly obsolete Jaeger from the past. Together,
										they stand as mankind's last hope against the mounting apocalypse.</p>
						</div>
				</article>
				<ul class="thumbnails">
						<li><img src=" http://placehold.it/211x200" width="211" height="200"   alt="img1" > </li>
						<li><img src=" http://placehold.it/211x200" width="211" height="200"   alt="img2" > </li>
						<li><img src=" http://placehold.it/211x200" width="211" height="200"   alt="img3" > </li>
				</ul></div>
		</section>
</div>
</body>
</html>

However, as this seems to be a course you are taking I will not explain it in detail but leave it as something for you to dissect.

11

Thank you! :smiley:

12 
This is my code now. 
But how can I get the blue line on the bottom? And some space between the small pictures.

And in the assignment it says: When you click on one of the pictures link on the right side shall info about selected films emerge in the middle. The property position is possibly. Only allowed in movie information site. Use transition to create fade effect between the films. How can I get this “fade” effect?

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blushop</title>
<style type="text/css">
html, body {
	margin: 0;
	padding: 0;
}
h1{color:#fff;text-align:center}
#container {
	max-width: 960px;
	background-color: rgb(66, 69, 74);
	margin:auto;
	text-align:left;
}
.subheader {
	font-size:30px;
	font-family:"Times New Roman", Times, serif;
	text-align:left;
	color: #00FFFF;
	margin:0 0 10px 10px;
}
.content {
	color: #000000;
	width:100%;
	background-color: rgb(66, 69, 74);
	margin:auto;
	display:table;
	border-spacing:10px;
	text-align:left;
}
.main {
	background-color: rgb(230, 231, 232);
	display:table-cell;
	vertical-align:top;
	padding: 50px 10px 15px 10px;
	text-align:left;
}
ul.thumbnails{
	margin:0;
	padding: 50px 10px 15px 10px;
	background-color: rgb(230, 231, 232);
	list-style:none;
	display:table-cell;
	vertical-align:top;
}
.side-img{
	float:left;
	margin: 0 25px 0 10px;
}
.side-img img{display:block}
.middle{overflow:hidden}

@media screen and (max-width:799px){
	.main,ul.thumbnails{display:block;width:auto;clear:both}
	.main{display:inline-block;margin:0 0 10px;}
	.content{border-spacing:0;margin:10px;width:auto;}
	ul.thumbnails {text-align:center;}
	ul.thumbnails li{display:inline-block;vertical-align:top;width:32%}
	ul.thumbnails img{width:100%;height:auto;}	
}
@media screen and (max-width:560px){
	.side-img{float:none;}
	.side-img img{
		max-width:380px;
		width:100%;
		height:auto;
		margin:10px auto;	
	}
}
</style>
</head>

<body>
<div id="container">
		<header id="mainHeader">
		</header>
		<section id="mainContent">
				<h2 class="subheader">BluShop</h2>
				<div class="content">
				<article class="main">

					<h4 class="side-img">Pacific Rim <img src="pacificrim.jpg" width="350" height="450"   alt="pacificRim" ></h4>
						<div class="middle">
						
								<p> When legions of monstrous creatures, known as Kaiju,
										started rising from the sea, a war began that would take millions of
										lives and consume humanity's resources for years on end. To combat the giant Kaiju,
										a special type of weapon was devised: massive robots, called Jaegers, which are controlled
										simultaneously by two pilots whose minds are locked in a neural bridge. But even the Jaegers
										are proving nearly defenseless in the face of the relentless Kaiju. On the verge of defeat,
										the forces defending mankind have no choice but to turn to two unlikely heroes a washed
										up former pilot (Charlie Hunnam) and an untested trainee (Rinko Kikuchi) who are teamed to
										drive a legendary but seemingly obsolete Jaeger from the past. Together,
										they stand as mankind's last hope against the mounting apocalypse.</p>
						</div>
				</article>
				<ul class="thumbnails">
						<li><img src="pacificrim.jpg" width="111" height="150"   alt="img1" > </li>
						<li><img src="startrek.jpg" width="111" height="150"   alt="img2" > </li>
						<li><img src=" worldwarz.jpg" width="111" height="150"   alt="img3" > </li>
				</ul></div>
		</section>
</div>
</body>
</html>
13

You could just add a border bottom to .content if all you want is some colour.

You would need js for that and would be a question for the JS forum.

I have to go out now so perhaps Ryan can help with other questions.

14

Use the margin property

Paul answered.

Are you only allowed HTML/CSS? What about Javascript?

I just need to know what technologies I should be using when I give my answers.

The fade effect can probably just be done via opacity and then using transition to bring the opacity to a more full color. We will hold off on that for now.

15

Thank you both for all the help! :slight_smile:

17

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.