Dreamweaver CS4 Tutorial - 13 - CSS for Positioning Video Lecture | How to create Responsive Websites with DreamWeaver - IT & Software

hi in this tutorial we are going to be
going over positioning and CSS this is
the fourth tutorial of CSS and how it
can affect affect text for this example
we are going to be working in the p3
text paragraph which is the last
paragraph I'm going to go inside here
I'm going to get rid of these borders so
I'm just going to go scroll up here and
everywhere it says border I'm just going
to simply delete that that way you can
see that it gets rid of the border but
double-click on p3 text and the CSS
Styles panel I'm going to go here and
click on positioning inside here we can
control specifically the width and the
height of our individual paragraph so
we're going to change this to 400 pixels
by 200 pixels click apply say ok and as
you can see it definitely shrunk it a
little bit so I'm going to preview this
in the browser and you can see that it
moved it over to be exactly 400 pixels
let's go back here go back inside of our
positioning and let's change this to
something smaller so then that it's
almost too small but that all that text
isn't going to fit in there so you can
see save that and go back to the browser
and reload
I'll forget to do one thing after we do
that we also need to say overflow it's
going to be scroll there we go and so
let's let's save this reload it and you
can see that it's so small that all that
text is going to fit in there so we
added a scroll property that allows us
to scroll up and down so we can see the
rest of that text let's go back here
let's get rid of that scroll property
let's just say it's visible and the
overflow is exactly what it sounds like
it's the overflow of the text or
whatever else is inside there we also
have these absolute fixed relative and
static positions for this tutorial we're
going to use fixed say apply and we're
going to say the top is going to be one
pixel which is basically saying it's one
pixel from the top I know this looks
looks pretty jumbled here but what's
actually going on is since we change the
positioning to fix it is moving it one
pixel from the top of the document let's
go in here and let's go to the second p
to text so the B to text class and go to
positioning and let's set the visibility
to hidden what that's going to do is get
rid not get rid but hide the second
paragraph so we'll be able to see that
third paragraph C so
you can also do this we can go to the P
to text and go to our positioning and
also set it to fixed and set the left to
let's say four hundred and ten pixels
and what is going to do it's going to
move it over starting at the beginning
of the document all the way to the left
is going to take 410 pixels and move it
over so basically what I did was get it
gave the P to text paragraph a left
padding of 410 pixels let's save that
preview in the browser again oh we
forgot to change the visibility let's go
back here to positioning and change the
visibility to blink all right let's save
that and reload now it's perfect so in
this tutorial we take this a small
glimpse at positioning and what can be
done in positioning in the next tutorial
will be our last CSS tutorial and we
will be talking about a few more things
that are interesting with CSS thanks for
watching and don't forget to subscribe