Dreamweaver Tutorial - Floating Div Tags in Dreamweaver cs4

[jamesetaylor89]

how do float a div tag over an image. I have an image as a background in a wrapper that I want to float some text over in a specific spot (bottom right)

[haccuk]

Great video as usual. As you are English and I am also, I am not sure that I like the american pronunciation of Advertisement!

[TEB368]

What's the difference between a div id="" and a div style=""? Would the div ID just tell you what the div is, where you would use the div style in the style sheet?

[DreamWeaverTutorial]

@TEB368 you would use a div with an id when you are using and external style sheet like I do for all of my tutorials and is the best way to go about it. A div with a style is when you want to add css styling directly into the html as an "inline" style. so in between the style="you would set your css styles;" Sometimes inline styles may be necessary when creating html newsletters or ebay listings. In general it is excellent practice to use an external style sheet for fast site loading.

[DreamWeaverTutorial]

@TEB368 if you give a div an id, then you can reference it in the style sheet so if the id is called : div id="teb" then you would create a style in the style sheet called #teb and then add styles that will only affect elements with the id of teb.

[XXHattoriHanzoXX]

Holy Shit, I don't need Paranormal Activity 3 ads popping up when im sitting in this Uni by myself at midnight...FUUUUUuuuuukkkk

[ssahraj1]

@Livefearless Have you ever had the feeling that you was being had Don’t that sh-t make you mad They treat you like a slave, with chains all on your soul, And put whips up on your back, They be lying through they teeth Hope you slip up off your path I don’t switch up I just laugh Put my kicks up on they desk Unaffected by they threats than get busy on they ass See that’s how that Chi-Town made me That’s how my daddy raised me That glittering may not be gold, don’t let no body play me..........

[Siteezy]

Great Video, Thanks for the help!

[ashisonline100]

i feel like a right div.

[manzoor1]

We don't care about that stupid jeep commercial!!!!

[playa4thee]

You The MAN!!! I had been searching, reading and looking for a way to do this & you showed me the way! Thanks 4 taking the time to do this! Awesome Video!

[irishfaithful1]

nointey noine cents at outback steakhouse. lol

[BikeMadBrit]

hi guys im really stuck on something

ive looked and played with dw all day and i just can do this and its just pissing me off big time

all i want to do it to be able to put pictures onto the design display where i want to put it without disturbing the other pictures next to it ie layers effect sort of thing.

some one please please please answer to this and just tell me how i can just drag the damn pic onto the location where i want it and no pissing about theman68@hotmail.co.uk thanks every1

[crhobbs42]

Holly crap man, you totally saved me in a crunch! Totally lovin on the div tags now!  Thanks a million!

[DreamWeaverTutorial]

@dinglenutzz im so gutted about that! ive been crying for the last 6 hours in depression. boo hoo ..

[sabre0]

What software package did you use to create this video? It looks really good and I need to do something similar.

S

[vaxter510]

It's a good tutorial but it seems a bit difficult to follow with the webpage you use as an example. A clean layout with solid color objects would help beginners understand better what's going on.

[scud69er]

I'm currently learning dreamweaver and this tutorial was great, cleared up a couple of problems I was having.

Thanks alot!

[mj5495]

Very nice vid...tnx for the info

sorry but what would have happended if you floated one on the right and other on the left? Why float them both on the left?

[monkeymack2]

Hi,

@DreamWeaverTutorial

Am new to div tags...

I have a relitavely normal sized computer screen and inserted a div tag with a margin from left of 250 on my screen.... When viewed on my brothers screen (27") it appeared way to the left. I understand why this happened I just need to know if there is any way of stopping it from going way out on bigger screens.

Thanks!

[DreamWeaverTutorial]

@monkeymack2 hi yes you can place all of your content into a containing div and set auto margins in the CSS. so for instance if you have a div called wrapper and all the content is inside this div you can set the CSS like this:

#wrapper { margin-left:auto; margin-right:auto;

}

- James

[monkeymack2]

@DreamWeaverTutorial

Brilliant, Thanks!!

[DreamWeaverTutorial]

@monkeymack2 that will center all of your content into the middle of any computer screen.

[MythOfEchelon]

@DreamWeaverTutorial Or you could use "margin: 0 auto", yes?

[DreamWeaverTutorial]

@MythOfEchelon absolutely.

[babylonkid]

yup. no clue what your doing. no explanation of any thing.

[toplinkseo]

thanx shawn... i m very new to dreamweaver and web development stuff,,and it took me a month finding out a right tutorial to get divs align side by side,,,thanx

[DreamWeaverTutorial]

@toplinkseo Glad you liked it but who is shawn? lol

[beatboxsimchayaffa]

wow :)

[lazarusjoseph14]

hi there first of all big thanks for your Tutorial i could able to create a website for an NGO only b'coz of your Tutos but unfortunately today i couldnt able to open your website in my browser can you fix if for me....

[coolkids374]

How did you make that website??????

[themonster36]

is there a way to do this withouy messin with the codes?

[TheKillerbeat]

thanks, Finally managed the layout my site correctly :)

[TheAddictedGame]

how did you add your own videos Eg not being from youtube?

[02javis]

Where can i find a tutorial, when the mouse hovers over an image and another larger image shows to the right or left of it?? (not a rollover)

I'll be checking your great tutorials, thanks.

[DreamWeaverTutorial]

@02javis you can do a disjointed rollover also known as a swap image. look in the behaviors panel under swap image behaviors.

[02javis]

@DreamWeaverTutorial

okthanks I will let u know..

[ages777]

@DreamWeaverTutorial I'm trying to center my div tags by setting the right and lift margins to auto which works fine. But when I try to add another div layer on it, it doesn't layer properly even with the right z-index number. The new layer just sits at the bottom of the previous layer.

