Monday - Horizontal Navigation
We're going to address a handful of new techniques today:
- shifting orientation of unordered lists to horizontal
- floating elements left and right
- aligning text left, center, or right
- generating lorem ipsum
To get horizontal lists, in CSS you'll select your unordered list line items and set the display property to be inline:
li { display: inline ; }
To float elements (like the main and aside elements) to either side of one another, you should define the width of each element and then set one to float left and the other to float right:
aside {
float: left ;
width: 40% ;
}
main {
float: right ;
width: 50% ;
}
To align text you should select the text block and then add an alignment declaration:
header { text-align: center ; }
To generate lorem ipsum (which is gibberish text that designers use to get a sense for what a Webpage will look like once it is filled with content), go to Google and search for "lorem ipsum." One of the first hits should be this lorem ipsum text generator. And then it's really just a matter of copy and paste.
