[Résolu]Comment aligner des blocs en pourcentages et en pixels ?

Question

Alphajet

22 Jul 2005 à 16:27

Bonjour à tous,

sous ce titre pas forcément explicite, je vais essayer d'expliquer mon cas. Voici une maquette d'un site que je suis en train de réaliser (maquette non définitive, mais qui donne nettement l'idée de ce qu'on veut).

http://alphajet.free.fr/images/gci.png

Pour la partie haute, avec le menu, pas de problème. Idem pour les deux bandes verticales entourant le centre. Mon problème se situe au niveau du centre.

La page telle qu'elle sera présentée est une page d'accueil. On y trouve donc plusieurs infos :
- le bloc en haut à gauche sera un éditorial, dont la longueur varie donc
- le bloc en haut à droite sera une liste de titres d'actualités avec quelques lignes
- le bloc du bas sera lui, une liste d'articles de presse à consulter en entier par un lien.

Le design du site est pour le moment prévu pour être extensible, donc le bloc central contenant les 3 sous blocs devra donc rester extensible, les bords, eux, ne bougeant pas.

En admettant que les 2 blocs du haut (edito et actus) soient de hauteur équivalentes, comment conserver un design cohérent en toute résolution (et évidemment sur tout navigateur, du moins au minimum IE&Mozilla)??
Bref comment gérer la hauteur et la largeur de tout cet ensemble pour conserver un design agréable pour l'utilisateur ?

Merci de vos suggestions par avance Smiley smile

Modifié par Alphajet (28 Jul 2005 - 09:38)

Alphajet

25 Jul 2005 à 14:19

Bonjour,
Mon sujet ne passionne guère les foules Smiley cligne

mais je rajoute un peu de code pour vous montrer.

CSS


.centre {
    float: none ;
    width: auto ;
    font-family: "Verdana", "Arial", "Helvetica", "sans-serif";
    font-size: 10pt ;
    color: #000000;
    
    margin: 0 140px 0 130px ;
    
    border-style: solid ;
    border-color: blue ;
    border-width: 1px ;
}

.barre1 {
    position: absolute ;
    left: 0 ;
    width: 130px ;
    margin: 0 ;
    padding: 0 ;
    border-style: solid ;
}

.barre2 {
    position: absolute ;
    right: 0 ;
    width: 130px ;
    margin: 0 ;
    padding: 0 ;
    border-style: solid ;
}

.edito {
    /*position: relative ;*/
    float: left ;
    width: 39% ;
    height: 300px ;
    /*top: 0 ;
    left: 0 ;
    
    margin: 135px 0 0 140px ;*/
    
    border-style: inset ;
    border-width: 2px ;
    border-color: rgb(51,153,0) ;
}

.actualite {
    /*position: relative ;*/
    float: left ;
    /*top: 0 ;
    right: 0 ;
    
    margin: 135px 140px 0 0 ;*/
    
    width: 59% ;
    height: 300px ;

    border-style: inset ;
    border-width: 2px ;
    border-color: rgb(51,153,0) ;
}

.articles {
    position: relative ;
    /*margin-left: 130px;*/
    margin-top: 10px;
    width: 100% ;
    border-style: inset ;
    border-width: 2px ;
    border-color: rgb(51,153,0) ;
}

Le code HTML que j'ai volontairement dégagé pour ne laisser que le nécessaire. Il ne s'agit que de la partie centrale qui m'intéresse.


<div class="barre1">
    <div class="pub2">PUB</div>
  </div>

  <div class="barre2">
    <div class="pub3">PUB</div><hr />
    <div class="cours">BLE TENDRE<br />101 euro/t<br />En hausse</div><hr />
    <div class="cours">MAIS<br />213 euro/t<br />En baisse</div><hr />
  </div>
  
  <div class="centre">
  
    <div class="edito">
      <div class="titrerub">Editorial</div>

    </div>
    
    <div class="actualite">
      <div class="titrerub">L'actualité des grandes cultures</div>

    </div>
    
    <hr class="spacer">
    
    <div class="articles">
      <div class="titrerub">Consulter les articles de Grandes Cultures infos</div>
      <div class="titressrub" style="text-decoration:underline;">GCi n°160, Juin 2005</div>

    </div>
  </div><!-- Fin centre -->

