Question about 8. Design a Button for your Website


#1

Hello,

I have a question about this lesson

<html>
	<head>
		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
		<title>About Me</title>
	</head>
	<body>
		<img src="https://s3.amazonaws.com/codecademy-blog/assets/46838757.png"/>
		<p>We're Codecademy! We're here to help you learn to code.</p><br/><br/>
		<div>
			<a href="https://www.facebook.com/codecademy">Friend us on <span>Facebook!</span></a>
		</div>
	</body>
</html>

On the results page, it shows Friend us on Facebook! (with "Facebook!" being on the next line). My question is, how did they make it so that "Facebook!" is on the next line and not on the same line as the preceding words?

PS - I removed some tags and quotation marks to make the code appear.

Thanks!

Update:

I may have figured out the line that makes it happen

I removed some lines on CSS

div {
	border-radius: 5px;
	border: 2px solid #6495ED;
	background-color: #BCD2EE;
	height: 50px;
	width: 120px;
	margin: auto;
	text-align: center;
}

I removed height, width and margin and it became just one line.


#2

Please paste in your code using this format

```

  replace this line with your code, leave backticks


```

#3

Thanks! Edited the post now.

Though this part of the lesson is just a preview of the code, I feel like I can't move on without understanding why the "Facebook!" word is on the next line.


#4

Because of the width of your div (button)


#5

Thank you. I think I'm getting it a bit now, so it's like cells in Excel where if it doesn't fit, it will move to the next line. :smile:


#6

Understand it how you want just remember the rules :slightly_smiling:
You're welcome :green_heart:

Happy Learning :slightly_smiling:
Happy coding !

What inspired you to learn programming ?
Join the discussion


#7

'''img {
display: block;
height: 100px;
width: 300px;
margin: auto;
}

p {
text-align: center;
font-family: Garamond, serif;
font-size: 18px;
}

div {
height:50px;
width:120px;
border-color:#6495ed;
background-color:#bcd2ee;
border-style:solid;
border-width;2px;
}
'''

keeps saying i have a height of 49.545460000000006px :frowning:


#8

you have a semi colon instead of a colon
border-width: 2px;

check your zoom and make it 100%