28220 sujets

CSS et mise en forme, CSS3

Problème de réalisation d'une feuille de style

Bonjour tout le monde.

Cela fait maintenant un petit moment que je "bricole" sur internet et je me sui récemment fixé un nouvel objectif: refaire toute l'interface de mon site à la main tout seul comme un grand à coup de CSS et de <div>.

Le commencement c'est bien déroulé mais la je me heurte à un écueil et cela fait bien 2 semaines que je sèche... Le principe est simple: je veux organisé ma page dans une colonne limité (div relative + marges automatique) et mettre dedans d'autres <div> de divers forme dont un certain nombre de float...

Je travaille sur 3 plate-forme (Mac, Windows et Linux) et trois explorateur (Safari, FireFox et IE) et j'ai des problème... j'ai retourné tout ça de divers manière mais il y a toujours des défaut d'affichage sur l'un ou l'autre des navigateurs. J'en suis arrivé à un point ou ça marche partout (même avec IE Mac) sauf sur IE Windows... si vous pouviez m'aider....

Afin de faciliter la manipulation j'ai essayer de "cloisonner" mon problème dans un fichier exemple simple... Le voila:

Code HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="style_blocs.css" />
</head>
<body>

<div id="page">

<div id="sous_menu">
  BLOC DE SOUS MENU
  (violet)
<!-- clôture de "sous_menu" -->
</div>

<!-- Colonne: DROITE -->

<div class="droite">
BLOC DE DROITE #1
<!-- clôture de "droite" -->
</div>

<div class="droite">
BLOC DE DROITE #2
<!-- clôture de "droite" -->
</div>


<!-- Page principale -->

<div id="gauche">
  BLOC DE GAUCHE
  (jaune)
<!-- clôture du gauche -->
</div>

<div class="hack_bas">
<!-- clôture de "hack_bas" -->
</div>

<!-- clôture de "page" -->
</div>

<div id="pied">
  PIED DE PAGE
<!-- clôture de pied -->
</div>

</body>
</html>


Feuille de style
/************************************************************
*     CSS AdminRezo.net          |    bleu:      #474c74    *
*     Par Nicephore17            |    mauve:     #9a3263    *
*     Cible:                     |    gris:	 #f0f0f0    *
*       Tous navigateurs         |                          *
*       Résolution > 1024x786    |                          *
************************************************************/

html {
	/* padding : 20px; */
	background: #474c74;
}

body {
	position: relative;
	width: 970px;
	margin: 0 auto;
	font-family: 'Lucida Grande', Verdana, Geneva, Lucida, Arial, Helvetica, sans-serif;
	font-size: 0.8em;
}


/* Hack pour "étendre la page en bas" */
.hack_bas {
	clear : both;
}

/************************************************************
MENU
************************************************************/

#sous_menu {
	display: block;
	float: left;
	position: relative;
	width: 740px;
	font-size: 110%;
	/* padding: 8px 0 1em 12px; */ /* Style ARn */
	padding: 0 1em 3em 12px;
	background: ff01ff;
}

/************************************************************
REALISATION D'UNE PAGE EN COLONNE
************************************************************/

#page {
	display: block;
	float: left;
	/* Nécessaire pour ne pas "passer dessous" #menu */
	position: relative;
	width: 970px;
	background: #ffffff;
}

/************************************************************
CONFIGURATION COLONNE PRINCIPALE (GAUCHE)
************************************************************/

#gauche {
	display: block;
	float: left;
	position: relative;
	width: 740px;
	padding: 0 1em 3em 12px;
	text-align: justify;
	background: #ffff01;
}

/************************************************************
CONFIGURATION COLONNE SECONDAIRE (DROITE)
************************************************************/

.droite {
	display: block;
	position: relative;
	margin: 1em 12px 0 764px;
	background: #f0f0f0;
	border: 1px solid #000000;
	padding: 5px 5px 5px 5px;
	width: 180px;
	text-align: justify;
	font-size: 80%;
	/* -moz-border-radius: 8px; */
}

/************************************************************
CONFIGURATION DU PIED DE PAGE
************************************************************/

#pied {
	float: left;
	display: block;
	position: relative;
	width: 970px;
	padding-bottom: 8px;
	text-align: center;
	font-size: 80%;
	background: #f0f0f0;
	border-top: solid 1px;
}


Voilà le résultat escompté (sous FireFox par exemple)
upload/1553-FireFox.png

La même chose sous IE Windows
(Dans ce cas tout est aligné à gauche et la colonne centrale n'est pas centrée dans la page html....) upload/1553-IE.png

En espérant avoir été clair... je vous remercie de votre coup de main Smiley lol
Modifié par nicephore17 (15 Apr 2005 - 23:44)
Bonjour et bienvenue sur Alsacréations nicephore17,

Vite vu, tu sembles très attaché à la position relative... peut être un peu trop Smiley lol au point de l'associer à des float. Un petit tour sur Openweb pour bien assimiler les différents types de positionnement et sur ce billet de Raphaël sur le choix du positionnement: CSS : Quel positionnement choisir ? s'impose. Smiley cligne

Tu pourras ainsi simplifier ta feuille de style:
-Un conteneur centré.
-Une div dimensionnée en largeur à laquelle tu donnes une propriété en float (gauche ou droit).
-Une autre div munie d'un margin (gauche ou droit) d'au moins la largeur de l'élément en float.
-Un pied de page muni d'un clear.

Tu trouveras dans les tutoriels une galerie de gabarits avec ce type construction, et bien d'autres Smiley cligne
Merci beaucoup, j'ai réussit à m'en tirer avec l'utilisation d'un conteneur global.
Ce fut laborieux mais bon...

Il reste encore du travail mais vous pouvez voir le résultat sur mon web: http://www.adminrezo.net

par contre pour un raison que j'ignore il a fallu que j'intègre quelques conteneurs (appelé hack_bas chez moi) avec la propiété clear: both; pour que l'affichage soit réellement propre.
Sujet clos
Aller à