Question à propos d'une mise en forme (CSS)

19 juillet 2006 à 22:24:30

Bonsoir,

je suis actuellement en train de coder un forum et je commence m'occupe du panneau d'administration. J'aimerais faire un menu en haut à gauche pour mettre 2-3 liens. J'ai donc fait un bloc auquel j'ai appliqué un fond le seul problème c'est que le texte (en l'occurence les liens) sont en haut à gauche, collé contre ls bords et j'aimerais qu'il soit centré verticalement ( ainsi que les autres liens).

J'ai cherché dans le cour de m@teo mais je pense m'être bien embrouillé du coup je ne sais plus trop ce qui pourrait être bon ou pas.

Voilà deux petits schémas pour illustrer mon propos :

avant :
Image utilisateur

et ce que j'aimerais obtenir :
Image utilisateur

Voici également ma page (x)HTML :

Ainsi que la feuille de style associée :

/* Panneau d'administration - Forum "Discutons.net"
Auteur : Tristan Dodier*/

body {
width : 760px;
font-family : Verdana,Times, sans-sérif;
font-size : 10px;
color : #000000;
margin-left : 10px;
margin-top: 5px;
margin-bottom: 5px;
}

p
{
width: 320px;
height : 40px;
background-color : #BEDEF5;
text-align: justify;
}

a
{
color: #0066CC;
text-decoration : none;
}

a:visited
{
color: #0066CC;
}

a:hover, a:active
{
color: #0066CC;
font-weight: bold;
}

Voilà j'espère que vous pourrez trouver une solution, merci d'avance

"Striker : Surely you can't be serious. Rumack : I am serious... and don't call me Shirley."

Riko

19 juillet 2006 à 22:42:26

Salut, tu peux jouer avec le padding-top.

Diminue ta hauteur d'autant que tu ajoutes du padding

Tristou

19 juillet 2006 à 22:56:04

Citation : Riko

Salut, tu peux jouer avec le padding-top.
Diminue ta hauteur d'autant que tu ajoutes du padding

Ca marche

Et en ce qui concerne le décalage :honte:

"Striker : Surely you can't be serious. Rumack : I am serious... and don't call me Shirley."

jover

19 juillet 2006 à 22:59:12

Bah si tu parle du decalage vers la droite ca doit tre un padding-left tout betement
a moin que ce ne soit pas ta question :euh:

cmoiromain

19 juillet 2006 à 22:59:32

padding-left

Tristou

19 juillet 2006 à 23:02:13

Ca marche, merci beaucoup

"Striker : Surely you can't be serious. Rumack : I am serious... and don't call me Shirley."

Tristou

20 juillet 2006 à 11:46:15

Hop, excusez moi de reposter mais j'ai un autre souci

Pour le pied de page, j'ai voulu le centrer horizontalement mais tel qu'il est là, il n'est pas vraiment centré. Comment faire ?

Voilà la feuille de style (dites si vous avez aussi besoin de la page (x)HTML

)et un aperçu de ce que ça donne en vrai

Image utilisateur

/* Panneau d'administration - Forum
Auteur : Tristan Dodier*/

body {
width : 800px;
font-family : Verdana,Times, sans-sérif;
font-size : 10px;
color : #000000;
margin-left : 5px;
margin-top: 5px;
margin-bottom: 5px;
}

p
{
width: 240px;
height : 30px;
background-color : #BEDEF5;
text-align: justify;
padding-top : 10px;
padding-left : 10px;
}

a
{
color: #0066CC;
text-decoration : none;
}

a:visited
{
color: #0066CC;
}

a:hover, a:active
{
color: #0066CC;
font-weight: bold;
}

#footer {
width: 170px; /* On a indiqué une largeur (obligatoire) */
text-align: center;
margin: auto;
}

"Striker : Surely you can't be serious. Rumack : I am serious... and don't call me Shirley."

pilouuuu

21 juillet 2006 à 5:24:08

essaye un position:absolute

Tristou

21 juillet 2006 à 8:26:04

euuuh oui ok mais à quel élément je met ça ? A footer :euh:

? Et euuuh je suppose que ça ne suffit pas...

"Striker : Surely you can't be serious. Rumack : I am serious... and don't call me Shirley."

Riko

21 juillet 2006 à 15:02:49

