Buenos días,
Estoy teniendo problemas para maquetar mi página web, estoy utilizando Bootstrap para ello usando el sistema de rejillas. He de decir que estoy empezando en el mundo del desarrollo web.
La página tiene la siguiente estructura:
Un vídeo de fondo que ocupa todo el ancho y el alto depende del tamaño de la ventana. La idea es que el video ocupe todo el tamaño de la ventana.
En el centro con un pequeño margen arriba está situado el título (se trata de una página que simula ser un álbum de fotos, después con PHP quiero mostrar las fotos que tengo en mi equipo).
Debajo de ese titulo quiero poner en cada fila cuatro portadas de álbum que ocuparían mas o menos unos 200x200px , en Bootstrap serían cuatro "col-md-3" para llegar al total de 12.
En total serían unas 4 filas mas o menos, tendría que ver como quedarían.
Por último abajo del todo quiero tener una paginación.
He decidido hacer éste proyecto para ir familiarizándome con Bootstrap y su estructura, yo ya había maquetado sin usar ningún framework a bajo nivel.
El problema es que no consigo posicionar las columnas debajo del título.
Aquí os dejo el código del "index.php":
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="container">
<h1 class="titulo_album display-1">NUESTRO ALBUM</h1>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
</div>
<video id="mivideo" autoplay="autoplay" loop>
<source src="video/20140526_185432.mp4" type="video/mp4"/>
</video>
</body>
</html>
Y aquí está la hoja de estilos:
body {
margin:0;
}
video {
width: 100%;
height: 100vh;
z-index: -100;
object-fit: cover;
-webkit-filter: blur(5px);
-o-filter: blur(5px);
filter: blur(5px);
position: relative;
display: inline;
}
h1.titulo_album {
margin: 0.5em 0 0;
font-size: 8em;
text-align: center;
width: 100%;
position: absolute; (Probando e intentando poner el texto centrado y encima del video, la única manera de que funcionara era poniendo la posición absoluta, quizás no sea correcto pero fue la única manera de que funcionase ya que si no la pongo absoluta aparece un margen superior de video)
text-shadow: -2px 2px 5px black;
color:skyblue;
font-family: cursive;
}
Bueno espero que me podáis ayudar y pueda seguir aprendiendo.
Un saludo y gracias de antemano.
Creo que lo que te pasa es:
1. No te está cargando los estilos de bootstrap. Prueba a descargarlos. 2. Quita el position:absolute del h1. 3. Haz bien el grid, por ejemplo:
NUESTRO ALBUM
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo repudiandae, voluptates autem labore hic minus facere quod laudantium facilis atque maiores tenetur explicabo sed deleniti iusto dolorem maxime, modi eveniet.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo repudiandae, voluptates autem labore hic minus facere quod laudantium facilis atque maiores tenetur explicabo sed deleniti iusto dolorem maxime, modi eveniet.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo repudiandae, voluptates autem labore hic minus facere quod laudantium facilis atque maiores tenetur explicabo sed deleniti iusto dolorem maxime, modi eveniet.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo repudiandae, voluptates autem labore hic minus facere quod laudantium facilis atque maiores tenetur explicabo sed deleniti iusto dolorem maxime, modi eveniet.
Soy de las personas que leen muchos post diarios.. Me gusta la cantidad de actualización es como en https://learning.cmu.edu/eportfolios/3563/Pgina_de_Inicio/Interestelar_Pelicula_2020_Completa_En_Espaol aunque aqui lo distribuyen mejor y es fantastico.
hola pudiste solucionar ?
lo mas probables es que no te cargue los estilos de bootstrap te recomiendo que los descargues otra vez, y dale que es excelente framework yo hice mi pagina www.seoplanner.com gracias a bootstrap pude hacerla sin ningun problema .
le falta el row, sin el row no lo va a separar, lo mismo me pasó en el diseño de una web de hoteles que me salia siempre abajo
http://hotelesqueadmitenperros.com/ciudad/madrid
Estoy teniendo problemas para maquetar mi página web, estoy utilizando Bootstrap para ello usando el sistema de rejillas. He de decir que estoy empezando en el mundo del desarrollo web.
La página tiene la siguiente estructura:
Un vídeo de fondo que ocupa todo el ancho y el alto depende del tamaño de la ventana. La idea es que el video ocupe todo el tamaño de la ventana.
En el centro con un pequeño margen arriba está situado el título (se trata de una página que simula ser un álbum de fotos, después con PHP quiero mostrar las fotos que tengo en mi equipo).
Debajo de ese titulo quiero poner en cada fila cuatro portadas de álbum que ocuparían mas o menos unos 200x200px , en Bootstrap serían cuatro "col-md-3" para llegar al total de 12.
En total serían unas 4 filas mas o menos, tendría que ver como quedarían.
Por último abajo del todo quiero tener una paginación.
He decidido hacer éste proyecto para ir familiarizándome con Bootstrap y su estructura, yo ya había maquetado sin usar ningún framework a bajo nivel.
El problema es que no consigo posicionar las columnas debajo del título.
Aquí os dejo el código del "index.php":
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="container">
<h1 class="titulo_album display-1">NUESTRO ALBUM</h1>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
</div>
<video id="mivideo" autoplay="autoplay" loop>
<source src="video/20140526_185432.mp4" type="video/mp4"/>
</video>
</body>
</html>
Y aquí está la hoja de estilos:
body {
margin:0;
}
video {
width: 100%;
height: 100vh;
z-index: -100;
object-fit: cover;
-webkit-filter: blur(5px);
-o-filter: blur(5px);
filter: blur(5px);
position: relative;
display: inline;
}
h1.titulo_album {
margin: 0.5em 0 0;
font-size: 8em;
text-align: center;
width: 100%;
position: absolute; (Probando e intentando poner el texto centrado y encima del video, la única manera de que funcionara era poniendo la posición absoluta, quizás no sea correcto pero fue la única manera de que funcionase ya que si no la pongo absoluta aparece un margen superior de video)
text-shadow: -2px 2px 5px black;
color:skyblue;
font-family: cursive;
}
Bueno espero que me podáis ayudar y pueda seguir aprendiendo.
Un saludo y gracias de antemano.
19/03/2017 13:31
1. No te está cargando los estilos de bootstrap. Prueba a descargarlos. 2. Quita el position:absolute del h1. 3. Haz bien el grid, por ejemplo:
NUESTRO ALBUM
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo repudiandae, voluptates autem labore hic minus facere quod laudantium facilis atque maiores tenetur explicabo sed deleniti iusto dolorem maxime, modi eveniet.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo repudiandae, voluptates autem labore hic minus facere quod laudantium facilis atque maiores tenetur explicabo sed deleniti iusto dolorem maxime, modi eveniet.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo repudiandae, voluptates autem labore hic minus facere quod laudantium facilis atque maiores tenetur explicabo sed deleniti iusto dolorem maxime, modi eveniet.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo repudiandae, voluptates autem labore hic minus facere quod laudantium facilis atque maiores tenetur explicabo sed deleniti iusto dolorem maxime, modi eveniet.
06/06/2020 21:18
28/05/2020 21:09
lo mas probables es que no te cargue los estilos de bootstrap te recomiendo que los descargues otra vez, y dale que es excelente framework yo hice mi pagina www.seoplanner.com gracias a bootstrap pude hacerla sin ningun problema .
31/05/2020 11:35
Las col-md-3 deben de ir dentro de un , sin la clase row bootstrap no utiliza las columnas.
13/07/2020 15:42
http://hotelesqueadmitenperros.com/ciudad/madrid