Discussion :

[savanah66]

Bonjour à tous !!

J'ai besoin d'un petit coup de main sur un léger problème de code. J'explique : j'ai mis en place une fenetre modale sur l'accueil de mon site, jusque là, ça va...j'ai galéré mais j'y suis arrivée. La ou je coince, c'est que je n'arrive pas à positionner le texte du lien qui ouvre la fenetre, c'est saoulant !! voir capture
https://www.box.com/s/toxbmsnoezt69uj67zk0

Entouré en vert, c'est le positionnement que je veux, en rouge, le positionnement que j'ai !!

Extrait de code :

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
29
<div id="containpage">
    <div class="contain-blog1">
        <div class="blog-head">
            <div id="titreblog">
                <div id="txt-titreblog">
                    <h2>Titre du blog</h2>
                </div>
            </div>
            <div class="blog-bkg">
                <div class="blog-footer">
                    <a href="#overlay3" class="txtreadmore">Lire la suite</a>
                    <div class="nbrcomment">
                        <ul>
                            <li><a href="#">9</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <a href="#?w=700" rel="popup_block" class="txtreadmore"></a>
        <div id="overlay3">
        <div class="popup_block">
            <a class="close" href="#"><img alt="Fermer" title="Fermer la fenêtre" class="btn_close" src="img/CloseBox.png"></a>
            <h2>Popup</h2>
            <p>Aliquip transverbero loquor esse ille vulputate exerci veniam fatua eros similis illum valde. Praesent, venio conventio rusticus antehabeo lenis. Melior pertineo feugait, praesent hos rusticus et haero facilisis abluo. </p>
            <p>Veniam tincidunt augue abluo vero, augue nisl melior quidem secundum nobis singularis eum eum.</p>
        </div>
    </div>
</div>

un bout de css :

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
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
h1{color: #dce3e9; line-height: 36px;float: left;}
h2{color: dce3e9;}
h3{color: dce3e9;}
h4{color: dce3e9;}
p{font-family: corbel; font-size: 24px; text-decoration: none;float: right;}
body{background-color: #000000;background-position: center; background-position: top;}
a{color: #ffffff;text-decoration: none;font-family: corbel;}
a:hover{text-decoration: none;}
button,input,select,textarea{font-family: caviar_dreamsregular, corbel, sans-serif;font-size: 12px;}
textarea{resize: none;}
 
 
.txtreadmore a{line-height: 15px;font-family:'caviar_dreamsregular';font-size: 24px;color: #dce3e9;text-align: right;text-decoration: none;padding-bottom: 10px;}
 
#overlay3{
    display: none;
    position: fixed;
    top:0; right:0; bottom:0px; left:0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000; 
 
}
.overlaytxt a{
    width: 462px;
    height: 30px;
    line-height: 25px;
    font-size: 15px
    text-align: right;
    margin-bottom: 15px;
 
}
 
#overlay3:target{
    display: block;
}

Donc, je suis preneuse de conseils divers et variés car en codage, je suis un poil noob !!
Merci d'avance

[NoSmoking]

Bonjour,
ajoute un float:right à ton lien

Code html :

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

1
2
3
4
5
6
7
8
<div class="blog-footer">
  <a style="float:right" href="#overlay3" class="txtreadmore">Lire la suite</a>
  <div class="nbrcomment">
    <ul>
      <li><a href="#">9</a></li>
    </ul>
  </div>
</div>

[savanah66]

Bonjour,
ajoute un float:right à ton lien

Je te remercie du tuyau !! En effet ça marche !! Mais je n'arrive pas à caler en hauteur mon texte dans le bandeau gris ni à changer la taille des caractères, et en plus, je ne comprend toujours pas pourquoi j'ai le 2ème lien inactif sous Firefox et sous Chrome, alors que ça marche sous IE et que les codes sont identiques pour les 2 blocs !!
Si t'as une idée, je prends...!!

Voir capture : en vert, le lien qui marche, en rouge, le lien inactif.

https://www.box.com/s/h2xwvz1mdf3ylf791gxa

[rodolphebrd]

Bonjour,

Je ne parviens pas à situer le problème avec la portion de code que vous postez d'autant plus que j'ai un rendu totalement différent de votre impression d'écran.
Avez-vous un lien à échanger?

[savanah66]

Bonjour,

...j'ai un rendu totalement différent de votre impression d'écran.
Avez-vous un lien à échanger?

Alors là, ça m'inquiète !!
En effet, je viens de le mettre en ligne, et j'ai la moitié des blocs qui ont sauté!!
C'est quoi, ce binz ? Comment ce fait-il que je peux l'afficher en local et que ça me fasse ça une fois en ligne ?
Je vais craquer !!!!

voila ce que je vois en local :

https://www.box.com/s/u92w7hb2x9p9ole1f2r6

l'adresse du site en ligne :
http://www.chronos-3d.fr/index.html#

[rodolphebrd]

J'ai testé sur (Mac) Safari, Chrome et Firefox. Tout fonctionne correctement et la fenêtre modale s'affiche correctement.
J'ai un rendu fidèle à ce que vous avez en local.

[savanah66]

Alors, le problème d'affichage est résolu !!
C'est ma faute....j'ai merdé en tapant le nom des images, j'ai mis certaines extensions en MAJ au lieu de min. D'ou le souci à l'ecran.

Dans la foulée, j'ai même réussi à faire ma popup !!

Mais il n'en reste pas moins que le 2ème lien ne marche pas !! Très gênant pour afficher la page qui correspond !!

Si vous avez une idée d’où ça peux venir, je prends !!

[rodolphebrd]

Le lien n'est plus actif?