CSS Layout Tutorial - 07 - Image sidebar Video Lecture | Learn CSS: A Comprehensive Tutorial for Web Developers - Front-End Programming

welcome to the seventh video on CSS
layouts in this video we're going to add
another sidebar
but this time we're going to use an
image and that image will cover the
entire area of the sidebar now I got an
image of a flower off of Wikimedia
Commons and I will paste the link into
the message board of this video where
you can get that image if you want to
follow along but you can use any image
you want now if we open this up in
Microsoft Paint you can see here I added
some text down here and we're going to
put in sort of a fake advertisement for
buying flowers and if you want to add
this text you just hit the text button
here and then you can go ahead and draw
a rectangle and you can type in your
text there if you want to do that
okay so let's close out of this now the
first thing we need to do of course is
create some HTML so let's go ahead and
do that and as we know now we have to
put that after our second sidebar but
before our main content panel so let's
go ahead and do that I already typed it
out so I'll copy and paste it into here
and actually let's rename this class and
we'll call this image sidebar a very
relevant name now of course we're going
to use divs again you'll notice that
we're going to put the class this time
inside the IMG tag not with the div now
we'll put a class here layer but for now
we're going to create a class for the
IMG HTML tag now the key here is we want
the same attributes as our sidebar so we
want to be the same width have the same
margin so we can use some of this code
over again so let's just go ahead and
copy and paste this and we're going to
of course call this image sidebar now we
do not want a background color because
we want the image to take up all the
space so we don't need that so we can
get rid of that we don't need to worry
about the font size we can get rid of
that and we don't want any padding
because if we put padding in that will
reduce the size of the image we want
that to expand completely out but we
still need to count the padding because
we want it to equal our other sidebars
so this is 40 pixels so we need to add
that
to the width because that gets counted
so we'll make this 300 pixels and now we
can get rid of the padding we're
obviously going to continue floating
this right and we will continue to use a
border radius and we will use the same
margins and we will also use the clear
right parameter so let's go ahead and
save everything up and let's see what we
get
oh but before we do that make sure that
you put the image inside the website
folder whatever image you decide to go
with and of course make sure the name of
that image matches what we have here the
source parameter and then everything
should be just fine okay so let's go
ahead and open up our web page and there
you can see we've got our nice image now
it expands all the way out in terms of
the surface area of the element and
we've got our nice advertisement here
and that looks pretty good
now in the next video we're going to
actually add some effects to this
sidebar see you guys then