(Solved) : Part 1 3 Column Layout 10 Marks Use Exercise Semantics Create Three Column Layout Procedur Q29378901 . . .
Part 1: 3-Column layout (10 marks)
Use Exercise Semantics and create a three column layout with theprocedure below:
Notice your body width is 960px (excluding the borders andsection margin). We wish to create a three-column layout with a gapof 20px between columns and we want a padding of 20px for eachcolumn. This leaves us with 800px to work with.
The section should be floated left with a width of 600px and theaside should be floated right with a 270px width
Create a separate CSS stylesheet and create a class for each ofyour articles e.g. col1, col2. Add the stylesheet to your HTMLfile.
As these articles are part of the section, so to create athree-column layout, you need to distribute the section widthevenly to your article classes and add appropriate floats.
Float your Column 1 in the section to the left, and give it a widthof 260px. Next, give your column that 20px padding.
Next make sure there is a gap between the columns via a 20px rightmargin.
Apply the same for column 2 except the floating attribute. TheColumn 2 should float right.
The column 3 should float right.
Remember to clear the footer so that it does not move up.
Leave the body width as 1000px provided in the style.cssfile.
CSS3col.png
Part 2: Drop Down Menu (10 marks)
Next create a drop down menu. This exercise will utilise morecomplex selectors. You may need to refer to the followingreference:
http://reference.sitepoint.com/css/selectorref (Links to anexternal site.)Links to an external site.
First things first, you need to make all your list items containhyperlinks. For the purpose of this exercise, the links do not needto go anywhere, href=””
For the list item that you want to have a drop down, create anested unordered list.
CSS3colg.png
Part 3: Responsive Web Design (10 marks)
Allow for multiple devices. If it’s loaded on a mobile device (eg.iPhone), hide the aside and have the columns stack. Also, stack thenavigational menu or create a menu burger.
Expert Answer
Answer to Part 1 3 Column Layout 10 Marks Use Exercise Semantics Create Three Column Layout Procedur Q29378901 . . .
OR