WEBVTT 00:00:06.630 --> 00:00:10.240 All right now let's dial our right hand side list. 00:00:10.290 --> 00:00:10.860 OK. 00:00:10.950 --> 00:00:16.740 So first of all like we did for the lesson site lists legist and some putting at the top of the NRA 00:00:16.740 --> 00:00:18.420 list. 00:00:18.480 --> 00:00:22.950 So rather than styling the left side bar on the right side and played by the same styling we just going 00:00:22.950 --> 00:00:25.660 to use the class sidebar. 00:00:26.050 --> 00:00:26.810 OK. 00:00:26.840 --> 00:00:32.290 And now both our list they have some padding at the top and they are on the same level now. 00:00:32.650 --> 00:00:34.090 OK. 00:00:34.140 --> 00:00:38.700 So we're going to need a picture this style our list. 00:00:38.790 --> 00:00:41.170 So let's go to our logo maker Web site. 00:00:41.450 --> 00:00:44.720 Let's delete this one for now by clicking on deletes. 00:00:45.000 --> 00:00:49.650 And we're going to look for a tick. 00:00:52.080 --> 00:01:00.910 And let's pick up one of these. 00:01:05.520 --> 00:01:07.630 Let's pick up one. 00:01:08.130 --> 00:01:14.930 OK and let's change the color to this same green. 00:01:14.970 --> 00:01:18.600 We're going to pick this color using the colors. 00:01:20.260 --> 00:01:21.020 OK. 00:01:21.060 --> 00:01:23.800 And these places the 00:01:26.600 --> 00:01:27.470 under. 00:01:27.560 --> 00:01:28.390 OK. 00:01:29.570 --> 00:01:31.740 Let's save this picture. 00:01:32.180 --> 00:01:32.840 OK. 00:01:32.880 --> 00:01:40.020 Again don't forget to copy this information and place it somewhere on your website. 00:01:40.080 --> 00:01:41.330 OK. 00:01:41.340 --> 00:01:43.430 All right. 00:01:43.440 --> 00:01:46.080 So I've got the picture on my desktop. 00:01:46.080 --> 00:01:50.600 I'm going to change the title to tick gate. 00:01:50.880 --> 00:01:54.000 And then I'm going to move it to my images folder. 00:01:54.030 --> 00:01:54.620 OK. 00:01:54.750 --> 00:01:58.530 And now to style the list. 00:01:58.530 --> 00:01:58.980 OK. 00:01:59.150 --> 00:02:04.260 You can either use the lifestyle image like we did for the left side but. 00:02:04.350 --> 00:02:05.030 OK. 00:02:05.070 --> 00:02:10.740 Otherwise there is another property we can use. 00:02:10.770 --> 00:02:15.790 So let's first access our list items. 00:02:17.120 --> 00:02:30.570 So going to go to the right side bar wanting to be accessing the you will and then the airlines and 00:02:30.570 --> 00:02:43.170 then first of all let's add some padding bottom like we did for the other list. 00:02:43.790 --> 00:02:44.370 Let's go. 00:02:44.450 --> 00:02:44.850 Or 00:02:47.500 --> 00:02:51.760 it's pixels as well. 00:02:51.840 --> 00:02:54.250 OK. 00:02:56.020 --> 00:03:01.650 And now let's add our images. 00:03:01.860 --> 00:03:04.130 This time we're going to use the background property. 00:03:04.770 --> 00:03:06.060 OK. 00:03:06.060 --> 00:03:15.490 And then we're going to say that so URL followed by the location of the image that we want to use that 00:03:15.640 --> 00:03:16.980 is going to be this one. 00:03:17.120 --> 00:03:23.030 Take those Bangi and we can see as we see many pictures there. 00:03:23.190 --> 00:03:28.710 So to avoid that we're going to go for no repeats. 00:03:29.860 --> 00:03:31.130 OK. 00:03:31.160 --> 00:03:35.480 Now you can only can see only one picture for each list item. 00:03:35.640 --> 00:03:40.000 And we are going to places are essentially on the left. 00:03:40.590 --> 00:03:41.890 OK. 00:03:41.970 --> 00:03:46.620 And also we are going to places in the center vertically. 00:03:46.980 --> 00:03:49.650 OK so at the moment it's still big. 00:03:50.310 --> 00:03:53.730 And also it's going inside the text. 00:03:53.820 --> 00:03:59.760 So to avoid this we are going to see some fighting left. 00:04:01.330 --> 00:04:13.200 OK let's go for those pixels or 60 and 70. 00:04:13.200 --> 00:04:14.120 OK. 00:04:14.170 --> 00:04:17.690 Also we are going to change the size of the picture. 00:04:17.850 --> 00:04:18.470 OK. 00:04:18.720 --> 00:04:21.040 So let's go inside the Explorer 00:04:25.090 --> 00:04:32.120 OK and is open using panes. 00:04:32.220 --> 00:04:34.080 Let's resize our picture 00:04:37.090 --> 00:04:42.510 so I'm going to go for something like 40 pixels with that line. 00:04:42.900 --> 00:04:52.760 Let's save the closes on if we refresh our page. 00:04:52.860 --> 00:04:54.600 No the image is smaller. 00:04:54.810 --> 00:04:57.980 OK. 00:04:57.990 --> 00:04:58.350 All right. 00:04:58.410 --> 00:05:03.940 Let's add some more padding to our list items. 00:05:03.960 --> 00:05:14.190 So the putting bottom we're going to give it 20 pixels for example. 00:05:14.220 --> 00:05:15.670 That looks better. 00:05:16.410 --> 00:05:21.130 And just make our text aligned vertically with the picture. 00:05:21.210 --> 00:05:25.330 We're going to add some putting up equal to the padding bottom. 00:05:25.470 --> 00:05:25.910 OK. 00:05:26.010 --> 00:05:34.590 So if you do something like this putting up 20 pixels you can see that. 00:05:34.590 --> 00:05:38.860 Now the text is censored with the picture. 00:05:38.970 --> 00:05:39.740 OK. 00:05:39.750 --> 00:05:47.790 So rather than writing all these putting properties you can just write one simple padding. 00:05:47.830 --> 00:05:49.030 Property. 00:05:49.760 --> 00:05:50.700 OK. 00:05:50.750 --> 00:05:54.800 We're going to start with the top side. 00:05:54.810 --> 00:05:55.030 OK. 00:05:55.040 --> 00:05:57.520 We're going to have four values because one is the topside. 00:05:57.570 --> 00:05:59.860 So it's going to be 20 pixels. 00:05:59.880 --> 00:06:11.210 And then the right side zero and then bottom is going to be 20 and the left one is 70 pixels. 00:06:11.610 --> 00:06:15.040 We can get rid of all these ones. 00:06:16.630 --> 00:06:17.690 OK. 00:06:18.640 --> 00:06:19.050 So 00:06:23.830 --> 00:06:26.880 OK probably 20 pixels 00:06:32.470 --> 00:06:36.200 . 00:06:36.210 --> 00:06:39.980 OK. 00:06:39.990 --> 00:06:41.260 It's making a little bit more. 00:06:41.280 --> 00:06:46.480 So it's go for 17. 00:06:46.950 --> 00:06:48.360 It's top concerns. 00:06:48.420 --> 00:06:48.840 The bottom 00:07:00.230 --> 00:07:01.550 that looks fine. 00:07:01.600 --> 00:07:03.360 And again I do the same thing for the other list. 00:07:03.390 --> 00:07:04.110 OK. 00:07:04.110 --> 00:07:07.290 So we're going to add some top padding as well 00:07:25.940 --> 00:07:33.860 as six pixels the top and then zero for the right six or the bottom. 00:07:34.380 --> 00:07:38.970 And then 10 for. 00:07:40.920 --> 00:07:45.520 And then extend that as well. 00:07:45.650 --> 00:07:45.840 It's 00:07:56.160 --> 00:08:03.360 this reduce the putting a little bit here because we're going out of the border of the side bar. 00:08:03.740 --> 00:08:07.510 OK so rather than six you can go for example 00:08:12.160 --> 00:08:14.460 and then expect 00:08:16.450 --> 00:08:23.840 .