Centrer un cadre en CSS sur page HTML

astonvmax56 Messages postés 3 Date d'inscription Statut Membre Dernière intervention -
bg62 Messages postés 23732 Date d'inscription Statut Modérateur Dernière intervention - 20 sept. 2024 à 17:02

Bonjour tout le monde,

je tourne en rond depuis des jours pour arriver à centrer sur une page un cadre qui fait 80% de la largeur

la police fonctionne bien.

j'ai essayer avec frame - conteneur - block , rien à faire

voila mon html :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 TRANSITIONAL//EN">
<!-- DATE DE CREATION: 01/07/2011 -->
<HTML>

<HEAD>

<TITLE>ASTONVMAX</TITLE>
<META NAME="Description" CONTENT="ASTONVMAX">
<META NAME="Keywords" CONTENT="ASTONVMAX">
<META NAME="Author" CONTENT="ASTONVMAX">
<META NAME="Generator" CONTENT="WebExpert">
 
<!-- CCS pour font speciale  "" Arima-Madurai-Extra Bold "" sur la page web   -->   

<link rel="stylesheet" type="text/css" href="fonts.css">

<link rel="stylesheet" type="text/css" href="cadres.css">

<!-- CCS pour font speciale  "" Arima-Madurai-Extra Bold "" sur la page web   -->   
  
</HEAD>
    
    
 
<BODY>

<BR>    


    <div class="border3"><A HREF="http://www.auvergne.pref.gouv.fr/" TITLE="prefecture" TARGET="_blank">PREFECTURE</div>

    <div class="border4"><A HREF="https://ants.gouv.fr/" TITLE="documents sécurisés" TARGET="_blank">ANTS</div>


<BR>    

    
</BODY>
</HTML>

et mon CSS :

 "cadres.css"


.border3{
  border-width: 2px ;
  border-style: solid ;
  border-color : #000000 ;
  padding : center ;
  padding-top : 2px ;
  padding-bottom : 2px ;
  margin-top : 2px ;
  margin-bottom : 2px ;
  background-color : #80FFFF ;

  
}

j'ai enlevé weigth : 80% ; parce que ca me le centre pas, ca me l'aligne sur la gauche de la page

j'ai 6 "border" parce que je veux mettre une couleur différente pour chaque cadre.

merci beaucoup

A voir également:

Centrer un cadre en CSS sur page HTML
Comment supprimer une page sur word - Guide
Comment imprimer un tableau excel sur une seule page - Guide
Comment faire un cadre sur word - Guide
Editeur html - Télécharger - HTML
Mettre google en page d'accueil - Guide

4 réponses

Réponse 1 / 4

astonvmax56 Messages postés 3 Date d'inscription Statut Membre Dernière intervention 1

Bonjour,

ça fonctionne bien sur mon pc et aussi sur mon tél samsung,

j'avais essayer avec 80% mais je n'arrivai pas à centrer.

un grand merci,

Réponse 2 / 4

Bruno83200_6929 Messages postés 614 Date d'inscription Statut Membre Dernière intervention 129

Bonjour,

Pour y parvenir, il faut jouer avec les propriétés CSS telles que la largeur (width), le centrage via les marges, et un meilleur contrôle des bordures.

Voici une version modifiée de votre code HTML et CSS qui devrait vous permettre de centrer correctement le cadre sur la page :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 TRANSITIONAL//EN">
<!-- DATE DE CREATION: 01/07/2011 -->
<HTML>
<HEAD>
  <TITLE>ASTONVMAX</TITLE>
  <META NAME="Description" CONTENT="ASTONVMAX">
  <META NAME="Keywords" CONTENT="ASTONVMAX">
  <META NAME="Author" CONTENT="ASTONVMAX">
  <META NAME="Generator" CONTENT="WebExpert">
  
  <!-- CCS pour font speciale  "" Arima-Madurai-Extra Bold "" sur la page web   -->   
  <link rel="stylesheet" type="text/css" href="fonts.css">
  <link rel="stylesheet" type="text/css" href="cadres.css">
  
</HEAD>
<BODY>

<BR>

<div class="border3">
  <A HREF="http://www.auvergne.pref.gouv.fr/" TITLE="prefecture" TARGET="_blank">PREFECTURE</A>
</div>

<div class="border4">
  <A HREF="https://ants.gouv.fr/" TITLE="documents sécurisés" TARGET="_blank">ANTS</A>
</div>

<BR>

</BODY>
</HTML>

.border3, .border4 {
  border-width: 2px;
  border-style: solid;
  border-color: #000000;
  padding: 10px; /* Ajustement de la taille des marges internes */
  background-color: #80FFFF;
  
  width: 80%; /* Le cadre prend 80% de la largeur de la page */
  margin: 10px auto; /* 'auto' centre l'élément horizontalement */
  text-align: center; /* Centrage du texte à l'intérieur du cadre */
}

Avec ces ajustements, vos cadres .border3 et .border4 devraient être correctement centrés, tout en occupant 80% de la largeur de la page.

Réponse 3 / 4

astonvmax56 Messages postés 3 Date d'inscription Statut Membre Dernière intervention 1

bonjour et merci,

je vais essayer votre solution et vous tiendrai au courant,

Réponse 4 / 4

bg62 Messages postés 23732 Date d'inscription Statut Modérateur Dernière intervention 2 409

une solution universelle :

https://www.w3.org/Style/Examples/007/center

Discussions similaires

probleme sommet

Retour en arrière avec Pages sur Mac ?

Votre réponse

Discussions similaires