Sujet Précédent Sujet Suivant

Problème de CSS scrollbar [résolu]

Fermé
Neron05 Messages postés 18 Date d'inscription dimanche 27 février 2011 Statut Membre Dernière intervention 17 avril 2011 - Modifié par Neron05 le 1/03/2011 à 13:35
Neron05 Messages postés 18 Date d'inscription dimanche 27 février 2011 Statut Membre Dernière intervention 17 avril 2011 - 1 mars 2011 à 13:35
Bonjour,
J'ai un problème sur mon site, sur une page je voudrais afficher des blocks qui se suivent horizontalement mais sans revenir à la ligne si la largeur dépasse celle de la page. Voici un exemple simpliste de ce que j'ai en réalité 
<!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" xml:lang="fr" lang="fr">  
    <head>  
        <title>Test</title>  
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  <link rel="stylesheet" media="screen" type="text/css" title="design" href="design.css" />  
    </head>  
    <body>  
  <div id='scrollbar'>  
   <div id='b'> blablablablablablablablablablablablablablablabla blablablablablabla </div>  
   <div id='b'> blablablablablabl ablablablablablablablablablablablablablablablabla  </div>  
   <div id='b'> blablablablablablablablablabla blablablablablablablablablablablabla  </div>  
   <div id='b'> blablablablablablablablablablablablablablablablablablabl ablablabla  </div>  
   <div id='b'> Ce texte est inutile !!!! Ce texte est inutile !!!! Ce texte est inutile !!!! Ce texte est inutile !!!! Ce texte est inutile !!!! Ce texte est inutile !!!! Ce texte est inutile !!!!  Ce texte est inutile !!!! Ce texte est inutile !!!! Ce texte est inutile !!!! Ce texte est inutile !!!! Ce texte est inutile !!!! Ce texte est inutile !!!! </div>  
   <div id='b'> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />blllllllllllllllllllllllllllllllllllllllllllllllllllllll </div>  
  </div>  
 </body>  
</html>

dans le html 
#scrollbar {  
 height: 100%;  
 width: 100%;  
}   
#b {  
 float: left;  
 border: 1px;  
 border-style: solid;   
}

et le css correspondant

merci d'avance

8 réponses

