28221 sujets

CSS et mise en forme, CSS3

[Résolu] Page web non centrée dans opéra

Bonjour tout le monde, je suis en train de faire un site sur le webdesign et le xhtml ( un de plus ). Mon code est valide mais je vien de me rendre compte que la page n'était pas centrée dans opera te je n'arrive pas à comprendre pourquoi!! alors qi qqn pouvais m'aider. http://amenini.free.fr/home/
Administrateur
Déjà, tu n'as pas de liens vers Alsa dans tes sites donc tu es banni. Smiley biggrin

Sérieusement, Tu centres ton site global avec :
<div align="center">


Il y'a plusieurs raisons pour changer de méthode : la première étant que la mise en page ne doit pas être déterminée dans le code HTML mais en CSS.


Je te propose de suivre ces pistes pour utiliser une autre technique :
- http://www.openweb.eu.org/articles/initiation_centrage/
- http://www.alsacreations.com/articles/centrer/

Bonne chance Smiley smile

PS : évite également les accumulations de ce genre :
<br /><br /><br /><br /><br /><br /><br /><br />

Les marges sont faites pour ça.

D'ailleurs en passant, je ne sais pas si tu comptes faire du XHTML strict (ça semble être l'intention de départ), mais il y'aura pas mal de choses à éliminer alors (<font>, "color", "size", ...)

Et pour finir, il n'est pas nécessaire d'accumuler les noms de classes, comme sur cet exemple :
<a href="" class="links">Articles</a>
<a href="" class="links">(X)HTML</a>
<a href="" class="links">Css</a>
<a href="" class="links">Design</a>
<a href="" class="links">Outils gratuits</a><br /><br />
<font size="3" color="#666666"><b>Liens</b></font><br />
<a href="http://www.allhtml.com" class="links" hreflang="Fr">Allhtml</a>

<a href="http://www.openweb.eu.org" class="links" hreflang="Fr">Openweb</a>
<a href="http://www.webmaster-hub.com" class="links" hreflang="Fr">Forum Webmaster</a>
<a href="http://www.w3.org" class="links" hreflang="En">W3C</a>
<a href="http://www.alistapart.com/" class="links" hreflang="En">Alistapart</a><br />

Voici un lien qui parle de ces excès de classes
merci pour tout tes conseilset justement pour l'acumulation des br au départ j'avais mis sa dans un css avec un {valign-text: bottom;} mais sa voulais pas marcher alors j'ai pas réussi à mettre la date en bas.
Avant de faire un nième site sur XHTML, ou de poser un problème de présentation, la priorité serait d'utiliser une DTD valide. En effet:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Transitionnal//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

... n'existe pas. Et le comportement d'un navigateur ne peut être cohérent sur cette base.

Ce qui serait plus approprié pourrait être la DTD XHTML1.0 transitional:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


Pour vérifier la validité d'une DTD, ou obtenir simplement les code de DTD à copier/coller, se reporter systématiquement à http://www.w3.org/QA/2002/04/valid-dtd-list.html
c'est ce que j'avais mis au départ mais on m'avais dis de mettre 1.1 et comme je ne vois pas la différence j'ai mis celui la. Je pense que tu a parfaitement raison, j'ai beaucoup à apprendre avant de faire ce site!
antoinou2958 a écrit :
merci pour tout tes conseilset justement pour l'acumulation des br au départ j'avais mis sa dans un css avec un {valign-text: bottom;} mais sa voulais pas marcher alors j'ai pas réussi à mettre la date en bas.


Pas étonnant puisque {valign-text: bottom;} n'est pas une propriété de CSS2.

Ce qui s'en rapproche le plus se trouve ici :
http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align
Juste au cas où: sous Opera pour virer les marges intérieures de la page il faut mettre le padding du body à 0.

body {
padding:0;
margin:0;
}

Comme ça le résultat sera identique sous tous les navigateurs y compris Opera.
Sujet clos
Aller à