Centrage de div

scoubi77 · 19/12/2011, 16h50

Bonsoir,

Je tourne en rond, voici mon problème.
Je voudrais centrer un menu et un contenu (anciennement une frame en html ) avec du css (je viens du html et je début en css et c'est pas simlple !!!)

j'ai donc commencé a déclarer un fichier en css dont voici le code

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
div#menu {
	float:left;
	width:100px;
	height:400px;
	background-color:#FF6699;
	}
div#contenu {
	float:left;
	width:500px;
	height:400px;
	background-color:#FFCC00;
	}

J'obtiens un espace pour le menu et un autre pour le contenant
et j'ai donc écris un fichier en html dont voici le code:

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
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="styles.css">
<title>centrage CSS</title>
</head>
<body>
 
 
	<div id="menu">Ceci est le menu</div>
	<div id="contenu">Ceci est le contenu</div>
 
 
 
</body>
</html>

je voudrais en fait centrer mon menu et contenu au centre de la page !!!
ça à l'air pas compliqué et pourtant !!!!

en deuxième lieu je voudrais trouver un moyen d'avoir un site qui en quelque sorte s'adapte a la résolution du visiteur ( je sais par expérience en html que c'était pas simple ) j'ai cru lire que avec des pourcentage à la place de px mais c'est pas claire pour moi

Merci par avance a tous ceux qui pouront m'apporter réponse

Amicalement scoubi77

Torgar · 19/12/2011, 17h36

Bonjour,

Code css :

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

1
2
3
4
5
#page {
    width: 70% /* prend 70% de la largeur de la résolution du visiteur */
    margin-left: auto;
    margin-right: auto;
}

Code html :

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

1
2
3
4
<div id="page">
    <div id="menu">Ceci est le menu</div>
    <div id="contenu">Ceci est le contenu</div>
</div>

Voir FAQ CSS

Ensuite en ce qui concerne l'adaptation du site à la résolution tu peux t'orienter vers ce sujet qui en parle déjà.

scoubi77 · 19/12/2011, 18h18

Merci
Par contre je tourne en rond depuis 2 heures comment afficher
dans mon code html mes frames ?

Code :

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

1
2
3
4
<div id="page">
    <div id="menu">Ceci est le menu</div>
    <div id="contenu">Ceci est le contenu</div>
</div>

je ne peux plus du fait utiliser comme jadis en html avec les frames target="" pour afficher une page

Code :

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

<A HREF="droite.htm" target="contenu" >Accueil </A>

Emyleen · 20/12/2011, 10h22

Bonjour,

Je ne comprends pas ce que tu veux faire, tu veux afficher le contenu de ta <div id="contenu">?

Car si tu veux mettre à jour ta div sans recharger la page, il te faut te tourner vers de l'ajax je penses

scoubi77 · 20/12/2011, 13h54

Bonjour,

Essayant de me mettre un peu à la page, j'ai donc
Suprimer les frames et remplacé par des divs,
Tuto dailleur sur le site de ce merveilleux forum.
Maintenant comment effectivement faire afficher dans ce div
Les différentes pages qui peuvent être appelées par mon
Menu ?
Merci par avance de votre réponse
Amicalement scoubi77

Torgar · 20/12/2011, 14h09

Mise à part faire des includes() en PHP ou même passer par de l'AJAX comme dit par Emyleen y a pas d'autres solutions sans iframe/frame.

Comment gères-tu ton contenu ? (base de données, fichiers html/texte, etc.)

scoubi77 · 20/12/2011, 14h15

Et bien en liens html, hum les iframes c'est une
Nouvelle verssion en html des frames ?

Emyleen · 20/12/2011, 14h19

Alors si tu gères ton contenu dans des pages html différentes il ne te faudra pas de doctype et autres head dans ces pages si tu les appelle dans une div car sinon il y aura conflit avec les entêtes de la page appelante.

Le mieux, si le contenu de ta div doit changer en fonction d'un clic sur un lien, c'est de faire avec la méthode AJAX.

Il y a de très bon tutos simple à comprendre sur Développez.com

Pour les iframe, tu auras ta réponse ici

Torgar · 20/12/2011, 14h41

Tu as deux possibilités soit comme le dit Emyleen, tu le fait via javascript en te simplifiant la vie avec jQuery et la méthode load(url), soit tu passes par du PHP et des include()

J'aurai vu un truc dans ce genre en PHP :

Code php :

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
<div id="page">
    <div id="menu">
        <ul>
            <li><a href="index.php?p=news" title="">News</a></li>
        </ul>
    </div>
    <div id="contenu">
    <?php
    if ($_GET['p']) {
        include($_GET['p'] . '.html'); // si on clique sur le lien News ça inclura le contenu de la page news.html
    }
    else {
        include('accueil.html');
    }
    ?>
    </div>
</div>

La remarque d'Emyleen concernant le doctype est quoi qu'il arrive de rigueur.

Pour la méthode jQuery :

Code :

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

1
2
3
4
<script type="text/javascript">
$("#contenu").load("news.html");
</script>
<div id="contenu"></div>

Je passe volontairement sur les étapes d'installation de jQuery (que tu trouveras ici (en anglais))

scoubi77 · 20/12/2011, 19h35

Merci a vous deux pour vos réponses ,
Je reste dubitatif sur le choix de la méthode.
J'essaie de me mettre au css et évoluer vers autre chose
que dur ce que je fesait il y a 10 ans !!!
Le css permet des présentations plus sympa ( cadre avec arrondi, ombre autour )
Mais rester avec des frames me paraît plus
Judicieux dans mon cas sans passer par des div ?
Sachant que le résultat obtenu que je souhaite est
Pas très compliqué un menu avec un site qui
S'articule à sa droite le tout centré, et qui s'adapte à la
Résolution de mon visiteur.
Quels sont vos conseil, méthode ...
Merci à vous deux pour vos aide et conseils

