Aide pour un design liquide

17 sept. 2006, 14:21

Bonjour,
je suis sur un design liquide, jusque là en utilisant le positionnement floatant sa allait, seulement le contenu (texte) est dynamique et donc doit impérativement s'adapter à la largeur et auteur.
http://creatif-web.be/assoc/index.php
mais le soucis c'est qu'un texte sur une image répéter en x ce qui est le cas pour la head (sa permet au design de s'adapter à toutes les résolutions). Mais le texte en arrière plan donc il est invisible.
J'ai pensé au tableau, qui comme phpbb s'adapte naturellement au contenu, mais je ne vois pas comment, si quelqu'un pouvait me metre sur la voix, avec un pseudo code.
Merci.

20 sept. 2006, 08:23

tu parle de ceci?

Code : Tout sélectionner

#baniere_centre {
position:relative;
left:-3px;
background:transparent url(../img/soleil_03.png);
background-repeat:repeat-x;
display:block;
height:154px;
z-index:1;
}

en tout cas je vois pas de text qui n'apparait pas dans ton code

essaye d'être plus précis car ce n'est pas une perte de temps en cela favorise les réponses à tes questions

BeRoots, qui aime bien quand les liens vers le css sont données aussi

20 sept. 2006, 09:35

pour adapter aautomatiquement un contenu aux dimensions (largeur/hauteur) d'un conteneur il faut donner un style au contenu qui fixe ses dimensions (largeur/hauteur) à 100%.

Exemple :

Code : Tout sélectionner

<div class="auto_dimensions encadre">

  <p>Texte dans le div et blllllllllllablllllllllllllllllllllllllllllllllllllllllllllllalllllllllllllllbll
  bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
  blllllllllllablllllllllllllllllllllllllllllllllllllllllllllllalllllllllllllllbll
  bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
  blllllllllllablllllllllllllllllllllllllllllllllllllllllllllllalllllllllllllllbll
  bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
  blllllllllllablllllllllllllllllllllllllllllllllllllllllllllllalllllllllllllllbll
  bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbla</p>


 <div class="dimensions_fixes encadre">

  <p>Texte dans le div et blllllllllllablllllllllllllllllllllllllllllllllllllllllllllllalllllllllllllllbll
  blllllllllllablllllllllllllllllllllllllllllllllllllllllllllllalllllllllllllllbll
   blllllllllllablllllllllllllllllllllllllllllllllllllllllllllllalllllllllllllllbll
  bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbla</p>

 </div>

</div>

<style>
.auto_dimensions {width:100%; height:100%}
.dimensions_fixes {width:200px; height:200px}
.encadre {border-style:solid; border-width:1px}
</style>

20 sept. 2006, 15:11

Mon contenu s'adpte autexte, le problème c'est que je voudrai qu'il suive l'entete sans créer d'ascensseur au changement de résolution.
il me crée un ascensseur ?
Je galère, la solution doit pouvoir être crée.

20 sept. 2006, 17:39

je décortique se site qui se sert de la même technique, mais sont code n'a même pas d'indentation, un cauchemard... mdr
http://www.ilovejackdaniels.com/cheat-s ... eat-sheet/

20 sept. 2006, 17:53

à tu essayer de rajouter un overflow: visible; dans la css?

overflow:visible: l'element sera agrandi de manière à ce que son contenu soit completement visible dans tout les cas

20 sept. 2006, 18:44

Je donne mon code ....

Code : Tout sélectionner

/********************* contenu ************************/

#contenu {
position:absolute;
left:0px;
top:0px;
}
/*#contenu_right {
float:right;
background:transparent url(../img/blanc.gif) no-repeat top left;
height:125px;
width:26px;
color:#000000;
margin-right:130px;
margin-top:2px;
}*/
#contenu_centre {
margin-left:0px;
margin-top:167px;
margin-right:260px;
/*background:transparent url(../img/blanc.gif) repeat-x top left;*/
display:block;
width:80%;
height:100%;
overflow:visible;
}
/*************************** contenu texte ********************************/
#contenu_centrale {
font-size:0.9em;
/*position:absolute;*/

background:#fff;
line-height:1.4em;
/*margin:41px 20px 0px 255px;*/
margin-top:41px;
margin-left:255px;
margin-right:20px;
margin-bottom:0px;
min-height:20em;
padding:20px 0 0 30px;
height:500px;
}
#contenu_texte {
width:70%;
height:80%;
margin-top:0px;
margin-bottom:30px;
margin-left:0px;
}

