2

Tengo el siguiente problema: Estoy tratando de modular el sistema aplicando el patrón MVC, y por un lado tengo un archivo php para el encabezado de la pagina, otro para el footer y otro para el contenido. Todo venia bien hasta que, al probar poner un contenido como el que se muestra en el ejemplo, este se superpone al nav y se coloca arriba a la izquierda de la pagina, como si tuviera 0 margin top y left.

Yo quiero que cualquiera fuera el contenido, se coloque donde debe ser, que es a continuación de la barra de navegación. ¿Alguna sugerencia?

Un header.php

       <nav class="navbar navbar-light navbar-expand-md justify-content-center fixed-top pt-0 w-100" id="navigation-bar">
            <div class="container">

                <div class="navbar-collapse collapse justify-content-between align-items-center w-100 " id="collapsingNavbar2">
                    <ul class="topBotomBordersOut navbar-nav mx-auto text-center">
                        <li class="nav-item active pt-4">
                            <a class="nav-link" href="#">Home</a>
                        </li>
                        <li class="nav-item pt-4">
                            <a class="nav-link" href="#">My Glossaries</a>
                        </li>
                        <li class="nav-item pt-4">
                            <a class="nav-link" href="#">Al Glossaries</a>
                        </li>
                    </ul>
                </div>

            </div>
            <div class="navbar-custom-menu float-lg-right">
                <ul class="nav topBotomBordersOut navbar-nav mx-auto text-center">
                    <li class="nav-item pt-4">
                        <a href="#" class="nav-link" data-toggle="dropdown" id="user-button">
                                <img src="" class="user-image">
                                <span class="hidden-xs">Logout</span>

                        </a>

                    </li>
                </ul>
            </div>
        </nav>

Y un content.php

<div class="content">

<div class="row">
    <div class="col-4">Aca iria</div>
    <div class="col-4">El contenido</div>
    <div class="col-4">Principal</div>
</div>

Agrego tambien todo el css por las dudas

@import url(http://fonts.googleapis.com/css?family=Numans);
html,
body {
    background-color: #D8A7B1;
    height: 100%;
    font-family: 'Numans', sans-serif;
    }

a {
    color: #fff !important;
}

.nav-item {
    font-family: Century Gothic;
    margin: 0 auto;
    padding: 5em 3em;
    text-align: center;
}

.nav-item a {
    color: #FFF;
    text-decoration: none;
    font: 20px Century Gothic;
    margin: 0px 10px;
    padding: 10px 10px;
    position: relative;
    z-index: 0;
}


/* Top & Bottom Borders Out */

.topBotomBordersOut a:before,
.topBotomBordersOut a:after {
    position: absolute;
    left: 0px;
    width: 100%;
    height: 2px;
    background: #FFF;
    content: "";
    opacity: 0;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

.topBotomBordersOut a:before {
    top: 0px;
    transform: translateY(10px);
}

.topBotomBordersOut a:after {
    bottom: 0px;
    transform: translateY(-10px);
}

.topBotomBordersOut a:hover:before,
.topBotomBordersOut a:hover:after {
    opacity: 1;
    transform: translateY(0px);
}

.container {
    height: 100%;
    align-content: center;
    position: relative;
}

.card {
    height: 370px;
    margin-top: auto;
    margin-bottom: auto;
    width: 400px;
    background-color: rgba(0, 0, 0, 0.5) !important;
}

.social_icon span {
    font-size: 60px;
    margin-left: 10px;
    color: #FAE8E0;
}

.social_icon span:hover {
    color: white;
    cursor: pointer;
}

.card-header h3 {
    color: white;
}

.social_icon {
    position: absolute;
    right: 20px;
    top: -45px;
}

.input-group-prepend span {
    width: 50px;
    background-color: #FAE8E0;
    ;
    color: black;
    border: 0 !important;
}

input:focus {
    outline: 0 0 0 0 !important;
    box-shadow: 0 0 0 0 !important;
}

.remember {
    color: white;
}

.remember input {
    width: 20px;
    height: 20px;
    margin-left: 15px;
    margin-right: 5px;
}

.login_btn {
    color: black;
    background-color: #FAE8E0;
    width: 100px;
}

.login_btn:hover {
    color: black;
    background-color: white;
}

.links {
    color: white;
}

.links a {
    margin-left: 4px;
}

#user-button {
    text-decoration: none;
}

.navigation-bar {
    position: absolute;
}

.content {
    position: relative;
}

1 respuesta 1

5

Lo que sucede está en sus estilos, específicamente la clase "fixed-top" en su nav, esas propiedades hacen que el nav se superponga y se mueva con referencia a la ventana sin importar lo que esté debajo o encima.

Por eso es que su div de contenidos sale en ese lado. La solución sería retirar esa clase, pero si aún desea mantener esa clase, agregue un margin-top: 10rem(Lo que requiera); a su div de contenidos.

5
  • 1
    Gracias, solucionado =) Tenga sus puntitos
    – Agustin G.
    Commented el 7 feb. 2020 a las 14:57
  • @Mani si esta respuesta te sirvió, por favor, márcala como aceptada.
    – Alvaro Montoro
    Commented el 7 feb. 2020 a las 14:58
  • De nada amigo, saludos :D. Commented el 7 feb. 2020 a las 14:58
  • Me pasa muy a menudo que luego de comentar agradeciendo una respuesta positiva, me recuerdan que valore la misma. Siempre lo hago, el sistema debe tener alguna clase de delay, eso es lo que sucede cuando ven mis comentarios agradeciendo la respuesta y esta no tiene puntos. Lo que no entiendo, es porque no se pinta (al menos en mi monitor) el tilde verde. Tengo entendido que esto se activa cuando la respuesta fue util para el creador de la pregunta.
    – Agustin G.
    Commented el 7 feb. 2020 a las 16:16
  • Tienes tres botones para valorar una pregunta. El triángulo que apunta hacia arriba (para valorar una respuesta positivamente) el triángulo que apunta hacia abajo (para valorarla negativamente) y el "tick" o "tilde" que sale en gris. Para marcar una respuesta a tu pregunta como que fue la que te dio la solución has de hacer "click" a ese tilde para que se vuelva verde.
    – phpMyGuel
    Commented el 7 feb. 2020 a las 16:43

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.