It'll only layer properly (go on top) when I change the 'position' property to 'Absolute' which defeats the purpose of me trying to center my divs. What am I doing wrong?

[DreamWeaverTutorial]

@ages777 Im a bit confused. are you trying to put divs on top of divs? or inside of other divs? because if you want them on top of other divs they they would HAVE to be positioned absolute. you can ONLY use z-index with absolute divs and none other.

If you go to my websites contact page and paste in the html and css ill take a look.

[ages777]

@DreamWeaverTutorial I figured out the problem. The answer was nesting DIV's inside each other to create a 'centered layered effect'. My only problem now is how to adjust their 'margin-top' properties of the nested div. When I add a value to it (e.g 200px), it drags down the parent div along with it. How would I go about that?

Thanks for all your help. I've found your videos extrememely helpful in my endeavor to learn HTML

[02javis]

@DreamWeaverTutorial

I found it thanks!

[karmazon]

With that voice you should get into hypnotism.

[kirkivanbaesa]

what program did you use for the title( 0:00 ~ 0:30 ) and credits ( 9:36 ~ 9:59 ) animations?

[DreamWeaverTutorial]

@kirkivanbaesa I used after effects for that. takes me ages because im not very good at it.

[7thAttempt]

Hi, err I may be missing something but as far as I understand; if you had to explicitly set css float properties for each advert div tag then why would the css property ie the float attribute affect the rest of the page? And then so why would you need to use a clearing tag ? I just thought the float property would only affect the id it's assigned to ?

[DreamWeaverTutorial]

@7thAttempt because floating any element will take the element out of the document, its kind of like giving the div tag a hover board. so its floating in the air, then any div below it will slide up because it thinks the space is empty. that will keep happening to every element until you tell it to stop doing that. and the br class does that. put 3 divs in a wrapper div, float one right, one left and then try and position the 3rd underneath them. you wont be able to until you clear.

[lifeformlifeform]

Hi again,

Maybe you know this:

I am designing a 3 column design, where I want the content of col 1 to expand underneath col 2 (which contains a profile image + some text underneath). Col 3 shall stretch down all through the site.

Which width option would you use here? I have tried to set width:auto for col 1, but then it just block away col 2 and 3 horizontally.

Any idea on how to solve this?

[lifeformlifeform]

Hi again,

Maybe you know this:

I am designing a 3 column design, where I want the content of col 1 to expand underneath col 2 (which contains a profile image + some text underneath). Col 3 shall stretch down all through the site.

Which width option would you use here?

I have tried to set width:auto for col 1, but then it just blocks away col 2 and 3.

Any idea on how to solve this?

[lifeformlifeform]

Maybe you know this:

I want to design a 3 column design where the first colum to the right is supposed to stretch out its info over the second colum (which is lower / not so high).

Column 1 is a profile column with basic contact info and profile description, where as Col 2 is the profile image (to the right) and then the Col 3 that should stretch through the whole height.

Do you know how to code this? I have tried to set width: auto, but then it just stretches and pushes col 2 and 3 down.

[lifeformlifeform]

Brilliant! I am now a subscriber :) Have wondered how the float-attribute worked...

Do you have tutors on creating W3C-valid div designs also...? Need this for several new portals which are going to be designed in Joomla.

[DreamWeaverTutorial]

@lifeformlifeform Hi, thanks for your comments, yeah ill be making lots of tutorials over the coming months. Until then check out the website, theres plent of tuts on their and ill be making some by the end of the week :)

[lifeformlifeform]

Excellent! Very appreciated! ;-) Keep it up! :-) Much easier to see these videos than read tons of pages...

[cookingwithanarchy]

Very good. I subscribed. :) Thanks for the info!

[DreamWeaverTutorial]

@cookingwithanarchy you are welcome

[SouthernDrifters]

nice tutorial - short and to the point

[DreamWeaverTutorial]

@SouthernDrifters thankyou

[WWtuts]

You should do a request for partnership!

[falkon14]

he seems good, your only lost if your not on this level yet, iam clearly not on this level yet lol, nice one tho

[DreamWeaverTutorial]

@falkon14 lol, im making another tutorial on floating this week end and should explain it a bit better for beginners. I hope..

[jaimito4285]

Very clear and useful. Well done.

[DreamWeaverTutorial]

@jaimito4285 thanks for the comments.

[Remiss63]

Excellent presentation and explanation.

[DreamWeaverTutorial]

@Remiss63 thanks, I try!

[denno021]

Very good tute. I'll be subscribing for sure, great work.

[ainsleymg]

how many times does he want to say "DIV TAGS" but nice tut thanks

[DreamWeaverTutorial]

@ainsleymg DIV TAGS! lol its a tutorial about floating div tags. I cannot avoid saying it.

[jhood7891]

wow im lost

[6broken6heart6]

well..this to my knowledge from just looking at this, is for individuals who have knowledge in HTML CODES...so ya, I only know basic so this is too much for me. You can just do all this without doing html, its your choice. but knowing html would be better, a bit harder but better in the long run although you can do the samething without knowing html.

[playa4thee]

@jhood7891 Just watch it, re-watch it & then watch it again as you play with Dreamweaver & you will get it! Good luck!

[MrFunkinPure]

That tip about zeroing the margin values set me on a path to fixing something that's been bugging me for months.

Many thanks.

[tisneyanders]

Thanks, learning something

[jester95020]

pos, ta bueno...

[Peter071000]

hello!! Excusame!! Tutorial in Spanish please!!

[welshdragon2008]

bollox!

[Eleyo9]

NICE TUT MAN 10/10

[art4thesoul]

wow! The best tutorial I've seen so far on divs. Great job, thank you!

[Javen24]

thanks. very informative.