1 reply [Last post]
Sybe
Sybe's picture
Offline
newbie
Last seen: 1 week 2 days ago
Timezone: GMT+2
Joined: 2020-10-11
Posts: 1
Points: 2

Hi all,

I started practicing CSS from the book of Jon Ducket, and wrote some code and was trying to use the raster lay out of 960-12 css.
But it doesnt work.

Below is the code I wrote, but the grid_4 colomns dont appear next to eachother. They appear beneath eachother. What did I do wrong?

<html>
 
<head>
	<title> Rasterlay-out</title>
	<link rel="stylesheet" type="text/css" href="css/960_12_col.css"/>
 
<style> See page </style>
</head>
 
<body>
	<div class="container_12 clearfix">
		<div id="header" class="grid_12">
		<h1>logo</h1>
			<div id="nav">
				<ul>
					<li><a href="">Home</a></li>
					<li><a href="">Produkten</a></li>
					<li><a href="">Diensten</a></li>
					<li><a href="">Over ons</a></li>
					<li><a href="">COntact</a></li>
				</ul>
			</div>
		</div>
	</div>
	<div id="feature" class="gried_12">
		<p>Etalage</p>
	</div>
	<div class="article grid_4">
		<p>Kolom een</p>
	</div>
	<div class="article grid_4">
		<p>Kolom twee</p>
	</div>
	<div class="article grid_4">
		<p>Kolom drie</p>
	</div>
	<div id="footer" class="grid_12">
	<p>&copy; Copyright 2013</p>
	</div>
	</div>
</body>
 
</html>

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 9 hours 46 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9772
Points: 3854

Oops!

You forgot to post the CSS.

If your content is aligned vertically, you probably have not correctly linked to your CSS file. The vertical arrangement is the default HTML presentation. Test by changing the color of something in the CSS file. If the change works, linking is not the issue.

g

N.B. The grid system was silly when it was first introduced, and is even sillier today when all modern browsers support CSS3. Even CSS2.1 makes grids a really PoS system. Invest your time in learning straight up HTML + CSS.

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.