Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Yeshaya Coffman
.a{fill-rule:evenodd;}techdegree seal-36
Yeshaya Coffman
Full Stack JavaScript Techdegree Graduate 22,885 Points

Css layout percentage

Hi when I write in css for example: h1 {margin: 50%} it’s 50% of what? the body? but the body doesn’t have any specific size. can someone please help me. thanks

2 Answers

Yaşar Dilbaz
Yaşar Dilbaz
5,454 Points

Remove the "titles" class' styles then just add this line of code: "text-align:center;" If you set the padding like that it would mean padding is the only thing that can be seen because 50% on the both sides makes 100% total and there is not enough space for content. Another thing, I think you shouldn't use percentage values on top and bottom margins. Percentage values mostly use to ensure eveything is looking decent on different resolutions. For the question you asked, the answer would be: Percaentage values based on parent elements. For example there is a image inside in a div and you give the image width of 100%. Image will be as wide as the div, but if you d on't set any width value to div then image will be as wide as any width set parent of div. If there is no element thats width set then the image will be as wide as browser windows.

Yeshaya Coffman
.a{fill-rule:evenodd;}techdegree seal-36
Yeshaya Coffman
Full Stack JavaScript Techdegree Graduate 22,885 Points

thanks so much!

Jesus Mendoza
Jesus Mendoza
23,289 Points
Jesus Mendoza
Jesus Mendoza
23,289 Points

The size of the document.

The document is all you can see in your browser, except navigation bar, scroll bar, etc.

Yeshaya Coffman
.a{fill-rule:evenodd;}techdegree seal-36
Yeshaya Coffman
Full Stack JavaScript Techdegree Graduate 22,885 Points

the problem is I wrote this html

<html>
  <head>
    <link href="mainstyle.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Baloo+Bhaina|Bangers|Fredoka+One|Kavoon|Pacifico|Permanent+Marker" rel="stylesheet">
  </head>
    <body>
      <div class="mainwrapper">
        **<div class="titles">
          <h1 class="maintitle">Storys</h1>
          <h2 class="maintitle">Write your story</h2>
        </div>**
        <form action="Index.html" method="post" class="story1">
            <label for="story2">Texto</label><br>
            <textarea id="story2" name="secondstory-trial"></textarea>
        </form>
        <form class="mainbutton">
            <button type="submit">Submit</button>
        </form>
      </div>
    </body>
</html>```

And this CSS:

```css
body {
  font-family: 'Baloo Bhaina', cursive;
  margin: 0;
}

.mainwrapper {
  margin: 0;
}

.maintitle {
  text-align: center;
}
.story1 {
  display: block;
  text-align: center;
  margin: auto;
  position: relative;

}

.mainbutton {
  text-align: center;

}

h1 {
  margin-top: 25%;
}

**.titles {
  display: inline-block;
  padding: 50% 50%;
  font-size: 80px;
}**```

And the class “title" is not centred on the browser viewport