CSS Layout Tutorial - 18 - The Fixed Layout Part 3 Video Lecture | Learn CSS: A Comprehensive Tutorial for Web Developers - Front-End Programming

in this video we're going to continue on
with our fixed layout and let's take a
look at our webpage for a moment here
and what we want to do is add a mini
content panel in here to our main
content panel so it will look like a
tile and people are doing that today
adding a lot of tiles and their content
panels and then people can drill down
into those actually the drill down
actually involves master and content
pages and we'll get to that in a few
videos but before we get to that topic
we need to actually set up a mini
content panel so we're going to do that
in this video now the first thing we
want to do since this mini content panel
is going to be within our main content
panel we want to nest that div inside
our main content dip so we're going to
create another div and I've already
typed it out so we'll just copy and
paste it and we'll put it right here and
there you can see now we've got our box
inside our main content panel so again
this will be our mini content panel
right here now let's go ahead and put
some content in here so we'll just put a
paragraph in here with some text and
again I've already typed this out so
I'll just copy and paste it into here
and so here's the paragraph which reads
in this series we are going to cover
ancient Rome
so this mini content panel will be a
Content panel about Rome and so there
you see we've got our paragraph element
with some content inside of our new mini
content panel so now let's go ahead and
add some CSS so we can go ahead and
style this new mini content panel and
we'll use the same formula will put our
nice comment section here that says this
is a box actually let's actually call
this mini content panel because that's
what this is and then we'll add our CSS
in here so I'm going to go ahead and
paste all the properties in here then
I'll explain each one of them because
I've already typed all these out so
we're going to have the background color
set to a dark gray and so there's the
hex code we're going to use a two pixel
wide border and so that's why I've got
right here we're actually going to put a
little border radius in there to curve
the edges the font size we want a little
bit smaller than the rest of the webpage
so we're going to keep that at 95% um
we're going to add ten pixels of padding
remember that padding goes around our
text so we don't want that right near
the edges and we've talked about that in
many of the other CSS tutorials so we'll
put
patting around our text we're going to
add a margin of 20 pixels and you'll
remember that will push our div away
from the edge of this div so we don't
want these right next to each other so
that's what the margin will do we're
going to have a width of 280 pixels now
you can resize this if you're going to
use this for your own website you can
resize this as you need be maybe you
want this a little bit smaller but we're
going to use 280 pixels for this
tutorial and the color of the text will
be white so let's go ahead and save this
and let's see what we get now good
that's a good start we've got our mini
panel now we've got our text we got the
padding to push away the text from the
edge and we've got some nice margin here
that pushes it away from the main
content panels edge so that's looking
pretty good but we want to do a little
bit more here we want to make this look
a little bit more dynamic so let's add
an image into here and then we'll make a
link out of that image so that we can
drill down into another web page which
as I said we'll be doing later on when
we do master and content pages so let's
go ahead and add an image now we're
going to go right back into our box div
and I've got this all typed out so I'll
just go ahead and copy and paste it in
here and we're going to create another
paragraph that will actually hold our
image here's the other paragraph so this
will be our actually our first paragraph
and we're going to create a class this
time because we may want to use this for
other images if we create other mini
content panels we may want to actually
reuse this class so again it'll be a
class called test and we'll get to that
in a minute now we're going to create a
link and you'll remember from previous
videos we always use the anchor tag now
target we can keep blank now href
remember that's what we're going to link
to is called Rome dot HTM now here's
where our content page will be now this
is just a placeholder right now this
will be the name of it when we get to
the master and content pages but this is
going to be called Rome dot HTM so
that's what we're actually going to go
ahead and link to but we obviously we're
not going to create that in this video
and here is our image Rome dot PNG now
I've already put that in the folder now
if you want this actual image if you go
out to let me close this for a second I
want to open this up with paint but if
you go out to Google and you type in
ancient Rome you'll see this down I
think halfway down or something so you
can use this image now
depending on the size of your content
panel you may need to reduce the size of
it I actually reduced it I think like
about 50% or I think of 75% to make the
image smaller now the reason we want to
do this in paint is because you want to
do all your image reduction in Microsoft
Paint or in Photoshop you don't want to
use CSS to reduce the image because the
images original size will be sent to the
browser and then the CSS will reduce it
but that's a lot of overhead you don't
want that type of overhead so always
reduce the images before they get sent
to the clients browser so again I called
it Rome and so we're all set to go and
so now let's go ahead and actually take
a look and see what we got and there you
can see this looking better we've got a
little hand here so when we add our
content page we can drill down into it
and we've got our text so it's all
looking pretty good but we want to
Center this image don't we we don't want
this to be hanging on the left here so
let's go ahead and add some more rules
and we're just going to add it to our
class that we already created here test
and so we can add some properties or
rules here that will Center our image
and so we'll go ahead and put it over
here in our CSS and as usual I already
got typed down so I'll just copy and
paste it over here and you know what we
don't need to create a comment section
for that we'll just we'll put it in here
notice we're using the dot because it's
a class and as I said we may reuse this
to Center other images and other content
panels so it makes sense not to make
this a unique identifier you know what
we might have wanted to make this a
class but we'll leave this as a unique
identifier for now so what we're going
to do is we're going to kind of vert
this to a block remember we need to
convert this from inline because
remember that's the default for an image
and we want to convert this to a block
and then we just use the text align
property to Center it and we'll open
this up and here you go whoa it didn't
Center it what did we do wrong oh boy
okay let's close this out and I always
hate that when it doesn't work but we
can figure out what we've done wrong
let's always look at the CSS first and
it looks good from this point of view I
don't see any problems and then take a
look at the HTML
and I spotted the problem you guys see
it I don't know if you see it there's an
extra closing tag here which we don't
need so we have an extra closing tag
when we didn't need it so let's go ahead
and get rid of that it's always
something right all right let's go ahead
and see if it works now yes it does and
so that looks really good we've got our
image now people will read this little
tidbit here to know that this is a drill
down or even saying please click on the
image above will click on that so I will
see you guys in the next video