28172 sujets

CSS et mise en forme, CSS3

Ma première mise en page CSS

Bonjour,
Je viens de commencer ma première mise en page CSS. J'ai beaucoup tatonné, mais j'ai finalement réussi à parvenir à mes fins (pour le moment).
Avant de continuer, je voulais vous soumettre ce taf vu que je code sans toujours tout comprendre. Par exemple, je n'ai pas totalement saisi la notion de class et leur différence avec id.
Voici donc les entrailles, en espèrant voir vos doigts pointés les "incohérences".

code css:


<style type="text/css"  media="all">
 
 body {background-color:#f6e7f8}
 .conteneur
{
  margin-left   : auto;
  margin-right  : auto;
  width         : 850px;
  height: 900px;
  background-color: #ff66cc; 
}

.entête
{
  margin-left   : auto;
  margin-right  : auto;
  position: relative; 
  top:10px;
  width         : 838px;
  height: 36px;
    }
	
	.Photosverticales
{
   position: relative; 
  top:100px;
  left:522px;
  width         : 328px;
  height: 718px;
    }
</style>



code html:



<div class="conteneur">
 <div class="entête"><img src="Images/Bandeau-une.jpg" width="838" height="98" /></div>
 <div class="Photosverticales"><img src="Images/Bandeau-photos-vertical.jpg" width="328" height="718" /></div>
 
 </div>


Merci d'avance
Modifié par lodemars (12 Feb 2008 - 15:40)
Merci à vous.
J'ai bien lu les divers articles sur les class et les id. Ainsi que ceux relatifs au positionnement. Je dis pas que j'ai tout intégré, loin s'en faut.
Mais là je passe à la pratique et même si c'est pas évident, c'est quand même la voie royale pour progresser.
Comme je l'ai dit j'ai conscience de ne pas avoir fait le code le plus pertinent du monde. Mais vos remarques en passant sont de l'or pour moi.

T'as question sur le positionnement relatif, j'ai bien peur de pas la comprendre. Ma mise en page est faite d'un bloc en tête qui va prendre tout la largeur du conteneur principal, puis au dessous il y aura deux colonnes. A ce stade je n'ai placé que le bloc entête et la colonne de droite.
Difficile pour moi de te répondre sur la différence dans ce cas entre margin top et positionnement relatif. Je suppose que la présence de deux colonnes induit un positionnement relatif. J'ai bon?
lodemars a écrit :
Je suppose que la présence de deux colonnes induit un positionnement relatif. J'ai bon?

Non.
Le positionnement relatif ne sert qu'à déplacer un bloc «visuellement» par rapport à sa position «réelle».
Il est préférable de savoir manier les autres options de positionnement et de ne pas avoir recours au positionnement relatif pour -- par exemple -- écarter deux éléments qui seraient autrement collés entre eux (ou à l'inverse les rapprocher).

Pour les classes et identifiants: on utilise généralement les identifiants pour les principaux blocs de la page (en gardant en tête la contrainte suivante: chaque identifiant doit être unique dans la page).

Donc pour tes trois blocs (conteneur, entête, Photosverticales), on utilisera id (et le sélecteur #monidentifiant) plutôt que class et le sélecteur .maclasse). De plus, on évite en général d'utiliser des caractères accentués (ou plus généralement non-ascii) pour les noms de classe et d'identifiants. C'est techniquement possible de le faire, mais si on n'est pas au clair sur les questions d'encodage des caractères ça peut être très problématique. Et pour éviter les confusions, on pourra se restreindre aux bas de casse (lettres minuscules) et tirets.

Donc:
<div id="conteneur">
	<div id="entete">...</div>
	<div id="photos-verticales">...</div>
</div>

Le code CSS sera à adapter en fonction.

En passant, il est très probable que tes images aient besoin d'un texte alternatif qui va bien. Pense à utiliser l'attribut alt, autant que possible à bon escient. Smiley cligne Une lecture à ce sujet:
http://www.pompage.net/pompe/bien-utiliser-le-texte-alternatif/
Modifié par Florent V. (12 Feb 2008 - 18:26)
Ok pour les class et les id. C'est un peu plus clair.
Pour mes deux colonnes en utilisant float:left float:right, ça a l'air d'aller.
Par contre j'ai un problème pour placer mon bloc entête :
En utilisant ce code, tout va bien :


#entete
{
  margin-left   : auto;
  margin-right  : auto;
  position:relative
top:10px  
  width         : 838px;
  height: 36px;
    }


Par contre avec margin-top à la place de position relative, ça marche bien sur IE mais sur Firefox le bloc entete se met à 10px du navigateur et non du conteneur principal.
Est-ce "normal" et donc dans ce cas "position:relative" est le plus adapté ou j'ai raté quelque chose?


#entete
{
  margin-left   : auto;
  margin-right  : auto;
  margin-top : 10 px
  width         : 838px;
  height: 36px;
    }
upload/15746-css-1.jpg
lodemars a écrit :
Par contre avec margin-top à la place de position relative, ça marche bien sur IE mais sur Firefox le bloc entete se met à 10px du navigateur et non du conteneur principal.
Est-ce "normal" et donc dans ce cas "position:relative" est le plus adapté ou j'ai raté quelque chose?

Oui, c'est un comportement normal nommé la fusion des marges:
http://web.covertprestige.info/test/04-blocs-imbriques-et-fusion-des-marges.html

Tu peux placer un padding: 1px 0; sur ton conteneur, par exemple.
La propriété de feuille de style padding css peut pendre des valeurs :
- numérique suivie de px ou % ou pt ou em.

Si la propriété de feuille de style padding css est suivie d'une seule valeur alors cette valeur est appliquée à toutes les marges intérieures (top, bottom, left, right).

Si la propriété de feuille de style css padding est suivie de deux valeurs alors la première valeur est appliquée aux marges intérieures horizontales et la seconde aux marges intérieures verticales.

Si la propriété de feuille de style padding css est suivie de quatre valeurs elles correspondent dans l'ordre à la marge intérieure : padding-top, padding-left, padding-bottom, padding-right.
neya a écrit :
Si la propriété de feuille de style padding css est suivie d'une seule valeur alors cette valeur est appliquée à toutes les marges intérieures (top, bottom, left, right).

Si la propriété de feuille de style css padding est suivie de deux valeurs alors la première valeur est appliquée aux marges intérieures horizontales et la seconde aux marges intérieures verticales.

Si la propriété de feuille de style padding css est suivie de quatre valeurs elles correspondent dans l'ordre à la marge intérieure : padding-top, padding-left, padding-bottom, padding-right.

Il y a aussi le cas à trois valeurs:
margin: 10px 20px 30px;
correspond à 
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 20px;
Je viens de refaire ma mise en page avec les quelques éléments que j'ai pour le moment réussi à assimiler.


html, body {
	height: 100%;
	margin: 0;
	}

#conteneur
{
  margin-left   : auto;
  margin-right  : auto;
   padding: 1px 0;
  width         : 850px;
  height: 900px;
  background-color: #ff66cc; 
}

#entete
{
  margin-left   : 6px;  
  margin-top  : 10px;
  width         : 838px;
  height: 98px;
  
  
  
    }
	
#colgauche {
  float: left;
  width: 510px;
  margin-top: 10px;
  margin-left   : 6px;

}
#coldroite {
   margin-top: 10px;
  margin-left   : 516px;
 margin-right   : 6px;
 }
 
 .para
	 { text-indent: 2em;
	margin:0;
	padding-left:5px;
	padding-right:5px;
		background-color:#f6bef8;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: small;
	line-height: 150%
}
</style>

</head>





<body>
  <div id="conteneur">
  <div id="entete"><img src="Images/Bandeau-une.jpg" width="838" height="98" /></div>
  
  
  <div id="colgauche">
    <img src="Images/Titre1.gif" width="510" height="49" />
	<div class="para">Lumière, Espace bien-être , inauguré en décembre 2005 par ses fondatrices Agnès Roudillon et Vanessa Progneaux est un lieu dédié à la détente et au développement personnel . Reçus avec délicatesse, dans une ambiance conviviale, notre lieu vous accueille dans un cadre intimiste et coloré où chaque pièce se décline en un univers différent, une spécialité différente, pour vous offrir un véritable voyage à travers le corps et l'esprit. 
Art-thérapie, Kinésilogies spécialisées, Reiki, Massages, Yoga, Sophrologie, Etirements-détente, Méthode de Libération des Cuirasses, Modelage lymphatique manuel, Hypnose Ericksonienne, PNL…
Au delà de ses cours collectifs et séances individuelles, Lumière ouvre également  ses portes aux ateliers, formations, conférences et favorise les échanges et la créativité en organisant des manifestations telles qu'Expositions, Marché de Noël de jeunes créateurs, Défilés de mode… </div>
  </div>
  <div id="coldroite"><img src="Images/Bandeau-photos-vertical.jpg" width="328" height="718" />
      </div>
  </div>

</body>


Un petit problème : dans la colonne de gauche, sous IE seulement, persiste entre l'image Titre1 et le paragraphe un espace (une marge) que je n'arrive pas à résorber.
Si vous pouvez éclairer ma lanterne... merci
lodemars a écrit :
Un petit problème : dans la colonne de gauche, sous IE seulement, persiste entre l'image Titre1 et le paragraphe un espace (une marge) que je n'arrive pas à résorber.

Le premier problème que tu as, c'est que tu n'as ni titre, ni paragraphe, serais-je tenté de dire. Smiley cligne

Peut-être serait-il intéressant de travailler avec un code tel que celui-ci:
<div id="colgauche">
	<h1><img src="Images/Titre1.gif" width="510" height="49" alt="[i]Ce que dit mon titre[/i]" /></h1>
	<p>Paragraphe 1</p>
	<p>Paragraphe 2</p>
	<p>Paragraphe 3...</p>
</div>

Ensuite, tu adaptes les styles CSS ainsi:
#colgauche h1 {margin: 0;}
#colgauche h1 img {display: block;}
#colgauche p {margin: 0 0 .5em 0;}

Mais ça me semble bizarre de n'avoir aucun espace entre ton titre et ton paragraphe. Ça donne un résultat lisible, cette affaire? Ou bien est-ce ton image qui est mal découpée? Smiley sweatdrop

PS: en passant, le problème technique que tu as rencontré avec ton code (espace sous l'image...) est traité dans la FAQ. Si si. Smiley smile
Modifié par Florent V. (18 Feb 2008 - 12:31)
Oui c'est lisible, sous firefox c'est tip top et sous IE il n'y a que cette histoire de marge verticale. J'ai mis en pièce jointe le canevas. Deux images entourant en haut et bas un paragraphe texte. Des images parceque qu'il y a des coins ronds (cf l'image jointe).

Je vois bien que tu ajoutes la balise h1, c'est à dire que je dois comprendre que tout contenu doit être "encadré". J'aurais déjà appris cela.
Sur ce je vais étudier le code que tu me proposes.

Au sujet de la faq, je comprends ta remarque. Mais en ce moment je bois du css à toutes les sauces notamment sur cet excééééélent site. Donc c'est plus un trop plein de nouveautés à ingurgiter qu'une histoire de "faignantise". Et j'attends d'un jour à l'autre qu'Amazon me livre le bouquin d'un des illustres admin. Smiley cligne

Merci pour tes conseils!

upload/15746-div-1.jpg
Modifié par lodemars (18 Feb 2008 - 13:58)
Florent V. a écrit :

Je la rajoute uniquement parce que ton image s'appelle Titre1. Si maintenant cette image n'est pas un titre en image mais une simple bordure avec coins arrondis, on n'aura effectivement aucun intérêt à utiliser un h1.

En passant:
http://web.covertprestige.info/test/05-boite-avec-bordures-en-html-et-css.html


Ben en fait c'est les deux. Un titre en image qui couvre en partie la partie arrondie de la boite texte.
upload/15746-div2.jpg
Donc h1 ou pas? et sinon quoi pour encadrer l'image dans le flux?

Sinon j'ai utilisé ton code et ça marche nickel. L'apparition ou non des marges verticales étant dépendante de #colgauche h1 {margin: 0;}.
Mais j'ai un peu de mal avec ces points :
#colgauche h1 {margin: 0;}
#colgauche h1 img {display: block;}
#colgauche p {margin: 0 0 .5em 0;}

Pourquoi avoir indiquer colgauche? H1 ou P ne se suffisaient ils pas à eux même?
Sujet clos
Aller à