5568 sujets

Sémantique web et HTML

Centrer ma page

Pages :
Bonjour,
je suis débutant en xhtml et je voudrais centrer ma page masi probleme.
j'ai opté pour : position absolue, left 50% et marge negetve.
Mais decalage totale qd je change de pc avec une resolution differente.
Que me conseillez vous % ou px.
Comment faire pour centrer une image et ajouter 2 textes de chaque coté de l'image.
Mes textes se placent sous l'image qd je reduit.

MERCI
Administrateur
Hello Arnaud et bienvenue,

Puisque, comme tu le dis, tu es débutant, n'hésite pas à suivre scrupuleusement le lien qui s'affiche en haut du forum "Vous êtes débutant ? ...".
Ce lien va t'amener à des pistes très importantes pour débuter, et t'expliquera aussi comment rechercher tes réponses sur le forum ou la FAQ, car - comme tu t'en doutes - ce genre de question est très souvent posée.

Bref, si tu ne prends pas le temps de suivre ces premières pistes, tu ne disposeras pas des bases nécessaires et il sera difficile de t'aider puisque nous parlerons chinois pour toi.

PS : si tu as déjà fais des tests, il faudrait nous montrer ton code ou un exemple en ligne. Personne ne peut résoudre un problème en le devinant Smiley ohwell
Modifié par Raphael (25 Oct 2005 - 21:32)
Merci!!!!!!!!!!!!!!
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="FFF [Gory]" />
<meta name="generator" content="WebExpert 5" />
<link rel="stylesheet" media="screen" type="text/css" title="essai" href="menucss.css" />
</head>
<body>
<div id="conteneuracceuil">

		<div class="banacc">	
				<img src="Image/Image Gif/banniere1.gif" border="0" width="900px" height="70px;" style="position: absolute; left: 50%; margin-left: -450px; top: 30px"/>
				<img src="Image/Image Gif/boisson31.gif" border="0" width="80px" height="80px" alt="image a gauche" align="middle" style="position: absolute; left: 100px"/>
				<img src="Image/Image Gif/boisson31.gif" border="0" width="80px" height="80px" alt="image a droite" align="middle" style="position: absolute; left: 80%"/>
				<p style="position: absolute; left: 50%; margin-left: -250px; top: 30px">www.xxxxxx</p>
		</div>
				
				<div class="bienvenue">
					<a href="presentation.html"><img src="Image/Image Gif/bienvenue2.gif" border="0" width="250px" height="50px" hspace="0" style="position: absolute; left: 50%; margin-left: -125px"/></a>
				</div>




					<div class="centre">
						<p style="position: absolute; left: 13%; top: 35%"><a href="presentation.html" <img src="Image/Image Gif/enter1.gif" border="0" width="150px" height="100px" /><img src="Image/Image Gif/enter1.gif" border="0" width="150px" height="100px" alt="" /></a><br /> Au Domaine de Sourilhac<br><br />Côte du Rhone<br /></p>
						<p style="position: absolute; left: 63%; top: 40%";>xxxxxxxxxx<br>xxxxxxxxx<br>xxxxxxx<br>xxxxxxxxxx</p>
						<a href="presentation.html" <img src="Image/Photos/vigne.jpg" border="0" width="500px" height="350px" align="middle"/><img src="Image/Photos/vigne.jpg" border="0" width="400px" height="300px" align="middle" style="position: absolute; left: 50%; margin-left: -200px;"/></a>
					</div>
		
	
	
						<div class="bas">
							<p style="position: absolute; left: 50%; margin-left: -450px"> Vous êtes le xieme
							visiteur</p>
						</div>

</div>
</body>
</html>
Vous pourrez constater qu'a la reduction de la page tt est decalé
Comment faire
Quelle unité dois-je utiliser
Merci encore
Je vois des trucs qui me font peur : Des paragraphes en absolu ... et où se trouve la feuille de style ? La seule que je vois mentionnée est celle du menu.

Ne me dis pas que c'est la seule ?
Merci.
Mon paragraphe est en absolu pour le positionner comme il faut a coté de l'image.
Ma feuille css concerne juste l'habillage du texte.
merci!!!!
comment positionner le texte ???
Bonjour à tous,

