Forum d'entraide PHPFrance

salut a tous,
je propose a ceux qui ont des soucis de colonnes pour construire leur site un petit système css qui fonctionne sur le principe des grilles...
je vous laisse jeter un coup d'oeil...
le html

<!DOCTYPE html>
<html lang="fr">
<head>
<link href="styles.css" rel="stylesheet">
</head>

<body>
<div class="contenu">
	<div>
        <h1>3 colonnes 4 / 6 / 6</h1>
    </div>
    <div class="bloc">
        <div class="span4">
            <p>
                Span 4
            </p>
		</div>
        <div class="span6">
            <p>Span 6</p>
			<p>Et prima post Osdroenam quam, ut dictum est, ab hac descriptione discrevimus, Commagena, nunc Euphratensis, clementer adsurgit, Hierapoli, vetere Nino et Samosata civitatibus amplis inlustris.</p>
        </div>
        <div class="span6">
            <p>Span 6</p>
			<p>Et prima post Osdroenam quam, ut dictum est, ab hac descriptione discrevimus, Commagena, nunc Euphratensis, clementer adsurgit, Hierapoli, vetere Nino et Samosata civitatibus amplis inlustris.</p>
        </div>			
	</div>
	<hr />
</div>


<div class="contenu">
	<div>
        <h1>2 colonnes 4 / 12</h1>
    </div>
    <div class="bloc">
        <div class="span4">
            <p>
                Span 4
            </p>
        </div>
        <div class="span12">
            <p>Span 12</p>
		    <p>Et prima post Osdroenam quam, ut dictum est, ab hac descriptione discrevimus, Commagena, nunc Euphratensis, clementer adsurgit, Hierapoli, vetere Nino et Samosata civitatibus amplis inlustris.</p>
        </div>
    </div>
	<hr />
</div>


<div class="contenu">
	<div>
        <h1>2 colonnes 8 / 8</h1>
    </div>
    <div class="bloc">
        <div class="span8">
            <p>Span 8</p>
		    <p>Et prima post Osdroenam quam, ut dictum est, ab hac descriptione discrevimus, Commagena, nunc Euphratensis, clementer adsurgit, Hierapoli, vetere Nino et Samosata civitatibus amplis inlustris.</p>
        </div>
        <div class="span8">
            <p>Span 8</p>
		    <p>Et prima post Osdroenam quam, ut dictum est, ab hac descriptione discrevimus, Commagena, nunc Euphratensis, clementer adsurgit, Hierapoli, vetere Nino et Samosata civitatibus amplis inlustris.</p>
        </div>		
    </div>
	<hr />
</div>

</body>
</html>

et le css:

body {
  background-color: #ffffff;
  margin: 0;
  font-size: 13px;
  font-weight: normal;
  line-height: 18px;
}
.contenu{
  width: 940px;
  margin-left: auto;
  margin-right: auto;
}
.bloc {
  margin-left: -20px;
}
.bloc > [class*="span"] {
  display: inline;
  float: left;
  margin-left: 20px;
}
.span1 {
  width: 40px;
}
.span2 {
  width: 100px;
}
.span3 {
  width: 160px;
}
.span4 {
  width: 220px;
}
.span5 {
  width: 280px;
}
.span6 {
  width: 340px;
}
.span7 {
  width: 400px;
}
.span8 {
  width: 460px;
}
.span9 {
  width: 520px;
}
.span10 {
  width: 580px;
}
.span11 {
  width: 640px;
}
.span12 {
  width: 700px;
}
.span13 {
  width: 760px;
}
.span14 {
  width: 820px;
}
.span15 {
  width: 880px;
}
.span16 {
  width: 940px;
}

/* ATTENTION, pour utiliser les colonnes qui suivent, vous 
devrez adapter la taille de votre div contenu en consequence...*/

.span17 {
  width: 1000px;
}
.span18 {
  width: 1060px;
}
.span19 {
  width: 1120px;
}
.span20 {
  width: 1180px;
}
.span21 {
  width: 1240px;
}
.span22 {
  width: 1300px;
}
.span23 {
  width: 1360px;
}
.span24 {
  width: 1420px;
}

normalement, avec ça plus personne n'auras de soucis de colonnes en html / css...

Il existe aussi Twitter Bootstrap pour démarrer rapidement des applications avec ce genre de positionnement.

oui Zeus, c'est de la que j'ai tiré le code, j'ai fait ce pour les débutants pour qui Twitter Bootstrap pourrait être trop compliqué...
la ils partent de rien, et je pense que pour un débutant ça peut être intéressant, non ?

Bonjour.

C'est astucieux comme technique, merci beaucoup juliette!

Forum d'entraide PHPFrance

plusieurs colonnes css

plusieurs colonnes css

Re: plusieurs colonnes css

Re: plusieurs colonnes css

Re: plusieurs colonnes css