[Résolu] Template Alsa - Question sur un CSS

Bonjour.

J'ai regardé de plus prêt et testé certains template. Et j'ai un remaqué un p'tit truc qui me dérange. En fait je me pause la question de ce qui est meilleure. la façon que vous utilisez, ou la mienne, car je m'étonne que vous ayez gardé cette façon de faire vous qui êtes plus calés que moi.

J'ai testé que 2 et n'ai pas regardé sur les autres, mais sans doute qu'il y a la même chose que j'ai remarqué.

Les deux avec le scroll et 2 colonnes.
Pour celui en plein ecran, pas de problème. Mais celui à taille fixe possède une faille.

Vous avez choisi 750px de coté et c assez petit, mais il est probable que la majorité qui l'utilisent se situent entre 800 et 1024px et là le problème que j'ai remarqué s'agrandit d'autant plus.

En fait votre conteneur principale englobant toute la page lorsqu'on réduit la fenêtre devient décalé sur la droite. Cela veut dire que la partie de gauche (les menus dans votre exemple) ne devient même plus accessible avec le scroll. Avouez que c embêtant quand même.

J'avais eut ce problème auparavant avec mon site et j'avais trouvé l'astuce. Au lieu de ça :

.conteneur /*le conteneur global du site, qui sera centré */
{ 
width: 750px;
position: absolute;
left: 50%;
margin-left: -385px;
}

utiliser ça :

.conteneur /*le conteneur global du site, qui sera centré */
{ 
 width: 750px;  /*largeure exacte de la banniere prise comme référence*/
 margin:0 auto;
}

Ma question est donc : Quel est le mieux ? Pourquoi avoir gardé l'autre façon de faire ? Y'a peut être une explication qui m'échappe après tout ?
Modifié par Damonya (31 Oct 2005 - 00:09)

Une bonne remarque... à mettre en relations avec cet article :
> Centrer les elements ou un site web en CSS


Modifié par Jep (28 Oct 2005 - 19:51)

Bonsoir,

Le centrage par les marges négatives est en effet à éviter.

Bonjour Damonya,

Chacune des solutions de centrage a des avantages et des inconvénients suivant les situations auxquels ces gabarits sont appliqués. Ce ne sont que des gabarits assez standards que l'on trouve pour les sites web.

Tous les gabarits n'utilisent pas de "conteneur" pour centrer un site dans la page du navigateur. Chaque gabarit est en général soumis dans une largeur fluide et une largeur fixe. La largeur retenue (750px) permet de ne pas avoir de scroll horizontal dans les résolutions d'écran 800 x 600 pixels, l'étroitesse d'un site est fonction de la résolution de l'utilisateur pour un site web (le site de la lauréate du CSS Summer d'Alsacréations est à voir sur ce sujet il est centré, fixe et étroit, le second est aligné à gauche et fixe en largeur).

Tu as donc choisi pour un de tes sites de centrer celui-ci avec des marges automatiques, ce qui n'en fait pas une règle absolue .

A noter que les techniques de conceptions web, avec les feuilles de styles, ne se bornent pas aux seuls navigateurs graphiques mais à l'ensemble des agents utilisateurs. Il est dans l'absolu possible de proposer un même contenu sous une forme différente et/ou adaptée à différents médias de sortie. C'est même un des intérêts les plus séduisant des feuilles de style.

Les gabarits proposés par Raphaël ne s'adressent qu'au média "screen".

Ah non en poursuivant un peu l'investigation je me suis apercu que lorsqu'on change comme ça, sur une autre petite partie du code cela va poser probleme.

Le menu devient alors décalé sur la gauche, colé au bord. le reste ça va.

Cela vient donc de cela sur le template :

.menu 
{
position: absolute;
left:0;
width: 150px;
height: 300px;
}

que j'ai remplacé par ça :

.menu 
{
float:left;
width: 150px;
height: 300px;
}