Réponse 1 / 8
iliass
28 févr. 2011 à 21:56
Si ta déja trouvé une solution tant mieux, si nan en voiçci une , mais avant sache que j'au donner a la div qui contiendra tes div horizentale, une largeur de 1000%,
c'est au pif, et si tu dépasse , les div retourneron a la ligne, donc a mon avis, la largeur du corp doit etre définie en php , tu compte en php le nombre des div qui seront générer pas le xml, et tu multiplie fois 205 ( 200=largeur de la div, 5=margin).
Mais avant que je te donne le code, j'aimerai attirer ton attention a une autre technique, LES SLIDER JQUERY, le element qui vont défilé seront tes div générer par le xml, et la navigation sera plus agréable, mais bon, ça dépend aussi ce que tu veux en faire.
Voici le code ( les couleurs utilisé sont au pif, quand je fé du webdesign je fais mieux que cela je te rassure ! lol !) :




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<style type="text/css">
body{
background-color:#ccc;
margin: 0;
padding: 0;
border: 0;
}
#header{
position:fixed;
background-color:#CC0000;
width:100%;
height:15%;
top:0px;
}
#corp{
position:absolute;
background-color:#fff;
width:100%;
height:auto;
top:16%;
}
#footer{
position:fixed;
clear:both;
background-color:#CC0000;
width:100%;
height:15%;
bottom:0px;
}
#scrollbar{
position:absolute;
width:1000%;
z-index:100;
/*overflow-y:hidden;
overflow-x:scroll;
overflow: -moz-scrollbars-horizental*/
}
.blabla{
position:relative;
width:200px;
height:65%;
color:#00FF00;
word-wrap:break-word;
margin-left:15px;
float:left;
border:solid #FF0000;
background-color:#000000;
z-index:100;
}
.banniere{
position:relative;
width:500px;
height:50px;
background-color:#33FF00;
margin:auto;
}
</style>
</head>
<body>
<div id="header">
<div class="banniere">
<p>ici tu met ta banniere</p>
</div>
</div>
<div id="corp">
<div id='scrollbar'>
<div class="blabla"> blablablablablablablablablablablablablablablablablablablablablablaa </div>
<div class="blabla"> bla2bla2bla2bla2bla2bla2bla2bla2bla2bla2bla2bla2bla2bla2bla2bla2bla2 </div>
<div class="blabla"> bla3bla3bla3bla3bla3bla3bla3bla3bla3bla3bla3bla3bla3bla3bla3bla3bla3 </div>
<div class="blabla"> bla4bla4bla4bla4bla4bla4bla4bla4bla4bla4bla4bla4bla4bla4bla4bla4bla4 </div>
<div class="blabla"> blablablablablablablablablablablablablablablablablablablablablablaa </div>
<div class="blabla"> bla2bla2bla2bla2bla2bla2bla2bla2bla2bla2bla2bla2bla2bla2bla2bla2bla2 </div>
<div class="blabla"> bla3bla3bla3bla3bla3bla3bla3bla3bla3bla3bla3bla3bla3bla3bla3bla3bla3 </div>
<div class="blabla"> bla4bla4bla4bla4bla4bla4bla4bla4bla4bla4bla4bla4bla4bla4bla4bla4bla4 </div>
<div class="blabla"> blablablablablablablablablablablablablablablablablablablablablablaa </div>
<div class="blabla"> bla2bla2bla2bla2bla2bla2bla2bla2bla2bla2bla2bla2bla2bla2bla2bla2bla2 </div>
<div class="blabla"> bla3bla3bla3bla3bla3bla3bla3bla3bla3bla3bla3bla3bla3bla3bla3bla3bla3 </div>
<div class="blabla"> bla4bla4bla4bla4bla4bla4bla4bla4bla4bla4bla4bla4bla4bla4bla4bla4bla4 </div>
<div class="blabla"> blablablablablablablablablablablablablablablablablablablablablablaa </div>
<div class="blabla"> bla2bla2bla2bla2bla2bla2bla2bla2bla2bla2bla2bla2bla2bla2bla2bla2bla2 </div>
<div class="blabla"> bla3bla3bla3bla3bla3bla3bla3bla3bla3bla3bla3bla3bla3bla3bla3bla3bla3 </div>
<div class="blabla"> bla4bla4bla4bla4bla4bla4bla4bla4bla4bla4bla4bla4bla4bla4bla4bla4bla4 </div>
<div class="blabla"> blablablablablablablablablablablablablablablablablablablablablablaa </div>
<div class="blabla"> bla2bla2bla2bla2bla2bla2bla2bla2bla2bla2bla2bla2bla2bla2bla2bla2bla2 </div>
<div class="blabla"> bla3bla3bla3bla3bla3bla3bla3bla3bla3bla3bla3bla3bla3bla3bla3bla3bla3 </div>
<div class="blabla"> bla4bla4bla4bla4bla4bla4bla4bla4bla4bla4bla4bla4bla4bla4bla4bla4bla4 </div>
</div>
</div>
<div id="footer">
<div class="banniere">
<p>ici tu met ton footer</p>
</div>
</div>
</body>
</html>

Bonne continuation
1
Réponse 2 / 8
iliass
28 févr. 2011 à 13:27
Bonjour

Quand tu utilise 100%, cela veut dire que tu veux utilisé 100% de la largeur de l'ecran, non celle du texte .

Pour ce avoir une page horizentale, tu devra utilisé une largeur définie qui dépasse la largeur de l'ecran. Exemple :
#scrollbar {
width: 8000px;
}
#b {
position :relative;
width: 1000px;
float: left;
}

