Probleem: 978 grid system

gast0187 · 19 nov 2012

Hallo, ik zit met een probleem ik kan de verschillende delen niet op zijn plaats krijgen.(op basis van het 978 grid systeem)

Ik wil alleen de dingen op zijn plaats krijgen de afwerking(kleurtjes, enzo, overige css niet nodig)

HTML:

<!DOCTYPE html>
<html>
<head>
   <title>My Magazine</title>
   <meta name="author" content="">
   <link rel="stylesheet" href="css/reset.css" />
   <link rel="stylesheet" href="css/978.css" />
</head>
<body>
   <div class="layout-978">
    <div class="row">
        <div class="col12"><img src="images/header.png" alt=""/></div> 
        <div class="row-end">&nbsp;</div>
    </div>      
    <div class="row">
        <div class="col12">
        <ul>
            <li>Articles</li>
            <li>Topics</li>
            <li>About</li>
            <li>Editors</li>
            <li>Contact</li>
        </ul>  
            <div class="row-end">&nbsp;</div>
        </div>
    </div>
       <div class="row">
       <div class="col7"><h1>Sample Article Title</h1></div>
           <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. </p><p><a href="#"><strong>Finish Reading...</strong></a></p>
       <div class="col4">
           <img src="images/poster.jpg" />
       </div>
       <div class="row-end">&nbsp;</div>
       </div>       
           <h2>Sample Article Title</h2>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.</p>
                <h2>Sample Article Title</h2>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.</p>
    <h2>Sample Article Title</h2>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.</p>
    <h2>Sample Article Title</h2>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus</p>
    <p>&copy; My Magazine</p>
       </div>
</body>
</html>

Zo zouden de delen moeten staan --> Bekijk bijlage 169235

Demo van 978 grid systeem:

HTML:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>978 Grid System - CSS Framework</title>
<meta name="viewport" content="width=1024" />
<link rel="stylesheet" href="978.css" />
<link rel="stylesheet" href="demo-files/styles.css" />
</head>
<body>

<div class="layout-978">
	<div class="row">
		<div class="col1">54px</div>
		<div class="col1">54px</div>
		<div class="col1">54px</div>
		<div class="col1">54px</div>
		<div class="col1">54px</div>
		<div class="col1">54px</div>
		<div class="col1">54px</div>
		<div class="col1">54px</div>
		<div class="col1">54px</div>
		<div class="col1">54px</div>
		<div class="col1">54px</div>
		<div class="col1">54px</div>
		<div class="row-end">&nbsp;</div>
	</div>
	<div class="row">
		<div class="col3">222px</div>
		<div class="col3">222px</div>
		<div class="col3">222px</div>
		<div class="col3">222px</div>
		<div class="row-end">&nbsp;</div>
	</div>
	<div class="row">
		<div class="col4">306px</div>
		<div class="col4">306px</div>
		<div class="col4">306px</div>
		<div class="row-end">&nbsp;</div>
	</div>
	<div class="row">
		<div class="col6">474px</div>
		<div class="col6">474px</div>
		<div class="row-end">&nbsp;</div>
	</div>
	<div class="row">
		<div class="col1">54px</div>
		<div class="col11">894px</div>
		<div class="row-end">&nbsp;</div>
	</div>
	<div class="row">
		<div class="col2">138px</div>
		<div class="col10">810px</div>
		<div class="row-end">&nbsp;</div>
	</div>
	<div class="row">
		<div class="col3">222px</div>
		<div class="col9">726px</div>
		<div class="row-end">&nbsp;</div>
	</div>
	<div class="row">
		<div class="col4">306px</div>
		<div class="col8">642px</div>
		<div class="row-end">&nbsp;</div>
	</div>
	<div class="row">
		<div class="col5">390px</div>
		<div class="col7">558px</div>
		<div class="row-end">&nbsp;</div>
	</div>
	<div class="row">
		<div class="col6">474px</div>
		<div class="col6">474px</div>
		<div class="row-end">&nbsp;</div>
	</div>
	<div class="row">
		<div class="col7">558px</div>
		<div class="col5">390px</div>
		<div class="row-end">&nbsp;</div>
	</div>
	<div class="row">
		<div class="col8">642px</div>
		<div class="col4">306px</div>
		<div class="row-end">&nbsp;</div>
	</div>
	<div class="row">
		<div class="col9">726px</div>
		<div class="col3">222px</div>
		<div class="row-end">&nbsp;</div>
	</div>
	<div class="row">
		<div class="col10">810px</div>
		<div class="col2">138px</div>
		<div class="row-end">&nbsp;</div>
	</div>
	<div class="row">
		<div class="col11">894px</div>
		<div class="col1">54px</div>
		<div class="row-end">&nbsp;</div>
	</div>
	<div class="row">
		978px
	</div>