@Arnaud> l'impatience des débutants qui veulent tout de suite sauter à la solution Smiley cligne , beaucoup de gens ici, en passant quelques mn sur ton code sauraient résoudre tes problèmes (même peut-être moi Smiley eek )...mais toi tu n'auras toujours pas compris...ton code confirme que tu es un débutant et qu'il te manque quelques bases, as tu bien lu la réponse du standardiste un peu plus haut? C'est un gars très calé Smiley lol , tu serais fort avisé de suivre ses conseils Smiley langue . Pour commencer tu pourrais par exemple essayer de rechercher sur ce site ce qu'est un doctype...tu comprendras vite qu'il te faut débuter ta page par ça, ensuite tu verras comment définir ton style dans une css plutôt qu'en ligne, etc...
Après avoir corrigé les plus grosses erreurs, on taidera pour les plus suptiles Smiley smile
Persévère...et utilise les tutoriels, la FAQ, la recherche...tu progresseras rapidement!
Modifié par zanzibar (26 Oct 2005 - 17:12)
Ben c'est un peu comme si tu me demandais comment je fais pour aller en vacances sur la plage: alors j'y vais en voiture, ou alors par le train... ou bien par avion, et si je suis déjà à St trop alors j'y vais à pied Smiley lol
Bref il n'y a pas de réponse unique à ta question...tout dépend de ce que tu veux faire, couramment ça pourrait bien être en px ou en %...
Comment veux tu qu'on devine ce que tu veux faire si tu ne donnes pas plus de précisions ???? Que veux tu centrer, ta page ou l'image de la zone centrale? Comment doivent se comporter les différentes zones lorsque tu réduis la largeur? Essaie d'abord de faire un squelette de ta page sans images un peu comme les tutos, mets le en ligne sur une url de test et donne nous un lien !...et montre un peu de bonne volonté dans ton code vis-à-vis des standards (doctype, css...) sinon tu n'auras pas beaucoup de réponses!
Modifié par zanzibar (26 Oct 2005 - 22:52)
Merci pour tes réponses.
donc je veux débuter par quelque chose de simple :
centrer ma page.
centrer un element sur ma page.
encadrer de deux texte cet éléments (plsieur site propose un positionnement de texte en absolu qu'en penses tu?????).
A la reduction de la fenetre je veux que ma page se decale jusqu'a sa taille max pour etre ensuite rognée.

Je te remet le code de ma page d'accueil (j'ai mis plusieurs syle en ligne pour faire des essais).

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- Date de création: xxx -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="FFF [Gory]" />
<meta name="generator" content="WebExpert 5" />
<link rel="stylesheet" media="screen" type="text/css" title="essai" href="menucss.css" />
</head>
<body>
<div id="conteneuracceuil">

		<div class="banacc">	
				<img src="Image/Image Gif/banniere1.gif" border="0" width="900px" height="70px;" style="position: absolute; left: 50%; margin-left: -450px; top: 30px"/>
				<img src="Image/Image Gif/boisson31.gif" border="0" width="80px" height="80px" alt="image a gauche" align="middle" style="position: absolute; left: 100px"/>
				<img src="Image/Image Gif/boisson31.gif" border="0" width="80px" height="80px" alt="image a droite" align="middle" style="position: absolute; left: 80%"/>
				<p style="position: absolute; left: 50%; margin-left: -250px; top: 30px">www.xxxxxx</p>
		</div>
				
				<div class="bienvenue">
					<a href="presentation.html"><img src="Image/Image Gif/bienvenue2.gif" border="0" width="250px" height="50px" hspace="0" style="position: absolute; left: 50%; margin-left: -125px"/></a>
				</div>




					<div class="centre">
						<p style="position: absolute; left: 13%; top: 35%"><a href="presentation.html" <img src="Image/Image Gif/enter1.gif" border="0" width="150px" height="100px" /><img src="Image/Image Gif/enter1.gif" border="0" width="150px" height="100px" alt="" /></a><br /> Au Domaine de Sourilhac<br><br />Côte du Rhone<br /></p>
						<p style="position: absolute; left: 63%; top: 40%";>xxxxxxxxxx<br>xxxxxxxxx<br>xxxxxxx<br>xxxxxxxxxx</p>
						<a href="presentation.html" <img src="Image/Photos/vigne.jpg" border="0" width="500px" height="350px" align="middle"/><img src="Image/Photos/vigne.jpg" border="0" width="400px" height="300px" align="middle" style="position: absolute; left: 50%; margin-left: -200px;"/></a>
					</div>
		
	
	
						<div class="bas">
							<p style="position: absolute; left: 50%; margin-left: -450px"> Vous êtes le xieme
							visiteur</p>
						</div>

</div>
</body>
</html>

et celui de ma feuille css

@charset "iso-8859-1";

