28173 sujets

CSS et mise en forme, CSS3

Centrée mes colonnes

Bonjour,

Je veux centrer mes colonnes peu importe la résolution. De plus, ça doit fonctionner sous Firefox et IE.

Je m'approche de mon but mais c'est loin d'être parfait et c'est faffreux sous IE.

Code CSS:
#container{
margin:0 auto;
text-align:left;
width:740px;
height:102px;
}

#top{
 background:#ffdfc5 url("images/i_graphiques/banniere.gif") no-repeat center center;
 height: 100px;
 width:740px;
 color: #600;
 min-height: 100px;
 text-align: center;
 position: relative;
}

.top{
    color: #FFFFFF;
    font-weight: bold;
    text-align: right;
    margin-right: 15px;
    padding-top: 80px;
}

#corps{
clear:both;
background:#ffffff url(images/i_tuiles/f_600.jpg) no-repeat center center;
border-bottom:1px solid #808080;
border-left:1px solid #808080;
border-right:1px solid #808080;
padding:5;
width:728px;
min-height:560px;
}

#pied{
	clear:both;
	width: 730px ;
	height: 37px;
	background-color: #0C4072 ;
	padding-right: 10px ;
	color: #3366ff;
	font-size: 20px;
	text-align: right;
}

div#gauche,
div#milieu,
div#droite{
	background: transparent;
	border: 2px dotted blue;
	width: 200px;
	height: 455px;
	text-align: center;
}

div#gauche{
   position: absolute;
   left: 10px;
}
div#milieu{
	position: absolute;
	left: 310px;
}
div#droite{
	position: absolute;
	left: 610px;	 
} 


#colcentrale{
        background: blue;
        border: 5px ridge green;
        margin-left: 199px;
        margin-right:199px;
			  margin-top: 580px;
        voice-family: "\"}\"";
        voice-family: inherit;
}


div#doub_gauche,
div#doub_droite{
	background: transparent;
	border: 2px dotted blue;
	width: 200px;
	height: 135px;
	text-align: center;
	margin-top: 475px;
}	

div#doub_gauche{
	position: absolute;
	left: 60px;
}

div#doub_droite{
	position: absolute;
	left: 410px;	 
}