Je rappelle que je voudrais avoir une page extensible automatiquement en largeur, que les 2 blocs côte à côte auront une hauteur fixée, et devront aussi s'étendre en largeur. Le bloc du dessous n'aura pas de hauteur et devra s'étendre aussi en largeur.

Là avec le code que j'ai posté, le résultat est correct sous Mozilla, mais pas sous IE, qui me prend 39% et 59% de la taille de la fenetre, et non pas du "div centre". Je pense que cela doit être du au fait que le float:left fait sortir du flux les 2 blocs du haut.

Du coup, j'ai tenté de résoudre le problème avec des blocs en position absolute, mais je ne vois pas bien comment mes blocs pourront s'étendre proprement en largeur en toute résolution...

Merci d'avance pour toute suggestion!

momo-fr

25 Jul 2005 à 14:44

Tu veux quelque chose qui soit ré-équilibré suivant le type d'affichage ?

Un truc dans ce style ? par exemple, mais là il y du javascript.

Sinon il y a des solutions pour pousser le bas suivant n'importe lequel des bloc (centraux) mais je ne vois pas de solution élégante qui te refait la mise en page suivant le façon dont tu tires ta fenêtre... mais j'ai peut-être pas bien saisi où est ton problème... Smiley rolleyes

Alphajet

25 Jul 2005 à 15:19

Euhm je ne sais pas si tu as saisi le problème, c'est vrai que c'est difficile de se comprendre Smiley cligne

.

Bref, dans ma partie centrale, je veux :
- 2 blocs côte à côte dont j'aurais spécifié la hauteur, fixe donc, mais qui s'élargissent avec un agrandissement de la fenetre (le div centre est en width:auto)
- 1 bloc en dessous donc la longueur importe peu, et qui s'élargit aussi selon la taille de la fenêtre
- que ça fonctionne sous IE ET Mozilla (ce qui n'est pas le cas actuellement comme j'essayais de l'expliquer)

tyx

25 Jul 2005 à 15:43

Plop,

bon comme tu nous a pas mis de page de test, j'ai du m'en faire une ^^


<!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" lang="fr" xml:lang="fr">
	<head>
		<meta http-equiv="Content-Language" content="fr-FR" />
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<meta http-equiv="Content-Script-Type" content="text/javascript" />
		<meta http-equiv="Content-Style-Type" content="text/css" />
		
		<title>Headshok</title>
		<style type="text/css">
		h2 { margin: 0 ; }
		#centre {
			width: 75% ;
			background-color: #CCC ;
			margin: 0 auto ;
		}
		
		#edito {
			float: left ;
			width: 39% ;
			height: 100px ;
			background-color: #FFCC00 ;
		}
		
		#actualite {
			width: 59% ;
			background-color: #000099 ;
			float: left ;
			height: 100px ;
		}
		
		#articles {
			clear: both ;
			width: 100% ;
			background-color: #0F0 ;
		}
		
		</style>
	</head>
	<body>
			
		<div id="centre">
		
			<div id="edito">
				<h2>Editorial</h2>
			
			</div>
		
			<div id="actualite">
				<h2>L'actualité des grandes cultures</h2>
		
			</div>
		
		
			<div id="articles">
				<h2>Consulter les articles de Grandes Cultures infos</h2>
				<h2>GCi n°160, Juin 2005</h2>
		
			</div>
		</div>
	
	</body>
</html>

Donc ici, en changeant la largeur de #centre, les blocs à l'intérieur continuent à prendre sa largeur totale. Il reste à l'adapater à ta mise en page.

Au passage, je te recommande l'emploi de balise de titre pour tes titres et d'id pour les éléments uniques de ta page, comme je l'ai fait sur ma page de test.

Si c'est dans le contexte de ta mise en page que ca bloque, il faudra en montrer plus ^^
Modifié par tyx (25 Jul 2005 - 15:44)

Alphajet

25 Jul 2005 à 16:37

Bon voilà je voulais éviter de poster tant de lignes de code mais bon, ça sera probablement plus simple Smiley smile

CSS


