How to space the "fixed title" of a page and the posts?

Navigation
2

During the creation of the page, I decided to put a "title" which will have the site name and some tabs for the user to be forwarded; however, it always overlaps the first post:

Sinceeachpostislikethis:

Using PHP, CSS, or HTML, how can I make only the first page of the site have an indentation to not overlap by default?

[EDIT] My problem was solved, but I wanted to make it responsive. When I accessed the IP (the site) on my cell phone, as I zoomed in, the navigation bar took up more space (ie there was no way to read anything). How can I do that?

Code: 

html { 
  background: url(images/bg.png) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.navigationbar
{
    width: 100%;
    height: 5em;
    margin: 0 auto;
    background-image: linear-gradient(to right, black, darkgrey);
    position: fixed;
    top: 0%;
}

.navigationbar img
{
    margin: 0 auto;
    max-height: 100%;
    max-width: 100%
}

.navigationbar_spacer
{
    opacity: 100%;
    width: 100%;
    height: 5em;
}


.postagem
{
    padding: 1%;
    border-radius: 12px;
    width: 33%;
    margin:  auto auto;
    background-color:#edebed;
    margin-top: 1%;
}

.postagem div
{
    border-radius: 12px;
    background-color: #95bcf0;
    width: 75%;
    margin: auto auto;
}

.postagem h1
{ 
    font-family: "arial";
    font-size: 150%;
    font-weight: lighter;
    text-align: center;
    background-color: 
}

.postagem p
{
    font-family: "book antiqua";
    font-size: 100%;
    text-align: justify;
    text-indent: 2em;
}
    
asked by anonymous 16.07.2014 / 03:02

4 answers

2

As @Patrick says, since your navigation bar or header will always be present throughout your pages the safest way is to add to the CSS of your container where your posts are hosted margin-top: 50px; . 

.header{ 
    width: 100%; 
    height: 50px;
    position: fixed; 
    top: 0;
    background-color: #ccc;
}

.container{
    width: 100%;
    height: 100%;
    color: #fff;
    background-color: #111;
    margin-top: 50px;
}

.sub-container{
    width: 100%;
    float: left;
}

You can see the JSFIDDLE and scroll the display to see your fixed title

For several containers on the site I would use the following structure: 

<body>
    <div class="header">PNG TEST</div>
    <div class="container">
        <div class="sub-container"><!-- texto --></div>
        <div class="sub-container"><!-- texto --></div>
        <div class="sub-container"><!-- texto --></div>
    </div>
</body>

Since the fluid layout technique is the extensive use of percentages in CSS, just put the height of your slash equally with percentage: 

.header{ 
    height: 5%;
}

NOTE: However, it is not advisable to put percentages in heights (% with%)

    
16.07.2014 / 15:13
0

You can create a class in the body of each page, it is something well used, usually this class is the name of the page.

so you can have control of any element per page.

Example: 

.class-body .titulo{margin-bottom:20px;}

So you can only control on such a page, that this can happen

By php it is possible to get the name of the current page opened, you can make a condition getting page name == 'you type ap ^' page which will have the change 'within the condition can call a css or echo of brs which is not advisable

    
16.07.2014 / 03:45
0

What it looks like is that your header has position fixed or absolute with top set to 0

Anyway, this would be what I would do

CSS 

.header {
    width:100%;
    height:80px;
    background:#e1e1e1;
    margin-bottom:20px;
}

.post {
    width:50%;
    padding:10px;
    background:#e1e1e1;
    border-radius:10px;
    margin:0 auto;
}

You can track the result at DEMO .

NOTE: I used dummy values because I do not have your code as a reference.

    
16.07.2014 / 14:54
0

As an additional idea, I made a div with the size properties equivalent to those of the navigation bar and maximum opacity; that is, it occupies the same space as the navigation bar, and since the posts have indentation by default, the div does not stick to the text. The code was: 

<div class="navigationbar"> <!-- imagem --> </div>
<div class="navigationbar_spacer"></div>

Having navigationbar_spacer the same size properties as navigationbar, ie, navigationbar overlaps exactly the same size as navigationbar_spacer has.

    
16.07.2014 / 15:24
HTML tags with RegEx Make a POST with AJAX and JSON with pure Javascript [duplicate]