Page 1 sur 2
Aide pour un design liquide
Posté : 17 sept. 2006, 14:21
par artotal
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.
Posté : 20 sept. 2006, 08:23
par BeRoots
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 
Posté : 20 sept. 2006, 09:35
par sadeq
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>
Posté : 20 sept. 2006, 15:11
par artotal
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.
Posté : 20 sept. 2006, 17:39
par artotal
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/
Posté : 20 sept. 2006, 17:53
par BeRoots
à 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
Posté : 20 sept. 2006, 18:44
par artotal
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
</span>
<span class="credit">
Xavier Artot
</span>
<span class="credit_par">
pour
</span>
<span class="credit">
les Citoiliens
</span>
<span id="fleur">
</span>
</p>
</div>
</div>
<!------------------------------ Fin du contenu -------------------------------->
Posté : 20 sept. 2006, 19:12
par artotal
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.
Posté : 20 sept. 2006, 19:46
par artotal
j'ai trouvé, c'était le texte en %.
Posté : 20 sept. 2006, 19:51
par artotal
enfin je le croyait mais sous ff sa plante.
Posté : 20 sept. 2006, 21:54
par BeRoots
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
Posté : 20 sept. 2006, 23:02
par artotal
justement il n'y a pas de définition prédéfinie sa doit s'adapter à la résolution de l'utilisateur.
Posté : 20 sept. 2006, 23:07
par artotal
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%
}
Posté : 21 sept. 2006, 09:04
par BeRoots
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
Posté : 21 sept. 2006, 13:48
par artotal
non c'est le bloc mais que en 800 * 600 sous ff