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
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