Contenu | Rechercher | Menus

Annonce

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.

À propos de l'équipe du forum.

Pages : 1

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

ChienPanzer

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 ChienPanzer (Le 11/01/2017, à 22:39)

1010011010

Hors ligne

#2 Le 12/01/2017, à 16: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, à 18:25

ChienPanzer

Re : scrollbar

OK

Merci, je vais tenter le bloc div.

1010011010

Hors ligne

#4 Le 12/01/2017, à 18: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, à 18:40)

Hors ligne

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

ChienPanzer

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.

1010011010

Hors ligne

#6 Le 13/01/2017, à 00:49

ChienPanzer

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 ChienPanzer (Le 13/01/2017, à 00:51)

1010011010

Hors ligne

Pages : 1