XHTML and CSS Tutorial - 36 - Absolute Positioning Video Lecture | Learn Website Designing with XHTML and CSS - Software Development

what is going on guys it's Bucky and
welcome to your 36th XHTML and CSS
tutorial and in this tutorial I'm going
to be talking to you guys about
something called positioning so before
whenever we are making websites and we
added like an image and then a header
and then a paragraph and then you know
maybe some links or something everything
kind of appeared after one another kind
of flowed together in a nice in the
order I mean your image new
automatically not to appear on top of
your text to cover it up and whenever
you made a paragraph it didn't just put
them in a random location it put it
under whatever was there before like
under your header or under your image so
everything kind of flowed automatically
but while this is good if you're going
for that you know kind of boring
organized look it didn't give you a
whole lot of control over the layout and
look of your website so in this is our
oh I'm going to teach you guys how to
change all that using something called
absolute positioning now let's go ahead
and look at an example right now so I'm
going to make two divs or aka two boxes
on the screen and I'm going to show you
guys how to move them around exactly
where you want so let's go ahead and
make a div with ID of I don't know
apples and just go ahead and end that
div let's add some text in that I am the
Apple box isn't there cereal like Apple
Jacks that's what I was thinking of so
let's go ahead and copy this and add
another div with ID blueberry and just
put like
Yolo so Lyon blueberry this can be a
Mexican blueberry box
so anyways go ahead and save this and
see what we have on our screen so far we
have I am the Apple box and yo soy
blueberry the blueberry box so in order
to you know visualize these a little
better let's go ahead up in CSS and give
them a border you know actually
so they actually look like boxes so go
ahead and in your apples let's add some
rules to it border equals two pics solid
red because apples are red they might
make it easier to tell and let's see in
order to apply that absolute positioning
here's what you need to do type in the
attribute position and for the value
type absolute and now well uh it's
better if I just show you what absolute
positioning is so anyways just leave it
like this my newest since these are
boxes we need to give them a couple
things first of all a width in the
height so CSS knows how wide and how
tall to draw that border and also a top
in the left or pretty much coordinate so
it knows where on the screen to draw the
border so with equals I don't know let's
say 150 pixels and height equals hundred
seventy five pixels that'll be good for
this resolution so now we need to say
where on the screen do you want to draw
this box well 30 pixels down from the
top is good and let's say right in other
words 15 pixels from the left so now
let's go ahead and save this and see
what we got we got a red box to pixel
solid red it's absolute in the width is
150 by 175 and it's 30 pixels down from
the top and 15 pixels from the right so
now you're saying this is pretty cool
because now I can have my elements and
boxes and I can move them anywhere I
want around the screen so for example
your boss comes in he's like Bucky and
make this a hundred more pixels to the
right and I mark in some more pixels
down sort of saying alright now I can
add 100 pixels of that
and instead of 30 put it like 40 and
save it in BAM check it out move it over
some and move it down some pretty cool
but now we're going to run into a
problem and that's this it's not so much
a problem as something that you just
need to look out for go ahead and copy
this and let's see if this works go
ahead and now let's make a box for
blueberry and let's first of all make
that border blue so we can see what
we're doing and make the width mm I mean
those look pretty good so change this to
30 and you know 15 whoa easy Hoss so now
in our blueberry box we have a blue
border the position is absolute still
the width and height they're the same
but it's just at different coordinates
so now whenever we save this and refresh
this we see that something weird happens
that didn't happen before with absolute
positioning absolute positioning
basically says our a I'm going to give
you complete control over where to place
your elements but I don't care if any
other element is in my way I don't care
if any other boxes in my way if it is
I'm just going to overlap it F it I only
care about myself so while this is an
excellent way to position elements on
the screen exactly where you want them
you need to look out for a couple things
first of all before whenever we just
made dumb old web sites everything was
positioned nice and neatly now we run
into the problem of things might having
to bump into each other or overlapping
so whenever you're making your websites
you have to make sure don't overlap your
stuff or it's going to be hard to read I
mean look it this is a you know this
would be pretty hard to read if we had
two paragraphs in here and you overlap
them and try to read them together
so anyways whenever you're making a
website you have to watch out not to
overlap your stuff right now because
even though we have control over exactly
where things go we have to watch out not
to make them bump into each other so
anyways it doesn't flow like other XHTML
would just by default
and anyways you guys can see what's
going on so this is basically absolute
positioning the idea that you can take
an element and put it absolutely in a
location no matter what else is in the
way so saying all right this is pretty
cool I'm just going to take all my
elements and arrange them make sure they
don't overlap and I'm just going to make
a website like that well before you're
just going and before you just go and
make an entire website out of absolute
positioning there are two other forms of
positioning I want to teach you guys
about and when you use them together
it's going to give you a whole lot more
control and it's going to make your
website so much better so before you
just go make a website with tons of
boxes like this all over stick with me
for the next couple of tutorials I'm
going to be teaching you about some
different types of positioning and trust
me you will thank me by the end of these
tutorials so anyways thank you guys for
watching hopefully you guys understand
the concept of absolute positioning and
if you don't then just stick with me in
these next couple stories you will so
thank you guys for watching don't forget
subscribe and I'll see you guys later