Problema com posicionamento de elemento >Bootstrap<
olá estou desenvolvendo um site, e criando o layout do mesmo com o bootstrap,
ate ai tudo bem, coloque um menu superior fixo, um container principal com o conteudo funcionando tudo de boa.
porem Coloquei um container fluid no fim da pagina, para servir como rodape, com endereço essas coisas,
o problema e que quando coloco em monitores com resoluçao maiores que o meu, ele simplesmente nao fica no fundo, ele sobe e fica colado ao fim do container principal, e abaixo dele sobre um grande espaço em branco.
-OQUE JA FIS PARA TENTAR RESOLVER.
.container-fluid{
position:relative;
bottom:0;
}
ja usei isso de diversas formas ate dei um ID para a div mas nao resolveu, e agora???
vou colocar um pedaço do codigo para voces.
.col-md-8 img{
left:40%;
position:relative;
height:20.13333333333333%;/*160px;*/
width:12.516837481698389%;/*130px;*/
margin:10px;
}
.navbar-inverse{
border-radius:0px;
margin:0%;
}
.navbar-nav{
text-align:center;
color:#ffffff;
}h5{
color:#e40e0e;
font-size:15px;
text-align:center;
}h6{
font-size:14px;
text-align:center;
}h2{
font-size:16px;
text-align:center;
line-height:30px;
}h3{
text-align:center;
font-size:15px;
}h4{
text-align:center;
font-size:22px;
}h1{
font-size:10px;
line-height:10px;
}p{
line-height:30px;
}body{
background:#fdfdfd;/#f7f7f7;/
}
.rodape{
background:#000000;
color:#ffffff;
}body{
font-family: 'Oxygen', sans-serif;
}
.container{
background:#fdfdfd;/*#f7f7f7;*/
}.jumbotron img{
height:100px;
width:350px;
margin:15px;
}.jumbotron h1{
position:relative;
font-size:40px;
float:right;
text-align:center;
margin-top:50px;
}
.jumbotron{
margin:0%;
padding:0%;
}.col-md-4 img{
height:60px;
width:60px;
float:top;
position:relative;
left:42%;
background:#f7f7f7;
padding:10px;
border:solid;
border-radius:15px;
border-background:#000000;
}
.conteudo{
background:#000000;
color:#ffffff;
position:absolute;
width:100%;
height:auto;
text-align:left;
padding:15px;
}.conteudo img{
height:180px;
width:350px;
}.col-md-5 img{
height:150px;
width:120px;
float:left;
margin:10px;
}
#teste{
background:#b6b4b4;
color:#ffffff;
position:absolute;
bottom:0;
}
.navbar-default {
background-color: #b6b4b4;
border-color: #e1e1e1;
}.navbar-default .navbar-brand {
color: #ffffff;
}.navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus {
color: #040404;
}.navbar-default .navbar-text {
color: #ffffff;
}.navbar-default .navbar-nav > li > a {
color: #ffffff;
}.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
color: #040404;
}.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
color: #040404;
background-color: #e1e1e1;
}.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
color: #040404;
background-color: #e1e1e1;
}.navbar-default .navbar-toggle {
border-color: #e1e1e1;
}.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
background-color: #e1e1e1;
}.navbar-default .navbar-toggle .icon-bar {
background-color: #ffffff;
}.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
border-color: #ffffff;
}.navbar-default .navbar-link {
color: #ffffff;
}.navbar-default .navbar-link:hover {
color: #040404;
}
@media (max-width: 767px) {
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
color: #ffffff;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
color: #040404;
}
.navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
color: #040404;
background-color: #e1e1e1;
}
}
<div class="container-fluid" id="teste">
<br>
<div class="row">
<div class="col-md-5">
<img src="midia/logo007.png">
<br>
<br>
<address>
Rua Santo angelo<br>
xxxxxxxxxxx, xx n°111
Sala n°000<br>
<abbr title = "Fone">Fone:</abbr> (11)9999-6666
</address>
<address>
<strong>Email</strong><br>
<a href = "mailto:#">11111111</a>
</address>
</div>
</div>
<br>
</div>
Do HTML so coloquei a prte questa dando problema, mas acima do codigo so tem um container principal com seu conteudo, e uma barra de navegaçao fixa no topo.
espero que ajudem::::
Discussão (4)
Carregando comentários...