Cant get text in div box

HTML & CSS
1

I im really new to code and i was trying to make a basic structure for a website and started copying thins guy on youtube for a template and when i copied it the text was not going into the box even though it was exacly the same as his can some one help

<style>
  .html { font-family:Arial, Helvetica, sans-serif; color:#333 }
  .body { background:#ccc; margin:0; }
  .container { width:600px; margin:0 auto; background:#fff; }
  .header { width:100%;
 height:60px; border-bottom:1px solid #c7c7c7; background:#333; }
 .name { float;left; width:40px; height:40px; margin:10px; background:#ccc; }
 .top_info { float:right; width:100px; height:40px; background:#666; border:1px solid#c7c7c7; margin:10px; }
 </style>
</head>
<body>
2

Welcome to the forums, @daniillathourakis.

It’s hard to tell without the full HTML to look at. One thing which I notice, though is that you have .html and .body in your styles. If you intend to target the <html> and <body> elemennts, you should not have the dot first. The dot signifies a class name of html or body.

1 Like
3

^ ditto header.

1 Like
4

Hi there daniillathourakis,

“… I was trying to make a basic structure for a website and started
copying this guy on youtube for a template…”

That really is not a good idea. :wonky:

Here is a basic template, to get you started…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<link rel="stylesheet" href="screen.css" media="screen">

<style media="screen">
html {
    box-sizing: border-box;
 }

*, *::before, *::after {
    box-sizing: inherit;
 }
body {
    background-color: #f9f9f9;
    font: 100% / 162% verdana, arial, helvetica, sans-serif;
 }
</style>

</head>
<body> 

</body>
</html>

coothead

1 Like
5

Hi there daniillathourakis,

it looks as though you are attempting to make a two-column layout. :winky:

Here is an example that uses a little of the code that you supplied…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<link rel="stylesheet" href="screen.css" media="screen">

<style media="screen">
html {
    box-sizing: border-box;
 }

*, *::before, *::after {
    box-sizing: inherit;
 }

body {
    background-color: #f9f9f9;
    font: 100% / 162% verdana, arial, helvetica, sans-serif;
 }

.container { 
    max-width: 50em;; 
    margin: auto; 
    background-color: #fff;
    border: 1px solid #333; 
    color: #333;
 }

.header { 
    padding: 1em;
    background-color: #333;
 }

h1 {
    font-size: 1.25em;
    color: #f9f9f9;
    text-align: center;
    text-transform: uppercase;
 }

.content {
    display: table;
    width: 100%;
    border-spacing: 0.35em;
 }

.links, .main {
    display: table-cell;
    width: 75%;
    padding: 1em;
    border: 1px solid #333;
 }

.links {
    width: auto;
    vertical-align: middle;
    text-align: center;
 }

.links ul {
    display: inline-block;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: left;
 }

.links a {
    display: block;
    margin: 0.5em 0;
    color: #333;
 }

@media ( max-width: 40em ) {
.links, .main {
    display: block;
    width: 100%;
  }

.links {
    margin-bottom: 0.35em;
  }

.links li {
    display: inline-block;
    margin: 0 0.5em;
  }
 }
</style>

</head>
<body> 

 <div class="container">

  <div class="header">
    <h1>Page description</h1>
<!-- .header --></div>

   <div class="content">

    <div class="links">
     <ul>
      <li><a href="#">link 1</a></li>
      <li><a href="#">link 2</a></li>
      <li><a href="#">link 3</a></li>
      <li><a href="#">link 4</a></li>
      <li><a href="#">link 5</a></li>
     </ul>
<!-- .links --></div>

    <div class="main">
     <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.  
      Curabitur sit amet sem sed libero bibendum tempus faucibus       
      quis mi. Nulla rhoncus vel ipsum in volutpat. Nam tortor 
      nibh, posuere ac lorem ut, suscipit tincidunt leo. Duis 
      interdum justo ac justo vehicula consequat. Curabitur et 
      volutpat nibh. Phasellus rutrum lacus at dolor placerat 
      feugiat. Morbi porta, sapien nec molestie molestie, odio 
      magna vestibulum lorem, vitae feugiat est leo sit amet 
      nunc. Curabitur ornare tempor turpis. In nibh sem, porta ac 
      magna sed, pretium commodo odio. Sed porttitor augue velit, 
      quis placerat diam sodales ac. Curabitur vitae porta ex. 
      Praesent rutrum ex fringilla tellus tincidunt interdum. 
      Proin molestie lectus consectetur purus aliquam porttitor. 
      Fusce ac nisi ac magna scelerisque finibus a vitae sem.
    </p>
<!-- .main --></div>

<!-- .content --></div>

<!-- .container --></div>


</body>
</html>

coothead

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.