Différents problèmes liés au cadres

**mariok** · 15/11/2014, 23h38

bonsoir voila j'ai enfin réussis à créer mes cadres

plusieurs souci ce pose à moi

le premier un gros écart entre le titre et le cadre

screen

Nom : Capture d’écran 2014-11-15 à 23.28.26.png
Affichages : 101
Taille : 41,6 Ko

Nom : Capture d’écran 2014-11-15 à 23.28.26.png
Affichages : 101
Taille : 41,6 Ko

un je voudrais réduire l'ecart

deux je voudrais pour cacher ou montrer le tableau un ou deux sans que cela décale avec deux bouton différents

comme ceux-ci

Nom : cache ref.png
Affichages : 106
Taille : 2,2 Ko

Nom : cache ref.png
Affichages : 106
Taille : 2,2 Ko

Nom : cacher réseaux.png
Affichages : 105
Taille : 2,1 Ko

Nom : montrer les réf.png
Affichages : 103
Taille : 1,7 Ko

Nom : reseau montrer.png
Affichages : 103
Taille : 1,8 Ko

mon code HTML

Code html :

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
19
20
21
22
23
24
25
26
27
28
 /*****  Debut blocs du bas *****/ 
<center>
<p style="text-align: center; width: 48%; float: left; padding: 4px;<a href=""><img src="http://img.xooimage.com/files110/b/5/6/montrer-les-r-f-4899f73.png"></a></p>
<p style="text-align: center; width: 48%; float: right; padding: 4px;<a href=""><img src="http://img.xooimage.com/files110/3/b/a/reseau-montrer-4899f76.png"></a></p>
</center>
<center>
 
<p style="text-align: center; background-color: #0a7aaf; width: 48%; float: left; color: #e9e9e9; font-size: 12pt; border: #e9e9e9 4px ridge; padding: 4px;"> 
 
      <a href="https://www.phpbb.com/" TARGET="_blank"><span><img src="http://img.xooimage.com/files110/2/4/e/phpbbcom-489477b.png" alt="phpbb.com" title="accédez Phpbb.com"/></span></a>&nbsp;               
      <a href="http://www.phpbb-fr.com/"TARGET="_blank" ><span><img src="http://img.xooimage.com/files110/a/4/a/phpbbfr-4894786.png" alt="phpbb-fr.com" title="accédez Phpbb-fr.com" /  ></span></a>&nbsp;
      <a href="http://www.amarid.fr" TARGET="_blank" ><span><img src="http://img.xooimage.com/files110/2/a/f/amarid-4894792.png" alt="amarid.fr" title="accédez Amarid"/></span></a>&nbsp; 
</p>
 
 
 
<p style="text-align: center; background-color: #0a7aaf; width: 48%; float: right; color: #e9e9e9; font-size: 12pt; border: #e9e9e9 4px ridge; padding: 4px;">
 
      <a href="https://www.facebook.com/amarid.associationnationaleamarid?fref=ts" TARGET="_blank"><span><img src="http://img.xooimage.com/files110/1/4/a/facebook-4894913.png" alt="facebook" title="accédez Facebook"/></span></a>&nbsp;
       <a href="https://twitter.com/amarid2" TARGET="_blank"><span><img src="http://img.xooimage.com/files110/3/5/c/twitter-4894925.png" alt="twitter" title="accédez Twitter"/> </span></a>&nbsp;
       <a href="https://plus.google.com/u/0/"TARGET="_blank"><span><img src="http://img.xooimage.com/files110/5/f/5/gogle--4894931.png" alt="Google +" title="accédez Google +"/></span></a>&nbsp;
 
</p>
</center>
<br>
<br>
 
/****  fin blocs du bas ******/

Invité · 16/11/2014, 06h39

Bonjour,

1/ remplace <center>...</center> (obsolète) par <div style="text-align:center;"></div>.

2/ ferme correctement les balise <p....>.