body {
    margin: 0 0 0 0 ;
    background-color: white ;
    font-family: "Verdana", "Arial", "Helvetica", "sans-serif";
}
.titre {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	text-align: center ;
	color: #FFFFFF;
	background-color: #FFB500 ;
}
.titrerub {
	font-size: 12px;
	font-weight: bold;
	letter-spacing: 2px ;
	background-color: rgb(51,153,0);
  color: white ;
  text-align: center;
  margin: 0 ;
  border-bottom-style: solid ;
  border-bottom-width: 2px ;
  border-bottom-color: black ;
}
.titressrub {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
	font-weight: bold ;
	margin: 0 ;
	padding-left: 2px ;
}
.texte {
	/*font-family: Arial, Helvetica, sans-serif;*/
	font-size: 10pt;
	color: #000000 ;
	padding-left: 2px ;
}

/*------------------------------- Sections -----------------------------------*/
.top {
    width: 100% ;
    height: 125px ;
    
    background-color: #FEB300 ;
}

.logo {
    width: 200px ;
    height: 53px ;
    float: left ;
    margin-left: 5px ;
}

.identification {
    width: 200px ;
    height: 75px ;
    float: right ;
    
    font-size: 10pt ;
    padding: 2px 2px 2px 2px ;
    margin: 5px 5px 5px 0 ;
    
    border-style: solid ;
    border-width: 1px ;
    border-color: rgb(51,153,0) ;
}

.barremenu {
    height: 40px ;
    clear: both ;
    
    background-color: #FFD062 ;
}

.grand {
    position: absolute ;
    width: 100% ;
}

.centre {
    float: none ;
    width: auto ;
    font-family: "Verdana", "Arial", "Helvetica", "sans-serif";
    font-size: 10pt ;
    color: #000000;
    
    margin: 5px 130px 0 130px ;
    padding: 5px 5px 5px 5px ;
    
    border-style: solid ;
    border-color: green ;
    border-width: 1px ;
}

.barre1 {
    position: absolute ;
    left: 0 ;
    width: 130px ;
    margin: 0 ;
    padding: 0 ;
    /*border-style: solid ;*/
}

.barre2 {
    position: absolute ;
    right: 0 ;
    width: 130px ;
    margin: 0 ;
    padding: 0 ;
    /*border-style: solid ;*/
}

.edito {
    /*position: relative ;*/
    float: left ;
    width: 39% ;
    height: 40% ;
    /*top: 0 ;
    left: 0 ;*/
    
    margin: 0 ;
    
    border-style: inset ;
    border-width: 2px ;
    border-color: rgb(51,153,0) ;
}

.actualite {
    /*position: relative ;*/
    float: left ;
    /*top: 0 ;
    right: 0 ;*/
    
    margin: 0 0 0 5px ;
    
    width: 59% ;
    height: 40% ;

    border-style: inset ;
    border-width: 2px ;
    border-color: rgb(51,153,0) ;
}

.articles {
    position: relative ;
    /*margin-left: 130px;*/
    margin-top: 10px;
    width: 100% ;
    border-style: inset ;
    border-width: 2px ;
    border-color: rgb(51,153,0) ;
}
/*------------------------------- Publicité ----------------------------------*/
.pub1 {
    width: 460px ;
    height: 60px ;
    float: left ;
    margin: 5px 0 0 30px ;
    
    background-color: LightGrey ;
}

.pub2 {
    width: 120px ;
    height: 242px ;
    margin: 5px 0 5px 5px ;
    
    background-color: LightGrey ;
}
.pub3 {
    width: 120px ;
    height: 242px ;
    margin: 5px 5px 5px 5px ;
    
    background-color: LightGrey ;
}
/*--------------------------------- Spacer -----------------------------------*/
.spacer {
    clear: both ;
    height: 0px ;
    margin: 0 ;
    padding: 0 ;
    visibility: hidden ;
}


