[Réglé] tableau html5

Pour les recherches et les demandes de modifications de styles concernant votre forum phpBB 3.2

Modérateur: Equipe

Règles du forum
A lire impérativement : Règlement de phpBB-fr.com - Conditions générales de support graphique

Attention : pour éviter les bogues, votre style doit être mis à jour en même temps que votre forum, et ce, dans la dernière version disponible de phpBB !

[Réglé] tableau html5

Messagepar fastgil » 29 Mar 2019 à 19:43

bonjour, je cherche à faire une page d'affichage que je ferais afficher ensuite dans mon style

mon problème principal c'est que si je le fais sur 2 colonnes aucun problème mais des que j'essaie de le faire sur 3 colonnes, je n'y arrive pas

pouvez vous essayer de m expliquer simplement ou je dois lui dire qu il y a 3 colonnes et non 2


Code: Tout sélectionner
<div class="forabg">
		<div class="inner">
		
			<ul class="topiclist">
				
				<li class="header">					
					<dl>
						<dd style="width:99%;align=center;>">Info Arcade Poker</dd>
						
				</dl>		
			</li>
             </ul>	 
			 <ul class="topiclist forums">	
			<dl>					
			</li>
		
		<table style="width: 100%; border: 0" cellpadding="0" cellspacing="0">
		
<tr>
<td valign="top" style="width:33%;">	

	<div class="forabg">
		<div class="inner">
			<ul class="topiclist">
				<li class="header">					
					<dl>
						<dd style="width:99%;text-align:center;">Relax Arcade</dd>
					</dl>
					
			</li>
		</ul>
		
			<ul class="topiclist forums">
			
		<li class="bg2">
			<dl>
			<center><img src="https://www.city-games.fr/citybb3/ext/dmzx/imageupload/files/5c94b149b75c50420ff6bd47b218c2df.gif"  alt="Arcade" border="0"/></img></center>
				<dd style="width:99%;text-align:center;"><strong>Fin du Championnat le 30-03-2019 à 10h00</strong></dd>

			</dl>
		</li>



			<dl>
						<dd style="width:99%;text-align:center;"><A HREF="https://www.city-games.fr/citybb3/viewtopic.php?f=4&t=10704" target="_blank"><strong>championnat du 1er au 15 mars</strong></A> </dd>
						</dl>
	
		
		<dl>
						<dd style="width:99%;text-align:center;"><A HREF="https://www.city-games.fr/citybb3/arcade/list?cid=11#cat" target="_blank"><strong>championnat en cour clique ici pour jouer</strong></A></dd>
						</dl>
		
		

	
		
		
			</ul>
	</div>
</div>
<div class="forabg_bottom"></div>



<td>
<td valign="middle" style="width:33%;">	

	<div class="forabg">
		<div class="inner">
			<ul class="topiclist">
				<li class="header">					
					<dl>
						<dd style="width:99%;text-align:center;">Poker City</dd>
					</dl>
					
			</li>
		</ul>
			<ul class="topiclist forums">
			
		<li class="bg2">
			<dl>
			<center><img src="https://www.city-games.fr/citybb3/ext/dmzx/imageupload/files/e6c1590f5567b1961f6bcf8ee4603feb.gif"  alt="Arcade" border="0"/></img></center>
				<dd style="width:99%;text-align:center;"><strong>Championnat " Winamax Poker Live 2.00" Lundi 2 Avril à 21H00</strong></dd>

			</dl>
		</li>



			<dl>
						<dd style="width:100%;text-align:center;"><strong>Championnat "Freeroll du Lundi " : Lundi 15 Avril à 21h00</strong></dd>
						</dl>
		
		
		<dl>
						<dd style="width:100%;text-align:center;"><A HREF="https://www.winamax.fr/poker/challenges/interclub_league_challenge.php?key=ICC-12-D3-267670102" target="_blank"><strong>Classement live Ligue des Clubs Mercredi 4 Avril à 21h00</strong></A></dd>
						</dl>
		
		
		
		
			</ul>
	</div>
</div>
<div class="forabg_bottom"></div>


