What did I do wrong?

html-css
cssgrid

#1

So I’m 88% done on the CSS courses.
I decided to play around with what I’ve learnt so far, so I grabbed some random files I had lying around and started coding.

This is my HTML:

 <!DOCTYPE html>
<html>

<head>
  <title>grid test</title>
  <link href="aestheticz.css" rel="stylesheet" type="text/css">
</head>



<body>
<div class="wrapper">



<div class="div 1">
  <video autoplay controls>
    <source src="gtav.mp4" type="video/mp4">
    get a better browser
  </video>
</div>

 

<div class="div 2">
  <img src="tc2.jpg" alt="look at this">
</div>



<div class="div 3">
  <p>here's some text</p>
</div>



<div class="div 4">
  <a href="youtube.com">here's a random link</a>
</div>



</div>
</body>
</html>

This is my CSS:

@font-face {
  font-family: Orbitron;
  src: url(Orbitron-Regular.ttf);
}

* {
  font-family: Orbitron;
  color: white;
}

a {
  color: blue;
}

a:hover {
  color: lightblue;

div {
  text-align: center;
}

body {
  background-image: url(beautiful_cityscape.png);
  grid-template: repeat(16, 1fr) / repeat(16, 1fr);
}

.wrapper {
  background-image: url(free_sexy_black_background.jpg);
  grid-area: 1 / 4 / span 16 / span 8;
  grid-template: repeat(6, 1fr) / repeat(2, 1fr)
}

.div {
  margin: 5px;
}

.1 {
  grid-area: 1 / 1 / span 1 / span 1;
}

.2 {
  grid-area: 1 / 2 / span 1 / span 1;
}

.3 {
  grid-area: 2 / 1 / span 1 / span 1;
}

.4 {
  grid-area: 2 / 2 / span 1 / span 1;
}

This is what I was going for (unrealistic approximation made in paint): http://prntscr.com/i6d2gz
And what I got was totally not expected.

So, what did I do wrong? Show me how it’s done, I wanna learn from my mistakes, you know?


#2

image and this is how my folder looks like


#3

Missing display: grid;.

Missing closing brace on declaration block.

In CSS Level 3 there are likely relaxed rules around class names, but in the olden days of Levels 1 and 2 we could not use a numeral in the first character position.

The W3C CSS Validation Service

Sorry! We found the following errors (4)
URI : TextArea
39 Parse Error .1 { grid-area: 1 / 1 / span 1 / span 1; }
43 Parse Error .2 { grid-area: 1 / 2 / span 1 / span 1; }
47 Parse Error .3 { grid-area: 2 / 1 / span 1 / span 1; }
51 Parse Error .4 { grid-area: 2 / 2 / span 1 / span 1; }

I believe that even today the preferred approach would be,

.one {}
.two {}
.three {}
.four {}

Congratulations! No Error Found.
This document validates as CSS level 3 + SVG !

In my mind, the classname, .div doesn’t really speak with any meaning.

.wrapper > div {}

does, however. It speaks directly to the children of the wrapper class that are DIV’s.

Bit of a nasty message to give our user, wouldn’t you say?

That goes against the grain what alternate text is intended for… User agents and screen readers depend on an accurate depiction of what the picture shows.

So we end with this…

<body>
  <div class="wrapper">
    <div class="one">
      <video autoplay controls>
        <source src="gtav.mp4" type="video/mp4">
        Your browser does not support this video format.
      </video>
    </div>
    <div class="two">
      <img src="tc2.jpg" alt="three high end sports cars">
    </div>
    <div class="three">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
      sed do eiusmod tempor incididunt ut labore et dolore magna 
      aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
      ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <div class="four">
        <a href="youtube.com">YouTube</a>
    </div>
  </div>
</body>

When the universal selector is the only selector, it applies to every type in the DOM and uses a huge amount of memory. Not a good practice for that one reason. At least give it a selector range.

p * {}

for instance. Then it only applies to elements of node type P. Better yet, a generic rule at the top of the cascade…

p {}

All-in-all, just applying the rule to the BODY will pass it down to all its descendants.


#4

Thanks a lot for the help, man. I highly appreciate it.


#5

Oh, and also, just out of curiosity, I see that the grid display has made the background images repeat depending on the grid shape.


Is there any way to avoid that, except for having another wrapper that is gridless to support the background and removing the background from the grids?


#6

may be you may have made mistake in making links as the coding seems perfect and may be fault in saved files


#7

The backgjround on the body element is not affected by CSS Grid. What is happening there is called, TILING. The browser repeats rendering the image until the screen is full.

body {
    background-size: cover;
    background-position: 0 50%;
    /* other props */
}

The first property stretches the single image to fill the screen, The second centers the image so the left and right sides get clipped evenly. The image is pinned to the center, so to speak.

Can you post your code that you have now?


#8

Sure

<!DOCTYPE html>
<html>

<head>
  <title>grid test</title>
  <link href="aestheticz.css" rel="stylesheet" type="text/css">
</head>



<body>
<div class="wrapper">



<div class="div one">
  <video autoplay controls>
    <source src="gtav.mp4" type="video/mp4">
    Your browser does not support the video tag.
  </video>
</div>

 

<div class="div two">
  <img src="tc2.jpg" alt="Trackmania^2 Canyon cars">
</div>



<div class="div three">
  <p>[Random paragraph]</p>
</div>



<div class="div four">
  <a href="youtube.com">Link to Youtube</a>
</div>



</div>
</body>
</html>
@font-face {
  font-family: Orbitron;
  src: url(Orbitron-Regular.ttf);
}

p {
  font-size: 75px;
  font-family: Orbitron;
  color: white;
}

a {
  font-size: 75px;
  font-family: Orbitron;
  color: blue;
}

a:hover {
  font-size: 75px;
  font-family: Orbitron;
  color: lightblue;
}

div {
  text-align: center;
}

body {
  display: grid;
  background-size: cover;
  background-position: 0 50%;
  background-image: url(beautiful_cityscape.png);
  grid-template: repeat(16, 1fr) / repeat(16, 1fr);
}

.wrapper {
  display: grid;
  background-size: cover;
  background-position: 0 50%;
  background-image: url(free_sexy_black_background.jpg);
  grid-area: 1 / 4 / span 16 / span 8;
  grid-template: repeat(6, 1fr) / repeat(2, 1fr)
}

.wrapper > div {
  display: grid;
  margin: 5px;
}

.wrapper > .one {
  grid-area: 1 / 1 / span 1 / span 1;
}

.wrapper > .two {
  grid-area: 1 / 2 / span 1 / span 1;
}

.wrapper > .three {
  grid-area: 2 / 1 / span 1 / span 1;
}

.wrapper > .four {
  grid-area: 2 / 2 / span 1 / span 1;
}
  

And the result looks a bit better, though it still seems to be a little weirdly scaled:


#9

It’s possible that the position is reversed on your background. That’s what happens when we try to do things from memory.

Upload your background image in a post or post a link to where it can be found so we can test it.


#10


#11
body {
    background-size: cover;
    /*background-position: 50% 0;*/
    background-image: url(city_scape_690x480.png);
    /* other props */
}

I scaled the vertical height of the image to 480px, but the aspect ratio is still a little off. To get this background image to work without repeating it will be need dimensions closer to the typical aspect ratio of displays. Play around with it.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Background Cover</title>
<style>
body {
    background-size: cover;
    /*background-position: 50% 0;*/
    background-image: url(city_scape_690x480.png);
    /* other props */
}
</style>
</head>
<body>
  <!--div class="wrapper">
    <div class="one">
      <video autoplay controls>
        <source src="gtav.mp4" type="video/mp4">
        Your browser does not support this video format.
      </video>
    </div>
    <div class="two">
      <img src="tc2.jpg" alt="three high end sports cars">
    </div>
    <div class="three">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
      sed do eiusmod tempor incididunt ut labore et dolore magna 
      aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
      ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <div class="four">
        <a href="youtube.com">YouTube</a>
    </div>
  </div-->
</body>
</html>