/*-------------------------------- Liens -----------------------------------*/
.lienmenu:hover {
	font-family: "Verdana", "Arial", "Helvetica", "sans-serif";
	font-weight: normal;
	font-size: 1em ;
  letter-spacing: 2px ;
	color: rgb(51,153,0);
	text-decoration: none ;
}
.lienmenu:active {
	font-family: "Verdana", "Arial", "Helvetica", "sans-serif";
	font-weight: normal;
	font-size: 1em ;
  letter-spacing: 2px ;
	color: rgb(51,153,0);
	text-decoration: none ;
}
.lienmenu {
	font-family: "Verdana", "Arial", "Helvetica", "sans-serif";
	font-weight: normal;
	font-size: 1em ;
  letter-spacing: 2px ;
	color: black ;
	text-decoration: none ;

}
/*------------------------------ Formulaires ---------------------------------*/
.ident {
    background-color: #FFD062 ;

}

HTML


<!DOCTYPE HTML public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Grandes Cultures infos, toute l'actualité et les dossiers pour les grandes producteurs.</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15">
<link rel="stylesheet" href="/style/style.css" type="text/css">
</head>
<body>

<div class="grand">

<div class="top">
  <div class="logo">
    <a href="/index.php" >****** ICI LE LOGO GRANDES CULTURES ******</a>
  </div>

  <div class="pub1">
    <img width="460" height="70" src="/images/publicite/logoagricommand3.jpg" />
  </div>

  <div class="identification">
    <div class="titrerub">Identifiez-vous</div>
    <form id="identif" action="xxxxxxxxxx">
      <div style="margin-top:3px; margin-bottom:3px;"><label for="login">Identifiant : </label><input class="ident" style="margin-left:21px" type="text" id="login" size="10" maxlength="10"/></div>
      <div style="margin-top:3px; margin-bottom:3px;"><label for="login">Mot de passe : </label><input class="ident" type="text" id="login" size="10" maxlength="10"/></div>
    </form>
  </div>

  <div class="barremenu">
    <a class="lienmenu" style="margin-left:0" href="/index.php">Accueil</a>
    <a class="lienmenu" style="margin-left:60px" href="/modules/actu/frontoffice/menu_actu.php">Hors Série</a>
    <a class="lienmenu" style="margin-left:45px" href="/modules/actu/frontoffice/menu_actu.php">Cours et marchés</a>
    <a class="lienmenu" style="margin-left:120px" href="/modules/actu/frontoffice/menu_actu.php">Plan du site</a>
    <br />
    <a class="lienmenu" style="margin-left:50px" href="/modules/actu/frontoffice/menu_actu.php">Actualités</a>
    <a class="lienmenu" style="margin-left:70px" href="/modules/actu/frontoffice/menu_actu.php">Articles</a>
    <a class="lienmenu" style="margin-left:100px" href="/modules/actu/frontoffice/menu_actu.php">Contacter la rédaction</a>
    <a class="lienmenu" style="margin-left:40px" href="/modules/actu/frontoffice/menu_actu.php">Nos liens</a>
  </div>
</div>