3/ sort les styles CSS de tes balises, et met des class et/ou id.
C'est plus "propre" et plus clair.
Pour les tests (entre <head> et </head>:

Code css :

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

1
2
3
4
<style>
/* ici, tout le CSS */
 
</style>

En prod, utilise un fichier externe : styles.css.

4/ enfin, pour répondre à ta question, utilise les propriétés CSS : margin et/ou padding.

5/ Lire les cours te ferait le plus grand bien :

**mariok** · 16/11/2014, 10h24

pour le style align merci
pour les fermeture <p> j'ai pas compris je crois avoir bien ferme mes balises
balise CSS ?
je ne fait pas appel a un style CSS c'est que du PHPBB si tu peut me montrer un code qui fonctionne je suis preneur
merci

Invité · 16/11/2014, 10h41

Code html :

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

<p style="text-align: center; width: 48%; float: left; padding: 4px;<a href="">.............

Il manque une fermeture : >

Code html :

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

<p style="text-align: center; width: 48%; float: left; padding: 4px;"><a href="">.............

style="text-align: center; width: 48%;............" : ça, c'est du CSS !!

Envoyé par mariok

...c'est que du PHPBB...

Soit. Mais sur ton éditeur de texte, il existe (sans doute) une icône "Source", permettant de LIRE/MODIFIER le code html/CSS.

LIS les COURS !
Tu y gagneras, en temps comme en connaissance.

**mariok** · 16/11/2014, 15h36

merci a toi j'ai regarde de beaucoup plus prés les balise <p> mette une mise à la ligne du coup je l'est est supprimer et tout va beaucoup mieux pour le décalage
je suis ton conseil mais n'étant pas maitre de mon forum (heberge par XOOIT) je ne suis pas sur que toutes les fonction CCS3 marche.
Malgrés toutes mes recherches et test je comprend pas comment je peut fermer con cadre 1 avec le bouton du dessus sans touché au cadre 2 et vice versa

je te met mon code corrigé si tu voit des erreurs merci de me les montrer

code HTML dans le template overall footer sans appel a une fonction CSS

Code html :

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
19
20
21
22
23
24
25
/*****  Debut blocs du bas *****/ 
 
<div style="text-align:center;">
 
         <div style="text-align: center; width: 48%; float: left;><a href=""><img src="http://img.xooimage.com/files110/b/5/6/montrer-les-r-f-4899f73.png"></a></div>
         <div style="text-align: center; width: 48%; float: right;><a href=""><img src="http://img.xooimage.com/files110/3/b/a/reseau-montrer-4899f76.png"></a></div>
</div>
 
          <p style="text-align: center; background-color: #0a7aaf; width: 49%; float: left; color: #e9e9e9; font-size: 12pt; border: #e9e9e9 4px ridge; padding: 4;">
          <a href="https://www.phpbb.com/" TARGET="_blank"><span><img src="http://img.xooimage.com/files110/2/4/e/phpbbcom-489477b.png" alt="phpbb.com" title="accédez Phpbb.com"/></span></a>&nbsp;               
          <a href="http://www.phpbb-fr.com/"TARGET="_blank" ><span><img src="http://img.xooimage.com/files110/a/4/a/phpbbfr-4894786.png" alt="phpbb-fr.com" title="accédez Phpbb-fr.com"/></span></a>&nbsp;
          <a href="http://www.amarid.fr" TARGET="_blank" ><span><img src="http://img.xooimage.com/files110/2/a/f/amarid-4894792.png" alt="amarid.fr" title="accédez Amarid"/></span></a>&nbsp;
</p>
 
       <p style="text-align: center; background-color: #0a7aaf; width: 49%; float: right; color: #e9e9e9; font-size: 12pt; border: #e9e9e9 4px ridge; padding: 4;"> 
        <a href="https://www.facebook.com/amarid.associationnationaleamarid?fref=ts" TARGET="_blank"><span><img src="http://img.xooimage.com/files110/1/4/a/facebook-4894913.png" alt="facebook" title="accédez Facebook"/></span></a>&nbsp;
        <a href="https://twitter.com/amarid2" TARGET="_blank"><span><img src="http://img.xooimage.com/files110/3/5/c/twitter-4894925.png" alt="twitter" title="accédez Twitter"/></span></a>&nbsp;
        <a href="https://plus.google.com/u/0/"TARGET="_blank"><span><img src="http://img.xooimage.com/files110/5/f/5/gogle--4894931.png" alt="Google +" title="accédez Google +"/></span></a>&nbsp;
</p>      
 
</br>
</br>
</br>
 
/****  fin blocs du bas ******/

**NoSmoking** · 16/11/2014, 17h27

Bonjour,

...je ne suis pas sur que toutes les fonction CCS3 marche.

Dans tout ce qui est montré rien n'est en rapport avec CSS3 mais en CSS reconnu par tous les navigateurs même les obsolètes (à l'exception de IE4-).

Concernant ton besoin si tu refuses le CSS3 il te faudra te tourner vers le javascript, mais perso je n'en vois pas l'utilité.

Différents problèmes liés au cadres

CSS

Vue hybride

Discussions similaires

Partager

Partager