Author Topic: To people who know their HTML (Read 882 times)

blueblur121 · September 18, 2014, 12:04:57 PM

Why does this not work.

Code: (index.html) [Select]

<!DOCTYPE html>
<html>
	<head>
		<link type="text/css" rel="stylesheet" href="style.css"/>
		<title>Placeholder</title>
	</head>
	<body>
		<div id="main1">
			<p>Test</p>	
		</div>
	</body>
</html>

Code: (style.css) [Select]

body
{
	background: lightgray;
	font-size: small;
	font-family: verdana, arial, helvetica, sans-serif;
	margin: 0px;
	padding-left: 100px;
	padding-right: 100px;
}

#main1
{
	width = 200px;
	align-self: center;
	background-color: white;
	padding: 100px;
	margin: 0px;
}

When I open this up in a web browser, the div with the id "main1" is not affected at all by the stylesheet, but the background is.
The answer is probably really obvious, but I can't figure it out.

Ad Bot · Advertisement

Ipquarx · September 18, 2014, 12:05:53 PM

I think you need to replace the # with a . in the stylesheet

blueblur121 · September 18, 2014, 12:07:20 PM

That's not what it said in the CSS tutorial I'm using, but I'll give it a try.

EDIT: That does not work.

Refticus · September 18, 2014, 12:13:45 PM

i found your problemo

Code: [Select]

#main1
{
	width = 200px;
	align-self: center;

replace the '=' with a :

blueblur121 · September 18, 2014, 12:15:06 PM

Oh stuff, I never noticed that.

EDIT: still does not work.

Refticus · September 18, 2014, 12:19:59 PM

Quote from: blueblur121 on September 18, 2014, 12:15:06 PM

Oh stuff, I never noticed that.

EDIT: still does not work.

i got this from your code.

Doomonkey · September 18, 2014, 12:20:26 PM

Works for me with width: 200px;

Although, I have never heard of align-self and it doesn't seem to do anything.

Edit: Also, you can replace padding left and right with padding: 0px 100px;

blueblur121 · September 18, 2014, 12:26:04 PM

What. I got this.
And yes, this is the edited version.

Quote from: Doomonkey on September 18, 2014, 12:20:26 PM

Although, I have never heard of align-self and it doesn't seem to do anything.

http://www.w3schools.com/cssref/css3_pr_align-self.asp

Refticus · September 18, 2014, 12:28:36 PM

Quote from: blueblur121 on September 18, 2014, 12:26:04 PM

What. I got this.
And yes, this is the edited version.
http://www.w3schools.com/cssref/css3_pr_align-self.asp

are you sure the CSS is loading?

blueblur121 · September 18, 2014, 12:28:59 PM

It is. The background is grey.

Refticus · September 18, 2014, 12:30:47 PM

Quote from: blueblur121 on September 18, 2014, 12:28:59 PM

It is. The background is grey.

make sure. (could be your browser's default background) make that Text purple. if it remains black, something borked up.

make sure the <link> tags point to the style sheet.

blueblur121 · September 18, 2014, 12:35:34 PM

Here. I changed the font size and family using the stylesheet.

Refticus · September 18, 2014, 12:39:03 PM

Code: [Select]

body {
	background: lightgray;
	font-size: small;
	font-family: verdana, arial, helvetica, sans-serif;
	margin: 0px;
	padding-left: 100px;
	padding-right: 100px;
	float: none;
}

#main1
{
	color: purple;
	width: 200px;
	background-color: white;
	text-align: center;
	padding: 100px;
}

try this.

blueblur121 · September 18, 2014, 12:41:08 PM

Same thing as before.

Doomonkey · September 18, 2014, 12:43:26 PM

Also, if you want align-self to work, your body needs the following code:

Code: [Select]

height: 800px;
display: flex;
align-items: flex-start;
flex: 1;

Obviously the height does not need to be 800px, but there needs to be a specified height larger than your main1.