My DIV is not pasted to the top bar of the browser

Asked

Viewed 385 times

0

My DIV does not get glued to the top bar of the browser. I realize that there is a space of about 10px.

I’ve used the following CSS, but it’s no use:

body{
margin: 0;
padding: 0;
}

Follow more codes:

/* CSS Document */
body{
margin: 0;
padding: 0;
}
.guaraparivirtual-topo {
position:relative;
width:1215px;
height:110px;
background-image:url(http://guaraparivirtual.com.br/novo-gv/logo.png);
background-repeat:no-repeat;
background-position:1% 50%;
margin: 0 auto;
}
.guaraparivirtual-topo-1 {
position:relative;
width:200px;
height:110px;
float:left;
}
.guaraparivirtual-topo-2 {
position:relative;
width:300px;
height:110px;
font-family:arial;
font-size:16px;
text-align:left;
line-height:110px;
float:left;
}
.guaraparivirtual-topo-3 {
position:relative;
width:400px;
height:110px;
float:left;
}
.guaraparivirtual-topo-3-1 {
position:relative;
width:450px;
height:35px;
float:left;
border-bottom:1px dotted #cccccc;
}
.guaraparivirtual-topo-3-2 {
position:relative;
width:450px;
height:70px;
float:left;
font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    color:#23126E;
    text-align:center;
    line-height:59px;
}
.input-busca-guia{
    font-family: Arial, Verdana; 
    font-size: 15px; 
    padding: 8px; 
    border: 1px solid #ECECEC; 
    color: #666666; 
}
css

  • Isn’t there the possibility that some tag is creating the space in question, within html? Using bootstrap?

  • 1

    You could put in more code so we can analyze it better?

  • An example page would be very useful.

  • Add an example page, it would be easier to help

  • 1

    You can put your html here?

  • Sometimes extra space can be caused by other HTML elements within your div, so it would be interesting to complete the question with the HTML code referring to your question.

Show 1 more comment

2 answers

0

I usually use the code 

*{margin:0; padding:0}

instead of putting on the body as specified in your code. I’m not saying this is a better option. But it is the option that I prefer to use because by default the browser elements have default margin that may vary from one browser to the other. So I prefer to redefine the margin and padding that I want for the elements.

  • Why do this? What if other elements are using margin or padding? If it wants to maintain the standard structure of some elements? Will you need to re-define all the elements that are necessary? I do not believe that this is the best solution.

  • if other elements are using margin or padding it will have to set to the separate element.

  • I see no advantage in zeroing out the margin and padding of a fieldset, hr, p, H1, etc. Just because the menu is not glued to the top.

  • I’m waiting for more information to better analyze the problem.

  • @Celsomtrindade this is a reset css technique used by many developers. Because each page element has a default margin and the margin differs from one browser to the other. I believe that it is better to define a margin that I want in the elements than to automatically pick up by the browser. This is because of attribution. Read more at http://tableless.com.br/css-reset/. It is more difficult to offer another solution if he only put css. I don’t know how he put the HTML structure.

  • @Celsomtrindade I’m sorry for the previous comment.

  • It’s not because everyone does something that is necessarily the best or the most correct. Normalize, which is the best-regarded CSS reset, for example, not even if you want to reset the element *, just a margin reset on the tag body. https://github.com/necolas/normalize.css/

  • The problem with this discussion is that we’re going to fall into a matter of opinion. I’ve never used normalize. I don’t because everyone does. But it’s because I find a better option for my job.

  • So I questioned the por que to do so, It may be that you have an argument that I do not know =D The goal is to learn ;) Obs.: I recommend that you research more on the normalize reset then, because it is done with a study and support in the most diverse browser, really is excellent and you can learn a lot! Who knows even create your own reset, just like I did.

  • I already knew the normalize. But I didn’t need to use it yet. I edited my answer

  • If you repair normalize puts a default style on various html elements. If you do not want that formatting you also have to rewrite for each element.

  • Yes. That’s why I commented, that is not always the best or most correct. I only used comparative to show that it does not use reset in the element *. And I personally don’t use any reset specific, just a combination of what interests me most of some reset that I studied. But understand, I didn’t say your answer was wrong, I just wanted to understand why and what your point would be. For in my opinion, for this particular problem, it does not seem to be the best way forward. = D

  • I think it’s interesting you formulate a response to how you usually do to pass on more information. I find it interesting also to use a combination of defined elements for the reset. But I do not because I prefer to define in other ways.

Show 8 more comments

0

I’m a beginner, I don’t know if this is considered a "gambiarra", but if you put in the main div top: -8px; it sticks to the top, for example:

.guaraparivirtual-topo {
    position: relative;
    width:1215px;
    height:110px;
    background-image:url(http://guaraparivirtual.com.br/novo-gv/logo.png);
    background-repeat:no-repeat;
    background-position:1% 50%;
    margin: 0 auto;
    border: 1px red solid;
    top: -8px; // Mudança aquii 
}

And for the other Ivs if you want them to be of the same height just put position: relative and top: 0px;

Browser other questions tagged css

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