Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

CSS Problems with 960 grid system

Sybe

New Coder
Hi all,

I just started with CSS with help from the book of Jon Duckett. I try to work with the raster layout from 960.gs
I wrote the code from the book but the problem is the grid_4 are not appearing next to each other, but below each other.
Below here is the code I wrote. I cant find what I am doing wrong. I am just a starter.



Thx!

HTML:
<html>

<head>
    <title> Rasterlay-out</title>
    <link rel="stylesheet" type="text/css" href="css/960_12_col.css"/>
   
<style> Zie rechter pagina </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>
 
Last edited by a moderator:
Hi there!

Welcome to Code Forum!

I have the same book too! Would you be able to provide the .css code from css/960_12_col.css?
 
without sharing the content of css/960_12_col.css with us, we have no chance to help you.

What is actually not possible?
The best way is to explain what you expect, what happens and what you have done yourself and what is out of the tutorial.
 
It’s important that you try to always follow through with your issues. It’s how you learn, if you just give up you’re not really learning. Let us continue to help you with this issue, because if we don’t find a solution to this it will just become another unanswered thread.

If we can, let’s back track and see if we can find a solution to this.
 
It’s important that you try to always follow through with your issues. It’s how you learn, if you just give up you’re not really learning. Let us continue to help you with this issue, because if we don’t find a solution to this it will just become another unanswered thread.

If we can, let’s back track and see if we can find a solution to this.
You're more then right.

Ok the problem is:

I wrote this HTML-code for the 960 12 colomns from the book I bought.
But when I check it in the browser it isnt correct. The blocks arent in the place were they need to be.

I tried everything to correct it in the code. But it isnt working.

So I stumbled on Flexbox. And it seems you have more freedom with this kind of code instead of using the 960 12 colomns sjabloon.
 
I wrote this HTML-code for the 960 12 colomns from the book I bought.
But when I check it in the browser it isnt correct. The blocks arent in the place were they need to be.
Just remember that HTML creates the structure of the page. While CSS creates the styles of the page. In your code, you are saying that the css can be found externally at css/css/960_12_col.css. If you don’t have anything at that location then the style won’t work. I have the same book. Could you tell me page number?
 
Hi @Sybe,

I believe I have found the solution to this question.

From the book HTML&CSS design and build websites by Jon Duckett. - pages 391 - 394


Issue #1​

First, let's start with the styling. Under your <style> tags you have
HTML:
<style>
    Zie rechter pagina
</style>
You should have the CSS code from page 394 within the style tags.
CSS:
* {
    font-family: Arial, Verdana, sans-serif;
    color: #665544;
    text-align: center;
}
#nav, #feature,.article,#footer {
    background-color: #efefef;
    margin-top: 20px;
    padding: 10px 0px 5px 0px;
}
#feature,.article {
    height: 100px;
}
li {
    display: inline;
    padding: 5px;
}
You can review more about external css linking here.


Issue #2​

Now, lets go back to the <head> tags, the <link> in particular <link rel="stylesheet" type="text/css" href="css/960_12_col.css"/>. This is specifying that you are linking to an external .CSS document. With the attribute "href" you are providing the path to that .css document. However, that file doesn't exist, there was some instructions that pointed you to download from 960.gs, which included the 960_12_col.css file (can be found at 960-gridmaster > code > css > 960_12_col.css). Create a folder within the same directory as your HTML document, label as css and place the file within css directory you just created.

At this point you should have something looking similar to this:
1602788309721.png


Issue #3​

Now what I want you to do is take a look at the code below, at the very top you have three <div> opening tags and shortly after the <ul> you have three closing tags. Which isn't a problem, right? Well, now take a look at line 30.. notice how many closing </div> tags there are? Let's take a look at this, one of the closing </div> appear to belong to the footer. So we know that belongs there, however what about the second one? It's right below the one we just ruled out, but which <div> is it closing? If you go all the way back up to the three opening <div> tags, if you look closely you can see that all the other <div> tags are nested within <div class="container_12 clearfix"> however just after the </ul> tag we have three closing <div> tags. Therefore we are closing the main container <div> which is throwing everything in a limbo. Let's remove the last <div> just below the <ul>.
[CODE lang="html" highlight="1,12,13,14,30"]<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>[/CODE]


Issue #4​

Now, it's starting to come together. However the "Etalage" looks out of place, what seems to be the issue? Now, I'm going to leave this one up to you. I will only tell you that it is a spelling error.

The end result should look like this: 1602789717864.png
 

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom