PDA

View Full Version : Dreamweaver Layer (DIVS) Move When Viewed In Browser


McCreadieDesign
02-08-2011, 09:53 PM
Hey, My first post!

Really stumped me for about a week now, being a newbie on dreamweaver im completly lost. Basically im using dreamweaver 8, and using layers to move images and button & text around ect (If this is not the way to do things please tell me) I set the layers and the buttons move!! Theres only one button that is in a layer that moves, enough explaining heres the website: http://deejayplay.net/ If you have a 1600 x 900 res it will look fine, but if not you'll see what i mean. I have heard about absaloute, relitive and so on and have tried them all, some of them dont even let me move them around.

Hope you understand and i look forward to being part of the dreamweaver club community :)

George

edbr
02-09-2011, 12:56 AM
you need to re design the layout structure.
use relative positioned divs for layout, if you use absolute positioning , use withing a 'parent relative div. This will then use the parent as its reference point, buut be careful with them.
Dont use framesets for a number of reasons including site discovery by search engines.
its a straignt forward layout , spend a little time researching the positioning, even a search of this forum may be enough

Corrosive
02-09-2011, 07:09 AM
Hi George and welcome to the forum.

If this is not the way to do things please tell me

That's not the way to do it I'm afraid.

I have heard about absolute, relative and so on and have tried them all, some of them dont even let me move them around.



Unfortunately 'the ones that don't let you move them around' are the ones you should be using, relative. It's all about screenflow and how divs react to each other to achieve a stable layout. You need to forget about the idea of 'drawing' or 'dragging' your design into place in design view and learn a bit more about coding and positioning divs using floats and clears.

We are here to help you get through it though :) Ask as many questions as you need to.

McCreadieDesign
02-09-2011, 08:41 PM
Thank you for your replies, corrosive you said its not the way to do it, how do i do it. Also what do i need to learn.
By the way im actually 15, and i want to become a website designer, i have designed many for freinds and family and they have actually payed for them :) The websites i have designed have been in wysiwyg editors. But planning my career i oviously need to use dreamweaver. Trying to use dreamweaver as a visual editor has not worked. I realised i needed to start early. I plan to get some good old fashioned books, can you reccomend any? Also what would i need to learn for now? HTML, CSS, PHP ect?

Thank You

gentleone
02-09-2011, 10:16 PM
I realised i needed to start early.
You're 15, so you've got still plenty of time to become a kick-ass web designer ;)

If you designed with WYSIWYG editors before then there will be a learning curve but if you really eager to learn it the right way you can be in 2 years times miles ahead from where you're now.

To start with is the basics of HTML & CSS. You need to understand basic things like the CSS box modal and the normal document flow. This article is a good start for you.
http://articles.sitepoint.com/article/html-css-beginners-guide

W3Schools has also great tutorials for beginners to advanced.
http://www.w3schools.com/

And not to forget DC here... we can guide you into the right direction and help you if you get stuck somewhere.

domedia
02-09-2011, 10:20 PM
But planning my career i oviously need to use dreamweaver.
No, no, no :) It's what we use, but it's in now way required to do professional web development. The only requirement is that you know your web languages and how to best plan a website. Dreamweaver then becomes either an IDE or a really advanced code editor.
I plan to get some good old fashioned books, can you reccomend any? Also what would i need to learn for now? HTML, CSS, PHP ect?

Maybe first just learn HTML/CSS, because that is the basic thing a page needs.
Then maybe a JS framwork like jQuery, so you can make your beautiful page do some really cool stuff.

And Last PHP so your beautiful, cool website now can become an online application where people can sign up and ... the rest is up to you 8)

edbr
02-10-2011, 01:19 AM
absolutely. i always defend dreamweaver as a very good entry levelprogram , it is partially at ;east what it is designed for. but that can create problems if yoy do not move on and learn the how and why.
there are also many free ide's with wysiwg , and dual screens (design/code) that will help you if you are on a budget, htmlkit,codelobster selina2 to name a couple. perhaps none have the range of goodies that dw has but if you are serious about the future there may be an argument for this route rather than dw.

Corrosive
02-10-2011, 07:20 AM
Yeah, what they all said ;)

edbr
02-10-2011, 08:38 AM
Yeah, what they all said
not about alternate to dw, but if its a crack about overposting a thread thats been answered i feel there are more guilty candidates than me

Corrosive
02-10-2011, 09:15 AM
not about alternate to dw, but if its a crack about overposting a thread thats been answered i feel there are more guilty candidates than me

No, nothing like that. The questions was asked to me and you all helpfully answered it so I didn't have to. It was just a 'thank you'.

McCreadieDesign
02-10-2011, 11:44 AM
Thank You so much everyone, your all really helpful.
As i said before im really eager to become a website designer.
I have designed a few sites,
http://www.gardencam.net - was one of my first when i was about 14.
http://www.mccreadiedesign.com - which is my site which i still need to finish, started a couple of months ago.

Just out of intrest, if i were to just learn the coding, could you get away with not knowing dreamweaver or is it a must in the designing business? I was told that a designer is a Designer, and not a coder?

Thanks Very Much, i might pop into town later and have a look at some tutorial books.

George

Corrosive
02-10-2011, 11:52 AM
No, I wouldn't say that Dreamweaver is essential. If you know how to handcode you can use Dreamweaver how I use it, as a beefed up code editor.

Don't be put off by people who say 'designers should design and not code' because knowing how a website goes together is essential for designing them in my opinion.

Case in point we are having a difficult time at the moment with a client who had an old uni friend design their pages. This guy is a fantastic graphics guy but has never built a website before. Let's just say, as a website his design will make a fantastic printed brochure ;)

domedia
02-10-2011, 01:43 PM
Don't be put off by people who say 'designers should design and not code' because knowing how a website goes together is essential for designing them in my opinion. In my experience, most professionals will agree with this statement.

gentleone
02-10-2011, 03:12 PM
Don't be put off by people who say 'designers should design and not code' because knowing how a website goes together is essential for designing them in my opinion.
I second that!

johnMoss
02-11-2011, 10:40 PM
McCreadie at 15 you're obviously on a budget but do be advised you will find first class professional instruction courses on this site. And to answer your question here are two starting resources:

"Dreamweaver: The missing manual" book series
"Head First: HTML & CSS"

McCreadieDesign
02-13-2011, 05:41 PM
Thank You for all your reply's.
I really wan't to learn dreamweaver but it seems daunting.
I usually learn software as i go along, without reading or even learning.
I understand that i do need to learn HTML & the rest but could we go
back to the original question, its been killing me for weeks! I even tried in the WYSIWYG editor i use and it jumps. What coding do you use to keep it where you put it, also i have heard of "Content Place Holder", what does this mean.

When you learn the languages, how long did it take, and do you remember it?
I know im young (sorta) but im thinking im gonna learn it and forget it.
I can get really frustrated with this sort of thing :)

Cheers EveryOne

johnMoss
02-13-2011, 06:25 PM
Well tell you what, why don't you post the HTML code you have created so we can see it. And if you're familiar with css and used it in your design, include that also. We need to see what's happening...

McCreadieDesign
02-13-2011, 09:35 PM
The website is deejayplay.net, its a simple website i created in photoshop and exported as html, messed about with it how i wanted it and the layers (as dw8 calls them) move.

The web address is masked so view the masked source :)
Thank You Again, i think i need to learn codes

McCreadieDesign
02-13-2011, 09:39 PM
I second that!
Your website, you used just dreamweaver?
I want to create somthing like that one day.
What did you have to learn, and what did you use
sorry for the questions

gentleone
02-13-2011, 11:55 PM
Your website, you used just dreamweaver?
I use Dreamweaver but I work in code view, so I could have made my site also in Notepad or any other text editor. If I view my site in design view it falls apart so its 'What You See Is What You Not Get' in this case. Pretty much all the sites I develop fall apart in design view.

I like Dreamweaver for several reasons, but the overall thing is that it makes my life easier as a coder. The site manager, the code hints and the ability to store code snippets for reuse for instance are inevitable to my work flow.
What did you have to learn, and what did you use
To start with I learned HTML & CSS. Like we already mentioned... this is where it all starts. Later you can decide to learn some more and dive into PHP or JavaScript.

Anyways... if you want to build some day something like this, you'll have to step one day out of your WYSIWYG cage, because it will only limited the possibilities that you would not have if you hand-code websites.

I would suggest to read that 'HTML & CSS for beginners' tutorial, because it would be really a good one for you.

Oh... and never ever use Photoshop to export your design to HTML & CSS.... bad practice, bad code. Read up on some tutorials how to convert PSD to HTML & CSS the right way.
http://designbeep.com/2010/02/18/38-great-tutorials-to-convert-psd-to-htmlcss/

Corrosive
02-14-2011, 07:20 AM
Your website, you used just dreamweaver?
I want to create somthing like that one day.
What did you have to learn, and what did you use
sorry for the questions

It's an amazing site huh? I think it is one of the best I've seen :)

Here's the way I'd approach it if I were you. You are not learning software (Dreamweaver, Photoshop, Notepad ++), you are learning to design and build websites. That's your goal so that is what you concentrate on. The tools you use to get there are inconsequential because, once you know how a website goes together, you'll pretty much be able to use anything you like to build one.

It's like the difference between saying 'I'm going to learn how to use the plane and the lathe' when you actually mean you are going to learn carpentry. :)

gentleone
02-14-2011, 12:01 PM
It's an amazing site huh? I think it is one of the best I've seen
Thanks mate! I feel flattered, but I believe you exaggerate here ;) Pick one CSS gallery and miy site will disappear within in seconds out of your 'one of the best I've seen' memory. :)

Corrosive
02-14-2011, 12:12 PM
Thanks mate! I feel flattered, but I believe you exaggerate here ;) Pick one CSS gallery and miy site will disappear within in seconds out of your 'one of the best I've seen' memory. :)

CSS galleries are all well and good but the way your site works/flows/navigates, whatever you want to call it, is inspired. Everything about it feels right and you should take more credit for what you have achieved.

Just my opinion anyway :)

gentleone
02-14-2011, 12:38 PM
CSS galleries are all well and good but the way your site works/flows/navigates, whatever you want to call it, is inspired. Everything about it feels right and you should take more credit for what you have achieved.

Just my opinion anyway :)

*blush* Thanks, buddy!