Using the same mockup and the html you just wrote, write css style rules that pr
ID: 3761571 • Letter: U
Question
Using the same mockup and the html you just wrote, write css style rules that properly position the elements on the page.
!DOCTYPE html>
<html>
<head>
<!-- your webpage info goes here -->
<title>Title of the site</title>
<meta name="author" content="your name" />
<meta name="description" content="" />
<!-- you should always add your stylesheet (css) in the head tag so that it starts loading before the page html is being displayed -->
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<!-- webpage content goes here in the body -->
<div id="page">
<div id="logo">
<h1><a href="/" id="logoLink">Title of the site</a></h1>
</div>
<div id="nav">
<ul>
<li><a href="#/contact.html">title</a></li>
<li><a href="#/contact.html">link1</a></li>
<li><a href="#/about.html">link2 </a></li>
<li><a href="#/contact.html">link3</a></li>
<li><a href="#/contact.html">link4</a></li>
<li><a href="#/contact.html">link5</a></li>
</ul>
</div>
<div id="content">
<h2>Home</h2>
<p>
the information written under title is written over here
</p>
<body>
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
</body>
</div>
<div id="footer">
<p>
Webpage made by <a href="/" target="_blank">[your name]</a>
</p>
</div>
</div>
</body>
</html>
Explanation / Answer
#logo{
width:500px;
background-color:gray;
}
#nav{
width: 300px;
background-color:gray;
margin-left:200px;
}
#content{
width: 187px;
margin-top: -127px;
background-color:gray;
}
#footer{
width:500px;
background-color:gray;
}
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.