Salut, avec le code css que tu as indiqué cela devrait fonctionner, il faut que tu mettes ton id footer sur le bloc contenant tes liens.
Tout dépends de ton code html

Tristou

21 juillet 2006 à 15:49:59

Que j'applique le style footer au bloc où y'a le pied de page ? Oui c'est ce que j'ai fait mais il n'est pas franchement centré ou alors que pour une partie de la page :euh:

Je vais essayer avec un "position : absolute;"

"Striker : Surely you can't be serious. Rumack : I am serious... and don't call me Shirley."

Riko

21 juillet 2006 à 17:34:56

Pourrais tu nous faire voir ton html STP?

Tristou

21 juillet 2006 à 17:57:36

Bien sûr :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Panneau d'administration - index</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Administration du forum" href="../templates/admin.css" />
</head>
<body>
<?
$temps = microtime ();
$temps = explode (" ", $temps);
$temps = $temps[1] + $temps[0];
$chrono_start = $temps;
?>
<p><a href="logout.php" title="Retourner sur le forum">Quitter l'interface</a> | <a href="../faq.php" title="Consulter l'aide">Aide</a> | <a href="http://www.discutons.net" title="Se rendre sur le site officiel">Discutons.net</a>
</p>
<?php
// Enregistrons les informations de date dans des variables

$jour = date("d");
$mois = date("m");
$annee = date("Y");

$heure = date("H");
$minute = date("i");

// Maintenant on peut afficher ce qu'on a recueilli
echo "Nous sommes le $jour/$mois/$annee -
$heure h $minute.";
?>

<br><br>
<div id="footer">
<?
$temps = microtime ();
$temps = explode (" ", $temps);
$temps = $temps[1] + $temps[0];
$chrono_finish = $temps;
$temps_generation = $chrono_finish - $chrono_start;

echo '[Page générée en '.number_format ($temps_generation, 4,',','').' s]';
?>
<br><a href="http://www.discutons.net" title="Se rendre sur le site officiel">Discutons.net</a> - 2006
</div>
</body>
</html>

(j'ai essayé de mettre position : absolute mais ça me renvoie le bloc à gauche

)

"Striker : Surely you can't be serious. Rumack : I am serious... and don't call me Shirley."

Riko

21 juillet 2006 à 22:03:34

Essaies de mettre ton code :

Correction de l'html:

<div id="footer">


<p><a href="logout.php" title="Retourner sur le forum">Quitter l'interface</a> | <a href="../faq.php" title="Consulter l'aide">Aide</a> | <a href="http://www.discutons.net" title="Se rendre sur le site officiel">Discutons.net</a>
</p>


<?
$temps = microtime ();
$temps = explode (" ", $temps);
$temps = $temps[1] + $temps[0];
$chrono_finish = $temps;
$temps_generation = $chrono_finish - $chrono_start;

echo '[Page générée en '.number_format ($temps_generation, 4,',','').' s]';
?>
<br><a href="http://www.discutons.net" title="Se rendre sur le site officiel">Discutons.net</a> - 2006
</div>

Et tu modifies le css en ajoutant ceci:

#footer p { /*toutes les balises P qui seront dans le bloc d'id "footer"*/
text-align:center;/*pour aligner le texte*/
padding-left:0;/*pour supprimer l'effet du padding défini plus haut dans le css de la balise "p"*/
padding-right:0;/*inutile pour ton code mais je l'ajoutes car si tu en ajoutes ailleurs*/
}

Cette fois ça devrait fonctionner!!!!

Tristou

22 juillet 2006 à 0:20:09

En utilisant ça :

position : fixed;
left:npx;
right :npx;

J'ai pu obtenir ce que je souhaitais. Merci quand même

"Striker : Surely you can't be serious. Rumack : I am serious... and don't call me Shirley."

erdnaxeli

22 juillet 2006 à 0:22:12

IE ne reconnait pas position: fixed;

Riko

22 juillet 2006 à 0:47:25

Oups!! je crois que je me suis planté, c'est juste la zone "discuter.net que tu veux centrer?

En fait ton footer est bien centré mais par rapport au body, celui ne faisant que 800px de large ta page n'est pas centrée lorsqu'elle visionnée avec une résolution plus grande.

Pour que tout ça soit centré , tu ajoutes margin:aut au css de body.

Désolé pour l'erreur.