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

Asked

Viewed 193 times

2

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

Each post is like this: Postagem Padrão

Using PHP, CSS or HTML, how can I make only the first page of the site have a indentation so it is not overwritten by default?

[EDIT] My problem was solved, but I wanted to make it responsive. When I stopped the IP (the site) by my mobile phone, as I zoomed in, the navigation bar took up more space (that is, there was no way to read anything). How can I fix this?

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;
}
php html css
  • 1

    I wonder that "png test" is with position: absolute; top: 0. Try putting on the body a margin-top: 75px or the size of the "png test".

  • @Patrick he’s with margin: 0 auto; max-width: 100%; max-height: 100%

4 answers

2


As @Patrick says, since his navigation bar or header you will always be present throughout your pages the safest way is to add to the CSS of your container where your posts are hosted a 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 its 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 the CSS, just put the height of your bar also with percentage:

.header{ 
    height: 5%;
}

NOTE: However it is uncommitted to put percentages in heights (height)

  • Circle, the problem is that I will have SEVERAL containers throughout the site, but I found a solution and I will post here.

  • @Lucas updated response

  • Circle, I have one more problem that I put in the question (in EDIT). You know how to solve?

  • @Lucas, updated response

  • Thank you Circle; and look how dirty: the only one I had not used percentage was the height. I will add the current code in case someone wants to use it in the future.

  • Doing what you said on both Ivs, the navigation bar is lowercase and the method I did does not work.

  • Can create a fiddle to better analyze your question?

  • http://jsfiddle.net/mbq6d/

  • Let’s go continue this discuss&#227;o in chat.

Show 4 more comments

0

You can create a class on 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 control only on such page, that this can happen

By php it is possible to take the name of the current open page, you can make a condition by taking page name == 'you type the p agina that will have the change' within the condition can call a css or give echo of brs that is not advisable

0

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

Anyway, that’s what I’d 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 follow the result in this DEMO.

OBS.: I used fictitious values because I don’t have your code as reference.

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 as the posts have indentation by default, the div is not pasted with 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.

  • Try to explain it better with some example, I didn’t understand anything you did.

  • @Jorgeb. answer edited

Browser other questions tagged php html css

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