Entête avec 2 colonnes

**TinyDoowy** · 23/01/2017, 17h28

Bonjour,
Je reprends un site laisser à l'abandon dans mon association, et j'essaie d'y intégrer des modules intéressants, mais je rencontre quelques soucis.

Bien entendu, j'ai d'abord chercher la solution sur différents sites et forums et j'ai trouvé des réponses, mais elles ne semblent pas marcher dans mon cas.
Je pense que je fais une fausse manip mais je ne sais pas laquelle.

Sur mon site www.3dsinbordeaux.fr j'essaie de reformater pour y mettre en tête sur deux colonnes, le prochain tournoi et la prochaine rencontre, puis dessous, sur deux colonnes encore, je mets un script qui récupère les dernières actu facebook et twitter de notre asso.

J'ai essayé de faire un fichier css pour définir un style ColonneG et ColonneD pour séparer mon espace en deux et pouvoir mettre des blocs dedans, mais ça n'a pas marché !
J'ai essayé à la mano de mettre mes bloc facebook et twitter côte à côté mais rien n'y faisait, je me retrouvait avec le fichiers l'un en dessous de l'autre.
J'ai donc tenter le tableau sur deux colonnes, et là les modules rentre bien dans leur case... seul hic, je n'arrive pas à les centrer et à mettre une bordure null.
J'ai encore essayer le css pour définir les valeurs que je voulais, puis mettre directement l'info dans table, td, th ou tr. rien n'y fait.

Je vous joint le fichier html que j'ai pour le moment. C'est assez brut, mais globalement c'est comme ça que je l'ai récupéré.
Et j'aimerais à la fois le faire fonctionner et le nettoyer pour le simplifier pour les suivants si je venait à passer la main.

Pouvez vous me confirmer que le fonctionnement d'un fichier css, consiste à créer un fichier *.css ranger au même niveau que le html qui l'appelle avec un appelle au début de celui-ci ?
à l'aide de la ligne : <head><link rel="stylesheet" href="style.css" /></head>

J'espère avoir donné un maximum d'infos pour que vous puissiez m'aider.
Merci d'avance

**NoSmoking** · 28/01/2017, 15h54

Bonjour,
pourrais tu extraire de ton code la partie qui te pose soucis ainsi que le CSS associé, tu obtiendras sûrement plus de réponses.

**TinyDoowy** · 29/01/2017, 20h44

Y'a pas grand chose à extraire, mais si je devais donner le morceau ça serait

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<table style="text-align:center">
	<tr>
		<th>
			<p>
				<span class=" mobile-undersized-upper">&gt; Likez 3DSinBordeaux sur Facebook</span>
			</p>
			<script></script>
			<div class="fb-page" data-href="https://www.facebook.com/3dsinbordeaux" data-tabs="timeline" data-width="360" data-height="404" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="false">
				<div class="fb-xfbml-parse-ignore">
					<blockquote cite="https://www.facebook.com/3dsinbordeaux">
						<a href="https://www.facebook.com/3dsinbordeaux">3DSinBordeaux</a>
					</blockquote>
				</div>
			</div>
		</th>
		<th>
			<p>
				<span class=" mobile-undersized-upper">&gt; Suivez 3DSinBordeaux sur Twitter</span>
			</p>
			<div class="code self mobile-leaf" style="width:350px;min-height:393px;">
				<a class="twitter-timeline" data-height="400" data-theme="light" href="https://twitter.com/3DSinBordeaux">Tweets by 3DSinBordeaux</a>
				<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>	
			</div>
		</th>
	</tr>
</table>

Comme expliqué plus haut mon problème est de créer sur un espace de 2 colonnes (ici faite en tableau faute de mieux) mon historique de site.
Pas de CSS, car aucun de ceux que j'avais tenté n'ont réussi, mais si je devais mettre ce que j'avais écrit ce serait

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
table, tr, td, th {
  border:0;
  text-align: center;
}

**NoSmoking** · 29/01/2017, 21h01

Pour obtenir quelque chose de « potable » il te faut commencer par supprimer TOUS les styles inlines qui parasitent ta <table>.

Exemple :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<div class="code self mobile-leaf" style="width:350px;min-height:393px;">

Entête avec 2 colonnes

HTML

Vue hybride

Discussions similaires

Partager

Partager