<!-- Fin Top -->

  <div class="barre1">
    <div class="pub2">PUB</div>
  </div>

  <div class="barre2">
    <div class="pub3">PUB</div><hr />
    <div class="cours">
      <fieldset><legend>Cours</legend>
            <div class="titressrub">Prix du Blé tendre</div>
      <div class="texte">Au 20/07/2005</div>
      <div class="texte">102.5 &euro;/t</div>
      <img src="/images/hausse.png" />
      <hr />
            <div class="titressrub">Prix du Maïs</div>
      <div class="texte">Au 20/07/2005</div>
      <div class="texte">101 &euro;/t</div>
      <img src="/images/stable.png" />
      <hr />
            <div class="titressrub">Prix du Colza</div>
      <div class="texte">Au 20/07/2005</div>
      <div class="texte">213 &euro;/t</div>
      <img src="/images/baisse.png" />
      <hr />
            </fieldset>
    </div>
  </div>
  
  <div class="centre">
  
    <div class="edito">
      <h2 class="titrerub">Editorial</h2>
      <h3 class="titressrub">Tours de passe-passe</h3>
      <div class="texte" style="font-style:italic;">Par Nancy Yana</div>
      <p class="texte">
      Rien ne se cr&eacute;e,  rien ne se perd, tout se transforme. L'agriculture ne d&eacute;roge pas &agrave; cette r&egrave;gle...sauf que le b&eacute;n&eacute;fice de la transformation change parfois dramatiquement de main. C'est le constat fait par L'APCA : s'appuyant sur une &eacute;tude de l'Insee, elle souligne la baisse des prix agricoles de plus de 50 % sur 25 ans et la hausse de ceux pay&eacute;s par les consommateurs. O&ugrave; est pass&eacute;e la diff&eacute;rence ? &quot;Dans la constitution d'un complexe agro-alimentaire puissant&quot;, r&eacute;pond Luc Guyau, pr&eacute;sident de l'...      </p>
      <a href="/modules/actu/frontoffice/menu_actu.php?lire=edito">Lire la suite...</a>
    </div>
    
    <div class="actualite">
      <h2 class="titrerub">L'actualité des grandes cultures</h2>
            <h3 class="titressrub">Génie génétique : les citoyens de l'UE sont peu inquiets, mais souhaitent être mieux informés</h3>
      <div class="texte"><i>Le 25/07/2005</i></div>
      <div class="texte">Un sondage Eurobaromètre effectué dans les 25 pays membres de l'UE au sujet des craintes des citoyens liées à l'environnement a révélé qu&#8217;à peu près la moitié des personnes interrogées ont cité la pollution de l'eau et de l'air, le changement de climat et les catastrophes naturelles.</div>
      <hr />
            <h3 class="titressrub">Les génomes de plantes transgéniques sont stables</h3>
      <div class="texte"><i>Le 25/07/2005</i></div>
      <div class="texte">La Commission du génie biomoléculaire (CGB) a rendu publique le 13 juin dernier, à l&#8217;occasion de son bilan annuel, un rapport sur &#8220; la fluidité des génomes et ses conséquences &#8220;</div>
      <hr />
            <h3 class="titressrub">Chrysomèle du maïs : un nouveau foyer détecté en Ile-de-France</h3>
      <div class="texte"><i>Le 25/07/2005</i></div>
      <div class="texte">La chrysomèle du maïs fait à nouveau parler d&#8217;elle : le laboratoire national de la protection des végétaux a en effet confirmé, le 10 juillet, la présence d&#8217;un individu de chrysomèle des racines du maïs dans la commune de Gouvernes (Seine-et-Marne).</div>
      <hr />
          </div>
    
    <hr class="spacer">
    
    <div class="articles">
      <h2 class="titrerub">Consulter les articles de Grandes Cultures infos</h2>
      <h3 class="titressrub" style="text-decoration:underline;">GCi n°160, Juin 2005</h3>
            <div class="titressrub"></div>
      <div style="font-style:italic;"></div>
      <hr />
            <div class="titressrub">Grandes cultures</div>
      <div style="font-style:italic;">test2</div>
      <hr />
            <div class="titressrub"></div>
      <div style="font-style:italic;"></div>
      <hr />
            
    </div>    
  </div><!-- Fin centre -->
  
</div><!-- Fin grand -->

Voilà j'espère que ce que je voudrais faire sera plus parlant comme ça. (Considérez par contre que les blocs édito et actualités seront de la même hauteur, tout ça est encore en chantier Smiley sweatdrop

)

J'espère que je n'ai rien enlevé en trop en allégeant mon fichier CSS
Modifié par Alphajet (25 Jul 2005 - 16:38)

tyx

25 Jul 2005 à 17:01

L'idéal aurait été une page en ligne histoire de visualiser l'histoire et de tester direct dans le contexte.

Alphajet

25 Jul 2005 à 17:04

Oui je sais bien que le mieux aurait été la page en ligne Smiley smile

mais actuellement, rien n'est encore en ligne justement, je ne peux pas encore le faire (enfin si, sur un site perso, mais bon ça n'est pas le but)

momo-fr

25 Jul 2005 à 22:41

Est-ce que ça te conviendrait ?

Je voit pas trop comment tu compte faire tenir ton texte si tu ne laisse pas la hauteur libre, ici j'ai laissé couler tes blocs edito et actu et je pousse le bloc du bas avec mrpropre™ Smiley lol

(vois la feuille de style) Smiley ravi

