Div block not showing

HTML & CSS
1

hey guys!

I am trying to follow this tutorial but can’t get my div block to show:

At 6:15: I can’t get my codes to work and here are my html and css codes

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<a href="http://www.dafont.com/" target="_blank">
	
	<div>
		

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

This is my css code:

div {
	width: 300px;
	height: 200px;
	background-color: green;
}

It should show a green box

2

It does show a green box for me. Do you have other rules in style.css which might be conflicting?

4

Hi there piano0011,

personally, I would not put a “div element” within an “a element” . :unhappy:

Here is an alternative example…

<!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">
body {
    background-color: #f9f9f9;
    font: 100% / 162% verdana, arial, helvetica, sans-serif;
 }

a {
    position: relative;
    display: block;
    max-width: 18.75em;
    min-height: 12.5em; 
    margin: auto;
    border: 1px solid #000;
    background-color: #008000;
    box-shadow: 0.3em 0.3em 0.3em rgba( 0, 0, 0, 0.4 );
    color: #fff;
    text-align: center;
 }
 
a span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate( -50%, -50% );
 }
</style>

</head>
<body> 

  <a href="http://www.dafont.com/">
   <span>visit dafont.com</span>
  </a>

</body>
</html>

coothead

5

Neither would I, but it is valid HTML5 and it is demonstrated in the tutorial video.

As copying and pasting the code from the OP’s post into an HTML document produces the expected result for me, I can only guess that there is something else in the linked style sheet causing the issue - maybe something as simple as a missing curly brace, or a semi-colon instead of a colon.

@piano0011: if you are not already in the habit of using the W3Validators, I suggest you adopt it now. They will save you hours of frustration.

For HTML: https://validator.w3.org/nu/

For CSS: https://jigsaw.w3.org/css-validator/

1 Like
6

That is very true, but almost almost any old crap coding
is now considered to be valid in HTML5. :wonky:

Again, personally, I would not use… target="blank"
…either, and I would always ensure that links include
meaningful text. :winky:

I believe that there are some users who find these
considerations to be indispensable. :biggrin:

coothead

2 Likes
7

Nor would I. It was explained in the video as being “very helpful” when linking to another site and you don’t want the visitor to leave your site. It wasn’t explained that while the site owner may consider it helpful, for the visitor it is not - especially if they are relying on assistive technology. Personally, I choose to build sites for the convenience of visitors who use them, but judging by the prevalence of target="_blank" in code posted here, it seems many coders are unaware of the difficulties it poses. (More information: https://webaim.org/techniques/hypertext/hypertext_links#new_window.)

Agreed. Hopefully that will be covered in the next tutorial …

2 Likes
8

Well, don’t hold your breath on that one.:mask:

I have a sneaky feeling that the next tutorial will be
about headings - starting at h3. :rofl:

coothead

9

Sorry for the confusion there guys but it must have been my browser because i refreshed it a few times and now i can see the box…

1 Like
10

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