xhtml

Code : Tout sélectionner

	<!------------------------------ Contenu -------------------------------->	
		
<div	id="contenu">			
	<div id="contenu_centre">
								
	</div>
	<div id="contenu_centrale">

		<div id="contenu_texte">
sssssssssssssssssddddddddddssssssssssssssssssss
ssssssssssssssddddddddddssssssssssssssssssssssssss
ssssssssddddddddddssssssssssssssssssssssssssssssssssd
dddddddddssssssssssssssssssssssssssssssssssddddddddd
dssssssssssssssssssssssssssssssssssddddddddddssssssssss
ssssssssssssssssssssssssddddddddddsssssssssssssssssssss
sssssssssssssddddddddddssssssssssssssssssssssssssssss
ssssddddddddddssssssssssssssssssssssssssssssssssddddd
dddddssssssssssssssssssssssssssssssssssddddddddddssss
sssssssssssss
		</div>
	</div>
	<div id="contenu_pied_left">

	</div>
	<div id="contenu_pied_right">
		<p id="contenu_pied">
			<span class="credit_par">
				Développeur&nbsp;
			</span>
			<span class="credit">
				Xavier Artot&nbsp;
			</span>
			<span class="credit_par">
				pour&nbsp;
			</span>
			<span class="credit">
				les Citoiliens&nbsp;
			</span>
			<span id="fleur">
			
			</span>	
		</p>	
	</div>
</div>
	<!------------------------------ Fin du contenu -------------------------------->

20 sept. 2006, 19:12

je suis revenu à 0, donc j'ai fais sa :

Code : Tout sélectionner

	<!------------------------------ Contenu -------------------------------->	
	<div id="contenu_centrale">
		<p>
sssssssssssssssssddddddddddsssssssssssssssqdfsdfsdfsdfsdfssssssssss
sssssssddddddddddsssssssssssssssqdfsdfsdfsdfsdfssssssssssssssss
sddddddddddsssssssssssssssqdfsdfsdfsdfsdfsssssssssssssssssddd
dddddddsssssssssssssssqdfsdfsdfsdfsdfsssssssssssssssssddddddd
dddsssssssssssssssqdfsdfsdfsdfsdf
		</p>
	</div>

puis comme css

Code : Tout sélectionner

#contenu_centrale {
width:70%;
height:100%;
overflow:visible;
background:#999999;
}

et le résultat sur une page de test est bon
http://creatif-web.be/assoc/essai_redimensionnement.php
mais dans ma feuille sa donne sa :
http://creatif-web.be/assoc/index.php
Complètement incompréhensible.

20 sept. 2006, 19:46

j'ai trouvé, c'était le texte en %.

20 sept. 2006, 19:51

enfin je le croyait mais sous ff sa plante.

20 sept. 2006, 21:54

tu peut peut être essayer de jouer sur les conteneurs...

genre une div conteneur au bonne dimension et une autre en overflow: visible; sans paramètre de largeur et hauteur

20 sept. 2006, 23:02

justement il n'y a pas de définition prédéfinie sa doit s'adapter à la résolution de l'utilisateur.

20 sept. 2006, 23:07

pour FF j'ai fais sa, mais sa fonctionne pas en 800*600

Code : Tout sélectionner

html>body div.auto_dimensions {
margin-right:10px;
margin-left:255px;
padding-top:350px;
padding-right:-350px;
width:71%;
height:100%;
overflow:visible;
background:#fff;
font-size:80%
}

21 sept. 2006, 09:04

est ce que t'on texte déborde sous FF?

si c'est le cas, j'ai eut le même problème la semaine dernière et cela venai d'un problème de cesure à cause de cette mauvaise habitude de tester avec des textes du genre:

Code : Tout sélectionner

<p>zzzzzzzzzzzzxxxxxxxxxxxxxxxxzzzzzzzzz
zzzzzzzzzxxxxxxxxxxxxxxxxzzzzzzzzzzzzzzzzzzzxxxx
yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyxxxxxxxx</p>

pour faire ça dans les regle de l'art, utilise le Lorem ipsum.

c'est fait pour

21 sept. 2006, 13:48

non c'est le bloc mais que en 800 * 600 sous ff

Aide pour un design liquide

Qui est en ligne