Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In this lesson we are going to build the Lifestyle page as we continue to build our website. This is what the page looks like. There's really not too much to it. So let's go ahead and get started. So here we have the template.html, which is our starting place, and our beginning.css, which is where we left off our css from last time, and liftstyle.txt, which has our fully XHTML-ified content. So we'll start out by doing our Save As.
I'm going to Save As lifestyle.html and save beginning.css as main.css and lifestyle.txt, we don't need to change it so we are not going to do a Save As there. Then we'll start off by changing our title, Groundswell Lifestyle. Then we'll move on to our links at the top of the page. So this is the current image and that one will go where the lifestyle image is now.
So we'll put that there and then we'll take the lifestyle one and we'll move that to the beginning and we'll make that into home, and home, and home and then we'll change the width to 84 and I'm going to do a cut here with Ctrl+X and you can use Command+X on a Mac. Make that 80 of the home image and then go over here with the width of the home image add Paste.
Make that the width for the lifestyle and that makes it the current one, because it has this -current here and it has the height of 30 for the current. Go ahead and change the alt to "lifestyle" and there we have our menu should be updated. We can go ahead and check in the browser to make sure it got done correctly. Drag the lifestyle.html into the browser and there we have it. There is our Lifestyle. Home link works and the Gear link works and there's our Lifestyle page.
We need to change this id banner. Down here we make this a lifestyle and the alt text say, "live the lifestyle". Here we go and then finally we can put in our content. We get that from the text file here. Copy with Ctrl+C and Paste with Ctrl+V and go ahead and do the indent thing and Save and take a look at it in the browser, Reload and there we go.
We have the banner there and we have the "What is this surfing lifestyle?" text. You can see that's the text from over here. Finally, the sidebar. Grab this from over here. Now there is one thing in this. We are going to need to do a little formatting on this ordered list. Go ahead and copy and then paste it in our sidebar content here. And indent. We have that. Go ahead and save and reload in the browser and we can see all this on the right-hand side is fine except for that ordered list.
If we look on, here we see the ordered list is formatted a little bit differently. So let's go ahead and format that. So in our CSS we are going to go down to the Sidebar section, way down at the end right here. I'll go ahead and format the ordered list, so we have contentRight and ol. So that's the ordered list and we are also going to want to format the line items. So that will be contentRight. That's li.
So the Ordered List, that gets just margin stuff. margin .5em, 0, 1.5em, and 1em. So that's top, right, bottom, and left. Then the line item I'm just going to start from this and paste that in here and modify from that. So this is .8em and the color is 666 and the margin is .2em for the top and bottom and .5em for the right and left.
So that stuff should make it look exactly like it does in here and there we have it. Now if you are using Internet Explorer, which is statistically a number of you are, you will notice that this looks a little bit different in Internet Explorer. So I'm just going to take a moment and talk about that. I'll bring up Internet Explorer and drag our document in there and take a look. You notice this looks significantly different in Internet Explorer. This is because Internet Explorer doesn't handle the left margin on ordered lists in the same way this Firefox and actually the rest of the browser community does.
Rest of the browser community follows the standard and Internet Explorer does not. So the compromise is we can make this look passible in Internet Explorer and have it look okay in Firefox. In actuality, I would love for this margin to be a little bit farther over to the left in Firefox. But the truth is if you make it farther over this way in Internet Explorer or I make it farther to left in Firefox, one or the other of them is going to suffer terribly.
So this is the compromise that we have come up with here. So that's our page. You can certainly choose a different compromise if you prefer and that's a choice that every web designer has to make when they deal with having to support the browser that's 800-pound gorilla in the market and you are wanting to make their pages attractive and work well on the browsers that actually follow the standard. So those are the choices we have to make and this is the choice that I made and you can certainly make different choices and most people do. In any event, there we are and that's our Lifestyle page and next up is the Video page.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 99862 Viewers
56 Video lessons · 112986 Viewers
71 Video lessons · 81818 Viewers
131 Video lessons · 39262 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.