Code HTML:
<body>
		<div id="container">
			<div id="top">	 		
				<p class="top">
					<a href="default.php"><img src="images/menu/accueil.gif" border="0" alt="Revenir à la page d'accueil"> </img></a>&nbsp;
					<a href="mailto:fondation.uqtr@uqtr.ca"><img src="images/menu/email.gif" border="0" alt="Nous rejoindre par courriel"></img></a>
				 </p>
				<div id="corps">
					<span class="orange20b"><center>Conseil d'administration</center></span><br>				
					<div id="gauche">
						<span class="orange12">
							<span style="line-height:28px"><b>Pr&eacute;sident</b></span><br>
						</span>
				    <span class="noir11"><b>Raymond Tardif</b></span><br>
				    <span class="noir11">Pr&eacute;sident et &eacute;diteur</span><br>
						<span class="noir11"><i>Le Nouvelliste</i></span><br><br>
						<span class="orange12">
							<span style="line-height:28px"><b>Premier vice-pr&eacute;sident</b></span><br>
						</span>	
				    <span class="noir11"><b>L&eacute;opold Gagnon, ing.</b></span><br>
						<span class="noir11">Pr&eacute;sident et chef de la direction</span><br>
						<span class="noir11"><i>Ganotec inc.</i></span><br><br>
						<span class="orange12">
							<span style="line-height:28px"><b>Deuxième vice-pr&eacute;sidente</b></span><br>
						</span>	
						<span class="noir11"><b>Christine Gagnon</b></span><br>
						<span class="noir11">Management, consultant</span><br>
						<span class="noir11"><i>Gagnon, Weldon &amp; Co inc.</i></span><br><br>
						<span class="orange12">
							<span style="line-height:28px"><b>Tr&eacute;sorier</b></span><br>
						</span>	
						<span class="noir11"><b>Fran&ccedil;ois R. Beauchesne</b></span><br>
						<span class="noir11">Architecte</span><br>
						<span class="noir11"><i>Design Fran&#231;ois R. Beauchesne</i></span><br><br>
						<span class="orange12">
							<span style="line-height:28px"><b>Secr&eacute;taire et dir. g&eacute;n&eacute;rale</b></span><br>
						</span>
						<span class="noir11"><b>Marianne M&eacute;thot</b></span><br>
						<span class="noir11">Directrice</span><br>
						<span class="noir11"><i>Bureau de soutien au d&eacute;veloppement universitaire</i></span>
					</div>
					
					<div id="milieu">					
						<span class="noir11"><b>Gis&egrave;le Aubin, CRHA</b></span><br>
						<span class="noir11">Vice-pr&eacute;sidente</span><br>
						<span class="noir11"><i>Teleflex ENERgy</i></span><br><br>    
						<span class="noir11"><b>Raymond Auger, ing.</b></span><br>
						<span class="noir11">Pr&eacute;sident</span><br>
						<span class="noir11"><i>Auger Groupe Conseil inc.</i></span><br><br>
    				<span class="noir11"><b>Alain Boucher</b></span><br>
						<span class="noir11">Vice-pr&eacute;sident des services financiers</span><br>
						<span class="noir11"><i>Alcoa Canada Première fusion</i></span><br><br>
						<span class="noir11"><b>Ghislain Bourque</b></span></span><br>
						<span class="noir11">Recteur</span><br>
						<span class="noir11"><i>UQTR</i></span><br><br>
						<span class="noir11"><b>Yvan Bouvet, c.a., Fisc.</b></span><br>
						<span class="noir11">Associ&eacute;</span><br>
						<span class="noir11"><i>Verrier Paquin H&eacute;bert</i></span><br><br>
						<span class="noir11"><b>R&eacute;al Brouillette, ing.</b></span><br><br>
						<span class="noir11"><b>Georges-Martin Caron</b><br></span>
						<span class="noir11">Pr&eacute;sident</span><br>
						<span class="noir11"><i>Association des dipl&ocirc;m&eacute;es et dipl&ocirc;m&eacute;s de l&#146;UQTR</i>
					</div>
									
					<div id="droite">
				    <span class="noir11"><b>Pierre Ducharme</b></span><br>
				    <span class="noir11">Directeur de l&#146;usine</span><br>
				    <span class="noir11"><i>PCI Chimie Canada inc.</i></span><br><br>		
				    <span class="noir11"><b>Jean Fournier</b></span><br><br>	 
						<span class="noir11"><b>Samuel Gosselin</b><br></span>
						<span class="noir11">Pr&eacute;sident</span><br>
						<span class="noir11"><i>AGEUQTR</i></b></span><br><br>	
						<span class="noir11"><b>J. Claude Lainesse</b></span><br>
						<span class="noir11">Professeur &agrave; la retraite</span><br>
						<span class="noir11"><i>UQTR</i></b></span><br><br>	
						<span class="noir11"><b>Robert L'&Eacute;cuyer</b></span><br><br>
					  <span class="noir11"><b>Suzanne L. Lemay, c.a. </b></span><br>
				    <span class="noir11">Contr&ocirc;leur<br>
				    <span class="noir11"><i>Corus S.E.C.</i></span><br><br>		
				    <span class="noir11"><b>Daniel McMahon, FCA</b></span><br>
				    <span class="noir11">Pr&eacute;sident et chef de la direction</span><br>
				    <span class="noir11"><i>Ordre des comptables agr&eacute;&eacute;s du Qu&eacute;bec</i></span><br><br>                               
						<span class="noir11"><b>Jacques Roy, c.a. Syndic</span></b>
						<span class="noir11">Associ&eacute;</span><br>
				    <span class="noir11"><i>Roy &amp; Associ&eacute;s</i></span><br><br>
				    <span class="noir11"><b>Michel Volle</b></span><br>
				    <span class="noir11">Pr&eacute;sident</span><br>
				    <span class="noir11"><i>Syndicat des professeurs</i></span>
					</div>
					
					<div id="doub_gauche">
						<span class="orange15b">Comit&eacute; de v&eacute;rification</span><br><br>
						<span class="noir11">
						   Fran&ccedil;ois R. Beauchesne, pr&eacute;s.<br>
							Jean Fournier<br>		
							Christine Gagnon<br>
							Suzanne L. Lemay <br>		
							Marianne M&eacute;thot<br>
							Ghislain Bourque
						</span>
					</div>
					<div id="doub_droite">
						<span class="orange15b">Comit&eacute; de placements</span><br><br>
						<span class="noir11">
							R&eacute;al Brouillette, pr&eacute;s.<br>
							Yvan Bouvet<br>
							J. Claude Lainesse<br>		
							Marianne M&eacute;thot<br>
							Jacques Roy<br>
							Raymond Tardif<br>
							Robert L'&Eacute;cuyer<br><br>
						</span>
					</div>
				</div> <!-- Fermeture de corps -->

	
				
			<div id="pied"><em><span class="orange14b">Préparer l'avenir<br>offrir des conditions gagnantes</span></em></div>
		</div>
	</div>		
	</body>


Lien: http://www.uqtr.ca/fondation/Nf_ca.php
Modifié par mpop (06 Sep 2006 - 08:43)
Bonjour

Voir dans la FAQ pour le centrage.

Et dans les règles du forum pour le balisage des messages (point 13) & pour l'utilisation de la FAQ & de la recherche (point 15) Smiley cligne
Je m'excuse mais je ne comprends pas l'histoire de balisage. Mon code est super beau sous topstyle.

