I have created a basic encyclopedia page for a project. I wanted to code this page with correct formatting and then base all of my other entries off of it. I am having trouble, however, getting my footer out of the left nav bar. I want the footer to be on the bottom after everything else.
Also, I would like the image to be to the right of the paragraph text. I cannot figure out how to get the image to wrap the paragraph within the <article>.
Here's the HTML code
and my CSS styling
Also, I would like the image to be to the right of the paragraph text. I cannot figure out how to get the image to wrap the paragraph within the <article>.
Here's the HTML code
HTML:
<!DOCTYPE html>
<html>
<head>
<title>TITLE | Encyclopedia</title>
<link rel="StyleSheet" href="style_basic_page.css">
<link rel="icon" type="/x-icon" href="/EncOzk.jpg">
</head>
<header>
<center><a href="/index_en.html" class="homepage_link"><h1>ENCYCLOPEDIA</h1></a></center>
</header>
<nav>
<br><a href="index_en.html">Home</a><br>
<br><a>Culture and the Arts</a><br>
<br><a>Geography and Places</a><br>
<br><a>History and Events</a><br>
<br><a>People and Groups</a><br>
<br><a>Religion and Beliefs</a><br>
<br><a>Technology and Architecture</a>
</nav>
<body>
<article>
<p class="title">TITLE</p>
<div>
<img src="TitlePage.PNG"; width= 300px; float= right;>
<p>PARAGRAPH TEXT</p>
</div>
</article>
</body>
<footer>
<p>FOOTER TEXT</p>
</footer>
</html>
and my CSS styling
CSS:
h1, h2 {
text-align: center;
display: inline;
}
.title {
font-size: 30px;
border-width: thin;
border-top-style: none;
border-right-style: none;
border-bottom-style: solid;
border-left-style: none;
}
header {
border-width: medium;
border-top-style: none;
border-right-style: none;
border-bottom-style: double;
border-left-style: none;
}
.homepage_link {
color: black;
text-decoration: none;
}
nav {
float: left;
width: 20%;
border-width: thin;
border-top-style: none;
border-right-style: solid;
border-bottom-style: none;
border-left-style: none;
}
article {
float: right;
width: 79%;
}
br {
display: block;
margin-bottom: 9px;
font-size:2px;
line-height: 2px;
}