<-- Terug naar Snippets

Faux Columns - CSS oplossing voor meerekkende kolommen

PHP versie: n.v.t

Javascript: n.v.t

De oplossing van het probleem van niet meerekkende kolommen: faux columns. De kolommen komen in een container te staan waarin de achtergrondafbeelding de achtergrond van de verschillende kolommen voorstelt.

Content

Nunc dui leo, feugiat et, consectetuer et, nonummy sit amet, nunc. Sed ante sapien, feugiat at, semper a, rutrum egestas, diam. Nullam lacinia nibh eu magna. Sed nunc quam, tincidunt in, vestibulum ut, pulvinar ut, nulla. Donec pellentesque elit sit amet lectus. Nam lacinia. In ut nunc a arcu luctus eleifend. Nulla facilisi. Nunc eget ligula ut risus tempus facilisis. Vestibulum ut dolor eget nibh malesuada scelerisque. Aenean erat dui, malesuada ut, accumsan ac, interdum in, sapien. Nam risus urna, convallis at, tincidunt in, ullamcorper sit amet, metus. Etiam non nisl at massa hendrerit porttitor. Phasellus scelerisque elit at enim. Suspendisse in est.

Curabitur et mauris. Duis auctor odio ac mi. Nam vulputate. Nulla facilisi. Cras turpis risus, posuere ac, aliquet sed, fermentum sed, purus. Nulla facilisi. Sed tincidunt. Suspendisse at metus. Morbi posuere est eget velit. Mauris varius. Proin et libero. Curabitur volutpat, erat vel laoreet laoreet, leo nisi varius ligula, a dictum mi justo eget nunc. Vestibulum dapibus, dolor eget blandit imperdiet, elit quam congue tortor, et faucibus tellus est ut metus. Integer aliquet risus faucibus tortor. Suspendisse auctor, purus in congue euismod, est quam gravida turpis, ut ultricies leo sem hendrerit velit. Sed tortor sapien, fermentum a, tempor vel, ultricies ut, tortor.

Broncode


Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/jorendew/phphulp/inc/class.ubb.php on line 100

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/jorendew/phphulp/inc/class.ubb.php on line 106

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/jorendew/phphulp/inc/class.ubb.php on line 112

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/jorendew/phphulp/inc/class.ubb.php on line 119

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/jorendew/phphulp/inc/class.ubb.php on line 120

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/jorendew/phphulp/inc/class.ubb.php on line 121

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/jorendew/phphulp/inc/class.ubb.php on line 199

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/jorendew/phphulp/inc/class.ubb.php on line 287

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/jorendew/phphulp/inc/class.ubb.php on line 288

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/jorendew/phphulp/inc/class.ubb.php on line 289

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/jorendew/phphulp/inc/class.ubb.php on line 290

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/jorendew/phphulp/inc/class.ubb.php on line 291
Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<?php
ini_set('display_errors', 'On');
error_reporting(E_ALL);

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>PHPtuts.nl - PHP Snippets - Faux Columns</title>
    
    <link rel="stylesheet" href="../../styles/default.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="../../styles/ubb.css" type="text/css" media="screen" />
    
    <style type="text/css">
    #container {
        background: url(faux_columns/background.jpg) top left repeat-y;
        width: 800px;
        margin: 10px;
        overflow: hidden;
    }
    #links {
        float: left;
        width: 180px;
        padding: 10px;
    }
    #rechts {
        float: right;
        width: 580px;
        padding: 10px;
    }
    </style>
</head>
<body>
    <div id="wrap">
        <p class="none small align-right"><a href="/codeSnippets/">&lt;-- Terug naar Snippets</a></p>
        <h1>Faux Columns - CSS oplossing voor meerekkende kolommen</h1>
        <div id="info">
            <p>PHP versie: n.v.t</p>
            <p>Javascript: n.v.t</p>
        </div>
        
        <p>De oplossing van het probleem van niet meerekkende kolommen: faux columns. De kolommen komen in een container te staan waarin de achtergrondafbeelding de achtergrond van de verschillende kolommen voorstelt.</p>
        
        <div id="container">
            <div id="links">
                <h3>Sidebar</h3>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer sapien dolor, vestibulum laoreet, mollis ac, malesuada in, purus. Ut eros arcu, iaculis in, scelerisque ut, consequat nec, ante. Nam blandit. Suspendisse potenti. Curabitur non risus at nunc pellentesque interdum.</p>
            </div>
            <div id="rechts">
                <h3>Content</h3>
                <p>Nunc dui leo, feugiat et, consectetuer et, nonummy sit amet, nunc. Sed ante sapien, feugiat at, semper a, rutrum egestas, diam. Nullam lacinia nibh eu magna. Sed nunc quam, tincidunt in, vestibulum ut, pulvinar ut, nulla. Donec pellentesque elit sit amet lectus. Nam lacinia. In ut nunc a arcu luctus eleifend. Nulla facilisi. Nunc eget ligula ut risus tempus facilisis. Vestibulum ut dolor eget nibh malesuada scelerisque. Aenean erat dui, malesuada ut, accumsan ac, interdum in, sapien. Nam risus urna, convallis at, tincidunt in, ullamcorper sit amet, metus. Etiam non nisl at massa hendrerit porttitor. Phasellus scelerisque elit at enim. Suspendisse in est.</p>

<p>Curabitur et mauris. Duis auctor odio ac mi. Nam vulputate. Nulla facilisi. Cras turpis risus, posuere ac, aliquet sed, fermentum sed, purus. Nulla facilisi. Sed tincidunt. Suspendisse at metus. Morbi posuere est eget velit. Mauris varius. Proin et libero. Curabitur volutpat, erat vel laoreet laoreet, leo nisi varius ligula, a dictum mi justo eget nunc. Vestibulum dapibus, dolor eget blandit imperdiet, elit quam congue tortor, et faucibus tellus est ut metus. Integer aliquet risus faucibus tortor. Suspendisse auctor, purus in congue euismod, est quam gravida turpis, ut ultricies leo sem hendrerit velit. Sed tortor sapien, fermentum a, tempor vel, ultricies ut, tortor.</p>


            </div>
        </div>
                
        <?php        
        // Weergeven broncode
        define('FILE', __FILE__);
        require_once('../broncode.php');
        ?>
    </div>    

<!-- Google analytics (geen onderdeel van script) -->
<script type="text/javascript" src="/inc/ga1.js"></script>
<script type="text/javascript" src="/inc/ga2.js"></script>

</body>
</html>