Bem,é o seguinte,eu estava tentando fazer um bloco de download personalizado para os usuarios do meu blog poderem baixar e tudo mais
tava funcionando perfeitamente,as funções javascript que eu implementei não tinham problema nenhum,porém quando eu fui botar mais um bloco de download na postagem,acontenceu essa bizarrice:
ele meio que bugou,provavelmente porque um mesmo bloco de download nao pode ocupar um mesmo espaço,porém eu queria organiza-los de cima para baixo e nao lado a lado,aqui ta o meu codigo,ele é um pouquinho grosso mas relativamente curto:
html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0""http://ww.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>downloads-script</title>
<link rel="stylesheet" type="text/css" href="css/doc.css" media="all" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="js/scriptdownloadform.js"></script>
</head>
<body>
<div class="caixa"><!--caixa e o bloco em si-->
<img id="tumb" src="https://lh6.googleusercontent.com/0JbjEfvTl5IAEPDxekpqOj7aMq_OHu51KAT7gMup6IAObcb3b5v6fqrCmn8bTsTFWDktB7xofnuYPCA=w1366-h589"></img>
<div id="texto">
<p>Titulo</p>
<p>Epsodio ???</p>
<p>formato:mkv</p>
<p>tamanho:300mb</p>
</div>
</div>
<a href="#" id="down" name="post" onmouseover="setoption('http://www.google.com.br','http://www.wikipedia.com.br',0)">Baixar</a><!--botao de download junto com os parametros da funcao set-->
<div id="op1">
<img src="https://lh5.googleusercontent.com/ZwdgvGW5o7Kv8JS_ILeMti20el26Ab8wGzkUa7OmHyM1xswkjH2FT7Up8PmVtjmVM17_HEkmBy3-a9I=w1366-h589" style="margin-top:0px;width=70px;height:70px;"></img>
</div>
<div id="op2">
<img src="http://1.bp.blogspot.com/-oLI12AT3nHU/Vcu4HYBF5iI/AAAAAAAACis/BhPT5_Ce6Cg/s1600/uptobox-logo.png" style="margin-top:10px;width=50px;height:50px;"></img>
</div>
</body>
css
.caixa {//design da caixa de download
display:inline-block;
background-color:#FFCC00;
border:2px solid #000;
float:left;
width:410px;
height:120px;
border-radius:10px;
position:absolute;
}
#op1 {//design das opçoes
margin-top:110px;
display:inline-block;
float:left;
margin-left:25px;
background-color:#FFCC00;
border:2px solid #000;
width:154px;
height:54px;
border-radius:10px;
}
#op2 {
margin-top:110px;
display:inline-block;
float:left;
margin-left:25px;
background-color:#6600FF;
border:2px solid #000;
width:154px;
height:54px;
border-radius:10px;
}
#texto {
display:inline-block;
float:left;
font-style:Arial bold 2px;
font-size:10px;
font-family:"Comic Sans MS",cursive,sans-serif;
margin-left:10px;
}
#tumb {//design da tumbnail
display:inline-block;
float:left;
width:180px;
height:100px;
border:2px solid #000;
border-radius:10px;
margin-left:2px;
margin-top:2px;
}
#down {//design do botao de download
display:inline-block;
float:left;
position:absolute;
border-radius:10px;
background-color:#000;
width:410px;
height:20px;
font-style:Arial bold 2px;
font-size:15px;
text-align:center;
text-decoration:none;
color:#FFF;
font-family:"Comic Sans MS",cursive,sans-serif;
margin-top:110px;
margin-left:0px;
}
javascript
var op1,op2;
var flag = 0;
function setoption(link1,link2,i){//seta links de download
var x = document.getElementsByName("post")[i];
op1 = link1;//armazena dois links em duas variaveis distintas
op2 = link2;
if(flag==0){//seta o atributo href no botao de download
x.setAttribute('href',op1);
}else{
x.setAttribute('href',op2);
}
}
window.onload = function() {
var btnop1 = document.getElementById("op1");
var btnop2 = document.getElementById("op2");
btnop1.onclick = function(){//funcao que troca a opcao de download assim que selecionada
this.style.backgroundColor = "#ffcc00";
document.getElementById("op2").style.backgroundColor = "#6600FF"
flag = 0;
}
btnop2.onclick = function(){
this.style.backgroundColor = "#ffcc00";
document.getElementById("op1").style.backgroundColor = "#FF3333";
flag = 1;
}
}
eu agradeceria quem pudesse me ajudar a resolver esse problema,eu penso que seja por conta do display:inline-block o motivo disto estar acontencendo,porém tenho as minhas dúvidas :S
PS.:aparentemente acabei de resolver um dos problemas do codigo,existia um probleminha na funçao javascript ao inserir mais de dois links nos blocos de download,mas ja resolvi isso adicionando uma tag name pra poder pegar varios botoes de baixar(getElementsByName),e adicionei mais um parâmetro para ele receber um indice/chave(dai o algoritmo não precisaria buscar os elementos na pagina),mas ainda nao consegui resolver esse problema do bug dos blocos
<!-- comentário -->
, altere isso, e coloque as imagens que utiliza em algum servidor web, e altere o código, assim conseguimos te ajudar melhor :)inline-block
é uma organização horizontal.