18073 sujets

Questions générales et questions de débutants

[resolu] Compatibilité d'un exemple de blocs...

Bonjour,
Je suis encore à la phase mise en page de mon site (désolé, pas de version online pour le moment) Smiley sweatdrop .
En parcourant les pages d'Alsacréation, j'ai consulté ce lien:
http://www.pixy.cz/blogg/clanky/css-3col-layout/
La technique employée à l'air de résoudre un problème de positionnement de mes blocs (Mise en forme type: Header, Gauche, Droite, Centre, Pied).
Cette solution est-elle couramment utilisée?
L'auteur dit les avoir testées sous différents browser, mais a l'usage, qu'en est-il?
Effectivement, mon bloc "Droite" peut-être, en fonction des pages, plus long que la partie centrale. En me basant sur les Mises en pages du site d'Alsa, je tombe sur un os! Smiley bawling Le texte des parties Gauche et Droite ne redimmenssionne pas ces derniers... D'où la potentielle utilisation de sa class column-in...
En espérant avoir été assez clair, merci de m'avoir lu Smiley cligne
Modifié le 08 Feb 2005 - 17:29
En ce qui concerne ce "layout" :
http://www.pixy.cz/blogg/clanky/css-3col-layout/

Il semble très propre et solide.

J'ai apporté quelques modifications à la feuille de style (sélecteur universel).
J'ai aussi supprimé les guillemets dans l'url des images (inutiles et possibilité d'incompatibilité).

<style type="text/css">
* {padding:0; margin:0;}
	body {
		font:11pt/1.5 sans-serif;
		}
	#header {
		background:yellow;
		}
	#main1 {
		background:yellow url(red.gif) top left repeat-y;
		}
	#main2 {
		background:url(blue.gif) top right repeat-y;
		}
	#left {
		float:left;
		width:150px;
		background:url(corner.gif) top right no-repeat;
		font-size:80%;
		}
	#right {
		float:right;
		width:150px;
		background:url(corner.gif) top right no-repeat;
		font-size:80%;
		}
	#middle {
		margin:0 150px;
		background:yellow;
		font-size:80%;
		}
	.column-in {
		padding:0.5em 1em;
		}
	.cleaner {
		clear:both;
		height:1px;
		font-size:1px;
		border:none;
		background:transparent;
		}
		
	h1,h2,h3,h4 { margin: 0.2em 0 }
	p { margin: 0.5em 0 }
	a { color:black }
	
	.copy { text-align:center; font-size:80% }
</style>

Modifié le 08 Feb 2005 - 11:03
Je vous dirais ça, je travaille dessus Smiley biggol
Et c'est pas gagné... Smiley langue
NB: C'est plus la faute à mon inculture crasse, qu'à la qualité du modèle.
Après lecture et "modifications", puis validation locale, sans contenu, le modèle est bien à mon goût Smiley biggrin .
Seul bémol, je trouve qu'il y a beaucoup de <div> imbriqués. Surement optimisable, non?
Quoi qu'il en soit, merci pour tout.
citronized a écrit :

Seul bémol, je trouve qu'il y a beaucoup de <div> imbriqués. Surement optimisable, non?

Le nombre de <div> a sans doute sa raison d'être (pour un navigateur ou une plate-forme en particulier) dans ce contexte-ci. Le meilleur moyen de le savoir est d'en enlever un et de voir comment le design réagit sur les différentes configurations. Les <div> imbriqués sont transparents, ce n'est pas comme les tables. Si tu t'abstiens d'en rajouter une couche, m'est d'avis que ça passe très bien Smiley cligne .

Sinon, j'ai fait ça pour toi :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="fr">
 <head>
  <title>header - 3cols - footer</title>
  <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
  <meta http-equiv="content-style-type" content="text/css" />
  <style type="text/css" media="all">
* {padding: 0; margin: 0;}
#header { 
}
#gauche { 
   float: left; 
   width: value; 
}
#droite { 
   float: right; 
   width: value; 
}
#centre { 
   margin-right: value; /* largeur de la colonne droite */
   margin-left: value; /* largeur de la colonne gauche */
}
#footer { 
   clear: both; 
}
  </style>
 </head>
 <body>
  <h1 id="header"></h1>
  <div id="gauche"></div>
  <div id="droite"></div>
  <div id="centre"></div>
  <p id="footer"></p>
 </body>
</html>

Noter que dans le cas présent, le flux est "header - gauche - droite - centre - footer"

Voilà !
Il y a effectivement moins d'imbrication de <div> dans ton exemple Smiley cligne
Pour le moment, j'ai fait une sorte de template pour mon site, qui est valide HTML et CSS. Smiley sweatdrop
Je vais voir comment ça se passe lors de l'intégration du contenu! Smiley biggol
Bon, je suis complètement à l'ouest de l'infini, crève oblige, deux de tension...
Mais si ça t'intéresse, je peux te balancer le "code", histoire de jetter un coup d'oeil Smiley cligne . Je ne suis qu'un noob Smiley lol !
Sujet clos
Aller à