en n'oubliant pas d'enlever du coup ceci :

margin-left: 150px;

dans le frame.

Mais bon du coup cela ne ressemble plus au template d'origine puisqu'il y a un float

lol et puis je ne sais toujours pas ce qui est le mieux si ma façon de faire est propre ou correcte et pas à l'abri de bug sur des navigateurs etc.

Donc toujours ma petite question.

Mes petits changements m'ont l'air mieux, mais est-ce que je me trompe ? Je suis pas vraiment sûr de moi a vrai dire étant encore débutant malgré tout.

Merci

Excuse-moi Igor j'avais pas vu ta réponse.

En fait j'ai l'intention de proposer 2 sortes de façon de voir la page principale de mon site (4 plus tard, sans scroll) :

J'ai remarqué que les deux templates que vous proposez avec scrolls avaient la même architecture html. Donc je peux facilement proposer avec 2 feuilles de styles :
-1 avec scroll en marge fixe
-1 avec scroll en plein ecran

C pour ça que je regarde vos templates. J'ai déjà mon site si vous regardez ici : www.meteobell.com qui est a peu près calé et positionné (page d'accueil), mais je l'ai construit petit à petit (au départ c'etait mon tuto pour apprendre a créer un site) et il est mal hierarchisé et fagoté. Bourré de petits haks et de petits correctifs de marge et border divers lol

Donc je reprend tout à zéro pour avoir le même résultat que vous voyez sur la page d'accueil de mon site,mais de façon plus propre plus clean et plus performante. Donc template au départ. Maintenant que j'ai bien galéré avec le code de mon site (si vous regardez la page css c un vrai bordel ) il est temps que je me plonge dans le template.

D'où ma question du post d'avant. J'veux pas faire d'erreurs cette fois.
Modifié par Damonya (28 Oct 2005 - 20:31)

Bon j'ai réussi à construire ce que je voulais à peu près comme template, après quelques modifications, mais je suis toujours confonté avec un maudit bug d'Opéra dont je n'arrive pas à trouver l'origine.

Ca fait plusieurs heures que je m'acharne et je ne trouve pas de solution.

Peut être est il connu, je ne sais pas mais j'ai pas trouvé.

Le template utilisé au départ c'est celui-là.

http://css.alsacreations.com/modeles/modele11.htm

Le résultat final ressemblera à ça

http://www.meteobell.com/

Et mon template corrigé ressemble aujourd'hui à ça :

http://www.meteobell.com/Test/Test.html

Le problème il est que sur Opéra pour le dernier lien.

Voilà son xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   
   <head>
       <title>Bienvenue sur le site de MétéOBell ! Accueil</title> <!--Titre de la page-->
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/> <!--language html en Francais-->
       <link rel="stylesheet" media="screen" type="text/css" title="Design Accueil 01" href="Test.css"/> <!--Lien fichiercss-->
   </head>

   
<body>	


<div id="cont_gnl_accueil">

	<!--LIGNE 1-->
	<div id="cont_tete_accueil"><!--La bannière MétéOBell-->


	</div>


	
		<div id="cont_gauche_accueil">
			
			<div id="cont_bienvenue_accueil">
			Bienvenue sur MétéOBell, <br />le site d'un passionné de Météo
			</div>
			
			<div id="cont_menu_accueil">
				<li><a href="">Menu 1</a></li>
				<li><a href="">Menu 2</a></li>
				<li><a href="">Menu 3</a></li>
				<li><a href="">Menu 4</a></li>
					<li><a href="">Menu 1</a></li>
				<li><a href="">Menu 2</a></li>
				<li><a href="">Menu 3</a></li>
				<li><a href="">Menu 4</a></li>
								<li><a href="">Menu 1</a></li>
		
			</div>
			
		</div>
		
