1 bloc à gauche et 2 autres à droite, dont un en bas, c'est-y possibl

Question

Mathcoz

24 Aug 2007 à 22:07

Hello,

Bon, mon sujet ayant basculer dans... le coté sombre, je repose la question et donne les prémices de solutions déjà abordées !

je n'arrive pas à faire cette réalisation toute simple :

http://img516.imageshack.us/img516/8190/maquettelm3.jpg

C'est l'entête qui me pose problème.

1] Je n'arrive pas du tout à positionner le "texte 2" en bas à droite de l'entête.

2] comme montré sur le dessin, je voudrais que la couleur de fond de l'entête soit présente sur toute la largeur de la page et toute la hauteur du logo, plus une marge en dessous.

3] je voudrais que si les textes 1 et 2 grandissent, la hauteur de l'entête s'adapte (autrement dit, je ne voudrais pas fixer une hauteur d'entête en pixels).

Les propositions :

a écrit :
Faire un tableau... C'est ce que j'ai actuellement, et je trouve ça tout à fait convenable, c'est juste disons par perfectionnisme que je cherche à savoir s'il y aurait une solution purement CSS.

a écrit :
En CSS avec du JS pour calculer la hauteur de la boite "entete" et positionner en conséquence le bas de "texte 2". Oui, bon, ça doit se faire pas trop difficilement, mais je n'aime pas ce type de solution pour plusieurs raisons qui ne sont pas l'objet de cette discussion. Pour les curieux, en résumé : possibilité de plantage d'autres scripts sur la page, et donc de celui-ci au passage par "contamination" ; possibilité d'interférence avec d'autres scripts ; possibilité d'évolution des navigateurs ou des normes qui risqueraient de rendre inopérant le script ; et enfin, non prise en compte du script par certaines configurations (mais bon, là, est-ce vraiment hyper important d'avoir ce texte bien placé sur des terminaux "exotiques" ??).

Enfin, purement en CSS, une solution très simple proposée par gcyrillus :

<div>

  <h1 style="float:left">Bonjour, et merci de tenter le coup.</h1>

  <p style="float:right">C'est pas mal du tout et vraiment très très simple. Mais, si le texte est un peu long, il saute à la ligne et du coup tout se décale... Sur Firefox. Sur IE, tout fonctionne, bien mystérieusement !</p>

  <p style="clear:left;text-align:right">Donc ça rend beaucoup moins bien que ce que je voudrais</p>

</div>

Comme dit dans le code, sur IE tout fonctionne, mais pas sur Firefox. Très bizarre. Bon début peut-être, mais il doit manquer quelque chose !

Sinon, une dernière idée que j'ai eu mais pas encore testée : mettre le logo en image de fond, fixée, et positionner les deux autres éléments (texte 1 et 2), ça sera peut-être plus facile ??

Voila, donc je suis toujours intéressé par l'avis d'un éventuel Gourou CSS !

Mathieu
Modifié par Mathcoz (24 Aug 2007 - 22:08)

zzzazzz

25 Aug 2007 à 14:44

Bonjour,

Voici peut-être une piste. Une div "tetiere" avec une hauteur fixe, en position relative et ton logo en background. Dans ta "tetiere", un h1positionné en absolute top à -1000 par exemple, (contenant ton img logo pour ceux qui souhaite désactiver le CSS et que l'image apparaissent quand même).
Toujours dans "tetiere" mettons un p qui sera aussi positionné en absolute mais bottom et right, avec une largeur fixe. Donc pas de float au final.

Gihef

25 Aug 2007 à 17:32

Bonjour,

Si je comprends bien, ça fait suite à ce message ?

L'“absolute” me semble être une bonne solution.

Je n'ai pas lu le 1er message entièrement, alors je te propose ça.
L'en-tête en “relative” pour que son contenu y reste cantonné et avec des dimensions et le logo en arrière-plan…
Ensuite les 2 blocs en “absolute” positionnés à droite et respectivement en haut et en bas.

Ce qui pourrait donner (merci de corriger vous-même les fautes (-; )

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
<title>Côte à côte</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <style type="text/css">
    html, body {
      margin: 0;
      padding: 0;
      text-align: center;
      background-color: #b0c4de;
      }
    #conteneur {
      position: relative;
      margin: 0 auto;
      width: 760px;
      text-align: left;
      font-family: Tahoma, 'Trebuchet MS', Verdana, Optima, Papyrus, sans-serif;
      }

.entete {
  position : relative;
  height : 95px;
  background-color : #d1cfe5;
  }
.logo {
  width : 170px;
  height : 95px;
  background : transparent url(http://cjoint.com/data/izrBwLMhcz_logo.jpg) left top no-repeat;
  }
.texte_haut, .texte_bas {
  position : absolute;
  right : 0px;
  width : 580px;
  text-align : right;
  font-size : .9em;
  }
.texte_haut {
  top : 0px;
  color : #1e90ff;
  }
.texte_bas {
  bottom : 0px;
  color : #cd5c5c;
  }
    </style>

</head>
<body>
  <div id="conteneur">
    <div class="entete">
      <div class="logo"></div>
      <div class="texte_haut">C'est pas mal du tout et vraiment très très simple.<br />Mais, si le texte est un peu long, il saute à la ligne et du coup tout se décale&hellip;</div>
      <div class="texte_bas">Donc ça rend beaucoup moins bien que ce que je voudrais.</div>
    </div>
<p>&nbsp;</p>
    <div class="entete">
      <div class="logo"></div>
      <div class="texte_haut" style="z-index:1;">C'est pas mal du tout et vraiment très très simple.<br />Mais, si le texte est un peu long, il saute à la ligne et du coup tout se décale&hellip;<br />Bien-sûr, il ne faut pas abuser. La longueur du texte doit rester proportionnelle à la place disponible. Ce ne sont pas des endroits où on viendra s'épancher, raconter sa vie, ses petits malheurs.<br />Il faudra savoir rester bref.<br />Sinon, on risque de voir apparaître des effets indésirables.</div>
      <div class="texte_bas">Donc ça rend beaucoup moins bien que ce que je voudrais. Donc ça rend beaucoup moins bien que ce que je voudrais. Donc ça rend beaucoup moins bien que ce que je voudrais. Donc ça rend beaucoup moins bien que ce que je voudrais. Etc.</div>
    </div>
  </div>
</body>
</html>

Chez moi, Safari, Firefox ou Opera prennent ça très bien.

On peut en voir pendant quelques jours, un exemple.
Modifié par Gihef (25 Aug 2007 - 17:49)

gcyrillus

Modérateur

26 Aug 2007 à 18:26

bonjour , en repassant et rapidement ,

sans vouloir relancé un troll , le tableau est la solution la plus sur pour ce genre de rendu , sinon on tombe dans la le display:table avec une alternative pour IE:

L'idée d'un position absolue pour l'un des deux texte est bonne , il faut pour cela garder un degagement dans le second (+ doctype valide pour IE).

Un gabarit de ta page en exemple , moins solide qu'un tableau :

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<title>test</title>
<style type="text/css"  >

html , body {height:100%;background:#eee;}
html , body , h1 , p {margin:0;padding:0;}
#global {background:#fff;width:760px;
position:relative;
margin:auto;
min-height:100%;height:auto!important;height:100%;}

#entete {
display:table;
height:200px;
width:100%;
}
#entete , #pied {
background:#D1CFE5;
text-align:center;vertical-align:middle;
}

#entete h1 {width:200px;display:table-cell;vertical-align:bottom;height:200px;}
#entete h1 img {height:200px;;width:200px;vertical-align:bottom;/* ou top mais pas baseline*/}
#entete p {display:table-cell;}

p.haut {position:absolute;vertical-align:top;top:0;text-align:right;right:0;
width:550px;padding:5px;}
p.bas {vertical-align:bottom;width:550px;padding:5px;padding-top:7em;/* marge de 6 lignes environ */color:green;}

#pied {
position:absolute;
width:760px;
bottom:0;
left:0;
padding:1em 0;
}
#contenu {padding-bottom:4.4em;/* donne  2lignes de textes approximativement pour le pied (inclus marge interieur du pied )*/}
</style>  
 <!--[if IE]>
<style type="text/css"  >
#entete {

}
#global #entete h1 , #entete p {
display:inline;
zoom:1;} 
</style>  
<![endif]-->
</head>
<body>
<div id="global">
	<div id="entete">
		<h1><img src="http://forum.alsacreations.com/avatars/2857-avatar-gc.jpg" alt="simili logo" /></h1>
		<p class="haut">C'est pas mal du tout et vraiment très très simple. Mais, 
		si le texte est un peu long, il saute à la ligne et du coup tout se décale...
		C'est pas mal du tout et vraiment très très simple. Mais, 
		si le texte est un peu long, il saute à la ligne et du coup tout se décale...
		C'est pas mal du tout et vraiment très très simple. Mais, 
		La on fixe arbitrairement 6 lignes degagé par le padding du second texte dans le flux.</p>
		<p class="bas">Donc ça rend beaucoup moins bien que ce que je voudrais   decu <br/>
		Donc ça rend beaucoup moins bien que ce que je voudrais   decu <br/>
		Donc ça rend beaucoup moins bien que ce que je voudrais   decu <br/>
		1 degagement au dessus de 7em , laisse aproximativement la place a 6 lignes de texte pour le block superieur.</p>
	</div>
	<div id="contenu">
	<p>Contenu</p>
	</div>
	
	<p id="pied">
	pied
	</p>

</div>
</body>

</html>

en ligne : http://gcyrillus.free.fr/essai/test-gab.html

Maintenant si tu souhaite toujours passer par le css , c'est risqué est compliqué.

GC
Modifié par gcyrillus (27 Aug 2007 - 00:04)

Sujet clos

CSS et mise en forme, CSS3

1 bloc à gauche et 2 autres à droite, dont un en bas, c'est-y possibl