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 fenêtre 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 fenêtre, c'est saoulant !! Et en plus, j'ai un des 2 liens qui n'est pas actif sous Firefox et sous Chrome, alors que sous IE, ils sont actifs tous les 2 !!!
voir capture
Liens fenêtre

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

<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 petit bout de css :

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

2 réponses


Quel est le style de blog-footer?

savanah
Auteur

Alors...alors... Tiens, je te colle le css de toute la partie "blog" (qui seront des articles, en fait...)

#containpage{background: url(img/corpspage.jpg) no-repeat;width: 1035px;height: 1270px;margin: 0 auto;}
.container{width: 1035px;height: 1270px;margin: 150px 0;position: relative;}
.contain-blog1{width: 533px;height: 455px; position: absolute;top: 620px;left: 510px;}
.contain-blog2{width: 533px;height: 455px; position: absolute;top: 1015px;left: 510px;}
.contain-blog3{width: 533px;height: 455px; position: absolute;top: 1320px;left: 510px;}
.blog-head{background: url(img/Head-blog.PNG) no-repeat;width: 480px;height: 115px;margin: 0 auto;position: relative;}
.blog-bkg{background: url(img/bkg-blog.PNG) no-repeat;width: 462px;height: 226px;position: relative;left: 9px;top: 109px;}
.blog-bkgcomment{background-color: #dadada;width: 462px;height: 295px;left: 9px;top: 88px;margin-top: 90px;position: relative;}
.avatar{background: url(img/avatar-line.png) no-repeat;padding-top: 10px;width: 64px;height: 290px;margin-left: 10px;top: -20px;float: left;}
.blog-footer{background: url(img/foot-blog.PNG) no-repeat;width: 462px;height: 55px;position: relative;top: 225px;}
.nbrcomment{background: url(img/bulle-pm.png) no-repeat;width: 32px;height: 40px;margin-left: 15px;margin-top: -18px;float: left;}
.nbrcomment ul li a{font-family: "arial";font: bolder;font-size: 18px;color: #dadada;width: 35px;height: 37px;margin-left: 13px;float: left;}
#titreblog{width: 462px;height: 20px; margin-top: 12px;margin-right: 30px;float: left;}
#txt-titreblog h2{list-style: none;font-family:'caviar_dreamsregular';font-size: 20px;color: #dadada;text-align: center;text-decoration: none;}
.readmore{width: 130px;height: 15px;margin-right: 3px;margin-top: -15px;float: right;}
.txtreadmore a{line-height: 15px;font-family:'caviar_dreamsregular';font-size: 24px;color: #dce3e9;text-align: right;text-decoration: none;padding-bottom: 10px;}

En espérant que tu comprennes quelque chose à mon code !! Même moi, j'ai du mal (lol) !!

Merci