<tr>
<td valign="bottom" style="width:33%;">	

	<div class="forabg">
		<div class="inner">
			<ul class="topiclist">
				<li class="header">					
					<dl>
						<dd style="width:99%;text-align:center;">test</dd>
					</dl>
					
			</li>
		</ul>
		
			<ul class="topiclist forums">
			
		<li class="bg2">
			<dl>
			<center><img src="https://www.city-games.fr/citybb3/ext/dmzx/imageupload/files/5c94b149b75c50420ff6bd47b218c2df.gif"  alt="Arcade" border="0"/></img></center>
				<dd style="width:99%;text-align:center;"><strong>Fin du Championnat le 30-03-2019 à 10h00</strong></dd>

			</dl>
		</li>



			<dl>
						<dd style="width:100%;text-align:center;"><A HREF="https://www.city-games.fr/citybb3/viewtopic.php?f=4&t=10704" target="_blank"><strong>championnat du 1er au 15 mars</strong></A> </dd>
						</dl>
		
		
		<dl>
						<dd style="width:100%;text-align:center;"><A HREF="https://www.city-games.fr/citybb3/arcade/list?cid=11#cat" target="_blank"><strong>championnat en cour clique ici pour jouer</strong></A></dd>
						</dl>
		
		

</td>
	</tr>
		</table>
		</ul>
		
		</div>

<div class="forabg_bottom"></div>


ma petite page me permet de ne pas toucher vraiment au style et de faire juste un appel de la page ou je veux
merci de votre aide
Modifié en dernier par fastgil le 01 Avr 2019 à 21:39, modifié 1 fois.
Avatar de l’utilisateur
fastgil
Apprenti-posteur
Apprenti-posteur
 
Messages: 129
Enregistré le: 22 Aoû 2006 à 14:20

Re: tableau html5

Messagepar Mazeltof » 30 Mar 2019 à 12:06

'jour ici,

Tu veux ajouter ça ou exactement ? sur l'index (comme on peut le voir à l'heure ou j'écris ce message) ?

Je te suggère de revoir ta portion de code html sur le fond et sur la forme. Après un rapide coup d'oeil, tu as plusieurs erreurs et la mise en forme n'est pas top non plus (ce qui n'aide pas). Tu peux t'aider de ce site par exemple.
Et pourquoi mettre tes règles de styles dans le html alors que tu as les feuilles CSS qui font ça très bien ?

Cela dit, j'y regarde plus en détail dès que j'ai un peu de temps et je repasse par ici. :wink:
Avatar de l’utilisateur
Mazeltof
Resp. des graphistes
Resp. des graphistes
 
Messages: 3108
Enregistré le: 09 Mar 2009 à 23:02
Localisation: Arras

Re: tableau html5

Messagepar fastgil » 30 Mar 2019 à 15:54

bonjour Mazeltof

oui je veux le mettre sur l'index
merci pour ton lien mon problème c'est toujours l'anglais , j ai trop séché les cours snif
quand tu m'auras corrigé, je vais décortiquer ta correction pour apprendre à la faire, scotty m'a appris la base d'une ext et peut être une fois que je maitriserai les tableaux, je pourrais peut être le mettre en ext avec un fichier langage, event ...
mais pour l'instant je veux comprendre mes erreurs et arriver à le maitriser
si tu me corriges ne me la complique pas trop hein lol
ma base est de faire 1 colonne avec dedans 3 colonnes et les 3 titres des colonnes
dans ma première colonne je vais mettre les infos de notre arcade textes, images et liens sans doute, la colonne du milieu un lien de notre radio partenaire en <iframe> je pense et la dernière colonne les infos de notre club poker avec textes, images et liens.
voila comme ça tu as déjà un visuel du tableau que j essaie de faire :mrgreen:
Avatar de l’utilisateur
fastgil
Apprenti-posteur
Apprenti-posteur
 
Messages: 129
Enregistré le: 22 Aoû 2006 à 14:20

Re: tableau html5

Messagepar cabot » 30 Mar 2019 à 21:51

Pfiu,vire ce tableau HTML tout laid et pas approprié à la mise en page pour utiliser à la place les propriétés qui vont bien (display/table~table-cell). :)

:idea: http://css.mammouthland.net/mise-en-pag ... -table.php
:idea: https://www.alsacreations.com/tuto/lire ... splay.html

Edit : ah ben tiens, faut que j'héberge mon image en signature ^^
Avatar de l’utilisateur
cabot
Equipe site
Equipe site
 
Messages: 26817
Enregistré le: 13 Fév 2011 à 20:42
Localisation: Rarement sur la plaque

Re: tableau html5

Messagepar fastgil » 31 Mar 2019 à 19:53

merci cabot

mais je comprenais à peine se que je faisais lol , et la tu me demandes de passer a quelque chose de tout nouveau pour moi
l'exemple qui donne est toujours sur un tableau de 2 colonnes , et bé moi j'en veux 3 lol et se que je ne sais pas comment faire
en plus je veux mon style autour c'est pour ça que j'utilise les <div class="forabg"> et autres
donc si tu peu me faire un petit dessin :P mais pas trop compliquer que j essaie de comprendre :mrgreen:
Avatar de l’utilisateur
fastgil
Apprenti-posteur
Apprenti-posteur
 