c'est dans le cas ou ta 8 div a afficher une à coté de l'autre.

Voila
0
Réponse 3 / 8
Neron05 Messages postés 18 Date d'inscription dimanche 27 février 2011 Statut Membre Dernière intervention 17 avril 2011 6
28 févr. 2011 à 13:43
Bonjour,
merci de ta réponse par contre l'exemple que j'ai montré ici doit être inclus dans la page avec un header et un footer qui prennent 100% de la page il faudrait donc que le scroll se fasse dans ce "block" et aussi en réalité la taille de chacun de mes blocks varie ainsi que le nombre de blocks
0
Réponse 4 / 8
iliass
28 févr. 2011 à 14:20
baa met ton header et footer en width 100%, rien ne t'empêche de mettre la positon en fixe, comme ça le scroll ne s'appliquera que sur le corps!!

ca te va comme ça ?
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 8
Neron05 Messages postés 18 Date d'inscription dimanche 27 février 2011 Statut Membre Dernière intervention 17 avril 2011 6
28 févr. 2011 à 14:57
en mettant header en fixe y'a le "milieu" de la page qui s'écrit par dessus et le header fait des problèmes dans d'autres pages. En plus, le scroll est tout en bas au lieu d'être juste en dessous du texte qu'il scroll et comme j'ai une largeur variable soit il y a du blanc tout à droite (si c'est trop grand) soit ca revient à la ligne (si c'est trop petit).
0
Réponse 6 / 8
iliass
28 févr. 2011 à 16:06
je pourrais t'aider plus si tu explique un peu plus ce que tu veux faire, t'inkiet pas je te piquerai pas ton idée, g autres choses a faire !!

précise si ce sont des div généré en php, ou tu les crée toi meme en html?

car ce que tu veux faire est faisable de 1000 façon différente, çela dépend de a quoi ca sert, ou si t'a une page qui t'a inspiré baa envoie le lien.

Si nan, je pourrai pas trop t'aider.
0
Réponse 7 / 8
Neron05 Messages postés 18 Date d'inscription dimanche 27 février 2011 Statut Membre Dernière intervention 17 avril 2011 6
Modifié par Neron05 le 28/02/2011 à 18:15
je vais essayer d'être assez clair,
j'ai un header avec bannière et menu et un footer présents sur toutes les pages. Le corps de cette page sert à afficher des informations que je tire d'un xml. J'en créé des blocs avec titre puis 2 lignes et ces 2 lignes peuvent se répéter peu de fois ou beaucoup de fois. Ce qui donne une hauteur variable et comme je veux qu'on descende pas tout en bas pour voir le footer je met le corps dans un scroll. Le nombre de blocs peut aller de 0 à 100 d'une largeur d'environ 200px chacun (mais elle peut un peu augmenter) et donc je voudrais avoir le scroll horizontal qui sert à voir les différents blocs et un scroll vertical qui sert si la hauteur de chaque bloc dépasse 65% de la page (hauteur que j'ai choisi pour pouvoir voir footer et header). Les blocs sont créés dans des span mais ont des sauts de ligne à l'intérieur.
0
Réponse 8 / 8
Neron05 Messages postés 18 Date d'inscription dimanche 27 février 2011 Statut Membre Dernière intervention 17 avril 2011 6
1 mars 2011 à 13:35
ta solution marche bien, merci beaucoup
0

Discussions similaires

[CSS] Forcé retour à la ligne
aKuma59 -
zigoss -

33 réponses
trait horizontal avec du css
tipi75 -
tipi75 -

8 réponses
Erreur temporaire de résolution de « deb.debian.org ».
MERRiii -
Fredordetre -

3 réponses
HTML - définir taille bouton
Diva -
Utilisateur anonyme -

14 réponses
[CSS] Mettre un objet au premier plan
Achillion -
tiran58 -

2 réponses