Foros aprenderaprogramar.com
Aprender a programar => C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más => Mensaje iniciado por: SamML en 11 de Agosto 2015, 04:11
-
Dejo un intento de aporte, para mi tambien, de como centrar contenedores de forma absoluta a modo de "prompt" o alerta al entrar a una página por ejemplo. Este método parece que es compatible con la mayoría de navegadores. Y en pequeños dispositivos se adapta al 100% del ancho de la pantalla.
Si hay algo mal comentarlo please.
Saludos!
<!DOCTYPE html>
<html lang=en> <head><meta name=viewport content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta charset=UTF-8><title>Centrar contenedor verticalmente de forma absoluta, SamML</title><style>
@charset "utf-8";*{margin:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}/*SamML para aprendeaprogramar.com*/
.contenedor:after, .contenedor:before {
display:table;
content:" ";
zoom:1;
}
.contenedor {
position:fixed;
width:100%;
height:100%;
padding:15px
}
.contenedor:after {clear:both;}
.absolute-v-center {
background-color: #444;
color:white;
position: fixed;
width:100%;height:100%;top:0%;left:0%;
margin: 0;
z-index:1000;
}
@media (min-width:500px){
.absolute-v-center {top: 50%;left: 50%;height: 50%;width: 50%;margin: -15% 0 0 -25%;}
}
</style></head> <body> <div class=contenedor> <div class=absolute-v-center> <p>Lorem ipsum dolor sit amet.</p> <p>Lorem ipsum dolor sit amet.</p> <p>Lorem ipsum dolor sit amet.</p> <p>Lorem ipsum dolor sit amet.</p> </div> </div> <div> <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum reiciendis at facilis earum reprehenderit, qui fugiat error tenetur voluptas veritatis, recusandae doloremque provident fugit sequi nam nemo sapiente odio eius.</h1> <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum reiciendis at facilis earum reprehenderit, qui fugiat error tenetur voluptas veritatis, recusandae doloremque provident fugit sequi nam nemo sapiente odio eius.</h1> <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum reiciendis at facilis earum reprehenderit, qui fugiat error tenetur voluptas veritatis, recusandae doloremque provident fugit sequi nam nemo sapiente odio eius.</h1> <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum reiciendis at facilis earum reprehenderit, qui fugiat error tenetur voluptas veritatis, recusandae doloremque provident fugit sequi nam nemo sapiente odio eius.</h1> </div> <div class=container> <div> <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum reiciendis at facilis earum reprehenderit, qui fugiat error tenetur voluptas veritatis, recusandae doloremque provident fugit sequi nam nemo sapiente odio eius.</h1> <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum reiciendis at facilis earum reprehenderit, qui fugiat error tenetur voluptas veritatis, recusandae doloremque provident fugit sequi nam nemo sapiente odio eius.</h1> <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum reiciendis at facilis earum reprehenderit, qui fugiat error tenetur voluptas veritatis, recusandae doloremque provident fugit sequi nam nemo sapiente odio eius.</h1> <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum reiciendis at facilis earum reprehenderit, qui fugiat error tenetur voluptas veritatis, recusandae doloremque provident fugit sequi nam nemo sapiente odio eius.</h1> </div> </div> </body>
</html>
-
Estaba buscando algo así para introducir el famoso mensaje de las cookies en una web que tengo y me lo has puesto en bandeja ;D
Así me va quedando, solo me falta introducir la respuesta a ejecutar cuando se pulse en aceptar o rechazar
Utilizamos cookies propias y de terceros para ofrecerte una mejor experiencia y servicio, de acuerdo a tus hábitos de navegación.
Si continúas navegando, consideramos que aceptas su uso. Puedes obtener más información en nuestra Política de Cookies.
Aceptar Rechazar
<!DOCTYPE html>
<html lang=en> <head><meta name=viewport content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta charset=UTF-8><title>Centrar contenedor verticalmente de forma absoluta, SamML</title><style>
@charset "utf-8";*{margin:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}/*SamML para aprendeaprogramar.com*/
.contenedor:after, .contenedor:before {
display:table;
content:" ";
zoom:1;
}
.contenedor {
position:fixed;
width:100%;
height:100%;
padding:15px
}
.contenedor:after {clear:both;}
.absolute-v-center {
background-color: #444;
color:white;
position: fixed;
width:100%;top:0%;left:0%;
margin: 0;
z-index:1000;
padding:25px;
}
.absolute-v-center p{ margin-bottom:10px;}
@media (min-width:500px){
.absolute-v-center {top: 50%;left: 50%;width: 50%;margin: -15% 0 0 -25%;}
}
</style></head> <body> <div class=contenedor> <div class=absolute-v-center> <p>Utilizamos cookies propias y de terceros para ofrecerte una mejor experiencia y servicio, de acuerdo a tus hábitos de navegación.</p> <p>Si continúas navegando, consideramos que aceptas su uso. Puedes obtener más información en nuestra Política de Cookies.</p> <input type="button" value="Aceptar"/> <input type="button" value="Rechazar"/> </div> </div> <div> <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum reiciendis at facilis earum reprehenderit, qui fugiat error tenetur voluptas veritatis, recusandae doloremque provident fugit sequi nam nemo sapiente odio eius.</h1> <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum reiciendis at facilis earum reprehenderit, qui fugiat error tenetur voluptas veritatis, recusandae doloremque provident fugit sequi nam nemo sapiente odio eius.</h1> <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum reiciendis at facilis earum reprehenderit, qui fugiat error tenetur voluptas veritatis, recusandae doloremque provident fugit sequi nam nemo sapiente odio eius.</h1> <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum reiciendis at facilis earum reprehenderit, qui fugiat error tenetur voluptas veritatis, recusandae doloremque provident fugit sequi nam nemo sapiente odio eius.</h1> </div> <div class=container> <div> <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum reiciendis at facilis earum reprehenderit, qui fugiat error tenetur voluptas veritatis, recusandae doloremque provident fugit sequi nam nemo sapiente odio eius.</h1> <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum reiciendis at facilis earum reprehenderit, qui fugiat error tenetur voluptas veritatis, recusandae doloremque provident fugit sequi nam nemo sapiente odio eius.</h1> <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum reiciendis at facilis earum reprehenderit, qui fugiat error tenetur voluptas veritatis, recusandae doloremque provident fugit sequi nam nemo sapiente odio eius.</h1> <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum reiciendis at facilis earum reprehenderit, qui fugiat error tenetur voluptas veritatis, recusandae doloremque provident fugit sequi nam nemo sapiente odio eius.</h1> </div> </div> </body>
</html>
Salud!
-
Me alegro mucho si va a servirte :) te sugiero que eches un vistazo al @media ya que lo fijé simplemente para una única variación en 500px de resolución y quizá te interese que sea de otra forma para tu propósito.
Saludos!