Messages: 129
Enregistré le: 22 Aoû 2006 à 14:20

Re: tableau html5

Messagepar cabot » 01 Avr 2019 à 12:47

Remplace toute la portion de HTML par ça :
Code: Tout sélectionner
<div class="forabg wrap-table">
	<div class="inner">

	<ul class="topiclist">
		<li class="header">					
			<dl>
				<dt>Info Arcade Poker</dt><dd></dd>
			</dl>		
		</li>
	</ul>

	<ul class="topiclist forums table">
	
		<li class="bg2">
			<div class="forabg">
				<div class="inner">
			
				<ul class="topiclist">
					<li class="header">					
						<dl>
							<dt>Relax Arcade</dt><dd></dd>
						</dl>
					</li>
				</ul>

				<ul class="topiclist forums">
					<li class="bg2">
						<img src="https://www.city-games.fr/citybb3/ext/dmzx/imageupload/files/5c94b149b75c50420ff6bd47b218c2df.gif"  alt="Arcade">
						<p><strong>Championnat " Winamax Poker Live 2.00" Lundi 2 Avril à 21H00
						<br>Championnat "Freeroll du Lundi " : Lundi 15 Avril à 21h00
						<br><a href="https://www.winamax.fr/poker/challenges/interclub_league_challenge.php?key=ICC-12-D3-267670102" target="_blank">Classement live Ligue des Clubs Mercredi 4 Avril à 21h00</a></strong></p>
					</li>
				</ul>
				
			</div>
			</div>

		</li>		
	
		<li class="bg2">
			<div class="forabg">
				<div class="inner">
			
				<ul class="topiclist">
					<li class="header">					
						<dl>
							<dt>Titre du bloc</dt><dd></dd>
						</dl>
					</li>
				</ul>

				<ul class="topiclist forums">
					<li class="bg2">
						<p><strong>Ici tu ajoutes des trucs</strong></p>
					</li>
				</ul>
				
			</div>
			</div>

		</li>
		
		<li class="bg2">
			<div class="forabg">
				<div class="inner">
			
				<ul class="topiclist">
					<li class="header">					
						<dl>
							<dt>Poker City</dt><dd></dd>
						</dl>
					</li>
				</ul>

				<ul class="topiclist forums">
					<li class="bg2">
						<img src="https://www.city-games.fr/citybb3/ext/dmzx/imageupload/files/e6c1590f5567b1961f6bcf8ee4603feb.gif"  alt="Arcade">
						<p><strong>Championnat "Winamax Poker Live 2.00" Lundi 2 Avril à 21H00
						<br>Championnat "Freeroll du Lundi " : Lundi 15 Avril à 21h00
						<br><a href="https://www.winamax.fr/poker/challenges/interclub_league_challenge.php?key=ICC-12-D3-267670102" target="_blank">Classement live Ligue des Clubs Mercredi 4 Avril à 21h00</a></strong></p>
					</li>
				</ul>
				
			</div>
			</div>
		
		</li>		

	</ul>
	
	</div>
</div>
<div class="forabg_bottom"></div>

Et ajoute ça dans ton CSS :
Code: Tout sélectionner
.wrap-table {
	text-align: center;
}
@media (min-width: 700px) {
	ul.table {
		display: table;
		table-layout: fixed;
		width: 100%;
		box-shadow: none !important;
		border: 0 !important;
	}
	ul.table > li {
		display: table-cell;
		padding: 0 2px 10px;
		vertical-align: top;
	}
}
ul.table p {
	font-size: 10px;
	line-height: 2;
	margin: 0;
	padding: 1em;
}
Avatar de l’utilisateur
cabot
Equipe site
Equipe site
 
Messages: 26817
Enregistré le: 13 Fév 2011 à 20:42
Localisation: Rarement sur la plaque

Re: tableau html5

Messagepar fastgil » 01 Avr 2019 à 21:38

alors là merci beaucoup
j'ai juste rajouté

<ul class="topiclist forums"> au dessus de ton table, et je n'ai pas oublié de le fermé tout en bas </ul> juste avant les </div>

<ul class="topiclist forums table">

par contre il va me falloir 6 mois pour comprendre ton fichier .css qui est la réussite de ce tableau Image
Avatar de l’utilisateur
fastgil
Apprenti-posteur
Apprenti-posteur
 
Messages: 129
Enregistré le: 22 Aoû 2006 à 14:20

Re: tableau html5