#conteneuracceuil {margin-top: 20px}
#conteneur {}
#entete {width: 800px; height: 50px; /*margin-right: 10px;*/ /*margin-bottom: 20px;*/}
.banacc {}
.banacc p {width: 500px; margin-top: 20px; color: #006600; font-size: 1.5em; font-family: Algerian; font: bold; text-align: center}

.bienvenue {margin-top: 120px; margin-bottom: 100px}


.centre {margin top: 200px}
.centre p {width: 300px ;color: #006600; font-family: Copperplate Gothic Bold;text-align: center; vertical-align: middle;}


.compt {position: relative;top: 8px;}

.bas p {margin-top: 350px; width: 900px; color: #980000; font: bold Terminal; text-align: center;}


ENCORE MERCI
Bonjour,

Alors il y a déjà un certain nombre d'erreurs de syntaxe (29 points sur mon validateur local):

- quand tu déclares width ou height dans le XHTML il ne faut pas mettre l'unité px mais simplement par ex width="700" height="200"
- tu as encore de nombreuses balises <br> qui doivent être changées en <br /> comme tu l'as fait ...en partie
- tu as des chevrons fermants oubliés dans certains liens, un point virgule en trop dans un style de paragraphe et des URL malformées (dans tes url de liens les espaces doivent être codés en %20

En l'occurence tout ça ne changera pas la face du monde pour ton pb de positionnement mais quand même il faut mieux partir sur de bonnes bases....donc à corriger. Tu aurais pu voir tous ces points si tu avais passé ta page au validateur w3c...c'est un bon réflexe à prendre!
D'autre part je ne te conseille pas l'utilisation d'un doctype XHTML1.1 qui n'est pas trop adapté, remplace le par un doctype XHTML1.0 (souvent expliqué sur ce forum, voir la recherche)

Enfin, pourquoi garder une partie des styles en ligne dans ton XHTML, passe tout ça dans ta css, ton code y gagnera beaucoup en clarté!

Pendant que tu règles ça je regarde la suite Smiley smile

edit: très important, j'oubliais l'excellente remarque de numéro6: ne positionne pas tes paragraphes en absolu, créé un squelette de ta page avec des div et tu positionneras tes paragraphes à l'intérieur avec des margin et padding ! ....bref encore une fois prend le temps de regarder les tutos d'alsa et inspire toi!
Modifié par zanzibar (27 Oct 2005 - 09:52)
J'ai relu ta demande...si ce que tu veux faire c'est une présentation 3 colonnes avec la colonne centrale de largeur fixe et les 2 colonnes latérales étirables alors va voir ce post
Pour un débutant je conseillerais la solution avec tableau (celle de chmel)
qui est simple et fiable (même si l'usage de tableau peut gêner certains)plutôt que la mienne sans tableau et avec marges négatives (en bas du post) qui est un tantinet pointue et peut entraîner des pb dans certains cas.
Si tu veux une présentation trois colonnes sans contrainte particulière alors voire les tutos d'alsa, il n'y a pas besoin de marges négatives dans ce cas.
Modifié par zanzibar (27 Oct 2005 - 14:41)
Excuse moi mais je vais insister pour eviter l'utilisation des tableaux.
Tu me conseil donc de creer un block par texte (a droite et a gauche de l'image) en utilisant des margin left et right
En gros un block par éléùent a positionner ok???
Merci.
Bonjour,
Ben c'est vrai que si on cherche à faire un gabarit de page avec 2 ou 3 colonnes, à priori chaque colonne va se traduire par un div positionné ou flottant, dans lequel tu mettras soit un menu soit une image, soit des paragraphes de texte eux mêmes ajustés si nécessaire dans ce div avec des margin ou padding, regarde les sources des tutos Alsa de gabarit de page ("affichage > source" sur ton navigateur) tu y trouveras la css en tête et le XHTML ensuite...après tu adaptes à ton cas mais au moins tu ne pars pas de travers en essayant de positionner en absolu tes paragraphes!

Par rapport au choix avec ou sans tableau, faut pas être extrémiste, il y a des cas ou le tableau n'est pas un crime...

Bonne continuation
Modifié par zanzibar (28 Oct 2005 - 09:33)
zanzibar a écrit :

- quand tu déclares width ou height dans le XHTML il ne faut pas mettre l'unité px mais simplement par ex width="700" height="200"



Heu ... j'ai un petit problème avec ça Smiley cligne
1. Déclarer width ou height dans le xhtml ? aux dernières nouvelles, ce sont des propriétés CSS, non ? Elles n'ont rien à faire dans du xhtml.
2. Ne pas indiquer d'unités ne fonctionne qu'avec la valeur "0" ! Sinon, il est obligatoire d'indiquer une unité, que ce soit en px, en em ou autre ...
T'a bien raison sopo faut passer ça dans la css, j'e n'ai pas eu le réflexe de le signaler parce que j'ai l'habitude de laisser les dimensions de mes images dans le xhtml pendant la mise au point de ma page, sous la forme
        <img class="imgtop" src="pictures/photo4nb5080.jpg" width="200" height="250" alt="toto" />
ça passe au validateur w3c sans pb (XHTML1.0 strict) et ça fonctionne...mais pour un site finalisé c'est beaucoup mieux de passer ça en css et là faut bien sûr mettre l'unité sauf si c'est 0 comme tu l'indiques!
Modifié par zanzibar (28 Oct 2005 - 10:08)
Bonjour,

Petite question: pourquoi, précisément et dans le détail, serait-ce beaucoup mieux de passer ça en CSS ?

Un kilo de cacahuètes à qui me trouve une seule réponse probante et non une pétition de principe... Smiley cligne
Modifié par Laurent Denis (28 Oct 2005 - 10:19)
Maintenant que tu le dis effectivement Smiley eek continue Laurent ça m'intéresse d'avoir ton avis la dessus même si je gagne pas les cacahuètes! Smiley lol J'ai répondu ça en me disant qu'à partir du moment ou on crée une css pour y mettre le style et le séparer du contenu autant y placer tout ce qui peut y être mis en terme de style et donc également les dimensions des images...
Pages :
Sujet clos
Aller à