<div id="cont_droite_accueil">
			
			<div id="cont_onglets_accueil">
		blablabla
			</div>
		
		
			<div id="cont_cadre_accueil">
		         <p>Bcp de bla bla</p>
	
		
			</div>


	</div>
	<!--LIGNE 3-->	
	<div id="cont_pied_accueil">
	</div>
	
	
</div>
	
</body>

</html>

Et son Css

/* CSS issu des tutoriels css.alsacreations.com */
body {
margin: 0;

padding-top: 5px;
padding-bottom:5px;
	font-family:Helvetica, sans-serif;
	font-size:0.8em;
	color:#DDDDDD;
	
	background-image: url("Images/fond_01.jpg");/*Image Tourbillon*/
	background-attachment: fixed;
	
	
padding-left:10px;
padding-right:10px;	
}


*>body {padding-left:0;padding-right:0;} 
/*body n'a rien sauf pour IE PC qui voit un coté gauche et droit de 10px pour recentrer*/

#cont_gnl_accueil 
{ /*le conteneur global du site, qui sera centré */
width: 980px;
margin:0 auto;

}


#cont_tete_accueil
{
height: 160px;

	background-image: url("Images/Banniere_Meteobell.jpg");
	background-repeat: no-repeat;
	margin:auto;
	
}



	#cont_gauche_accueil
	{
	float:left;
	width: 250px;
	height: 400px;
	background-color:#CCFCFF;
	margin:5px 0 5px 0;/*haut et bas*/
	padding:0;
	}
	
		#cont_bienvenue_accueil
		{
		
		width: auto;
		margin:auto;
		}
		
		#cont_menu_accueil
		{
		
		list-style-type: none;
		margin: 0;
		padding:0;
		background-color:#FCCCFF;

		}
	#cont_droite_accueil
	{
	float:right;
	width: 725px;
	height: 400px;
	
margin:5px 0 5px 0;/*haut et bas*/


	background-color:#FFFFFF;
	
	padding:0;
	}

	        #cont_onglets_accueil
		{

		height:30px;
		width: auto;
		margin:auto;
		
		font-size:100%;
		line-height:normal;
		background-color:#FFCCFF;
		}
	        #cont_cadre_accueil
		{
width:auto;
height: 370px;
background-color:#9999CC;
overflow: auto;

		}
		
#cont_pied_accueil
{
margin:0 0 5px 0;/*bas*/
height: 20px;
background-color: #99CC99;
clear:both;
}

Si vous aviez une soluce ou un hak spéciale Opéra ça m'enleverais bien des soucis
Modifié par Damonya (29 Oct 2005 - 01:16)

ouch bah voyez-vous il est tard et j'avais décidé de ne pas me couché tant que j'aurais pas trouvé. ET bah j'ai trouvé.

A force de tout essayé, j'ai finis par trouvé une solution sans aucun hak, mais assez étrange quand même.

Le Problème : J''avais un décalage de 30-40px environ entre le bloc cont_onglets_accueil et cont_cadre_accueil alors qu'il devait être colé l'un au-dessus de l'autre normallement. Et seulement sur Opéra.

J'ai eut beau changé les widths, height, margin, padding etc bref j'ai un peu essayé tout ce qu'il était possible d'essayer. ca doit bien faire 6-7 heures que je suis sur ce fichu problème.

La solution la voilà :

Dans

<div id="cont_cadre_accueil">

il faut rajouter un autre bloc.
Par exemple

<div id="sous_cadre">

. Si si c important sinon ca marche pas.

En css de ce sous-cadre il faut juste mettre :

[b]padding-top:1px;[/b]

Et là miracle, le décalage de 30 à 40px disparait comme par miracle. On a bien le bloc onglet qui colle avec le bloc cadre.

Par contre maintenant on a un décalage cette fois ci en dessous du cadre, de 1px, en raison du rajout qu'on vient de faire et seulement sur Opéra puisque sur mozilla et ie avec lequel je teste, ca n'a pas bougé.