Pour ce qui est de la recherche, je l'ai fait et trouver 7 ou 8 réponses que j'aie lues en entier.

Là, je vais voir la FAQ.

Et dans le fond, ce sont toujours les mêmes questions qui reviennent donc le forum est inutile selon toi.
Bonjour fourniey et bienvenue sur ce forum,

fourniey a écrit :
Je m'excuse mais je ne comprends pas l'histoire de balisage. Mon code est super beau sous topstyle.

Il s'agit d'utiliser le balisage BBcode du forum, afin d'encadrer le code que tu cite par les balises [ code] et [ /code] (sans les espace après le premier crochet). Cela augmente très fortement la lisibilité du code, et du forum en général.

Tu peux éditer ton premier message en passant par le bouton d'édition en haut à droite du message en question.
Merci d'avance. Smiley smile


Pour ce qui est de ton problème, il faudrait nous en dire un peu plus :
- quelles sont les caractéristiques de ta mise en page ;
- quel est le rendu souhaité ?
Une page de test en ligne pour visualiser l'état actuel serait un plus.
mpop a écrit :
Bonjour fourniey et bienvenue sur ce forum,


Il s'agit d'utiliser le balisage BBcode du forum, afin d'encadrer le code que tu cite par les balises [ code] et [ /code] (sans les espace après le premier crochet). Cela augmente très fortement la lisibilité du code, et du forum en général.

Tu peux éditer ton premier message en passant par le bouton d'édition en haut à droite du message en question.
Merci d'avance. Smiley smile


Pour ce qui est de ton problème, il faudrait nous en dire un peu plus :
- quelles sont les caractéristiques de ta mise en page ;
- quel est le rendu souhaité ?
Une page de test en ligne pour visualiser l'état actuel serait un plus.


Il ne faut pas oublier aussi que le résultat sous IE est désastreux.

Le lien était déjà à la fin du code dans mon premier envoi.

Les caractéristiques de ma page:
#container{
margin:0 auto;
text-align:left;
width:740px;
height:102px;
}

#top{
 background:#ffdfc5 url("images/i_graphiques/banniere.gif") no-repeat center center;
 height: 100px;
 width:740px;
 color: #600;
 min-height: 100px;
 text-align: center;
 position: relative;
}

.top{
    color: #FFFFFF;
    font-weight: bold;
    text-align: right;
    margin-right: 15px;
    padding-top: 80px;
}

#corps{
clear:both;
background:#ffffff url(images/i_tuiles/f_600.jpg) no-repeat center center;
border-bottom:1px solid #808080;
border-left:1px solid #808080;
border-right:1px solid #808080;
padding:5;
width:728px;
min-height:560px;
}

#pied{
	clear:both;
	width: 730px ;
	height: 37px;
	background-color: #0C4072 ;
	padding-right: 10px ;
	color: #3366ff;
	font-size: 20px;
	text-align: right;
}


<Edit de mpop : mise en forme du code inséré. />
Modifié par mpop (06 Sep 2006 - 08:45)
Je pense qu'un petit passage au validateur ne ferait pas de mal. Smiley cligne

Voilà ce que renvoie le validateur de syntaxe HTML du W3C :
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.uqtr.ca%2Ffondation%2FNf_ca.php

Surtout, en plus des nombreuses petites corrections à apporter, je corrigerais la déclaration de type de document, qui n'est pas valide :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Cette déclaration « tronquée » fera passer certains navigateurs en mode de rendu « quircks », ce qui est une très mauvaise idée pour la compatibilité avec les différents navigateurs. Le doctype correct est le suivant :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

Source : http://www.htmlhelp.com/tools/validator/doctype.html
À part cela, utiliser le positionnement absolu pour placer tes blocs de contenu me semble être une vraie fausse bonne idée. Le positionnement absolu fait que les blocs ne se repoussent plus entre eux. Du coup, si un bloc a un contenu plus long que prévu, le texte va venir se superposer sur les autres blocs, ce qui est loin d'être idéal pour la lisibilité.

De plus, figer en hauteur des éléments porteurs d'un contenu texte important est une faute de conception. Il suffit d'agrandir la taille du texte, ne serait-ce qu'un peu, pour voir apparaître des problèmes (chez moi, même pas besoin d'agrandir la taille du texte, vu que j'utilise une taille de texte par défaut et une taille de texte minimale légèrement au dessus de la moyenne, histoire d'arriver à lire quelque chose sur mon écran en 1280x1024px).

On virera donc ces hauteurs fixes, et ces positionnements absolus inopportuns. Pour positionner les blocs, utiliser des « colonnes » flottantes est une possibilité. On peut aussi utiliser un simple tableau à trois cellules (en attendant de mieux maîtriser le positionnement CSS...), il n'y aura pas mort d'homme. Smiley smile
Sujet clos
Aller à