</div>

</body>
</html>

printscreen demo: Bekijk bijlage 169237
Ik heb geprobeerd met behulp van deze demo maar lukt me nog steeds niet.

Alvast op voorhand bedankt

Mvg gast0187

csshunter · 19 nov 2012

Hoi gast0187,
Een grid is een systeem met rijen en kolommen, een soort tabel dus. Dat betekent dat per rij (rijen onder elkaar) alles in een bepaalde kolom (kolommen naast elkaar) moet zitten:

HTML:

<div class="row">
    <div class="col-typenr">
        (inhoud van de eerste kolom)
    </div>
    <div class="col-typenr">
        (inhoud van de tweede kolom)
    </div>
</div>

In je code zie ik staan:

HTML:

<div class="row">
    <div class="col7"><h1>Sample Article Title</h1></div>
        <p>Lorem ipsum (...) Aenean imperdiet. </p><p><a href="#"><strong>Finish Reading...</strong></a></p>
    <div class="col4">
        <img src="images/poster.jpg" />
    </div>
    <div class="row-end">&nbsp;</div>
</div>

Als je mooi inspringt in de code, zie je meteen wat er gebeurt:

HTML:

<div class="row">
    <div class="col7">
        <h1>Sample Article Title</h1>
    </div>

    <p>Lorem ipsum (...) Aenean imperdiet. </p>
    <p><a href="#"><strong>Finish Reading...</strong></a></p>

    <div class="col4">
        <img src="images/poster.jpg" />
    </div>

    <div class="row-end">&nbsp;</div>
</div>

Er zijn hier twee <p> elementen, die niet in een kolom zitten!

En omdat <p>-elementen een block-karakter hebben, gaan die <p>'s binnen hun rij de volle breedte innemen: ze trekken zich dan niets van de kolommen aan die er boven of onder zitten.

Maar maak je er dit van:

HTML:

<div class="row">
    <div class="col7">
        <h1>Sample Article Title</h1>
        <p>Lorem ipsum (...) Aenean imperdiet. </p>
        <p><a href="#"><strong>Finish Reading...</strong></a></p>
    </div>

    <div class="col4">
        <img src="images/poster.jpg" />
    </div>

    <div class="row-end">&nbsp;</div>
</div>

... dan zitten ze samen met de <h1> artikel-titel in de kolom met class="col7" die een bepaalde breedte heeft. > Dan moeten de <p>'s binnen die kolom zich aan die breedte houden, en blijven ze binnen de kolom.
Vervolgens kan de <div class="col4"> er dan naast komen te staan.

Met vriendelijke groet,
CSShunter

gast0187 · 19 nov 2012

Dankjewel

Alleen dit stukje wil nog steeds niet werken.

HTML:

<div class="row">
        <div class="col12">
        <ul>
            <li>Articles</li>
            <li>Topics</li>
            <li>About</li>
            <li>Editors</li>
            <li>Contact</li>
        </ul>              
        </div>
        <div class="row-end">&nbsp;</div>
    </div>

csshunter · 20 nov 2012

Dan moet het standaard verticale lijstje met bullets omgebouwd worden tot een horizontaal knoppen-menu zonder bullets.

Daarvoor kan je hier eens kijken (onder Horizontal lists): css.maxdesign.com.au/listamatic/
Of anders hier: www.accessify.com/tools-and-wizards/developer-tools/list-o-matic

Met vriendelijke groet,
CSShunter

TimVN · 20 nov 2012

Ik heb ooit een tool gemaakt waarin je je website kunt tekenen gebasseerd op 960gs.
Hier is het topic op de NLGMC. Besturing/uitleg etc. staat daar allemaal.

gast0187 · 20 nov 2012

@csshunter, @TimVN
Iedereen bedankt voor de hulp, dat was met css te doen, de menu.

Blijkbaar was bovenstaande code (post nr.3 toch juist, ik was niet zelfzeker

)

@TimVN

Bedankt voor de tool voor het 960 grid systeem, maar voor deze oefening moest ik een 978 grid systeem gebruiken.
Alvast bedankt voor de tool, mischien kan deze mij later nog van pas komen.

Mvg gast0187

Probleem: 978 grid system

gast0187

Gebruiker

csshunter

Meubilair

gast0187

Gebruiker

csshunter

Meubilair

TimVN

Gebruiker

gast0187

Gebruiker

Nieuwste berichten

Wij waarderen jouw privacy