Arf deuxième parti du problème. Cette fois-ci j'ai mis que 2 heures à trouver environ

Dans le code que j'ai mis avant, on avait :

 #cont_onglets_accueil
{

height:30px;
width: auto;
margin:auto;

[b]font-size:100%;[/b]
line-height:normal;
background-color:#FFCCFF;
}
 

Bah au lieu de mettre font-size:100% on met 99%, la bizarement ça change que pour Opéra qui revient à une taille normale en enlevant -1px au bloc onglet.

Bref ca redevient nikel sur les 3.

J'peux vous dire que j'en ai chié pour trouver ça, mais ça l'air de bien être positionner au moins sur ces 3 là.
Modifié par Damonya (29 Oct 2005 - 16:56)

J'parle tout seul mais c pas grave.

J'viens de me rendre compte aussi que si j'avais mis ça au début de mon code tout de suite :

*{
margin:0;
padding:0;
}

Ca m'aurait éviter quelques heures d'acharnement pour rien, surtout un Vendredi soir. heureusement j'avais rien de prévu ce soir là, m'enfin quand même quand j'y repense.

Bon c pas grave, au moins j'ai une deuxième méthode sous la main, vu que le résultat semble le même.

D'ailleurs le dernier bout de code, fort connu, que je viens de balancer. c'est considéré comme un Hack ou non ? Car sinon je garde ma méthode moins généralisé que le *{code}

C bon j'ai réussi à reconstruire mon template de la page d'accueil de mon site et Sans Aucun Hak et plus beau en plus.

avant : http://www.meteobell.com/ avec une trentaine de haks et pour un résultat même pas similaire sur IE 6, opéra et Mozilla firefox.

après : http://www.meteobell.com/Test/Test.html sans haks et pour un résultat similaire sur les 3 navigateurs.

Pour ceux qui voudrait utiliser le template pour leur site, profitez en car cette page ne va pas rester longtemps.

Grâce à cette restructuration, restauration, je suis en mesure maintenant de proposer un mode d'affichage en 1024 (que voici) en 800 ou 1600 en ne changeant que certains paramètres dans la feuille css et en ne changeant pas la structure de mon xhtml.

Le site est basé en position fixe par rapport à la largeur de la banière.Les autres éléments sont placés en float, pour déplacer le pied de page en fonction du contenu situé au-dessus (menu, cadre-scroll). Je peux donc avec peu de changement faire passer le cadre scroll en normale, mais il faudra réajuster dans ce cas un peu le menu de gauche, ou le faire passer en position fixe. Bref c'est un code devenu assez polyvalent et surtout stable puisque malgré ces changements, les blocs resteront bien positionnés entre eux sur les 3 navigateurs cités, testé et approuvé.

Je suis plutôt content et assez fier de moi donc. Mais j'en ai pas mal chié pour arriver à ce résultat.

Ah si j'utilise juste un seul hak pour IE et recentrer le site au milieu mais c purement esthétique et pas obligatoire.

Je me suis sinon aussi permis quelques petits effets avec les bordures et le scroll notamment.
Modifié par Damonya (30 Oct 2005 - 15:31)

Ce sujet est-il en rapport avec le titre initial ?
Est-il ton sujet perso Damonya pour nous montrer l'avancée des travaux de ton site ?
Une question dans les forums, c'est un sujet avec un titre pertinent, une question et des réponses, mais il ne faut pas agréger de nouvelles questions dans chaque sujet.
Dans le cas contraire tout ce qui se dit n'est plus utilisable avec le recherche.

Merci de s'en tenir au sujet initial de chaque post.

Disons que j'avance plus vite que l'on ne répond à mes questions. Ce sujet est résolu pour moi maintenant.

La ou les questions initiales n'ont d'ailleurs toujours pas été répondus mais peu importe je me suis débrouillé autrement.
Modifié par Damonya (31 Oct 2005 - 00:10)