Tu as les fichiers dans une archive .zip ici
Modifié par momo-fr (25 Jul 2005 - 22:43)

Alphajet

26 Jul 2005 à 09:55

Salut et merci pour ton aide momo-fr, mais... ça s'affiche correctement sous IE chez toi Smiley sweatdrop

?? Pas chez moi en tout cas, le bloc actualités passe en dessous de l'édito.

Pour la hauteur, je me débrouille pour tronquer le tronquer le texte à peu près à la bonne hauteur. Et pour le mrpropre, c'est le même principe que mon hr "spacer" Smiley cligne

Alphajet

26 Jul 2005 à 17:15

Je vais essayer de mieux vous cerner le problème:

En gros dans cette présentation, il y a "4 colonnes"

- 2 colonnes de chaque côté de la fenêtre et qui ont une largeur définie en pixels

- 2 colonnes côte à côte au centre qui doivent pouvoir s'élargir et qui ont donc une largeur en pourcentage

Le problème est que je n'arrive pas à avoir ces 4 colonnes placées correctement sous Internet Explorer, cela marchant correctement avec Mozilla.

J'espère que j'ai été plus clair.

Alphajet

27 Jul 2005 à 14:44

Personne ne voit ce que je veux dire, ou bien personne n'a de solution? Smiley biggrin

Pour récapituler, j'ai deux "bandes" verticales de 130 pixels positionnées sur les bords gauche et droit de la fenetre. Et je voudrais avoir une partie au centre qui prend la place restante, au sein de laquelle doivent se trouver 2 blocs qui doivent s'adapter en largeur (c'est pour cela que j'ai mis leur largeur en pourcentage), avec respectivement 39% et 59% de l'espace restant.

Sous Mozilla, j'arrive à un bon résultat, mais pas sous IE, qui systématiquement génère soit le passage d'un bloc un au dessus de l'autre, soit le bloc central qui fait 100% de la taille de la fenetre et décalé vers la droite (selon les méthodes que j'utilise).

La solution la "moins pire" que j'ai trouvée est celle qui a été suggérée ici, c'est à dire de mettre le bloc central avec une largeur en pourcentage pour IE spécifiquement. Mais malheureusement, cela ne donne pas un résultat très bon en fonctions des différentes résolutions...

Merci si quelqu'un répond Smiley smile

Alphajet

28 Jul 2005 à 09:22

Re-edit : Problème finalement résolu, grâce au Forum Hardware

Pour que IE tienne compte de la largeur automatique du bloc parent, on l'encadre dans un autre bloc parent (son ancêtre est donc le bloc centre).

Un peu de code pour que ça soit plus clair :
CSS


.centre {
    position: static ;
    margin: 5px 130px 0 130px ;
    padding: 5px 5px 5px 5px ;
}

#contenu {
    width: 100% ;
}

.barre1 {
    position: absolute ;
    left: 0 ;
    top: 130px ;
    width: 130px ;
    margin: 0 ;
    padding: 0 ;
}

.barre2 {
    position: absolute ;
    top: 130px ;
    right: 0 ;
    width: 130px ;
    margin: 0 ;
    padding: 0 ;
}

.edito {
    float: left ;
    width: 39% ;
    height: 360px ;
    margin: 0 ;
}

.actualite {
    float: right ;
    margin: 0 ;
    width: 59%;
    height: 360px ;
}

.articles {
    position: static ;
    margin-top: 10px;
    width: 100% ;
}

ensuite en gros, en HTML on a


  <div class="barre1">
    <div class="pub2">PUB</div>
  </div>

  <div class="barre2">
    <div class="pub3">PUB</div>
  </div>
  
  <div class="centre">
  <div id="contenu">
  
    <div class="edito">
      <h1>Editorial</h1>
    </div>
    
    <div class="actualite">
      <h1>L'actualité des grandes cultures</h1>
    </div>
    
    <hr class="spacer">
    
    <div class="articles">
      <h1>Consulter les articles de Grandes Cultures infos</h1>
    </div>

  </div><!-- Fin contenu -->
  </div><!-- Fin centre -->

Voilà...
Modifié par Alphajet (28 Jul 2005 - 09:50)

Sujet clos