Tengo 6 divs en parejas de dos. Un miembro de cada pareja esta en display:none. Y ademas un miebro encima del otro. Y estan todas las parejas en la misma linea.
Al hacer clic en el mimbro situado encima del otro, (mediante el codigo jQuery slideToggle) el segundo miembro aparece. Pero al hacer esto, no consigo ponerlo todos alineados y en la misma linea.
Muestra codigo.
Saludos
<!DOCTYPE>
<html>
<link type="text/css", rel="stylesheet", href="C:\Users\Aratz\SkyDrive\Documentos\fst-o.css"/>
<script type="text/javascript" src="C:\Users\Aratz\SkyDrive\Documentos\jquery-1.10.2.js"> </script>
<script type="text/javascript" src="C:\Users\Aratz\SkyDrive\Documentos\desl.js">
</script>
<head>
<title>
FST-O!
</title>
</head>
<body>
<div id="div1"> <div id="div2"><p id="win"><i>WiN</i></div><p id="dsurf">DSURF
</div>
<div class="desl1">Marka hoberenak </div>
<div class="ezkerra">
<ul>
<li><p><a href="http://www.fanatic.com/content/index_eng.html"><img src="http://www.tic.udc.es/~nino/windsurf/material-tecnico/logo.gif"/></a></li>
<li><p><a href="http://www.bicsportwindsurf.com/"><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRQs5NWHDyo6TMPjEHWNNLZX1GTMya9L8NtBAVvI_s1fzd3YLun"/></a></li>
<li><p><a href="http://www.star-board.com/"><img src="http://www.tic.udc.es/~nino/windsurf/material-tecnico/logo-starboard.jpg"/></a></li>
<li><p><a href="http://www.severnesails.com/"><img src="http://www.tic.udc.es/~nino/windsurf/material-tecnico/severne-logo.jpg"/></a></li>
<li><p><a href="http://www.mistral.com/"><img src="http://www.stand-up-surf.com/wp-content/uploads/2011/04/mistral1.jpg"/></a></li>
<li><p><a href="http://www.neilpryde.com/index.php?lang=en"><img src="http://mysite.verizon.net/vze12qukq/sitebuildercontent/sitebuilderpictures/.pond/NeilPride.jpg.w300h95.jpg"/></a></li>
</ul>
</div>
<div id="desl2"> Redbull: Windsurf</div>
<div id="erdia">
<iframe id="yutub"
src="https://www.youtube.com/embed/Ck3O6s8uqpo">
</iframe>
</video>
</div>
<div id="desl3"> Liburuak</div>
<div class="eskuma"><a href="http://www.amazon.es/Windsurfing-Peter-Hart/dp/1861266774/ref=sr_1_1?ie=UTF8&qid=1389557376&sr=8-1&keywords=windsurfing"> <img class="liburuak"src="http://ecx.images-amazon.com/images/I/51pwl3rr-1L._.jpg"/></a> <a href="http://www.amazon.es/Ricardo-Cmapellos-Passion-Alemania-DVD/dp/B000SQM2Y8/ref=sr_1_7?ie=UTF8&qid=1389557376&sr=8-7&keywords=windsurfing"><img class="liburuak" src="http://ecx.images-amazon.com/images/I/51G-jkaqkeL._SX385_.jpg"/></a> </div>
<div id="bekoa"><img class="logo", src="http://www.rb-camping.cz/images/rybarska-basta/surf.png"/> <p class="izen2">Doctor Landa 40, Sopelana <p class="izen1">Aratz M. Lasa <p class="pow">Powered by <span>@Fenix</span></div>
</body>
</html>
body{
background: transparent;
}
div div{
color: #FF06B5;
border-radius: 50%;
background-color: #00158B;
width: 20%;
height: 100px;
margin-left: 380px;
padding-top: 40px;
}
#win{
margin-left: 50px;
font-size: 100px;
margin-top: -20px;
}
div{
padding-top: 10px;
height:150px;
width:100%;
background-color: #9DB5C3;
border-top-left-radius: 100px 100px;
border-top-right-radius: 100px 100px;
border-bottom-left-radius: 100px 100px;
border-bottom-right-radius: 100px 100px;
}
#dsurf{
margin-top: -120px;
margin-left: 650px;
font-size:100px;
color: #02FF0B;
}
.ezkerra {
height: 310px;
width: 200px;
background-color: #A7DBD8;
float: left;
border-radius: 20px;
padding-top:0px;
display: none;
clear: left;
}
#erdia{
border-radius: 4px;
height: 350px;
width: 550px;
background: #DEA959;
margin-top: 10px;
display: none;
vertical-align: bottom;
}
.eskuma {
border-radius: 10px;
height: 350px;
width: 550px;
background-color: #E0E4CC;
float: right;
margin-top: 10px;
display: none;
clear:right;
}
.desl1:hover{
cursor: pointer;
}
.desl1{
width: 200px;
height: 20px;
background: #15A10E;
border: 0px;
border-radius: 50px;
float:left;
margin-top: 10px;
text-align: center;
color: #00FF91;
}
#desl2:hover{
cursor: pointer;
}
#desl2{
width: 200px;
height: 20px;
background: #B7B7B7;
border: 0px;
border-radius: 50px;
float:left;
margin-top: 10px;
text-align: center;
color: black;
margin-left: 230px;
display: block;
}
#desl3:hover{
cursor: pointer;
}
#desl3{
width: 200px;
height: 20px;
background: #F7FF47;
border: 0px;
border-radius: 50px;
float:left;
margin-top: 10px;
text-align: center;
color: #B71DB2;
display: block;
margin-left: 230px;
}
#bekoa {
clear: both;
height: 100px;
background: url(http://www.fanatic.com/content/image/bg-fixed-footer.png);
background-repeat:repeat;
border-radius: 30px;
color: white;
}$(document).ready(function() {
$('.desl1').click(function() {
$(".ezkerra").slideToggle("slow")
});
$('#desl2').click(function() {
$("#erdia").slideToggle("slow")
});
$('#desl3').click(function() {
$(".eskuma").slideToggle("slow")
});
});<link type="text/css", rel="stylesheet", href="C:\Users\Aratz\SkyDrive\Documentos\fst-o.css"/> <script type="text/javascript" src="C:\Users\Aratz\SkyDrive\Documentos\jquery-1.10.2.js"> </script> <script type="text/javascript" src="C:\Users\Aratz\SkyDrive\Documentos\desl.js">
Esto esta mal.
- Aunque donde los has puesto, funciona.. lo correcto es poner el css entre la etiqueta head (<head></head>) y los scripts al final del documento antes de </body>.
- Usa siempre rutas realtivas. Cuando subas este html a un hosting dejara de funcionar porque usas rutas completas (C:\Users\Aratz)
- Usa siempre la versión minificada de jQuery (jquery-1.10.2.min.js) http://code.jquery.com/jquery-1.10.2.min.js
Por lo demás:
Intenta mantener el código ordenado y legible. En el css estas aplicado reglas generales que no deberías.. por ejemplo la regla que afecta a todos los div es totalmente innecesaria.. puedes usar clases... imagínate que luego quieres meter un div sin esos efectos.. tendrías que borrar la regla o sobrescribir los valores.
Intenta
cerrar todas las etiquetas.. en el UL pones <p> pero no lo cierras. Lo mismo te pasa en div2 y en bekoa.
Intenta
subir las imágenes a un servidor propio o en un servidor que tu tengas control porque ademas de consumir el ancho de banda suyo.. imagínate que un día las quitan... te arruinan el sitio.
Intenta
NO usar comas después de los parámetros como haces en <link> o en class logo del fondo.
Intenta no repetir reglas css.. si tienes tres elementos que van a usar propiedades iguales asigna una clase.
Intenta reducir el css.. por ejemplo en div, los border-top-left radius etc.. se pueden reducir a solo border-radius:100px;
En fin respecto a tu duda.. quieras o no tendras que meter los 2 div en un contenedor.. asi tendras mas control sobre ambos.. la idea es que creas 1 div por cada contenedor, le apliques float o position y lo demas ya viene por si mismo.
Te dejo un archivo con como lo he hecho yo.. es un zip que contiene la mayoria de los consejos de arriba aplicados sobre tu codigo.. espero que te sirva.
sha1: 0a9849a829e0030bec0e9d269cd6e901cf645362 kasail-fest-o.zip |
Descarga (https://dl.dropboxusercontent.com/u/93362349/ehn/kasail-fest-o.zip)
Saludos