Search code examples
cssborder

Cloning a website to train with CSS

I'm copying a website to train with CSS (I'm trying to reproduce this:click here to see the image) but I'm having a problem copying borders, this is the result: click here to see and this is the code that I wrote:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Technology - BBC News</title>
  <style>
    .topbar {
      width: 1000px;
      height: 40px;
      background-color: #ffffff;
    }
    
    body {
      margin: 0px;
      padding: 0px;
    }
    
    .logo {
      margin-top: 8px;
      width: 100px;
      float: left;
      margin-left: 16px;
    }
    
    .topbar-section {
      border-left: 1px solid grey;
      height: 40px;
      float: left,
    }
  </style>

</head>

<body>
  <div class="topbar">
    <img src="bbc-blocks-dark.png" class="logo"></div>
  </div>

  <div class="topbar-section">Sign in</div>

</body>

</html>

May I have your help please?

Solution

  • When I look at this code in Chrome - I can see the left border on .topbar-section.

    When you say you are having problems - can you tell us what is happening? Are they not showing, or showing incorrectly?

    From what I can see - the main problem is that you have made 2 separate divs where it should be one div inside another.

    You've also got 3 closing and only 2 opening - if you are using an editor such as Atom or Notepad++ this can help you keep track of your opening and closing elements.

    <!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Technology - BBC News</title>
  <style>
    .topbar {
      width: 1000px;
      height: 40px;
      background-color: #ffffff;
    }

    body {
      margin: 0px;
      padding: 0px;
    }

    .logo {
      margin-top: 8px;
      width: 100px;
      float: left;
      margin-left: 16px;
      border-right: 1px solid grey;

    }

    .topbar-section {
      height: 40px;
      float: left;
      margin-left: 5px;
    }


  </style>

</head>

<body>
  <div class="topbar">
    <img src="bbc-blocks-dark.png" class="logo">


  <div class="topbar-section"><p>Sign In</p></div>
</div>
</body>

</html>