Soucis style css dans une div

Résolu/Fermé
angelus1821 Messages postés 192 Date d'inscription dimanche 16 mars 2008 Statut Membre Dernière intervention 21 décembre 2014 - Modifié par angelus1821 le 8/04/2011 à 10:27
angelus1821 Messages postés 192 Date d'inscription dimanche 16 mars 2008 Statut Membre Dernière intervention 21 décembre 2014 - 11 avril 2011 à 08:07
Bonjour,
j'ai un soucis au niveau du style css, j'ai une page d'accueil en html, contenant un tableau, avec des liens redirigeant vers d'autres pages, et donc ma div se présente comme cela:

<div style="border:solid;margin-top:100px;text-align:center;font-family:arial;font-size:14pt;"> 
 <table border="2"> 
 <tr> 
 <td> Formulaire de location</td> 
 </tr> 
 <tr> 
 <td><a href="locationSalle.php">Demande de location</a></td> 
 <td></td> 
 </tr> 
 <tr> 
 <td><a href="locationVehicule.php">Demande de location de vehicule</a></td> 
 <td>Demande de location de matériel</td> 
 </tr> 
 </table> 
</div>


Vous remarquerez dans la div le style suivant " text-align:center" car je veux centrer le tableau dans la div.
Lorsque j'utilise dreamwaver, dans l'aperçu il me montre bien le tableau centrer dans la page, mais dans mon navigateur, il reste a gauche le tableau ......
et si je met " text-align:center dans ma balise table, c'est le texte qui sera centrer ...

J'ai essayé d'ouvrir ma page avec IE, firefox ou chrome, j'ai toujours le meme soucis
Je souhaiterais donc pouvoir centrer on tableau, en évitant de mettre " margin-left: 200 px par ex "

je vous remercie par avance pour toute l'aide que vous pourrez m'apporter ^^



A voir également:

5 réponses

J'ai oublié de préciser que le parametre width devait être rempli pour le margin: auto fonctionne.

Tu peux enlever le div intérieur, il ne sert a rien (autant pour moi)

j'ai mis width: 50%; mais ce n'est qu'un exemple...

et tui peux enlever le text-align si tu ne veux pas que le texte soit centré


<div style="border: solid;width: 50%;margin: auto">
<table border="2">
<tr>
<td> Formulaire de location</td>
</tr>
<tr>
<td><a href="demandeVehicule.php">Demande de véhicule</a></td>
<td></td>
</tr>
<tr>
<td><a href="locationSalle.php">Demande de location de salle</a></td>
<td>Demande de location de matériel</td>
</tr>
</table>
</div >
1
Salut,

Premierement, c'est quand même plus agréable et plus pratique de travailler avec un fichier .css séparé, de façon a pouvoir changer le style simplement, séparer le code du style et avoir un fichier beaucoup plus lisible.

Ensuite, en principe ta solution doit marcher avec les anciens navigateurs également, mais la technique plus utilisée a l'heure actuelle est le
margin-left: auto;
margin-right: auto;

Sinon, tu peux essayer de mettre un div autour de ton div et préciser le style pour celui-ci en text-align:center;
mais je ne suis pas sur que ca soit tres académique...

A choisir je te conseillerais vraiment de passer au css séparé et aux margin...auto;
0
angelus1821 Messages postés 192 Date d'inscription dimanche 16 mars 2008 Statut Membre Dernière intervention 21 décembre 2014 16
8 avril 2011 à 10:54
re
oui , en fait là pour le moment je ne m'embete pas trop, j'avais dans l'idée de faire un fichier css, pour regrouper les styles qui reviennent toujours, dans des classes communes, là je m'attauqe plutot dans la partie programmation .

Et donc j'ai essayé de mettre une div autour de ma div, mais toujours le meme résultat.

J'ai aussi essayé avec les " margin-left auto,.." dans succès.
Lorsque je retire le style " text-alig:center, le texte dans le tableau reviens à gauche, j'ai donc la code suivant :

<div style="border:solid;text-align:center;margin-left:auto;margin-right:auto">
	<div >
		<table border="2">
		<tr>
		<td> Formulaire de location</td>
		</tr>
		<tr>
		<td><a href="demandeVehicule.php">Demande de véhicule</a></td>
		<td></td>
		</tr>
		<tr>
		<td><a href="locationSalle.php">Demande de location de salle</a></td>
		<td>Demande de location de matériel</td>
		</tr>
		</table>
	</div >
</div>
0
Bonjour,

Personnellement, je préconise de supprimer TABLE. Exemple de code sans TABLE:

<style type="text/css">
form label {
display: inline-block;
vertical-align: top;
text-align: right;
padding-right: 8px;
padding-top: 2px;
width: 120px;
}
form p { text-align: left; }
</style>
<form method='POST' action='index.php?page=sites/enregistrerNouveauSite' id="formulaire">
<p><label for="categorie">catégorie:</label>
<select name="categorie">
<option>-- sélectionnez --</option>
<option value="CP">camping</option>
<option value="GH">gîte d'hôte</option>
<option value="PK">parking</option>
</select></p>
<p><label for="url">lien web:</label>
<input type='url' id="url" name='form[url]' size='64' maxlength='250'
required title="tapez un URL complet, exemple: http://www.mon-site.com/"></p>
<p><label for="titre">titre:</label>
<input type='text' name='titre' size='64' maxlength='64'
required title="tapez un titre bref et explicite, exemple: association de la Brenne"></p>
<p><label for="description">description:</label>
<textarea name='description' rows='6' cols='64' required></textarea></p>
<p><label for="submit"> </label>
<input type='submit' id="submit" value=' Soumettre '></p>
</form>

Tout est expliqué en détail ici:
http://html5.immo-scope.com/index.php?page=html5/formulairesSansTable

et pour centrer le formulaire, lui appliquer un style="margin-left: auto; margin-right: auto;"

A+
0
Le but est de trouver une solution avec sa table, ce qui parfaitement faisable(voir ci-dessous)...

De plus (voir plus bas également) il ne sert a rien de mettre les margin:auto si on ne précise pas la taille width, ils ne seront pas pris en compte...

Ceci dit si c'est un formulaire que tu veux faire angelus, tu ferais bien d'ajouter la balise form et les boutons associés... tu peux toujours garder ton tableau ceci-dit..
0
angelus1821 Messages postés 192 Date d'inscription dimanche 16 mars 2008 Statut Membre Dernière intervention 21 décembre 2014 16
11 avril 2011 à 08:07
c'est pas vraiment un formulaire, c'est juste une page d'accueil " basique" , pour mettre une liste de liens pour rediriger les personnes vers d'autres pages php ( qui elles seront des formulaires) en fonction de leur demande
0
scooba112 Messages postés 8 Date d'inscription samedi 9 avril 2011 Statut Membre Dernière intervention 2 mai 2011 1
9 avril 2011 à 03:39
tu va trouve ton besoin dans ce site la :www.commentdevelopper.com
0

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

Posez votre question
angelus1821 Messages postés 192 Date d'inscription dimanche 16 mars 2008 Statut Membre Dernière intervention 21 décembre 2014 16
11 avril 2011 à 08:02
merci beaucoup à vous, c'est bon !
0