elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Tutorial básico de Quickjs


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  No consigo alinear y centrar bien los divs!
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: No consigo alinear y centrar bien los divs!  (Leído 1,896 veces)
kasail

Desconectado Desconectado

Mensajes: 36


Ver Perfil
No consigo alinear y centrar bien los divs!
« en: 14 Enero 2014, 21:09 pm »

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.


En línea

#!drvy
Moderador
***
Desconectado Desconectado

Mensajes: 5.840



Ver Perfil WWW
Re: No consigo alinear y centrar bien los divs!
« Respuesta #1 en: 14 Enero 2014, 23:53 pm »

Muestra codigo.

Saludos


En línea

kasail

Desconectado Desconectado

Mensajes: 36


Ver Perfil
Re: No consigo alinear y centrar bien los divs!
« Respuesta #2 en: 15 Enero 2014, 20:00 pm »

Código:
<!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>
Código:
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;
}
Código:
$(document).ready(function() {

   $('.desl1').click(function() {

       $(".ezkerra").slideToggle("slow")           
});
 
 $('#desl2').click(function() {

       $("#erdia").slideToggle("slow")           
});
 
 $('#desl3').click(function() {

       $(".eskuma").slideToggle("slow")           
});
 
});
En línea

#!drvy
Moderador
***
Desconectado Desconectado

Mensajes: 5.840



Ver Perfil WWW
Re: No consigo alinear y centrar bien los divs!
« Respuesta #3 en: 16 Enero 2014, 23:44 pm »

Código
  1. <link type="text/css", rel="stylesheet", href="C:\Users\Aratz\SkyDrive\Documentos\fst-o.css"/>
  2. <script type="text/javascript" src="C:\Users\Aratz\SkyDrive\Documentos\jquery-1.10.2.js"> </script>
  3. <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

Saludos
En línea

kasail

Desconectado Desconectado

Mensajes: 36


Ver Perfil
Re: No consigo alinear y centrar bien los divs!
« Respuesta #4 en: 17 Enero 2014, 07:28 am »

Joeeeeee muchisimas gracias!
Me has ayudado mucho. Me estaba comiendo la cabeza. Puede que porque sea un completo novato. Pero enseri9, muchas gracias! Eres un crak!
En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
no consigo ver bien los canales de ono
Electrónica
papaeco 0 1,342 Último mensaje 7 Enero 2006, 18:59 pm
por papaeco
Alinear botones con gtk
Programación C/C++
soez 1 1,751 Último mensaje 26 Mayo 2010, 00:50 am
por nicolas_cof
alinear capas
Desarrollo Web
jorgebeltranfuentes 4 2,128 Último mensaje 2 Noviembre 2011, 22:44 pm
por jorgebeltranfuentes
Alinear formulario web
PHP
.:UND3R:. 1 2,637 Último mensaje 6 Marzo 2012, 17:15 pm
por Diabliyo
alinear 2 divs horizontalmente float
Desarrollo Web
WIитX 2 1,370 Último mensaje 14 Mayo 2016, 00:30 am
por WIитX
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines