[Résolu] JavaScript PHP CSS XHTML - lesquels utiliser ?

Raphdu01 · le 6 juin 2008

Re

Bon je suis revenu en gros à mon problème de départ : le seul moyen que j'ai pu trouvé pour mettre mes blocs cote à cote est de mettre un attribut float:left dans le bloc de gauche. Donc forcément si le bloc de droite contient moins de ligne que le bloc de gauche, le conteneur ne sera pas adapté.

Mais je doute que mon bloc de gauche contienne plus de chose que celui de droite (dans mon idée ce sera plutôt un menu) donc est-ce que ça ferai sérieux de tricher de cette manière ou il existe un autre moyen (que vous m'avez peut être expliqué mais que je n'aurai pas compris ) ?

EDIT : autre petite question : mon image/lien n'est plus centrée dans le bloc droite comment ça se fait ?

Modifié le 7 juin 2008 par Raphdu01

Dylav · le 7 juin 2008

Bonjour Raphdu01,

<html><head>
<style type="text/css">
body {
 font-family:Times New Roman;
}
.conteneur {
 position:absolute;
 left:50%;
 width:760px;
 margin-left:-380px;
 background-color:yellow;
 padding-bottom:10px;
}
.haut {
 margin:10px;
 width:100%-20px;
 background-color:green;
 color:yellow;
 text-align:center;
 font-size:50px;
 padding:25px 0;
}
.gauche {
 float:left;
 width:180px;
 margin:0 10px;
 background-color:red;
 color:white;
}
.droite {
 float:left;
 width:550px;
 background-color:navy;
 text-align: center;
 color: white;
 padding:10px 0;
}
</style>
</head><body>
<div class="conteneur">
<div class="haut">Quad-Electro</div>
<div class="gauche">
<ul>
<li>choix 1</li>
<li>choix 2</li>
<li>choix 3</li>
<li>choix 4</li>
<li>choix 5</li>
<li>choix 6</li>
<li>choix 7</li>
<li>choix 8</li>
<li>choix 9</li>
</ul>
</div>
<div class="droite">
Ceci est l'accueil<br />Bienvenue les petits !</div>
</div>
</body></html>

Explications suivent...

Dylav · le 7 juin 2008

Voici les explications qui devraient te permettre de voir les petites astuces que j'ai utilisées pour parvenir à tes fins !

1. Le conteneur

Il est positionné en absolu, centré horizontalement (en fait, débutant horizontalement au milieu de l'écran, mais avec une marge négative de la moitié de sa largeur, ce qui le centre automatiquement. J'emploie cette astuce parce que FireFox semble ne pas appliquer text-align:center aux blocs). Je lui ajoute un padding-bottom qui assure une marge intérieure sous le bloc intérieur qui descendra le plus bas.

2. Le bloc haut

Il est entouré de toute part d'une marge de 10px. Du coup, à cause de FireFox, il faut retrancher 20px à sa largeur 100%. Padding vertical de 25px (ne pas en mettre en horizontal, FireFox augmente alors d'autant la largeur du bloc).

3. Le bloc gauche

Il flotte à gauche, s'adossant au bord gauche du conteneur, mais avec une marge de 10px (nota : pas de marges verticales, le bloc haut a déjà placé les siennes).

4. Le bloc droit

Il flotte à gauche, lui aussi, c'est-à-dire qu'il s'adosse au bloc gauche (à 10 px seulement, grâce à la marge du bloc gauche). Il a un padding vertical (mais pas d'horizontal, même remarque que pour le bloc haut).

Le résultat est impeccable sous FireFox : il semble que le conteneur s'adapte à la hauteur globale de son contenu parce qu'aucun de ses éléments n'a de hauteur imposée (je ne parierais néanmoins rien sur cette explication !).

On a hélas un problème avec Internet Explorer, que je te laisse découvrir et que je ne m'explique pas.

Par ailleurs, je te suggérerais bien d'oublier la couleur du conteneur, et d'étendre cette couleur jaune à l'ensemble de l'écran, avec body{background-color:yellow}. Ta page resterait agencée exactement de la même façon...

Raphdu01 · le 7 juin 2008

Merci Dylav c'est exactement ce que j'essayai de faire !

Et en plus je crois avoir compris ce que tu as fait.