Parcontre ce code me desentre mon site vers la gauche ? Pourquoi ?

Code :

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

1
2
3
4
5
6
7
8
9
10
1
2
3
4
5
#page {
    width: 70% /* prend 70% de la largeur de la résolution du visiteur */
    margin-left: auto;
    margin-right: auto;
}

Amicalement
Scoubi77

Torgar · 26/12/2011, 15h41

C'est tout ton droit d'être dubitatif mais en l'occurrence, tu n'arriveras pas à faire ce que tu souhaites, à savoir une structure en iframe sans utiliser les dites balises, et passer par un système de div HTML (Cf. ton premier poste !). D'où nos solutions alternative en PHP ou Javascript.

Le CSS ne résoudra pas ton problème. Il est clair qu'utiliser les <iframe></iframe> est ce qu'il y a de plus simple et rapide. Le CSS, lui, t'aideras à la mise en page. Mais tant que la solution d'affichage n'est pas défini, il sera difficile de t'aider.

20/12/2011, 14h09	#6
Torgar Membre expérimenté Jérémy Développeur Web Inscription : août 2007 Messages : 326 Détails du profil Informations personnelles : Nom : Jérémy Âge : 26 Localisation : France, Gard (Languedoc Roussillon) Informations professionnelles : Activité : Développeur Web Secteur : Industrie Informations forums : Inscription : août 2007 Messages : 326 Points : 535 Points : 535	Mise à part faire des includes() en PHP ou même passer par de l'AJAX comme dit par Emyleen y a pas d'autres solutions sans iframe/frame. Comment gères-tu ton contenu ? (base de données, fichiers html/texte, etc.) __________________ Vivez vos rêves !!! Si vous voulez que l'on vous aide, postez votre code avec la balise [ CODE ] [ /CODE ] (bouton # de l'éditeur)
	00

26/12/2011, 15h41	#11
Torgar Membre expérimenté Jérémy Développeur Web Inscription : août 2007 Messages : 326 Détails du profil Informations personnelles : Nom : Jérémy Âge : 26 Localisation : France, Gard (Languedoc Roussillon) Informations professionnelles : Activité : Développeur Web Secteur : Industrie Informations forums : Inscription : août 2007 Messages : 326 Points : 535 Points : 535	C'est tout ton droit d'être dubitatif mais en l'occurrence, tu n'arriveras pas à faire ce que tu souhaites, à savoir une structure en iframe sans utiliser les dites balises, et passer par un système de div HTML (Cf. ton premier poste !). D'où nos solutions alternative en PHP ou Javascript. Le CSS ne résoudra pas ton problème. Il est clair qu'utiliser les <iframe></iframe> est ce qu'il y a de plus simple et rapide. Le CSS, lui, t'aideras à la mise en page. Mais tant que la solution d'affichage n'est pas défini, il sera difficile de t'aider. __________________ Vivez vos rêves !!! Si vous voulez que l'on vous aide, postez votre code avec la balise [ CODE ] [ /CODE ] (bouton # de l'éditeur)
	00

20/12/2011, 10h22	#4
Emyleen Membre actif Emeline Dabée Webmaster Inscription : mars 2010 Messages : 136 Détails du profil Informations personnelles : Nom : Emeline Dabée Âge : 26 Localisation : France, Aveyron (Midi Pyrénées) Informations professionnelles : Activité : Webmaster Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : mars 2010 Messages : 136 Points : 171 Points : 171	Bonjour, Je ne comprends pas ce que tu veux faire, tu veux afficher le contenu de ta <div id="contenu">? Car si tu veux mettre à jour ta div sans recharger la page, il te faut te tourner vers de l'ajax je penses
	00

20/12/2011, 13h54	#5
scoubi77 Invité régulier Inscription : novembre 2009 Messages : 117 Détails du profil Informations forums : Inscription : novembre 2009 Messages : 117 Points : 5 Points : 5	Bonjour, Essayant de me mettre un peu à la page, j'ai donc Suprimer les frames et remplacé par des divs, Tuto dailleur sur le site de ce merveilleux forum. Maintenant comment effectivement faire afficher dans ce div Les différentes pages qui peuvent être appelées par mon Menu ? Merci par avance de votre réponse Amicalement scoubi77
	00

20/12/2011, 14h15	#7
scoubi77 Invité régulier Inscription : novembre 2009 Messages : 117 Détails du profil Informations forums : Inscription : novembre 2009 Messages : 117 Points : 5 Points : 5	Et bien en liens html, hum les iframes c'est une Nouvelle verssion en html des frames ?
	00

20/12/2011, 14h19	#8
Emyleen Membre actif Emeline Dabée Webmaster Inscription : mars 2010 Messages : 136 Détails du profil Informations personnelles : Nom : Emeline Dabée Âge : 26 Localisation : France, Aveyron (Midi Pyrénées) Informations professionnelles : Activité : Webmaster Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : mars 2010 Messages : 136 Points : 171 Points : 171	Alors si tu gères ton contenu dans des pages html différentes il ne te faudra pas de doctype et autres head dans ces pages si tu les appelle dans une div car sinon il y aura conflit avec les entêtes de la page appelante. Le mieux, si le contenu de ta div doit changer en fonction d'un clic sur un lien, c'est de faire avec la méthode AJAX. Il y a de très bon tutos simple à comprendre sur Développez.com Pour les iframe, tu auras ta réponse ici
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email