Messagepar cabot » 01 Avr 2019 à 22:05

Ah ben non, tu ne peux pas ajouter une balise ul sans enfant li direct.
Ton forum risque d'exploser.


































Ou pas, mais ce balisage n'est pas correct et n'apporte rien.
Avatar de l’utilisateur
cabot
Equipe site
Equipe site
 
Messages: 26817
Enregistré le: 13 Fév 2011 à 20:42
Localisation: Rarement sur la plaque

Re: tableau html5

Messagepar fastgil » 01 Avr 2019 à 22:39

si je ne le rajoute pas
voici se que cela donne

Image

et si je le rajoute mon tableau info poker arcade à un contour qui le fini, voir image

Image

le code que tu m'as fais avec ma re-touche
Code: Tout sélectionner
<div class="forabg wrap-table">
	<div class="inner">

	<ul class="topiclist">
		<li class="header">		
	
			<dl>
				<dt>Infos Arcade Poker</dt><dd></dd>
			</dl>		
		</li>
	</ul>
	<ul class="topiclist forums">
	<ul class="topiclist forums table">
	
	
		<li class="bg2">
			<div class="forabg">
				<div class="inner">
			
				<ul class="topiclist">
					<li class="header">					
						<dl>
							<dt>Relax Arcade</dt><dd></dd>
						</dl>
					</li>
				</ul>

				<ul class="topiclist forums">
					<li class="bg2">
						<img src="https://www.city-games.fr/citybb3/ext/dmzx/imageupload/files/5c94b149b75c50420ff6bd47b218c2df.gif"  alt="Arcade">
						<p><strong>Fin de notre Championnat City-Games le 30 mars 2019 à 10h00
						<br><A HREF="https://www.city-games.fr/citybb3/viewtopic.php?f=4&t=10704" target="_blank">Prochain championnat City-Games du 1er Mai au 30 Mai</A>
						<br><A HREF="https://www.city-games.fr/citybb3/arcade/list?cid=11#cat" target="_blank">Championnat Relax Arcade en cour cliquez ici pour jouer notre Championnat</A></strong></p>
					</li>
				</ul>
				
			</div>
			</div>

		</li>		
	
		<li class="bg2">
			<div class="forabg">
				<div class="inner">
			
				<ul class="topiclist">
					<li class="header">					
						<dl>
							<dt>La Radio</dt><dd></dd>
						</dl>
					</li>
				</ul>

				<ul class="topiclist forums">
					<li class="bg2">
						<p><strong>Ici tu ajoutes des trucs</strong></p>
					</li>
				</ul>
				
			</div>
			</div>

		</li>
		
		<li class="bg2">
			<div class="forabg">
				<div class="inner">
			
				<ul class="topiclist">
					<li class="header">					
						<dl>
							<dt>Poker City</dt><dd></dd>
						</dl>
					</li>
				</ul>

				<ul class="topiclist forums">
					<li class="bg2">
						<img src="https://www.city-games.fr/citybb3/ext/dmzx/imageupload/files/e6c1590f5567b1961f6bcf8ee4603feb.gif"  alt="Poker">
						<p><strong> "Winamax Poker Live 2.00" Lundi 8 Avril à 21H00
						<br>Championnat "Freeroll du Lundi " : Lundi 15 Avril à 21h00
						<br><a href="https://www.winamax.fr/poker/challenges/interclub_league_challenge.php?key=ICC-12-D3-267670102" target="_blank">Classement live Ligue des Clubs Mercredi 4 Avril à 21h00</a></strong></p>
					</li>
				</ul>
				
			</div>
			</div>
		
		</li>		

	</ul>
	</ul>
	</div>
</div>
<div class="forabg_bottom"></div>


si je ne le rajoute pas on voit biene que mon cadre principal n'a pas de coté
Avatar de l’utilisateur
fastgil
Apprenti-posteur
Apprenti-posteur
 
Messages: 129
Enregistré le: 22 Aoû 2006 à 14:20

Re: tableau html5

Messagepar cabot » 02 Avr 2019 à 08:53

C'était volontaire de ma part pour aérer un peu l'imbrication des éléments. ^^
Pour rétablir les bordures, il faut juste supprimer cette portion de code :
Code: Tout sélectionner
border: 0 !important;
Avatar de l’utilisateur
cabot
Equipe site
Equipe site
 
Messages: 26817
Enregistré le: 13 Fév 2011 à 20:42
Localisation: Rarement sur la plaque


Retourner vers [3.2.x] Modifications et recherche de styles

Qui est en ligne

Utilisateurs parcourant ce forum : Aucun utilisateur enregistré et 1 invité