responsive website, CSS problem

Asked

Viewed 59 times

2

Everything was going very well, but I came across a problem in my css..

One is my footer, that even if I change the background color it gets the background color of the body

inserir a descrição da imagem aqui

My top css code:

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800');
/* CSS Document */
body { 
    background-color: #eeeeee;
    margin: 0; }

.background
{
    overflow: hidden;
    background: url(../images/fundo.png);
    background-position: top center;
    min-height:355px;
    background-repeat: no-repeat;   
    color: #000000;
    background-attachment: fixed;
    background-size: cover;

}

.background .links ul {
    padding:0;
    list-style: none;

}

.background .links ul li {
    float: right;
    display: inline-block;
    margin:0 20px 0 0;
}

.background .links ul li a {

    display: block;
    text-decoration:none; 
    padding-bottom: 30px;
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    color:#eeeeee;
}

.background .links ul li a:hover {
    color: #b0fafd;

}

my middle/page footer css code :

@charset "utf-8";
/* CSS Document */
@import url(https://fonts.googleapis.com/css?family=Oswald:400,700,300|Lato:400,300,700);
@import url('https://fonts.googleapis.com/css?family=Cuprum:400,400i,700,700i');
h1 {
    text-shadow: 2px 2px #063960;
}
h2 {
    text-shadow: 2px 2px #00cafd;
}
.backk
{
min-height: 42px;
position: relative;
display: block;
overflow: hidden;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#110851+0,110851+39,cf0404+100 */
background: #110851; /* Old browsers */
background: -moz-linear-gradient(-45deg, #110851 0%, #110851 39%, #cf0404 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, #110851 0%,#110851 39%,#cf0404 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #110851 0%,#110851 39%,#cf0404 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#110851', endColorstr='#cf0404',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.row
{
    display: block;
    overflow: hidden;
    background: url(../images/faq.png); 
    background-position: top center;
    height:auto;
    background-repeat: no-repeat;   
    color: #000000;
    background-attachment: fixed;
    background-size: cover;
}
.row h2
{
color: #e2aba7;
font-family: 'Cuprum', sans-serif;
font-weight: 700;
font-size: 48px;
text-align: center;
padding-bottom: 30px;
}
.row p
{
    margin: auto;
    width: 960px;
    font-family: Oswald;
    color: #000000;
    font-size: 20px;
    font-weight: 400;
    line-height: 20px;
    text-align: center;
    padding-bottom: 30px;
    margin-bottom: 10px;
}
.faq .faqq
{

    overflow: hidden;
    position: relative;
    height:97px;
    width: 97px;
    margin: auto;
    margin-bottom: 35px;

}
.rodape1
{
    overflow: hidden;
    background-color: #10101d;
    position: relative;
    max-height:160px;
    background-repeat: no-repeat;   
    background-size: cover;

}
.logo-rodape{
    float: left;
    overflow: hidden;
    display: block;
    position: relative;
    padding-left: 60px;
    margin-left: 250px;
    margin-top: 5px;

}
.texto{
    float: right;
    overflow: hidden;
    display: block;
    position: relative;
    margin-left: 150px;
    margin:auto;
    font-family: 'Cuprum', sans-serif;
    font-size: 15px;
    color: #fff;
    font-weight: 400;
    line-height: 20px;
}
.texto p
{
    color: #878888;
}
.direitos
{
    overflow: hidden;
    background-color: #161625;
    color: #000000;
    background-attachment: fixed;
    background-size: cover;
    position: relative; 
    background-size: cover;
}
.textoo {
    color: #dd8f89;

    margin: auto;
    position: relative;
    text-align: center;
    font-family: Oswald;
    font-size: 14px;
    font-weight: 300;
    line-height: 20px;

}
.textoo p{
    color:#878888;
}
.textoo h3{
    color: #063960;
}
html css

  • this Attachment one nobody helped, and then as I was with this problem in css I took the opportunity to post it together again.

  • Gabriel, consider waiting or earning reputation points to offer a reward to your question, increasing the chances of someone answering it. Do the Tour And also read the Manual on how NOT to ask questions Because it is very likely that no one will even answer your questions, as you are using the site inappropriately. Posting answers as comments, asking questions you’ve asked before...

  • 1

    ok I’ll delete the part of Attachment .

  • But you could help me with the first question there?

  • if you answer the question I asked there, I could even help.

  • opa foi mal é pq I created another account .

  • Can someone help me with this part of the foorter?

  • It is that the footer does not go to the bottom of the window, so there is a track. You want the footer to take up to the bottom of the window?

  • Type I’m wanting to let restful, but qnd I decrease the zoom pro minor possible appears the color q I put in the background background of Boddy under my footer with the copyright and etc.

  • mt thanks bro just for one answer ai q I vote for her and the other there too.

Show 5 more comments

1 answer

1


To avoid this kind of problem, I suggest putting a background color for each section, and setting a background color on body which will also be the background colour of the footer.

Look at the scheme:

html, body{
   margin: 0;
   padding: 0;
   background: red;
}

header{
   display: block;
   width: 100%;
   height: 50px;
   background: yellow;
   float: left;
}

main{
   display: block;
   width: 100%;
   background: #777;
   float: left;
}

footer{
   display: block;
   width: 100%;
   float: left;
}
<header>
   header
</header>
<main>
   <p>conteúdo</p>
</main>
<footer>
   footer
</footer>

This way will give the impression that the footer occupies the rest of the bottom of the page case about space.

  • vlw bro, mt thanks!

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.