css styles in document head are not being applied
Question
My apologies if the question is too simple. I'm sure that it is, but I have put this code through the validator on W3C.org and looked through may of the related links and strings on this site, but I've found nothing that's given me any answers, at least that I can make sense of.
I have a very rudimentary html document with some css styles in the head. All I want to do is have the copy wrap around the image using a simple css style.
I'm just learning how do do this and am following an example from a book, but the code is not working as it's supposed to.
Here is my code. What am I doing wrong? (I'm using Chrome and Safari running on Yosemite. _____________________ beginning of code_____________________
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<head>
<title>Float</title>
<meta http-equiv="content-type" content="text/html lang="en-US">
<style type="text/css">
.featureimage {
float: left;
width: 300px;
}
p.copy {
float: right;
align: center;
}
</style>
</head>
<body>
<h1>This Is A Very Large Housing D,evelopment.</h1>
<img src="BLDGS-300x200.jpg" width="300" height="200" alt="hi-rise" class="featureimage">
<p class="copy"> At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, repellat… </p>
</body>
</html>
_________________ end of code ______________________
4 answers
solution1
3 2017-01-07 23:43:51
Because you specified float: right on the paragraph, the rules for how it interacts with prior floating content change. This bumps it down to a new line.
Remove float:right and the text will wrap around the image.
align:center is invalid CSS. There is no such property as align .
solution2
0 2017-01-07 23:43:42
The default width for a <p> (and other block) element(s) in most browsers is 100%. Because of that, the text doesn't 'fit' next to the image and get pushed to the next row. Try giving the paragraph a width as well.
solution3
-1 2017-01-07 23:31:56
here is update code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Float</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.featureimage {
float: left;
width: 300px;
}
p.copy {
float: right;
align: center;
}
</style>
</head>
<body>
<h1>This Is A Very Large Housing D,evelopment.</h1>
<img src="BLDGS-300x200.jpg" width="300" height="200" alt="hi-rise" class="featureimage" />
<p class="copy"> At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, repellat… </p>
</body>
</html>
hope will be work fine !
solution4
-1 2017-01-08 00:16:02
What I would do to pass @ https://validator.w3.org/check (with two warnings) is simply use:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Float</title>
<style type="text/css">
.featureimage {
float: left;
margin: 0 10px 10px 0;
}
</style>
</head>
<body>
<h1>This Is A Very Large Housing D,evelopment.</h1>
<p><img src="building.jpg" width="300" height="200" alt="hi-rise" class="featureimage">
At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, repellat… At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, repellat… </p>
</body>
</html>
The warnings are related to:
No Character encoding declared at document level
No character encoding information was found within the document, either in an HTML meta element or an XML declaration. It is often recommended to declare the character encoding in the document itself, especially if there is a chance that the document will be read from or saved to disk, CD, etc.
See this tutorial ( http://www.w3.org/International/tutorials/tutorial-char-enc/#Slide0250 ) on character encoding for techniques and explanations.
JSFiddle: https://jsfiddle.net/m3ea8nj8/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.