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 rymatech
rymatech
4,671 Points

How to get border into the corners of the webpage?

See picture of webpage and code. You will see the blue border does not go into corner of webpage and I cannot figure out why? :(

rymatech
rymatech
4,671 Points

.mainheader { font-size: 50px; font-style: italic; text-align: center; font-family: sans-serif; border: 32px; border-style: solid dashed; border-color: blue; background-color: lightgreen; padding: 50px; margin: 0px; } body { background-color: red; }

rymatech
rymatech
4,671 Points

<!DOCTYPE html> <html>

<head> <link href="styles.css" rel="stylesheet"> <title>Playing Around with CSS</title> <header class="mainheader">Developer</header> </head>

<body> </body>

<footer> </footer>

</html>

2 Answers

Fredrik Rönnehag
Fredrik Rönnehag
2,342 Points
Fredrik Rönnehag
Fredrik Rönnehag
2,342 Points

Your <header> tag is inside the <head> tag. <header> should be inside the <body> tag.

<head> is the "brain" of your content, meaning adding links to scripts, styles, fonts etc.

<header> is just a container to represent the navbar or top of the page, it isn't mandatory but it makes the code easier to organise, so it's a good habit to use it.

<!DOCTYPE html> 
<html>

<head> 
<link href="styles.css" rel="stylesheet">
<title>Playing Around with CSS</title>
 </head>

<body>
<header class="mainheader">Developer</header>

</body>

<footer> </footer>

</html>

Then by default body tag has a margin, so add to your body css.

margin: 0px;
padding: 0px
michael williams
michael williams
19,492 Points
michael williams
michael williams
19,492 Points

generally the border flows around content, no matter if you put it around the header, main, or body, it closes in on the content. I never really thought of using a border to do an outline of the screen since it would not be dynamic. It would have to have a width and height to keep it from collapsing on the content. It is an interesting thought though. Just once you go responsive... might come back to haunt you. Now on to your code.

  1. first like above fredricks comment the head is a container for other stuff, mainly the header, links to css, possibly a little javascript it is better to have that below though, and some other stuff.
  2. Next, your style 'mainheader' get use to the naming convention of sorts like 'main-header' ('example.. 'nav-section') try to keep your names for classes and such lower case and hypenate your words. it is used in tons of css, until you get into BEM it is the only naming convention you need to know. it is used in bootstrap, foundation, etc.
  3. your class '.mainheader' has an error in it. border-style: is using 'dashed' and 'solid'. we need to make that one or the other. I chose dashed in this example, eventually you will end up learning a shortcut of 'border: 32px blue dashed;'
  4. Then we are going to put 'header' and all of that code inside the body instead of the head section.
  5. finally we can add fredriks other comment of the padding and margin of the body to 0 so we can get rid of the spacing between our border and the edge.

This gives us not exactly what you were looking for but what your code is doing. The entire header section, is blocked inside that border away from the main, and footer sections inside the body of your html. So as you add to your header the border will grow vertically and as the screen shrinks it will shrink horizontally right now. The border is responsive right now.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Dev</title>

</head>
<style>
    /* could add all of this too a styles.css and link with <link rel="stylesheet" href="styles.css"> */
    .main-header { font-size: 50px; font-style: italic;
     text-align: center; font-family: sans-serif; 
      background-color: lightgreen;
     border: 32px blue dashed;
      padding: 50px; margin: 0px; } body { background-color: red; 
      }
      body { margin: 0; padding: 0;}

</style>
<body>
    <header class="main-header">Developer</header>
</body>
</html>