No consigo alinear y centrar bien los divs!

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]

Autor

Tema: No consigo alinear y centrar bien los divs! (Leído 2,625 veces)

kasail

Desconectado

Mensajes: 36

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

Mensajes: 5.855

Re: No consigo alinear y centrar bien los divs!

« Respuesta #1 en: 14 Enero 2014, 23:53 pm »

Muestra codigo.

Saludos


	En línea

https://www.youtube.com/watch?v=oqKsrSXLR98

kasail

Desconectado

Mensajes: 36

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

Mensajes: 5.855

Re: No consigo alinear y centrar bien los divs!

« Respuesta #3 en: 16 Enero 2014, 23:44 pm »

Código

<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

Saludos


	En línea

https://www.youtube.com/watch?v=oqKsrSXLR98

kasail

Desconectado

Mensajes: 36

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

Mensajes similares
	Asunto	Iniciado por	Respuestas	Vistas	Último mensaje
	no consigo ver bien los canales de ono Electrónica	papaeco	0	1,850	7 Enero 2006, 18:59 pm por papaeco
	Alinear botones con gtk Programación C/C++	soez	1	2,345	26 Mayo 2010, 00:50 am por nicolas_cof
	alinear capas Desarrollo Web	jorgebeltranfuentes	4	2,910	2 Noviembre 2011, 22:44 pm por jorgebeltranfuentes
	Alinear formulario web PHP	.:UND3R:.	1	3,138	6 Marzo 2012, 17:15 pm por Diabliyo
	alinear 2 divs horizontalmente float Desarrollo Web	WIитX	2	2,043	14 Mayo 2016, 00:30 am por WIитX