mais bon le problème qui va se poser c'est que le premier site que je suis en train de réaliser sera un site intranet pour l'entreprise où je fait un stage et non pas internet, ça ne change pas grand chose à part que tout le monde utilise internet explorer 6 (et oui même pas le 7 ^^).

Donc en gros je suis dans la m**** ou je fais autrement :s Je pense par exemple à ne pas mettre de bloc à coté et faire un genre de menu au dessus. Sauf sil y a une solution que pour l'instant je ne connais pas (j'en suis qu'à la troisième partie du tuto xhtml/css du SdZ)

Mais bon rien n'est perdu ça pourra bien me resservir parce que je ne compte pas m'arrêter là !

En tout cas merci et a++

EDIT : j'allais oublier le plus important, il y a des trucs quand même que je n'ai as compris complètement :

padding:25px 0; -> que veux dire le 0 à la fin ?

Modifié le 7 juin 2008 par Raphdu01

Dylav · le 7 juin 2008

Re,

Pour l'expression de margin et de padding, tu as 3 écritures possibles,

- l'écriture unitaire, padding-top, padding-right, padding-bottom, padding-left,

- l'écriture groupée détaillée, padding: top right bottom left,

- l'écriture groupée par couple, padding: top/bottom right/left.

L'écriture unitaire est la plus facile à comprendre, rien n'est sous-entendu. C'est aussi la plus futée quand tu n'as qu'un paramètre à donner. Exemple : padding-bottom:20px

L'écriture groupée détaillée se fait dans le sens des aiguilles d'une montre, en commençant en haut. Exemple : padding:5px 10px 15px 20px (5 en haut, 10 à droite, 15 en bas, 20 à gauche).

L'écriture groupée par couple suppose que tu veux donner la même valeur en haut et en bas, et par ailleurs la même valeur à droite et à gauche. Exemple : padding:25px 0 (25 pixels pour le haut et pour le bas, et 0 pour la gauche et pour la droite).

Pour le problème de décalage sous IE, j'ai une idée, mais je ne peux pas la tester tout de suite.

Dylav · le 7 juin 2008

Me revoilà, avec une idée qui a abouti. En fait, j'englobe les deux blocs du bas dans un bloc centre (sans couleur de fond) dont les marges latérales sont définies de la même façon que celles du bloc haut. Ensuite, pas de marges pour le bloc gauche, une marge gauche pour le bloc droite, et le tour est joué.

<html><head>
<style type="text/css">
body {
 font-family:Times New Roman;
}
.conteneur {
 position:absolute;
 left:50%;
 width:760px;
 margin-left:-380px;
 background-color:yellow;
 padding-bottom:10px;
}
.haut {
 margin:10px;
 width:100%-20px;
 background-color:green;
 color:yellow;
 text-align:center;
 font-size:50px;
 padding:25px 0;
}
.centre {
 margin:0 10px;
 width:100%-20px;
}
.gauche {
 float:left;
 width:180px;
 background-color:red;
 color:white;
}
.droite {
 float:left;
 width:550px;
 margin-left:10px;
 background-color:navy;
 text-align: center;
 color: white;
 padding:10px 0;
}
</style>
</head><body>
<div class="conteneur">
 <div class="haut">Quad-Electro</div>
 <div class="centre">
   <div class="gauche">
     <ul>
       <li>choix 1</li>
       <li>choix 2</li>
       <li>choix 3</li>
       <li>choix 4</li>
       <li>choix 5</li>
       <li>choix 6</li>
       <li>choix 7</li>
       <li>choix 8</li>
       <li>choix 9</li>
     </ul>
   </div>
   <div class="droite">Ceci est l'accueil
     <br />Bienvenue les petits !
   </div>
 </div>
</div>
</body></html>

Ainsi, le bloc centre ne sert à rien d'autre qu'à assurer un cadrage correct sous IE !

Raphdu01 · le 8 juin 2008

Salut

Nickel ce coup la tout marche à merveille !

Je pourrais bosser un peu plus efficacement à mon stage maintenant (j'ai passé le moitié de ma journée de vendredi à essayer de faire ça ^^

Merci beaucoup bonne fin de week end

A+++

Dylav · le 8 juin 2008

Le problème semble avoir trouvé sa solution.

Ainsi, afin de signaler clairement à ceux qui ont un problème similaire qu'ils ont peut-être une solution toute trouvée (s'ils pensent à utiliser la fonction Recherche en indiquant le mot-clé "résolu" auparavant), et afin de signaler aux autres contributeurs qu'il est inutile de continuer à se creuser la tête sur le problème (à moins d'avoir des suppléments d'informations à apporter pour mieux comprendre ce qui posait problème), un modérateur a préfixé le titre du topic avec la mention [résolu].

Merci, à l'avenir, de bien vouloir prendre à votre charge cette mise à jour quand vous estimez que votre problème a été résolu de manière satisfaisante (et parallèlement, si le problème a disparu "mystérieusement", inutile d'induire les gens en erreur ) Pour cela, votre premier message

-edit- non non, il y a une suite...

Raphdu01 · le 10 juin 2008

Salut

Désolé ce topic a été verrouillé mais j'ai une dernière question :

En observant beaucoup de sites internet, je me suis rendu compte qu'aucun n'avais une taille fixe donc j'ai simplement remplacé les pixels par des pourcentages qui s'adapteront à toutes les résolutions. Donc ça marche sur IE, seul petit hic c'est que le conteneur s'adapte au texte en longueur ET en largeur :s

Il n'y a pas un truc pour éviter ça ?

body {
font-family:Times New Roman;
}
.conteneur {
position:absolute;
width: 100%;
background-color:LightSkyBlue;
padding-bottom:10px;
}
.haut {
margin:10px;
width:100%-20px;
background-color:silver;
color:yellow;
text-align:center;
font-size:50px;
padding:25px 0;
}
.centre {
margin:0 10px;
width:100%-20px;
}
.gauche {
float:left;
width:20%;
background-color:silver;
color:white;
}
.droite {
float:left;
width:80%-20px;
margin-left:10px;
background-color:silver;
text-align: center;
color: white;
padding:auto;
}

Merci d'avance a+

Dylav · le 10 juin 2008

Salut Raph',

Pourquoi tous ces width:100% ? Laisse le navigateur étendre de lui-même ta fenêtre sur l'ensemble de l'écran de ton visiteur... donc pas de width pour conteneur, ni pour haut, centre et droite. Tu imposes seulement la largeur de la colonne gauche, width:20%. Et tout va s'ajuster, à la seule condition que le texte de la colonne de droite soit suffisamment fourni pour s'étaler sur plus d'une ligne, ce qui est fort probable, non ?

body {
 font-family:Times New Roman;
 margin:10px;
}
.conteneur {
 position:absolute;
 background-color:LightSkyBlue;
 padding-bottom:10px;
}
.haut {
 margin:10px;
 background-color:silver;
 color:yellow;
 text-align:center;
 font-size:50px;
 padding:25px 0;
}
.centre {
 margin:0 10px;
}
.gauche {
 float:left;
 width:20%;
 background-color:silver;
 color:white;
}
.droite {
 float:left;
 margin-left:10px;
 background-color:silver;
 text-align: center;
 color: white;
 padding:10px 0;
}

Ceci dit, tu es optimiste ! Beaucoup de sites présentent encore des pages de dimensions fixes, parce que le concepteur tient (un peu naïvement) à ce que tous ses visiteurs aient de la page conçue la même vision que lui, qu'il considère comme une “œuvre” personnelle...

Connexion

Pas encore inscrit ?

[Résolu] JavaScript PHP CSS XHTML - lesquels utiliser ?

Messages recommandés

Raphdu01

Lien vers le commentaire

Partager sur d’autres sites

Dylav

Lien vers le commentaire

Partager sur d’autres sites

Dylav

Lien vers le commentaire

Partager sur d’autres sites

Raphdu01

Lien vers le commentaire

Partager sur d’autres sites

Dylav

Lien vers le commentaire

Partager sur d’autres sites

Dylav

Lien vers le commentaire

Partager sur d’autres sites

Raphdu01

Lien vers le commentaire

Partager sur d’autres sites

Dylav

Lien vers le commentaire

Partager sur d’autres sites

Raphdu01

Lien vers le commentaire

Partager sur d’autres sites

Dylav

Lien vers le commentaire

Partager sur d’autres sites

Rejoindre la conversation

En ligne récemment 0 membre est en ligne

Zebulon

Outils en ligne

Naviguer