diviser page en 3 zones

Sujet résolu

26 mars 2006 à 0:57:38

Bonjour,

Je voudrais diviser ma page en 3 zones grâce à du css.

Est-ce que ceci est correct:

.zone1
{
width: 33%
}

.zone2
{
width: 33%
}

.zone3
{
width: 33%
}

en tout cas cela ne marche pas

Merci

gcyrillus

26 mars 2006 à 1:55:19

bonjour
si tu veut qu'il se trouve cote a cote, il faut appliquer un "float" au moins a 2 d'entre eux
++

fan de pluxml je suis cuisinier et codeur amateur. Des thèmes pour pluxml ? Oui

yogui41

26 mars 2006 à 13:33:52

J'ai mis ça et ça ne marche toujours pas:

.zone1
{
float: left;
width: 33%
}

.zone2
{
width: 33%
}

.zone3
{
float: right;
width: 33%
}

Sannazzarotiti

26 mars 2006 à 14:00:27

Montre le code (x)html

yogui41

26 mars 2006 à 14:12:04

Voici le lien de mon site web:
Je voudrais que le mot "regles", la photo et le mot "entrainements" soient alignés.
Le mot "regles" prend 20% de la page, le mot "entrainements" aussi et la photo 60% de la page.

Mon code css:

.regles
{
float: left;
width: 20%;
color: rgb(221,12,12);
text-align: center;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
font-size:1.5em;
margin-bottom: 20px;
}

.photo
{
width: 60%;
color: rgb(221,12,12);
text-align: center;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
font-size:1.5em;
margin-bottom: 20px;
}

.equipe
{
float: right;
width: 20%;
color: rgb(221,12,12);
text-align: center;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
font-size:1.5em;
margin-bottom: 20px;
}

.regles, .photo, .equipe
{
display: inline;
}

Mon code xhtml:

<div class="regles">
<a href="/jorkyball/regles.php">Règles du jeu</a>
</div>

<div class="photo">
<img src="/jorkyball/images/index/terrain_jorkyball.jpg" alt="terrain de jorkyball" width="10%" height="10%"/>
</div>

<div class="equipe">
<a href="/jorkyball/equipe.php">Notre équipe</a>
</div>

TheL0wBob

26 mars 2006 à 14:31:12

Ben tout ça me paraît juste.
Mais pourquoi tu ne le teste pas toi-même???

yogui41

26 mars 2006 à 14:33:36

Si je l'ai testé et ça marche pas.

Regarde mon site

yogui41

27 mars 2006 à 10:11:26

C'est bon ça marche mais j'ai encore un problème.

Je voudrais que ma photo prenne toute la partie des 60%.

Je voudrais aussi que le mot "règles d jeu" soit affiché à gauche de l'image (ça c'est ok) mais au milieu (là le mot est situé en haut).

Merci

p2s

27 mars 2006 à 12:05:43

pour l'alignement du mot

vertical-align:middle;

pour la photo

.affiche_photo{
width:60%;

ca marche pas ca ?

yogui41

27 mars 2006 à 19:59:03

Pour la photo ça a marché.
Par contre pour l'alignement du mot ça ne marche pas.

p2s

27 mars 2006 à 22:28:11

c'etait peut etre center alors au lieu de middle

yogui41

28 mars 2006 à 1:26:45

Ca ne marche pas non plus

Riko

28 mars 2006 à 1:34:38

Salut Yogui,
Essaies de déplacer

<div class="equipe">
<a href="http://s149866881.onlinehome.fr/jorkyball/equipe.php">notre équipe</a>
</div>

Cette div est en float donc il faut la déclarer avant ta classe photo.

Donc ton nouveau code html sera:

<div class="regles">
<a href="http://s149866881.onlinehome.fr/jorkyball/regles.php">règles du jeu</a>
</div>

<div class="equipe">
<a href="http://s149866881.onlinehome.fr/jorkyball/equipe.php">notre équipe</a>
</div>

<div class="photo">
<img src="accueil.php_fichiers/terrain_jorkyball.jpg" alt="terrain de jorkyball" class="affiche_photo">
</div>

Puis dans ton css du mets un padding-top de 20% à .equipe et .règles.

cela ne va pas sous IE

yogui41

28 mars 2006 à 1:50:22

Merci.

Ca a marché mais seulement sous mozilla, ça ne marche pas sous ie.

Je comprends pas pourquoi tu mets padding-top à 20% ?

Riko

28 mars 2006 à 1:54:52

Car j'ai trouvé cette valeur qui centre ton texte mais je n'ai pas encore compris pourquoi. (peut être que lorsque l'on trouvera cela ira sous IE)

yogui41

28 mars 2006 à 1:57:04

ah oki je vais chercher aussi.
Je te remercie en tout cas

Riko

28 mars 2006 à 23:46:56

Voici un code qui devrait fonctionner:

Ton fichier accueil.css

.presentation2
{
font-variant: small-caps;
color: rgb(221,12,12);
text-align: center;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
font-size:1.5em;
margin-bottom: 20px;
}

.regles
{
/*padding-top: 20%;*/
font-variant: small-caps;
float: left;
width: 18%;
color: rgb(221,12,12);
text-align: center;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
font-size:1.5em;
padding-top: 20%;
/*vertical-align: center;*/
}

.photo
{
margin: auto;
width: 60%;
margin-bottom: 20px;

}

.equipe
{
/*padding-top: 20%;*/
font-variant: small-caps;
float: right;
width: 18%;
color: rgb(221,12,12);
text-align: center;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
font-size:1.5em;
padding-top: 20%;
/*vertical-align: center;*/
}

.entrainements
{
font-variant: small-caps;
color: rgb(221,12,12);
text-align: center;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
font-size:1.5em;
margin-bottom: 20px;
}

.affiche_photo
{
width:100%;/*100% de la div c'est à dire 60% du corps*/
margin: auto;
}

/*.regles, .photo, .equipe
{
display: inline;
}*/

Ton code html est le même que sur ton site.

Qu'en penses tu?

yogui41

28 mars 2006 à 23:59:43

impec.

Merci beaucoup pour ton aide