Contenu | Rechercher | Menus

Annonce

Ubuntu 16.04 LTS
Commandez vos DVD et clés USB Ubuntu-fr !

Pour en savoir un peu plus sur l'équipe du forum.

Si vous avez des soucis pour rester connecté, déconnectez-vous puis reconnectez-vous depuis ce lien en cochant la case
Me connecter automatiquement lors de mes prochaines visites.

#1 Le 11/01/2017, à 21:39

bitman

scrollbar

Bonjour

Soyez indulgent, je démarre l'HTML, le CSS et le PHP.

J'ai un petit problème que je n'arrive pas à résoudre et pourtant avant de me tourner vers vous, j'ai navigué.
Je n'arrive pas à intégrer la scrollbar dans mes cases.
Si quelqu'un(e) pouvait m'aider à résoudre ce problème, je lui serait redevable.

Merci d'avance.


HTML

<!DOCTYPE html>
<html>
	<head>
	 <link rel="stylesheet" href="style.css" />
	 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	 <title>test_scrollbar</title>


	</head>
	<body>  

<table id="tab">
<tr>
	<td>Pim<br>Pam</td>
	<td>Pam</td>
	<td>Poum</td>
	<td>Pim; Pam; Poum;<br>Pim; Pam; Poum;<br>Pim; Pam; Poum;<br>Pim; Pam; Poum;<br>Pim; Pam; Poum;<br>Pim; Pam; Poum;<br>Pim; Pam; Poum;<br>Pim; Pam; Poum;<br></td>
</tr>
<tr>
	<td>Pim; Pam; Poum;</td>
	<td>Pim; Pam; Poum;<br>Pim; Pam; Poum;<br>Pim; Pam; Poum;<br>Pim; Pam; Poum;<br>Pim; Pam; Poum;<br></td>
	<td></td>
	<td></td>
</tr>
<tr>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
</tr>
	
</table>

        </body>

</html>

CSS

table#tab {
border:10px;
border-spacing:10px; 
}

table#tab td {
border-width:5px; 
border-style:solid; 
border-color:gray;
vertical-align : top;
background-color:#ccc;
padding:2px;
width:350px;
height: 130px;
overflow-y: scroll;
}

Dernière modification par bitman (Le 11/01/2017, à 21:39)


I fart with gentle caution so as not to shit.

Hors ligne

#2 Le 12/01/2017, à 15:59

bruno

Re : scrollbar

Bonjour,

Tu devrais prendre l'habitude d'indenter proprement ton code. Ce sera beaucoup plus lisible…
Ce que tu as fait est correct sauf que la propriété overflow ne s'applique qu'aux élément de type bloc (cf. https://www.w3.org/TR/css-overflow-3/#o … roperties).
Si tu tiens a garder une structure de tableau, tu peux par exemple mettre un bloc div dans tes cellules de tableau et appliquer les propriétés max-height et overflow-y sur ces div.

Hors ligne

#3 Le 12/01/2017, à 17:25

bitman

Re : scrollbar

OK

Merci, je vais tenter le bloc div.


I fart with gentle caution so as not to shit.

Hors ligne

#4 Le 12/01/2017, à 17:35

soshy

Re : scrollbar

Il te manque juste un tout petit truc:

display: inline-block;

A rajouter dans

table#tab td

Bon apres ca flingue un peu ton cadrillage, mais c'est ca aussi les joies du css tongue

Dernière modification par soshy (Le 12/01/2017, à 17:40)

Hors ligne

#5 Le 12/01/2017, à 22:42

bitman

Re : scrollbar

yikes Oh Pu[censuré]in

T'es le meilleur soshy! Ca fait trois jours que je tourne en rond.

Bon! Maintenant je vais aller me raser et manger un peu et après je vais mettre ça au propre. Je vais indenter proprement comme dirait Bruno.

Encore Merci tongue J't'en dois une.


I fart with gentle caution so as not to shit.

Hors ligne

#6 Le 12/01/2017, à 23:49

bitman

Re : scrollbar

En fait ça fonctionne sur des structures basiques comme celle du post1 mais dès que la structure se complique, c'est le bazar.
J'ai mis le le bloc "table" dans le contenu de mon gabarit et là j'ai bien une scrollbar par cellule mais les cellules sont parties dans tous les sens et j'ai même une scrollbar sur mon "contenu".
J'y comprend plus rien et en plus je me suis rasé pour rien!

Les joies du CSS  roll

Dernière modification par bitman (Le 12/01/2017, à 23:51)


I fart with gentle caution so as not to shit.

Hors ligne