The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
Class 3 create an absolute layout with css abs position (aptana)
1. Creating a Layout with CSS: Absolute Position
Create a New Aptana Project
● Create a new Aptana Project named “Class 3 CSS Absolute”. Change the name of your
HTML page to 3colCSSAbsolute.html. Create a new stylesheet called absolutePos.css
and link the stylesheet to your HTML page in your new project.
<link rel="stylesheet" href="absolutePos.css" />
● Instead of using table cells for our layout, we are going to use <div> elements. We will
go ahead and use class names as we go, so that it’s obvious what we want to do with
each <div> element.
● Add three <div> elements to the <body> of your HTML page for the header, container
block, and footer
<div class="header">
this is the header
</div>
<div class="containerBlock" style="border: 0px">
1
2. </div>
<div class="footer">
This is the footer
</div>
● And our preview page looks like this:
● Let’s add a black border to our <div> elements by adding a div element selector to our
absolutePos.css file
div {
border: 3px solid black;
}
● We need to add three more <div> elements to our containerBlock div in order to achieve
the 3 column layout
2
3. ● In our Aptana preview page, we should see this:
● Let’s add some class selectors for the header and footer classes
.header {
text-align: center;
margin-left: 10px;
width: 780px;
}
.footer {
text-align: center;
position: absolute;
bottom: 10px;
left: 21px;
width: 780px;
}
● It’s a start:
3
5. position: absolute;
left: 570px;
height: 400px;
top: 5px;
}
● Add an unordered list to the left column and a list of links
<ul>
<li>
<a href="moreCompleteTableLayout.html">Home</a>
</li>
<li>
<a href="http://news.google.com">News</a>
</li>
<li>
<a href="mailto:thisisafakeemail@fakeemail.com">Email me</a>
</li>
<li>
<a href="http://www.twitter.com/girldevelopit">GDI on Twitter</a>
</li>
</ul>
5
6. ● We will also add some ul and li selectors to our CSS
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
padding: 0 0 5px 0;
}
● Preview in Aptana:
● Now let’s use what we have learned about pseudo-classes to style our links:
a:link {
6