[CSS]Centrer son site Web sur le forum Création de sites web - 23-04-2012 10:50:32

Liste des sujets

[CSS]Centrer son site Web

NasserKhelaifi

Niveau 10

23 avril 2012 à 10:50:32

Bonjour tout le monde !

Alors je travail en ce moment sur mon site que je vais devoir présenté au bac , je m'occupe principalement du design .

J'ai développer la page de CSS grâce a un tuto sur le net cependant je n'arrive pas a centrer mon site , regardez:

http://hapshack.com/images/UfWhD.png

Vous voyez il est sur la gauche et moi j’aimerais le centrer comme tout les sites mais je n'ai pas trouver comment faire , quelqu'un aurait une idée ?

Fire_Storm

Niveau 10

23 avril 2012 à 10:53:29

margin: auto;

NasserKhelaifi

Niveau 10

23 avril 2012 à 10:57:57

Je le mets dans body c'est sa ?

Fire_Storm

Niveau 10

23 avril 2012 à 11:57:05

Tu l'appliques aux div que tu veux voir centrées.

Donc si tu as une div englobant le tout c'est à celle là que tu dois l'appliquer, sinon tu l'appliques à tes div "principales" (vu que ça sera toujours par rapport au parent, le parent d'une div principale étant le body, et si le body prend toute la largeur ça dira donc "Centre sur la largeur").

NasserKhelaifi

Niveau 10

23 avril 2012 à 13:06:52

Arf sa marche toujours pas =/

J'ai mis un margin:auto; a toute mes div principale et le design est toujours sur la gauche , sa m'enerve !!

vava740

Niveau 10

23 avril 2012 à 13:13:41

Il faut que sa largeur soit clairement définie

Fire_Storm

Niveau 10

23 avril 2012 à 13:23:59

Montre ton code ça sera plus simple. ^^

NasserKhelaifi

Niveau 10

23 avril 2012 à 13:42:59

body
{
background-color: #546750;

}

conteneur

{
margin: auto;
width : 850px;
margin: auto;

}

Header

{
background-image: url("../image/header.jpg");
width: 850px;
height:346px;
margin: auto;
}

{
background-image: url("../image/menu.jpg");
width: 850px;
height: 30px;
text-align: center;
font-size: 16px;
padding-top: 5px;
margin: auto;

}

menu a

{
color: white;
text-decoration: none;
margin-left: 20px;
margin-right: 20px;
}

menu a:hover

{
text-decoration: underline
}

Ombre

{
background-image: url("../image/ombre.jpg");
width: 850px;
height: 93px;
margin: auto;

}

#Corps
{
background-image: url("../image/middle.jpg");
background-repeat: repeat-y;
width: 850px;
padding-left: 50px;
padding-right: 50px;
margin: auto
}

#Footer
{
background-image: url("../image/footer.jpg");
width: 850px;
height: 100px;
text-align: center;
padding-top: 40px;
color: #FEFEFE;
margin: auto

}

Voici mon code .

killahblup

Niveau 8

23 avril 2012 à 14:13:18

il faudra mettre aussi sur la div a centrer un "position:relative;" et ça devrait passer

Fire_Storm

Niveau 10

23 avril 2012 à 14:21:30

Bah perso même sans mettre en relative ça fonctionne.

Attention tu as 2 fois margin: auto; dans #conteneur.

Fire_Storm

Niveau 10

23 avril 2012 à 14:21:59

Et tu oublies certains ; à la fin.

killahblup

Niveau 8

23 avril 2012 à 14:23:13

Oui, mais j'ai eu l'expérience plusieurs fois où ça passait pas sans ... Puis à vrai dire je ne vois que ça qui pourrais le bloquer

Fire_Storm

Niveau 10

23 avril 2012 à 14:24:44

Ah ? Sur quel navigateur si tu sais ? (possible je teste pas avec toutes les versions ^^)

killahblup

Niveau 8

23 avril 2012 à 14:27:03

Hum sans être sur, une version non actualisée de Firefox

NasserKhelaifi

Niveau 10

23 avril 2012 à 14:27:04

Bah j'ai essayer et chez moi sa fonctionne toujours pas , je pense que sa doit venir de mon design que j'ai fait moi-même sur photoshop ?

Voila ce que sa donne chez moi :

http://hapshack.com/images/uCFA7.png

NasserKhelaifi

Niveau 10

23 avril 2012 à 14:27:46

Moi je test sa sur Internet Explorer

killahblup

Niveau 8

23 avril 2012 à 14:30:10

Heu, est ce que tu as corrigé ton CSS ? A savoir rajouter les ";" à la fin de certaines lignes. Sinon essaie d'envoyer un screen de ton HTML, ça vient peut être de là

NasserKhelaifi

Niveau 10

23 avril 2012 à 14:32:11

Oui j'ai rajouté les ";" manquant .

Voici un code html d'une de mes pages :

<html>
<head>
<title> Photos
</title>
<link rel="stylesheet" media="screen" type="text/css" href="Style/style.css" />
</head>

<body>

<?php
include (`Connexion.php`)
<?php

<a href="Présentation.htm">Accueil</a>
<a href="ClientCours.htm">Client/Cours</a>
<a href="Photo.htm">Photo</a>
<a href="Formulaire.html">Formulaire</a>
<a href="Administrateur.htm">Admin</a>

</div>

Cette page est vide pour le moment . Veuillez nous excuser pour la gene occasionné.

</div>

</div>
</div>

</body>
</html>

Voila + le screen :

killahblup

Niveau 8

23 avril 2012 à 14:34:46

"<?php
include (`Connexion.php`)
<?php "

Il y a déjà cette petite erreur, je sais pas si ça joue sur le reste m'enfin corrige déjà ça :

<?php
include (`Connexion.php`)
?>

NasserKhelaifi

Niveau 10

23 avril 2012 à 14:35:27

Okay merci c'est deja sa de gagner

Aide à l'achat Mac
Création de Jeux
Linux
Programmation
Création de sites web
Internet
Steam Deck
Macintosh
Hardware

La vidéo du moment

News JVTech

53 029 spectateurs

On pensait que les pailles et les sacs plastique étaient les coupables de la pollution des océans : Mais ce qui remplit la grande décharge du Pacifique est bien différent

Depuis des décennies, l'imaginaire collectif associe la pollution des océans aux sacs de courses, aux bouteilles, aux gobelets ou encore aux pailles en plastique jetés sur la terre ferme avant d'être récupérés par les mers ou océans via les marées. À l'échelle globale, ce constat est loin d'être faux : les fleuves et les côtes sont d'immenses portes d'entrée pour le plastique marin. Pourtant, lorsque des chercheurs se sont penchés sur l'une des plus gigantesques décharges marines de la planète, ils ont découvert une réalité bien différente.

Toutes les news jvtech