28173 sujets

CSS et mise en forme, CSS3

Affiner positionnements blocs

bonjour à tous,

Pour commencer mes félicitations à Raphaêl Gotter pour son ouvrage CSS2 qui, depuis 1 semaine, est mon livre de chevet., car je suis un parfait débutant dans l'édition de feuilles de style css.
Avant de poser ma question, une brève présentation : je suis webmaster depuis pas mal d'années d'un site utilisant un portail php, xoops pour ne pas le nommer, j'avais pu constater que la cohérence graphique du site était dû au CSS, mais perso je ne m'étais jamais lancé dedans, toutes mes réalisations de pages web (mes guides notamment) se contentant jusqu'à présent des traditionnelles mise pages avec les tableaux et ce d'autant plus que le module qui les intégre n'accepte pas de modifications au sein de balise "head".

Mais depuis qques temps j'ai décidé de réaliser un site personnel pour mettre en valeur ma petite entreprise artisanale, à savoir un labo de prothèse dentaire, j'ai donc décidé qu'il serait en XHTML+CSS, étant convaincu des avantages du binôme en farfouillant divers forums dont celui ci.

Les 3 principals critères de mon cahier des charges :
- un site capable de s'adapter à toutes les résolutions d'écran
- un site s'affichant correctement même sile visiteur change la taille des polices
- un site s'affichant aussi bien que possible que ce soit avec IE ou les navigateurs basés sur le moteur geko (mozilla, firefox etc)

J'aimerais donc opté pour un "conteneur global", et des blocs qui pourraient s'étirer en longueur en fonction de la taille des polices, hors j'ai qques difficultés pour passer de la théorie à la réalité. les blocs je l'ai ai mis en place mais tel que j'ai stucturé "mon biz", j'ai l'impression qu'il ne respectera pas ou prou les 2 premiers critères de mon cahier des charges, pouvez me confirmer et me dire ou je merde, car je l'avoue le css est un mode de pensée que je suis encore très loin de maitriser.
Je travaille avec Dreamweaver 8, les couleurs flashy des blocs et des bordures ne sont là que pour m'aider à visualiser le truc Smiley lol , suis je sur la bonne voie? ou au contraire mon code tombe t'il dans divers pièges du parfait débutant?

merci de m'avoir lu et de m'aider.


http://www.divxmethode.com/images/screenshoot_site.gif 



/* CSS Document */

body{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
}

#conteneur{
	position: absolute;
	width: 760px;
	background-color: #FFFFFF;
	border-top: thick solid #00FF00;
	border-right: medium solid #00FF00;
	border-bottom: medium solid #00FF00;
	border-left: medium solid #00FF00;
	left: 25%;
	height: 800px;
	
}

#header{ 
	height: 100px;
	background-color: #CCCCCC;
	
}
#sub_header{
	color: #FFFFFF;
	background-color: #000000;
	height: 10px;
	width: 760px;
	font-size: 10px;
	font-weight: bold;
}

#menu_droit{
	position: absolute;
	background-color: #0099FF;
	width: 250px;
	left: 510px;
	height: 680px;
}

#menu_centre{
	position: absolute;
	background-color: #FFFFB0;
	width: 510px;
	height: 680px;
	padding: 0px;
}

#footer{
	background-color: #FF00FF;
	height: 20px;
	width: 100%;
	position: relative;
	padding: 0px;
	top: 84%;
	
	}





<body>


 
  <!-- le conteneur global redimensionnable-->

<div id="conteneur">

<!-- bannière-->
<div id="header">Le header</div>

<!--petit bandeau pour l'heure etc-->
<div id="sub_header">ici s'affichera l'heure et autres</div>

<!-- menu principal-->
<div id="menu_centre">
  <p>texte de présentation du site avec image de fond </p>
</div>

<!--menu droit avec  les liens -->
<div id="menu_droit">
le menu des liens
 <ul>
 <li>menu 1</li>
 <li>menu 2</li>
 <li>menu 3</li>
 <li>menu 4</li>
 <li>menu 5</li>
 <li>menu 6</li>
 </ul>
</div>

<!--pied de page-->
<div id="footer"> pied de page dans lequel se situera  mon copyright</div>
</div>
</body>

Modifié par milou2mars (21 Apr 2006 - 00:24)
Bonjour,

Dans le code du fichier CSS, je vois que le footer a une taille relative, en pourcentage, donc fluide.
Seulement, le bloc conteneur a une largeur fixe (760 pixels), donc il ne pourra pas être redimensionné. Il faudrait lui attribuer une largeur de 100% (ce qui se traduira par 100% de l'espace disponible, moins l'espace pris par le menu).

Voici un gabarit type d'Alsa, pour ce type de mise en page :
http://css.alsacreations.com/modeles/modele4.htm - le fichier CSS est dans la source.
Modifié par Smiley neko (21 Apr 2006 - 00:47)
slt et merci neko pour ta réponse.

hier soir aprés un peu de lecture du livre de Raphaël j'ai modifié mon conteneur pour le centrer comme suit et en mettant la longueur à 100% puisque mon but est qu'il puisse s'étirer en longueur (pas en largeur):


#conteneur{
	position: relative;
	width: 760px;
	margin : 0 auto;
	background-color: #FFFFFF;
	border-top: thick solid #00FF00;
	border-right: medium solid #00FF00;
	border-bottom: medium solid #00FF00;
	border-left: medium solid #00FF00;
	height: 100%;
}


ça a l'air correct , non?

Now en écrivant les autres blocs comme suit, est ce que le tout s'étirera en longueur comme je le souhaite, sinon quelle est mon erreur (j'ai un doutes sur le fait de donner des valeurs de positionnement ou de longueur en px), merci encore.

#header{ 
	height: 100px;
	background-color: #CCCCCC;
	
}
#sub_header{
	color: #FFFFFF;
	background-color: #000000;
	height: 10px;
	width: 760px;
	font-size: 10px;
	font-weight: bold;
}

#menu_droit{
	position: absolute;
	background-color: #0099FF;
	width: 250px;
	left: 510px;
	height: 680px;
	top: 110px;
}

#menu_centre{
	position: absolute;
	background-color: #FFFFB0;
	width: 510px;
	height: 680px;
	padding: 0px;
}

#footer{
	background-color: #FF00FF;
	height: 20px;
	width: 100%;
	position: absolute;
	padding: 0px;
	top: 778px;
	
	}

	
	}



EDITER : je viens de m'apercevoir qu'il y a un truc qui me chiffone ==> les bordures latérales de mon conteneur s'arrête à la hauteur du sub_header et plus de border bottom visible Smiley eek , why?????
Modifié par milou2mars (21 Apr 2006 - 13:33)
Sujet clos
Aller à